fix(moves & oracles): Changed filtering & enabled the new view

scottbenton · Nov 25, 2023 · 9d81545 · 9d81545
1 parent 62df549
commit 9d81545
Show file tree

Hide file tree

Showing 12 changed files with 331 additions and 216 deletions.
diff --git a/src/components/features/charactersAndCampaigns/MovesSection/MoveCategory.tsx b/src/components/features/charactersAndCampaigns/MovesSection/MoveCategory.tsx
@@ -11,15 +11,19 @@ import OpenIcon from "@mui/icons-material/ChevronRight";
 import { useEffect, useState } from "react";
 import { useNewMoveOracleView } from "hooks/featureFlags/useNewMoveOracleView";
 import { CollapsibleSectionHeader } from "../CollapsibleSectionHeader";
+import { CATEGORY_VISIBILITY } from "./useFilterMoves";
 
 export interface MoveCategoryProps {
   category: IMoveCategory;
   openMove: (move: Move) => void;
   forceOpen?: boolean;
+  visibleCategories: Record<string, CATEGORY_VISIBILITY>;
+  visibleMoves: Record<string, boolean>;
 }
 
 export function MoveCategory(props: MoveCategoryProps) {
-  const { category, openMove, forceOpen } = props;
+  const { category, openMove, forceOpen, visibleCategories, visibleMoves } =
+    props;
 
   const showNewView = useNewMoveOracleView();
   const [isExpanded, setIsExpanded] = useState(showNewView ? false : true);
@@ -30,6 +34,10 @@ export function MoveCategory(props: MoveCategoryProps) {
 
   const isExpandedOrForced = isExpanded || forceOpen;
 
+  if (visibleCategories[category.$id] === CATEGORY_VISIBILITY.HIDDEN) {
+    return null;
+  }
+
   return (
     <>
       {showNewView ? (
@@ -59,39 +67,42 @@ export function MoveCategory(props: MoveCategoryProps) {
             mb: showNewView && isExpandedOrForced ? 0.5 : 0,
           }}
         >
-          {Object.values(category.Moves).map((move, index) => (
-            <ListItem
-              id={move.$id}
-              key={index}
-              sx={(theme) => ({
-                "&:nth-of-type(even)": {
-                  backgroundColor: theme.palette.background.paperInlay,
-                },
-              })}
-              disablePadding
-            >
-              <ListItemButton
-                onClick={() => openMove(move)}
-                sx={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                }}
+          {Object.values(category.Moves).map((move, index) =>
+            visibleCategories[category.$id] === CATEGORY_VISIBILITY.ALL ||
+            visibleMoves[move.$id] === true ? (
+              <ListItem
+                id={move.$id}
+                key={index}
+                sx={(theme) => ({
+                  "&:nth-of-type(even)": {
+                    backgroundColor: theme.palette.background.paperInlay,
+                  },
+                })}
+                disablePadding
               >
-                <Box
-                  sx={(theme) => ({
-                    ...theme.typography.body2,
-                    color: theme.palette.text.primary,
-                  })}
+                <ListItemButton
+                  onClick={() => openMove(move)}
+                  sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                  }}
                 >
-                  {move.Title.Standard}
-                </Box>
-                <ListItemIcon sx={{ minWidth: "unset" }}>
-                  <OpenIcon />
-                </ListItemIcon>
-              </ListItemButton>
-            </ListItem>
-          ))}
+                  <Box
+                    sx={(theme) => ({
+                      ...theme.typography.body2,
+                      color: theme.palette.text.primary,
+                    })}
+                  >
+                    {move.Title.Standard}
+                  </Box>
+                  <ListItemIcon sx={{ minWidth: "unset" }}>
+                    <OpenIcon />
+                  </ListItemIcon>
+                </ListItemButton>
+              </ListItem>
+            ) : null
+          )}
         </Box>
       </Collapse>
     </>

diff --git a/src/components/features/charactersAndCampaigns/MovesSection/MovesSection.tsx b/src/components/features/charactersAndCampaigns/MovesSection/MovesSection.tsx
@@ -3,10 +3,19 @@ import SearchIcon from "@mui/icons-material/Search";
 import { MoveCategory } from "./MoveCategory";
 import { useFilterMoves } from "./useFilterMoves";
 import { useStore } from "stores/store";
+import { EmptyState } from "components/shared/EmptyState";
 
 export function MovesSection() {
-  const { setSearch, filteredMoves, isSearchActive } = useFilterMoves();
+  const {
+    moveCategories,
+    setSearch,
+    visibleMoveCategoryIds,
+    visibleMoveIds,
+    isSearchActive,
+    isEmpty,
+  } = useFilterMoves();
 
+  console.debug(isEmpty);
   const openDialog = useStore((store) => store.appState.openDialog);
 
   return (
@@ -43,16 +52,22 @@ export function MovesSection() {
           flexGrow: 1,
         }}
       >
-        {filteredMoves.map((category, index) => (
-          <MoveCategory
-            key={index}
-            category={category}
-            openMove={(move) => {
-              openDialog(move.$id);
-            }}
-            forceOpen={isSearchActive}
-          />
-        ))}
+        {!isEmpty ? (
+          moveCategories.map((category, index) => (
+            <MoveCategory
+              key={index}
+              category={category}
+              openMove={(move) => {
+                openDialog(move.$id);
+              }}
+              forceOpen={isSearchActive}
+              visibleCategories={visibleMoveCategoryIds}
+              visibleMoves={visibleMoveIds}
+            />
+          ))
+        ) : (
+          <EmptyState message={"No Moves Found"} sx={{ pb: 2 }} />
+        )}
       </Box>
     </>
   );

diff --git a/src/components/features/charactersAndCampaigns/MovesSection/useFilterMoves.ts b/src/components/features/charactersAndCampaigns/MovesSection/useFilterMoves.ts
@@ -1,62 +1,70 @@
-import { useEffect, useState } from "react";
-import { useSearch } from "hooks/useSearch";
-import { orderedCategories } from "data/moves";
-import { Move, MoveCategory } from "dataforged";
-import { useCustomMoves } from "./useCustomMoves";
-import { useStore } from "stores/store";
+import { useMemo, useState } from "react";
+import { useMoves } from "./useMoves";
+
+export enum CATEGORY_VISIBILITY {
+  HIDDEN,
+  SOME,
+  ALL,
+}
 
 export function useFilterMoves() {
-  const { search, setSearch, debouncedSearch } = useSearch();
-  const [filteredMoves, setFilteredMoves] = useState(orderedCategories);
-  const { customMoveCategories } = useCustomMoves();
-
-  const showDelveMoves = useStore(
-    (store) => store.settings.delve.showDelveMoves
-  );
-
-  useEffect(() => {
-    const results: MoveCategory[] = [];
-
-    const allCategories = [
-      ...orderedCategories,
-      ...customMoveCategories,
-    ].filter(
-      (category) =>
-        showDelveMoves || category.Source.Title !== "Ironsworn: Delve"
-    );
-
-    allCategories.forEach((category) => {
+  const [search, setSearch] = useState("");
+
+  const moveCategories = useMoves();
+  const { visibleMoveCategoryIds, visibleMoveIds, isEmpty } = useMemo(() => {
+    const visibleCategories: Record<string, CATEGORY_VISIBILITY> = {};
+    const visibleMoves: Record<string, boolean> = {};
+    let isEmpty: boolean = true;
+
+    moveCategories.forEach((category) => {
       if (
-        category.Title.Standard.toLocaleLowerCase().includes(
-          debouncedSearch.toLocaleLowerCase()
+        !search ||
+        (category.Title.Standard.toLocaleLowerCase().includes(
+          search.toLocaleLowerCase()
         ) &&
-        Object.keys(category.Moves).length > 0
+          Object.keys(category.Moves).length > 0)
       ) {
-        results.push(category);
+        visibleCategories[category.$id] = CATEGORY_VISIBILITY.ALL;
+        isEmpty = false;
         return;
       }
 
-      const Moves: { [key: string]: Move } = {};
+      let hasMove = false;
 
       Object.keys(category.Moves).forEach((moveId) => {
         const move = category.Moves[moveId];
 
         if (
           move.Title.Standard.toLocaleLowerCase().includes(
-            debouncedSearch.toLocaleLowerCase()
+            search.toLocaleLowerCase()
           )
         ) {
-          Moves[moveId] = move;
+          hasMove = true;
+          visibleMoves[move.$id] = true;
         }
       });
 
-      if (Object.keys(Moves).length > 0) {
-        results.push({ ...category, Moves });
+      if (hasMove) {
+        isEmpty = false;
+        visibleCategories[category.$id] = CATEGORY_VISIBILITY.SOME;
+      } else {
+        visibleCategories[category.$id] = CATEGORY_VISIBILITY.HIDDEN;
       }
     });
 
-    setFilteredMoves(results);
-  }, [debouncedSearch, customMoveCategories, showDelveMoves]);
+    return {
+      visibleMoveCategoryIds: visibleCategories,
+      visibleMoveIds: visibleMoves,
+      isEmpty,
+    };
+  }, [moveCategories, search]);
 
-  return { setSearch, filteredMoves, isSearchActive: !!search };
+  return {
+    moveCategories,
+    setSearch,
+    visibleMoveCategoryIds,
+    visibleMoveIds,
+    isSearchActive: !!search,
+    isEmpty,
+  };
 }
diff --git a/src/components/features/charactersAndCampaigns/MovesSection/useMoves.ts b/src/components/features/charactersAndCampaigns/MovesSection/useMoves.ts
@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+import { orderedCategories } from "data/moves";
+import { useCustomMoves } from "./useCustomMoves";
+import { useStore } from "stores/store";
+
+export function useMoves() {
+  const { customMoveCategories } = useCustomMoves();
+
+  const showDelveMoves = useStore(
+    (store) => store.settings.delve.showDelveMoves
+  );
+
+  const moveCategories = useMemo(() => {
+    return [...orderedCategories, ...customMoveCategories].filter(
+      (category) =>
+        showDelveMoves || category.Source.Title !== "Ironsworn: Delve"
+    );
+  }, [customMoveCategories, showDelveMoves]);
+
+  return moveCategories;
+}
diff --git a/src/components/features/charactersAndCampaigns/OracleSection/OracleCategory.tsx b/src/components/features/charactersAndCampaigns/OracleSection/OracleCategory.tsx
@@ -7,15 +7,19 @@ import { useStore } from "stores/store";
 import { useNewMoveOracleView } from "hooks/featureFlags/useNewMoveOracleView";
 import { useEffect, useState } from "react";
 import { CollapsibleSectionHeader } from "../CollapsibleSectionHeader";
+import { CATEGORY_VISIBILITY } from "./useFilterOracles";
 
 export interface OracleCategoryProps {
   prefix?: string;
   category: OracleSet;
   forceOpen?: boolean;
+  visibleCategories: Record<string, CATEGORY_VISIBILITY>;
+  visibleOracles: Record<string, boolean>;
 }
 
 export function OracleCategory(props: OracleCategoryProps) {
-  const { prefix, category, forceOpen } = props;
+  const { prefix, category, forceOpen, visibleCategories, visibleOracles } =
+    props;
 
   const { rollOracleTable } = useRoller();
   const openDialog = useStore((store) => store.appState.openDialog);
@@ -34,7 +38,10 @@ export function OracleCategory(props: OracleCategoryProps) {
 
   const isExpandedOrForced = isExpanded || forceOpen || false;
 
-  if (hiddenOracleCategoryIds[category.$id]) {
+  if (
+    hiddenOracleCategoryIds[category.$id] ||
+    visibleCategories[category.$id] === CATEGORY_VISIBILITY.HIDDEN
+  ) {
     return null;
   }
 
@@ -108,7 +115,13 @@ export function OracleCategory(props: OracleCategoryProps) {
 
           return (
             <Box key={oracleSetId}>
-              <OracleCategory key={oracleSetId} prefix={title} category={set} />
+              <OracleCategory
+                key={oracleSetId}
+                prefix={title}
+                category={set}
+                visibleCategories={visibleCategories}
+                visibleOracles={visibleOracles}
+              />
             </Box>
           );
         })}

diff --git a/src/components/features/charactersAndCampaigns/OracleSection/OracleSection.tsx b/src/components/features/charactersAndCampaigns/OracleSection/OracleSection.tsx
@@ -3,9 +3,17 @@ import { OracleCategory } from "./OracleCategory";
 import SearchIcon from "@mui/icons-material/Search";
 import { useFilterOracles } from "./useFilterOracles";
 import { AskTheOracleButtons } from "./AskTheOracleButtons";
+import { EmptyState } from "components/shared/EmptyState";
 
 export function OracleSection() {
-  const { isSearchActive, filteredOracles, setSearch } = useFilterOracles();
+  const {
+    oracleCategories,
+    isSearchActive,
+    visibleOracleCategoryIds,
+    visibleOracleIds,
+    setSearch,
+    isEmpty,
+  } = useFilterOracles();
 
   return (
     <>
@@ -44,13 +52,19 @@ export function OracleSection() {
         })}
       />
       <Box sx={{ overflow: "auto", flexGrow: 1 }}>
-        {filteredOracles.map((category, index) => (
-          <OracleCategory
-            category={category}
-            key={index}
-            forceOpen={isSearchActive}
-          />
-        ))}
+        {!isEmpty ? (
+          oracleCategories.map((category, index) => (
+            <OracleCategory
+              category={category}
+              key={index}
+              forceOpen={isSearchActive}
+              visibleCategories={visibleOracleCategoryIds}
+              visibleOracles={visibleOracleIds}
+            />
+          ))
+        ) : (
+          <EmptyState message={"No Oracles Found"} />
+        )}
       </Box>
     </>
   );