Merge pull request #1297 from thunderstore-io/01-20-fix_issue_searchp…

…arams_resetting_on_page_reload Fix issue: searchParams resetting on page reload
thunderstore-io · Jan 20, 2025 · 131855f · 131855f
2 parents 14140d4 + 877d1be
commit 131855f
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 9 deletions.
diff --git a/...cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx b/...cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx
@@ -9,7 +9,7 @@ const OFF = CATEGORY_STATES[0];
 
 interface Props {
   searchValue: string;
-  setSearchValue: (v: "") => void;
+  setSearchValue: (v: string) => void;
   categories: CategorySelection[];
   setCategories: (v: CategorySelection[]) => void;
 }
@@ -30,8 +30,10 @@ export const CategoryTagCloud = (props: Props) => {
       categories.map((c) => (c.id === id ? { ...c, selection: OFF } : c))
     );
 
-  const clearAll = () =>
+  const clearAll = () => {
     setCategories(categories.map((c) => ({ ...c, selection: OFF })));
+    setSearchValue("");
+  };
 
   return (
     <div className={styles.root}>

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx
@@ -30,6 +30,11 @@ export enum PackageOrderOptions {
 }
 export type PackageOrderOptionsType = `${PackageOrderOptions}`;
 
+export function isPackageOrderOptions(value: string) {
+  const enumValues = Object.values(PackageOrderOptions) as string[];
+  return enumValues.includes(value);
+}
+
 const selectOptions = [
   {
     value: PackageOrderOptions.Updated,

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
@@ -33,6 +33,7 @@ import {
 import { StalenessIndicator } from "@thunderstore/cyberstorm/src/components/StalenessIndicator/StalenessIndicator";
 import { PackageCount } from "./PackageCount";
 import {
+  isPackageOrderOptions,
   PackageOrder,
   PackageOrderOptions,
   PackageOrderOptionsType,
@@ -77,14 +78,47 @@ export function PackageSearch(props: Props) {
 
   const [searchParams, setSearchParams] = useSearchParams();
 
+  const initialOrder = searchParams.get("ordering");
+  const initialSection = searchParams.get("section");
+  const initialDeprecated = searchParams.get("deprecated");
+  const initialNsfw = searchParams.get("nsfw");
+  const initialPage = searchParams.get("page");
+  const initialIncludedCategories = searchParams.get("includedCategories");
+  const initialExcludedCategories = searchParams.get("excludedCategories");
+
   const [searchParamsBlob, setSearchParamsBlob] = useState<SearchParamsType>({
-    order: undefined,
-    section: allSections.length === 0 ? "" : allSections[0]?.uuid,
-    deprecated: false,
-    nsfw: false,
-    page: 1,
-    includedCategories: "",
-    excludedCategories: "",
+    order:
+      initialOrder && isPackageOrderOptions(initialOrder)
+        ? (initialOrder as PackageOrderOptionsType)
+        : undefined,
+    section:
+      allSections.length === 0 ? "" : initialSection ?? allSections[0]?.uuid,
+    deprecated:
+      initialDeprecated === null
+        ? false
+        : initialDeprecated === "true"
+          ? true
+          : initialDeprecated === "false"
+            ? false
+            : false,
+    nsfw:
+      initialNsfw === null
+        ? false
+        : initialNsfw === "true"
+          ? true
+          : initialNsfw === "false"
+            ? false
+            : false,
+    page:
+      initialPage &&
+      !Number.isNaN(Number.parseInt(initialPage)) &&
+      Number.isSafeInteger(Number.parseInt(initialPage))
+        ? Number.parseInt(initialPage)
+        : 1,
+    includedCategories:
+      initialIncludedCategories !== null ? initialIncludedCategories : "",
+    excludedCategories:
+      initialExcludedCategories !== null ? initialExcludedCategories : "",
   });
 
   // TODO: Disabled until we can figure out how a proper way to display skeletons