feat: Use the list cache for filtering.

Now we only use the lists from the logs to ensure that the account list cache is up-to-date.
mmcknett · May 18, 2024 · 7b7e727 · 7b7e727
1 parent 113069a
commit 7b7e727
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/LogTable.tsx b/src/components/LogTable.tsx
@@ -10,12 +10,14 @@ import { useAccount } from '../hooks/use-account';
 export function LogTable() {
   const fBaseContext = useContext(FirebaseContext)!;
 
-  const [selectedList, setSelectedList] = useState<string | undefined>(undefined);
+  const [selectedList, setSelectedList] = useState<string | null>(null);
 
-  const { account: { recentList } } = useAccount(fBaseContext);
-  const { logs, lists } = useLogs(fBaseContext, selectedList);
+  const { account: { listCache } } = useAccount(fBaseContext);
+  const { logs } = useLogs(fBaseContext, selectedList);
   logs.sort((a: ILog, b: ILog) => !a.endTime || !b.endTime ? 0 : b.endTime?.seconds - a.endTime?.seconds);
 
+  const lists = listCache || [];
+
   const groups = [];
   let currentGroup = [];
   let prevWeekNumber = 0;
@@ -41,13 +43,19 @@ export function LogTable() {
   return (
     <>
     <div>
-      <select name='list-select' id='list-select' value={selectedList} onChange={e => setSelectedList(e.target.value)}>
-        <option>--</option>
+      <select
+        name='list-select'
+        id='list-select'
+        value={selectedList || '--'}
+        onChange={e => setSelectedList(e.target.value)}
+        style={{ marginInlineEnd: '1em' }}
+      >
+        <option value='--'>--</option>
         {
           lists.map(listname => <option value={listname}>{listname}</option>)
         }
       </select>
-      <button onClick={() => setSelectedList(undefined)}>Clear</button>
+      <button onClick={() => setSelectedList(null)}>Clear</button>
     </div>
     <table>
       <thead>

diff --git a/src/hooks/use-logs.ts b/src/hooks/use-logs.ts
@@ -13,7 +13,7 @@ import { ILog } from '../data/data-types';
 import { getLogsCollection } from "../data/collections";
 import { saveMruListAndDeleteDraft, useEnsureAcccountListCacheEffect } from "./use-account";
 
-export function useLogs(fBaseContext: IFirebaseContext, listName?: string | undefined) {
+export function useLogs(fBaseContext: IFirebaseContext, listName?: string | null | undefined) {
   const logsCollection = getLogsCollection(fBaseContext);
   const logsQuery = listName ? query(logsCollection, where("list", "==", listName)) : logsCollection;
   const [logsSnapshot, loading, error] = useCollectionData(logsQuery);
@@ -24,7 +24,7 @@ export function useLogs(fBaseContext: IFirebaseContext, listName?: string | unde
   // A side effect of querying logs is to ensure the account has all the lists we queried in its cache.
   useEnsureAcccountListCacheEffect(fBaseContext, listsFromLogs);
 
-  return { logs, lists: listsFromLogs, loading, error };
+  return { logs, loading, error };
 }
 
 export async function addLog(fBaseContext: IFirebaseContext, entry: ILog) {