implement cookie-based caching for featured listings

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,
+  getFeaturedListingsFromCookie,
+  setFeaturedListingsCookie,
+} from "@/lib/utils/FeaturedListingsCookies";
 
 type FeaturedListingsContextType = {
   featuredListings: FeaturedListing[];
@@ -23,7 +21,7 @@ export const FeaturedListingsProvider = ({
   children: React.ReactNode;
 }) => {
   const [featuredListings, setFeaturedListings] = useState<FeaturedListing[]>(
-    [],
+    getFeaturedListingsFromCookie(),
   );
   const auth = useAuthentication();
 
@@ -34,6 +32,7 @@ export const FeaturedListingsProvider = ({
 
       if (!featuredData?.listing_ids?.length) {
         setFeaturedListings([]);
+        setFeaturedListingsCookie([]);
         return;
       }
 
@@ -58,26 +57,23 @@ export const FeaturedListingsProvider = ({
           }));
 
         setFeaturedListings(orderedListings);
+        setFeaturedListingsCookie(orderedListings);
       }
     } catch (error) {
       console.error("Error refreshing featured listings:", error);
     }
   };
 
   useEffect(() => {
-    refreshFeaturedListings();
-
-    const handleFeaturedChange = () => {
+    if (featuredListings.length === 0) {
       refreshFeaturedListings();
-    };
-
-    window.addEventListener("featuredListingsChanged", handleFeaturedChange);
-    return () => {
-      window.removeEventListener(
-        "featuredListingsChanged",
-        handleFeaturedChange,
-      );
-    };
+    } else {
+      Promise.resolve()
+        .then(refreshFeaturedListings)
+        .catch((error) => {
+          console.error("Background refresh failed:", error);
+        });
+    }
   }, []);
 
   return (

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 {

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}

frontend/src/lib/utils/FeaturedListingsCookies.ts

@@ -0,0 +1,27 @@
+export interface FeaturedListing {
+  id: string;
+  username: string;
+  slug: string | null;
+  name: string;
+}
+
+export const FEATURED_LISTINGS_COOKIES = "featured_listings";
+
+export const getFeaturedListingsFromCookie = (): FeaturedListing[] => {
+  try {
+    const cookie = document.cookie
+      .split("; ")
+      .find((row) => row.startsWith(`${FEATURED_LISTINGS_COOKIES}=`));
+    if (cookie) {
+      return JSON.parse(decodeURIComponent(cookie.split("=")[1]));
+    }
+  } catch (error) {
+    console.error("Error parsing featured listings cookie:", error);
+  }
+  return [];
+};
+
+export const setFeaturedListingsCookie = (listings: FeaturedListing[]) => {
+  const value = encodeURIComponent(JSON.stringify(listings));
+  document.cookie = `${FEATURED_LISTINGS_COOKIES}=${value}; path=/; max-age=86400`;
+};