Merge pull request #13 from elsong86/swr-feature

Implemented SWR for caching purposes on the search results page.

frontend/package.json

@@ -17,7 +17,7 @@
     "npm": "^10.8.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "swr": "^2.2.5"
+    "swr": "^2.2.4"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",

frontend/src/app/components/SearchContainer.tsx

@@ -21,7 +21,7 @@ const SearchContainer: React.FC = () => {
         ~ Anywhere, Anytime ~
       </p>
 
-      <h1 className="text-6xl font-brothers text-shadow-md py-4 text-neutral-950">
+      <h1 className="text-6xl font-brothers py-4 text-neutral-950">
         FIND YOUR NEW FAVORITE <br />TACO SPOT!
       </h1>
 

frontend/src/app/search/page.tsx

@@ -1,13 +1,30 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import PlaceTile from '../components/PlaceTile';
 import Search from '../components/Search';
 import { Location, Place } from '../types';
+import useSWR from 'swr';
+
+// Adjusted fetcher to accept a tuple (array) of arguments from useSWR
+const usePlacesFetcher = async ([url, params]: [string, any]) => {
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(params),
+  });
+
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
+  }
+
+  return response.json();
+};
 
 const SearchPage: React.FC = () => {
-  const [places, setPlaces] = useState<Place[]>([]);
   const [location, setLocation] = useState<Location | null>(null);
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -25,47 +42,35 @@ const SearchPage: React.FC = () => {
         longitude: parseFloat(longitude),
       };
       setLocation(loc);
-      fetchPlaces(loc);
     }
   }, [searchParams]);
 
-  const fetchPlaces = async (loc: Location) => {
-    console.log('Fetching places');
-    if (!loc) return;
-    const params = {
-      location: loc,
-      radius: 1000,
-      max_results: 20,
-      text_query: 'tacos',
-    };
-
-    try {
-      const response = await fetch('http://localhost:8000/places', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(params),
-      });
-
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
+  const params = location
+    ? {
+        location: location,
+        radius: 1000,
+        max_results: 20,
+        text_query: 'tacos',
       }
+    : null;
 
-      const data = await response.json();
-      setPlaces(data.places);
-    } catch (error) {
-      console.error('Error fetching places:', error);
-    }
-  };
+    const { data: placesData, error } = useSWR(
+      location ? ['http://localhost:8000/places', params] : null, 
+      usePlacesFetcher, 
+      {
+        dedupingInterval: 86400000,  
+        revalidateOnFocus: false,    
+        revalidateOnReconnect: false 
+      }
+    );
 
   const handleLocationShare = (loc: Location) => {
     setLocation(loc);
     console.log('Location shared:', loc);
     router.push(`/search?latitude=${loc.latitude}&longitude=${loc.longitude}`);
   };
 
-  const handleAddressSubmit = async (address: string) => {
+  const useAddressSubmit = async (address: string) => {
     try {
       const response = await fetch('http://localhost:8000/geocode', {
         method: 'POST',
@@ -98,13 +103,16 @@ const SearchPage: React.FC = () => {
     <main className="items-left flex min-h-screen flex-col p-4">
       <Search
         onLocationShare={handleLocationShare}
-        onAddressSubmit={handleAddressSubmit}
+        onAddressSubmit={useAddressSubmit}
       />
       <h1 className="mb-4 text-2xl font-bold">Search Results</h1>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {places.map((place) => (
-          <PlaceTile key={place.id} place={place} />
-        ))}
+        {error && <div>Error fetching places.</div>}
+        {!placesData && <div>Loading places...</div>}
+        {placesData &&
+          placesData.places.map((place: Place) => (
+            <PlaceTile key={place.id} place={place} />
+          ))}
       </div>
     </main>
   );

frontend/tailwind.config.ts

@@ -27,9 +27,5 @@ const config: Config = {
       },
     },
   },
-  plugins: [
-
-    require('tailwindcss-textshadow'),
-  ],
 };
 export default config;