feat(website): make recent sequences banner specific per organism (#1751

) * recentse_banner_per_org * Update RecentSequencesBanner.tsx * Update ReviewPage.tsx * u * Automated code formatting * Update SearchFullUI.tsx * Update RecentSequencesBanner.tsx * Automated code formatting * Update SearchFullUI.tsx * Automated code formatting --------- Co-authored-by: Loculus bot <[email protected]> Co-authored-by: Chaoran Chen <[email protected]>
loculus-project · May 5, 2024 · f256e52 · f256e52
1 parent c2472bb
commit f256e52
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/website/src/components/ReviewPage/ReviewPage.tsx b/website/src/components/ReviewPage/ReviewPage.tsx
@@ -20,7 +20,7 @@ import {
 } from '../../types/backend.ts';
 import { type ClientConfig } from '../../types/runtimeConfig.ts';
 import { displayConfirmationDialog } from '../ConfirmationDialog.tsx';
-import { LAST_APPROVAL_TIME_LOCAL_STORAGE_KEY } from '../SearchPage/RecentSequencesBanner.tsx';
+import { getLastApprovalTimeKey } from '../SearchPage/RecentSequencesBanner.tsx';
 import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback.tsx';
 import { withQueryProvider } from '../common/withQueryProvider.tsx';
 import BiTrash from '~icons/bi/trash';
@@ -284,7 +284,7 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
                                     scope: approveAllDataScope.value,
                                 });
 
-                                storeLastApprovalTime();
+                                storeLastApprovalTime(organism);
                             },
                         })
                     }
@@ -310,7 +310,7 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
                                     groupIdsFilter: [group.groupId],
                                     scope: approveAllDataScope.value,
                                 });
-                                storeLastApprovalTime();
+                                storeLastApprovalTime(organism);
                             }}
                             deleteAccessionVersion={() =>
                                 hooks.deleteSequenceEntries({
@@ -355,9 +355,9 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
     );
 };
 
-const storeLastApprovalTime = () => {
+const storeLastApprovalTime = (organism: string) => {
     const lastApprovalTime = Math.floor(Date.now() / 1000);
-    localStorage.setItem(LAST_APPROVAL_TIME_LOCAL_STORAGE_KEY, lastApprovalTime.toString());
+    localStorage.setItem(getLastApprovalTimeKey(organism), lastApprovalTime.toString());
 };
 
 export const ReviewPage = withQueryProvider(InnerReviewPage);
diff --git a/website/src/components/SearchPage/RecentSequencesBanner.tsx b/website/src/components/SearchPage/RecentSequencesBanner.tsx
@@ -1,13 +1,17 @@
 import React, { useEffect, useState } from 'react';
 
-export const LAST_APPROVAL_TIME_LOCAL_STORAGE_KEY = 'lastApprovalTime';
+export const getLastApprovalTimeKey = (organism: string) => organism + 'lastApprovalTime';
 
-export const RecentSequencesBanner: React.FC = () => {
+interface RecentSequencesBannerProps {
+    organism: string;
+}
+
+export const RecentSequencesBanner: React.FC<RecentSequencesBannerProps> = ({ organism }) => {
     const [showBanner, setShowBanner] = useState(false);
 
     useEffect(() => {
         const checkApprovalTime = () => {
-            const lastApproveTimeString = localStorage.getItem(LAST_APPROVAL_TIME_LOCAL_STORAGE_KEY);
+            const lastApproveTimeString = localStorage.getItem(getLastApprovalTimeKey(organism));
             if (lastApproveTimeString === null) {
                 setShowBanner(false);
                 return;
@@ -24,7 +28,7 @@ export const RecentSequencesBanner: React.FC = () => {
 
         // Clear the interval on component unmount
         return () => clearInterval(intervalId);
-    }, []);
+    }, [organism]);
     if (!showBanner) {
         return null;
     }

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -74,7 +74,7 @@ export const SearchFullUI = ({
                 />
             </div>
             <div className='flex-1'>
-                <RecentSequencesBanner />
+                <RecentSequencesBanner organism={organism} />
                 <div className=' text-sm text-gray-800 mb-6 justify-between flex px-6 items-baseline'>
                     <div className='mt-auto'>
                         Search returned {data.totalCount.toLocaleString()} sequence{data.totalCount === 1 ? '' : 's'}
@@ -101,7 +101,6 @@ export const SearchFullUI = ({
                     orderBy={orderBy}
                     classOfSearchPage={SEARCH}
                 />
-
                 <div className='mt-4 flex justify-center'>
                     <SearchPagination
                         count={Math.ceil(data.totalCount / pageSize)}