From 7b7e727f814cd27caa8a9778235970bcd0b8ffdb Mon Sep 17 00:00:00 2001
From: Matt McKnett <mmcknett@gmail.com>
Date: Sat, 18 May 2024 13:27:45 -0700
Subject: [PATCH] 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.
---
 src/components/LogTable.tsx | 20 ++++++++++++++------
 src/hooks/use-logs.ts       |  4 ++--
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/LogTable.tsx b/src/components/LogTable.tsx
index b332d38..fe29dca 100644
--- 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
index 7e0a660..0bb633b 100644
--- 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) {