From 4b1ff68cf3326b19716894b6d5654baf452319b7 Mon Sep 17 00:00:00 2001
From: Ivan <45982459+ivntsng@users.noreply.github.com>
Date: Fri, 8 Nov 2024 00:21:40 -0800
Subject: [PATCH] implement cookie-based caching for featured listings (#561)

* implement cookie-based caching for featured listings

* Fix type errors

* Updated to use localStorage
---
 .../components/listing/FeaturedListings.tsx   | 34 +++++++------------
 .../listing/ListingFeatureButton.tsx          |  6 ++--
 frontend/src/components/nav/Sidebar.tsx       |  3 --
 .../src/lib/utils/featuredListingsStorage.ts  | 26 ++++++++++++++
 4 files changed, 41 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/lib/utils/featuredListingsStorage.ts

diff --git a/frontend/src/components/listing/FeaturedListings.tsx b/frontend/src/components/listing/FeaturedListings.tsx
index a91f6584..85e989d3 100644
--- 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,6 +57,7 @@ export const FeaturedListingsProvider = ({
           }));
 
         setFeaturedListings(orderedListings);
+        setFeaturedListingsStorage(orderedListings);
       }
     } catch (error) {
       console.error("Error refreshing featured listings:", error);
@@ -65,19 +65,11 @@ export const FeaturedListingsProvider = ({
   };
 
   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
index 5c65c0c5..2b6502a0 100644
--- 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
index 3f70c195..65538b3e 100644
--- 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
new file mode 100644
index 00000000..9b00fcc2
--- /dev/null
+++ 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);
+  }
+};