Feat 1065 filter persistance on asset index

app/components/booking/status-filter.tsx

@@ -1,4 +1,5 @@
 import { useNavigation, useSearchParams } from "@remix-run/react";
+import { useCookieDestory } from "~/hooks/use-search-param-utils";
 import { isFormProcessing } from "~/utils/form";
 import {
   Select,
@@ -17,11 +18,13 @@ export function StatusFilter({
   const disabled = isFormProcessing(navigation.state);
   const [searchParams, setSearchParams] = useSearchParams();
   const status = searchParams.get("status");
+  const { destoryCookieValues } = useCookieDestory();
 
   function handleValueChange(value: string) {
     setSearchParams((prev) => {
       /** If the value is "ALL", we just remove the param */
       if (value === "ALL") {
+        destoryCookieValues(["status"]);
         prev.delete("status");
         return prev;
       }

app/components/list/filters/search-form.tsx

@@ -7,6 +7,7 @@ import {
 
 import Input from "~/components/forms/input";
 import { Button } from "~/components/shared/button";
+import { useCookieDestory } from "~/hooks/use-search-param-utils";
 import type { SearchableIndexResponse } from "~/modules/types";
 import { isSearching } from "~/utils/form";
 import { tw } from "~/utils/tw";
@@ -18,13 +19,16 @@ export const SearchForm = ({ className }: { className?: string }) => {
     useLoaderData<SearchableIndexResponse>();
   const { singular } = modelName;
 
+  const { destoryCookieValues } = useCookieDestory();
+
   const navigation = useNavigation();
   const disabled = isSearching(navigation);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
   const label = searchFieldLabel ? searchFieldLabel : `Search by ${singular}`;
 
   function clearSearch() {
+    destoryCookieValues(["s"]);
     setSearchParams((prev) => {
       prev.delete("s");
 

app/hooks/use-search-param-utils.ts

@@ -1,35 +1,103 @@
 import { useMemo } from "react";
-import { useSearchParams } from "@remix-run/react";
+import { useLoaderData, useLocation, useSearchParams } from "@remix-run/react";
+import Cookies from "js-cookie";
+import type { loader } from "~/routes/_layout+/assets._index";
+
+type SetSearchParams = (
+  setter: (prev: URLSearchParams) => URLSearchParams
+) => void;
+
+export function useAssetIndexMeta() {
+  const location = useLocation();
+  const { filters, organizationId } = useLoaderData<typeof loader>();
+  const isAssetIndexPage = location.pathname === "/assets";
+  const cookieSearchParams = new URLSearchParams(filters);
+
+  return { filters, isAssetIndexPage, cookieSearchParams, organizationId };
+}
+
+export function checkValueInCookie(
+  keys: string[],
+  cookieSearchParams: URLSearchParams
+): boolean {
+  return keys.map((key) => cookieSearchParams.has(key)).some(Boolean);
+}
 
 /**
  * Returns a Boolean indicating if any values exists for any key passed
  */
 export function useSearchParamHasValue(...keys: string[]) {
   const [searchParams] = useSearchParams();
-
+  const { isAssetIndexPage, cookieSearchParams } = useAssetIndexMeta();
   const hasValue = useMemo(
     () => keys.map((key) => searchParams.has(key)).some(Boolean),
     [keys, searchParams]
   );
 
-  return hasValue;
+  const hasValueInCookie =
+    isAssetIndexPage && checkValueInCookie(keys, cookieSearchParams);
+
+  return hasValue || hasValueInCookie;
 }
 
 /**
  * Returns a handler which can use used to clear all the values
  * for specific keys passed as params
  */
+
+export function deleteKeysInSearchParams(
+  keys: string[],
+  setSearchParams: SetSearchParams
+) {
+  keys.forEach((key) => {
+    setSearchParams((prev) => {
+      prev.delete(key);
+      return prev;
+    });
+  });
+}
+
+export function destoryCookieValues(
+  organizationId: string,
+  keys: string[],
+  cookieSearchParams: URLSearchParams
+) {
+  keys.forEach((key) => {
+    cookieSearchParams.delete(key);
+  });
+  Cookies.set(`${organizationId}_assetFilter`, cookieSearchParams.toString(), {
+    path: "/",
+    sameSite: "lax",
+    secure: process.env.NODE_ENV === "production",
+    expires: 365, // 1 year
+  });
+}
+
 export function useClearValueFromParams(...keys: string[]) {
   const [, setSearchParams] = useSearchParams();
+  const { isAssetIndexPage, organizationId, cookieSearchParams } =
+    useAssetIndexMeta();
 
   function clearValuesFromParams() {
-    keys.forEach((key) => {
-      setSearchParams((prev) => {
-        prev.delete(key);
-        return prev;
-      });
-    });
+    if (isAssetIndexPage) {
+      destoryCookieValues(organizationId, keys, cookieSearchParams);
+      deleteKeysInSearchParams(keys, setSearchParams);
+      return;
+    }
+    deleteKeysInSearchParams(keys, setSearchParams);
   }
 
   return clearValuesFromParams;
 }
+
+export function useCookieDestory() {
+  const { isAssetIndexPage, cookieSearchParams, organizationId } =
+    useAssetIndexMeta();
+
+  function _destoryCookieValues(keys: string[]) {
+    if (isAssetIndexPage) {
+      destoryCookieValues(organizationId, keys, cookieSearchParams);
+    }
+  }
+  return { destoryCookieValues: _destoryCookieValues };
+}

app/modules/asset/service.server.ts

@@ -1368,6 +1368,7 @@ export async function getPaginatedAndFilterableAssets({
   excludeTagsQuery = false,
   excludeSearchFromView = false,
   excludeLocationQuery = false,
+  filters = "",
 }: {
   request: LoaderFunctionArgs["request"];
   organizationId: Organization["id"];
@@ -1376,13 +1377,18 @@ export async function getPaginatedAndFilterableAssets({
   excludeCategoriesQuery?: boolean;
   excludeTagsQuery?: boolean;
   excludeLocationQuery?: boolean;
+  filters?: string;
   /**
    * Set to true if you want the query to be performed by directly accessing the assets table
    *  instead of the AssetSearchView
    */
   excludeSearchFromView?: boolean;
 }) {
-  const searchParams = getCurrentSearchParams(request);
+  const currentFilterParams = new URLSearchParams(filters || "");
+  const searchParams = filters
+    ? currentFilterParams
+    : getCurrentSearchParams(request);
+
   const paramsValues = getParamsValues(searchParams);
   const status =
     searchParams.get("status") === "ALL" // If the value is "ALL", we just remove the param

app/routes/_layout+/assets._index.tsx

@@ -6,7 +6,7 @@ import type {
   LoaderFunctionArgs,
   MetaFunction,
 } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { json, redirect } from "@remix-run/node";
 import type { ShouldRevalidateFunctionArgs } from "@remix-run/react";
 import { useNavigate } from "@remix-run/react";
 import { z } from "zod";
@@ -52,7 +52,7 @@ import { getOrganizationTierLimit } from "~/modules/tier/service.server";
 import assetCss from "~/styles/assets.css?url";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { checkExhaustiveSwitch } from "~/utils/check-exhaustive-switch";
-import { setCookie, userPrefs } from "~/utils/cookies.server";
+import { userPrefs, getFiltersFromRequest } from "~/utils/cookies.server";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { ShelfError, makeShelfError } from "~/utils/error";
 import { data, error, parseData } from "~/utils/http.server";
@@ -103,6 +103,16 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
             });
           }),
       ]);
+    const {
+      filters,
+      serializedCookie: filtersCookie,
+      redirectNeeded,
+    } = await getFiltersFromRequest(request, organizationId);
+
+    if (filters && redirectNeeded) {
+      const cookieParams = new URLSearchParams(filters);
+      return redirect(`/assets?${cookieParams.toString()}`);
+    }
 
     let [
       tierLimit,
@@ -132,6 +142,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
       getPaginatedAndFilterableAssets({
         request,
         organizationId,
+        filters,
       }),
     ]);
 
@@ -159,6 +170,27 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
       plural: "assets",
     };
 
+    const headers = new Headers();
+
+    // Append existing cookies (if any)
+    const cookieHeader = request.headers.get("Cookie");
+    if (cookieHeader) {
+      // Extract existing cookies if needed (optional)
+      // This step may require additional parsing depending on your use case
+      headers.append("Cookie", cookieHeader);
+    }
+
+    // Append the new Set-Cookie headers
+    if (filtersCookie) {
+      headers.append("Set-Cookie", filtersCookie);
+    }
+
+    // Example: Append user preferences cookie (replace with actual logic if needed)
+    const userPrefsCookie = await userPrefs.serialize(cookie);
+    if (userPrefsCookie) {
+      headers.append("Set-Cookie", userPrefsCookie);
+    }
+
     return json(
       data({
         header,
@@ -184,9 +216,11 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
         teamMembers,
         totalTeamMembers,
         rawTeamMembers,
+        filters,
+        organizationId,
       }),
       {
-        headers: [setCookie(await userPrefs.serialize(cookie))],
+        headers,
       }
     );
   } catch (cause) {

app/utils/cookies.server.ts

@@ -86,3 +86,36 @@ export async function initializePerPageCookieOnLayout(request: Request) {
   }
   return cookie;
 }
+
+export const createAssetFilterCookie = (orgId: string) =>
+  createCookie(`${orgId}_assetFilter`, {
+    path: "/",
+    sameSite: "lax",
+    secrets: [process.env.SESSION_SECRET],
+    secure: process.env.NODE_ENV === "production",
+    maxAge: 60 * 60 * 24 * 365, // 1 year
+  });
+
+export async function getFiltersFromRequest(
+  request: Request,
+  organizationId: string
+) {
+  const url = new URL(request.url);
+  let filters = url.searchParams?.toString();
+  const cookieHeader = request.headers.get("Cookie");
+
+  const assetFilterCookie = createAssetFilterCookie(organizationId);
+  if (filters) {
+    // Override the cookie with query params
+    // Serialize the new filters into the cookie
+    const serializedCookie = await assetFilterCookie.serialize(filters);
+
+    return { filters, serializedCookie };
+  } else if (cookieHeader) {
+    // Use existing cookie filter
+    filters = (await assetFilterCookie.parse(cookieHeader)) || {};
+    filters = new URLSearchParams(filters).toString();
+    return { filters, redirectNeeded: !!filters };
+  }
+  return { filters };
+}

package.json

@@ -128,6 +128,7 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/dom-to-image": "^2.6.7",
+    "@types/js-cookie": "^3.0.6",
     "@types/jsonwebtoken": "^9.0.5",
     "@types/luxon": "^3.4.2",
     "@types/nodemailer": "^6.4.14",