Add redFlags filter (#189)

FrederikBolding · Jul 26, 2024 · 8e07af6 · 8e07af6
1 parent 3a41ac1
commit 8e07af6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/src/components/ChainList.tsx b/src/components/ChainList.tsx
@@ -32,14 +32,15 @@ export const ChainList = () => {
           }
           status
           faucets
+          redFlags
         }
       }
     }
   `);
 
   const chains = data.allChain.nodes;
 
-  const { query, showTestnets, showDeprecated } = useContext(SearchContext);
+  const { query, showTestnets, showDeprecated, showFlagged } = useContext(SearchContext);
   const lowerCaseQuery = query.toLowerCase();
 
   const handleFiltering = (chain) => {
@@ -48,7 +49,8 @@ export const ChainList = () => {
       !showTestnets &&
       (chain.faucets.length > 0 || lowerCaseName.includes("testnet"));
     const isDeprecated = !showDeprecated && chain.status === "deprecated";
-    if (isTestnet || isDeprecated) {
+    const isFlagged = !showFlagged && chain.redFlags?.length > 0;
+    if (isTestnet || isDeprecated || isFlagged) {
       return false;
     }
     if (query.length > 0) {

diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx
@@ -17,7 +17,7 @@ import { FaFilter } from "react-icons/fa";
 import { SearchContext } from "../context/SearchContext";
 
 export const Filters = () => {
-  const { showTestnets, showDeprecated, setShowTestnets, setShowDeprecated } =
+  const { showTestnets, showDeprecated, showFlagged, setShowTestnets, setShowDeprecated, setShowFlagged } =
     useContext(SearchContext);
 
   const handleTestnetsToggle = () => {
@@ -28,6 +28,10 @@ export const Filters = () => {
     setShowDeprecated((state) => !state);
   };
 
+  const handleFlaggedToggle = () => {
+    setShowFlagged((state) => !state);
+  };
+
   return (
     <Popover>
       <Tooltip label="Filters">
@@ -64,6 +68,7 @@ export const Filters = () => {
               display="flex"
               alignItems="center"
               justifyContent="space-between"
+              mb="2"
             >
               <FormLabel htmlFor="deprecated-switch" mb="0">
                 Show Deprecated
@@ -74,6 +79,22 @@ export const Filters = () => {
                 isChecked={showDeprecated}
               />
             </FormControl>
+
+            <FormControl
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <FormLabel htmlFor="flagged-switch" mb="0">
+                Show Flagged
+              </FormLabel>
+              <Switch
+                id="flagged-switch"
+                onChange={handleFlaggedToggle}
+                isChecked={showFlagged}
+              />
+            </FormControl>
+
           </PopoverBody>
         </PopoverContent>
       </Portal>

diff --git a/src/context/SearchContext.tsx b/src/context/SearchContext.tsx
@@ -25,10 +25,14 @@ export const SearchProvider = ({ children }) => {
     defaults?.showDeprecated ?? false
   );
 
+  const [showFlagged, setShowFlagged] = useState(
+    defaults?.showFlagged ?? false
+  );
+
   useEffect(() => {
-    const str = JSON.stringify({ showTestnets, showDeprecated });
+    const str = JSON.stringify({ showTestnets, showDeprecated, showFlagged });
     window.localStorage.setItem(LOCALSTORAGE_KEY, str);
-  }, [showTestnets, showDeprecated]);
+  }, [showTestnets, showDeprecated, showFlagged]);
 
   return (
     <SearchContext.Provider
@@ -39,6 +43,8 @@ export const SearchProvider = ({ children }) => {
         setShowTestnets,
         showDeprecated,
         setShowDeprecated,
+        showFlagged,
+        setShowFlagged
       }}
     >
       {children}