correct handling of loading data vs empty data

Signed-off-by: GRBurst <[email protected]>
GRBurst · May 25, 2024 · 538d98d · 538d98d
1 parent ff2558a
commit 538d98d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/frontend/src/components/FilterableJobList.tsx b/frontend/src/components/FilterableJobList.tsx
@@ -47,13 +47,13 @@ const getHighlightedText = (
 };
 
 interface ItemListProps {
-  items: Item[];
+  items: Item[] | undefined;
   tagFilters: TagFilter[];
   searchFilter: string | undefined;
 }
 const ItemList = ({ items, tagFilters, searchFilter }: ItemListProps) => (
   <List
-    loading={!Array.isArray(items) || items.length == 0}
+    loading={items === undefined || !Array.isArray(items)}
     className="job-list"
     itemLayout="horizontal"
     dataSource={items ?? []}
@@ -82,7 +82,7 @@ const ItemList = ({ items, tagFilters, searchFilter }: ItemListProps) => (
 );
 
 interface FilterableJobListProps {
-  items: Item[];
+  items: Item[] | undefined;
   parentItemId: number | undefined;
   userId: string | undefined;
   filterTags: Map<string, TagFilters>;
@@ -162,13 +162,13 @@ const FilterableJobList = ({
   };
 
   console.debug("ItemList: ", items);
-  const filteredItems = itemFilter(
-    items ?? [],
+  const filteredItems = items !== undefined ? itemFilter(
+    items,
     flatActive,
     searchFilter,
     parentItemId,
     userId
-  );
+  ) : undefined;
 
   console.debug("FilteredItemList: ", filteredItems);
 

diff --git a/frontend/src/components/FilterableLocalList.tsx b/frontend/src/components/FilterableLocalList.tsx
@@ -11,7 +11,7 @@ export interface FilterableLocalListProps {
   filterTags: Map<string, TagFilters>;
 }
 export const FilterableLocalList = ({ filterTags }: FilterableLocalListProps) => {
-  const [allItems, setAllItems] = useState<readonly Item[]>([]);
+  const [allItems, setAllItems] = useState<readonly Item[] | undefined>(undefined);
   const [parentItemId, setParentItemId] = useState<number | undefined>(
     undefined
   );
@@ -32,7 +32,7 @@ export const FilterableLocalList = ({ filterTags }: FilterableLocalListProps) =>
 
   return (
     <FilterableJobList
-      items={[...allItems]}
+      items={allItems !== undefined ? [...allItems] : undefined}
       parentItemId={parentItemId}
       userId={undefined}
       filterTags={filterTags} />

diff --git a/frontend/src/components/FilterableSqliteList.tsx b/frontend/src/components/FilterableSqliteList.tsx
@@ -9,7 +9,7 @@ export interface FilterableSqliteListProps {
   filterTags: Map<string, TagFilters>;
 }
 export const FilterableSqliteList = ({ filterTags }: FilterableSqliteListProps) => {
-  const [allItems, setAllItems] = useState<readonly Item[]>([]);
+  const [allItems, setAllItems] = useState<readonly Item[] | undefined>(undefined);
   const [parentItemId, setParentItemId] = useState<number | undefined>(
     undefined
   );
@@ -43,7 +43,7 @@ export const FilterableSqliteList = ({ filterTags }: FilterableSqliteListProps)
 
   return (
     <FilterableJobList
-      items={[...allItems]}
+      items={allItems !== undefined ? [...allItems] : undefined}
       parentItemId={parentItemId}
       userId={undefined}
       filterTags={filterTags} />

diff --git a/frontend/src/components/WhoIsHiring.tsx b/frontend/src/components/WhoIsHiring.tsx
@@ -18,7 +18,7 @@ export interface WhoIsHiringProps {
 }
 export const WhoIsHiring = ({ filterTags }: WhoIsHiringProps) => {
   const [thread, setThread] = useState<Item | undefined>(undefined);
-  const [threadComments, setThreadComments] = useState<Item[]>([]);
+  const [threadComments, setThreadComments] = useState<Item[] | undefined>(undefined);
   const whoishiring = "whoishiring";
 
   const userRef = `v0/user/${whoishiring}`;
@@ -71,7 +71,7 @@ export const WhoIsHiring = ({ filterTags }: WhoIsHiringProps) => {
 
       const enriched = comments.map(c => {
         const isDetached = c.kids?.map(kid => lookupMap.get(kid)).some(k => k.by === moderatorId && k.text?.includes(filterSubstring)) || false
-        return Item({...c, ...{"detached": isDetached}})
+        return Item({ ...c, ...{ "detached": isDetached } })
       })
 
       return enriched
@@ -103,12 +103,12 @@ export const WhoIsHiring = ({ filterTags }: WhoIsHiringProps) => {
   }, [dbRef, thread]);
 
   if (endpointStatus == "loading") {
-    return <Spin tip="Loading" size="large" style={{width: "100%", padding: "64px"}} />;
+    return <Spin tip="Loading" size="large" style={{ width: "100%", padding: "64px" }} />;
   }
 
   return (
     <FilterableJobList
-      items={threadComments ?? []}
+      items={threadComments}
       parentItemId={thread?.id}
       userId={undefined}
       filterTags={filterTags} />