@thunderstore/cyberstorm: clean up old package category filters

Use the new, simpler approach instead. We will want to change how Dapper consumes the included/excluded categories, but since there's no implementations that support the old filters, there's no need to make changes to Dapper at this time. Refs TS-1860
thunderstore-io · Oct 24, 2023 · 4690f15 · 4690f15
1 parent ccb6b02
commit 4690f15
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 80 deletions.
diff --git a/packages/cyberstorm/src/components/PackageList/PackageList.tsx b/packages/cyberstorm/src/components/PackageList/PackageList.tsx
@@ -1,11 +1,9 @@
 "use client";
 import { useDapper } from "@thunderstore/dapper";
 import { usePromise } from "@thunderstore/use-promise";
-import { isEqual } from "lodash";
-import { useContext, useEffect } from "react";
 
 import styles from "./PackageList.module.css";
-import { FiltersContext } from "../PackageSearch/PackageSearch";
+import { CategorySelection } from "../PackageSearch/types";
 import { PackageCard } from "../PackageCard/PackageCard";
 
 interface Props {
@@ -14,11 +12,21 @@ interface Props {
   namespaceId?: string;
   teamId?: string;
   searchQuery: string;
+  categories: CategorySelection[];
 }
 
+/**
+ * Fetches packages based on props and shows them as a list.
+ *
+ * TODO: use categories props by splitting them to included and excluded
+ *       categories and pass them to getPackageListings (which doesn't)
+ *       currently support this format.
+ *
+ * TODO: we also support only one searchQuery, so the Dapper method
+ *       shouldn't expect an array of them.
+ */
 export function PackageList(props: Props) {
   const { communityId, namespaceId, searchQuery, teamId, userId } = props;
-  const filters = useContext(FiltersContext);
   const dapper = useDapper();
 
   const packages = usePromise(dapper.getPackageListings, [
@@ -27,36 +35,8 @@ export function PackageList(props: Props) {
     namespaceId,
     teamId,
     [searchQuery],
-    filters?.availableCategories,
   ]);
 
-  useEffect(() => {
-    if (filters === null) {
-      return;
-    }
-
-    // filters.availableCategories contains all possible categories for
-    // current packages as one might expect from the name, but note that
-    // calling filters.setAvailableCategories does NOT filter the
-    // categories, but only updates filters.availableCategories[].value
-    // booleans which define whether the filter is including/excluding
-    // packages (true/false) or off (undefined).
-    const updatedAvailableCategories = { ...filters.availableCategories };
-
-    packages.forEach((package_) => {
-      package_.categories.forEach((category) => {
-        updatedAvailableCategories[category.slug] = {
-          label: category.name,
-          value: filters.availableCategories[category.slug]?.value,
-        };
-      });
-    });
-
-    if (!isEqual(updatedAvailableCategories, filters.availableCategories)) {
-      filters.setAvailableCategories(updatedAvailableCategories);
-    }
-  }, [filters?.availableCategories, filters?.setAvailableCategories, packages]);
-
   return (
     <div className={styles.root}>
       {packages.map((packageData) => (

diff --git a/packages/cyberstorm/src/components/PackageSearch/PackageSearch.tsx b/packages/cyberstorm/src/components/PackageSearch/PackageSearch.tsx
@@ -7,7 +7,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PackageCategory } from "@thunderstore/dapper/types";
-import { Suspense, useState, createContext } from "react";
+import { useState } from "react";
 import { useDebounce } from "use-debounce";
 
 import { CategoryMenu } from "./CategoryMenu/CategoryMenu";
@@ -20,36 +20,6 @@ import { PackageList } from "../PackageList/PackageList";
 import { Select } from "../Select/Select";
 import { TextInput } from "../TextInput/TextInput";
 
-interface CategoriesProps {
-  [key: string]: {
-    label: string;
-    value: boolean | undefined;
-  };
-}
-
-// TODO: OVERKILL???
-export class Filters {
-  availableCategories: CategoriesProps;
-  setAvailableCategories: React.Dispatch<React.SetStateAction<CategoriesProps>>;
-
-  constructor() {
-    [this.availableCategories, this.setAvailableCategories] =
-      useState<CategoriesProps>({});
-  }
-}
-
-type ContextProps = { filters: Filters; children?: React.ReactNode };
-export const FiltersContext = createContext<Filters | null>(null);
-
-export function FiltersProvider(props: ContextProps) {
-  const { filters, children } = props;
-  return (
-    <FiltersContext.Provider value={filters}>
-      {children}
-    </FiltersContext.Provider>
-  );
-}
-
 interface Props {
   communityId?: string;
   packageCategories: PackageCategory[];
@@ -68,7 +38,6 @@ export function PackageSearch(props: Props) {
     userId,
   } = props;
 
-  const filters = new Filters();
   const [order, setOrder] = useState("1");
   const [page, setPage] = useState(1);
   const [searchValue, setSearchValue] = useState("");
@@ -124,22 +93,15 @@ export function PackageSearch(props: Props) {
               </div>
             </div>
           </div>
-          <FiltersProvider filters={filters}>
-            <Suspense
-              fallback={
-                <h2 className={styles.showing}>
-                  🌀 Some Skeleton of the component...
-                </h2>
-              }
-            >
-              <PackageList
-                communityId={communityId}
-                userId={userId}
-                teamId={teamId}
-                searchQuery={debouncedSearchValue}
-              />
-            </Suspense>
-          </FiltersProvider>
+
+          <PackageList
+            communityId={communityId}
+            userId={userId}
+            teamId={teamId}
+            searchQuery={debouncedSearchValue}
+            categories={categories}
+          />
+
           {/* TODO: use real totalCount */}
           <Pagination
             currentPage={page}