implement cookie-based caching for featured listings (#561)

* implement cookie-based caching for featured listings * Fix type errors * Updated to use localStorage
kscalelabs · Nov 8, 2024 · 4b1ff68 · 4b1ff68
1 parent 9c523ce
commit 4b1ff68
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 28 deletions.
diff --git a/frontend/src/components/listing/FeaturedListings.tsx b/frontend/src/components/listing/FeaturedListings.tsx
@@ -1,13 +1,11 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 
 import { useAuthentication } from "@/hooks/useAuth";
-
-type FeaturedListing = {
-  id: string;
-  username: string;
-  slug: string | null;
-  name: string;
-};
+import {
+  FeaturedListing,
+  getFeaturedListingsFromStorage,
+  setFeaturedListingsStorage,
+} from "@/lib/utils/featuredListingsStorage";
 
 type FeaturedListingsContextType = {
   featuredListings: FeaturedListing[];
@@ -23,7 +21,7 @@ export const FeaturedListingsProvider = ({
   children: React.ReactNode;
 }) => {
   const [featuredListings, setFeaturedListings] = useState<FeaturedListing[]>(
-    [],
+    getFeaturedListingsFromStorage(),
   );
   const auth = useAuthentication();
 
@@ -34,6 +32,7 @@ export const FeaturedListingsProvider = ({
 
       if (!featuredData?.listing_ids?.length) {
         setFeaturedListings([]);
+        setFeaturedListingsStorage([]);
         return;
       }
 
@@ -58,26 +57,19 @@ export const FeaturedListingsProvider = ({
           }));
 
         setFeaturedListings(orderedListings);
+        setFeaturedListingsStorage(orderedListings);
       }
     } catch (error) {
       console.error("Error refreshing featured listings:", error);
     }
   };
 
   useEffect(() => {
-    refreshFeaturedListings();
-
-    const handleFeaturedChange = () => {
-      refreshFeaturedListings();
-    };
-
-    window.addEventListener("featuredListingsChanged", handleFeaturedChange);
-    return () => {
-      window.removeEventListener(
-        "featuredListingsChanged",
-        handleFeaturedChange,
-      );
-    };
+    Promise.resolve()
+      .then(refreshFeaturedListings)
+      .catch((error) => {
+        console.error("Background refresh failed:", error);
+      });
   }, []);
 
   return (

diff --git a/frontend/src/components/listing/ListingFeatureButton.tsx b/frontend/src/components/listing/ListingFeatureButton.tsx
@@ -54,13 +54,11 @@ const ListingFeatureButton = (props: Props) => {
       if (response.error) {
         addErrorAlert(response.error);
       } else {
-        const newFeaturedState = !isFeatured;
-        setIsFeatured(newFeaturedState);
+        setIsFeatured(!isFeatured);
         addAlert(
-          `Listing ${newFeaturedState ? "featured" : "unfeatured"} successfully`,
+          `Listing ${!isFeatured ? "featured" : "unfeatured"} successfully`,
           "success",
         );
-
         refreshFeaturedListings();
       }
     } catch {

diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
@@ -110,9 +110,6 @@ const Sidebar = ({ show, onClose }: SidebarProps) => {
               <ul className="space-y-1">
                 {featuredListings && featuredListings.length > 0 && (
                   <>
-                    <div className="text-xl font-medium text-gray-1 px-3 py-2">
-                      Featured Listings:
-                    </div>
                     {featuredListings.map((listing) => (
                       <SidebarItem
                         key={listing.id}

diff --git a/frontend/src/lib/utils/featuredListingsStorage.ts b/frontend/src/lib/utils/featuredListingsStorage.ts
@@ -0,0 +1,26 @@
+export interface FeaturedListing {
+  id: string;
+  username: string;
+  slug: string | null;
+  name: string;
+}
+
+export const FEATURED_LISTINGS_KEY = "featured_listings";
+
+export const getFeaturedListingsFromStorage = (): FeaturedListing[] => {
+  try {
+    const stored = localStorage.getItem(FEATURED_LISTINGS_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch (error) {
+    console.error("Error parsing featured listings from storage:", error);
+    return [];
+  }
+};
+
+export const setFeaturedListingsStorage = (listings: FeaturedListing[]) => {
+  try {
+    localStorage.setItem(FEATURED_LISTINGS_KEY, JSON.stringify(listings));
+  } catch (error) {
+    console.error("Error storing featured listings:", error);
+  }
+};