refactor: move uniqueCities to locations data

src/components/HomeHeader.tsx

@@ -1,18 +1,13 @@
 import { Link } from 'react-router-dom';
 import Subtitle from './Subtitle';
 import LocationMenu from './LocationMenu';
-import { Location } from '../types/sparkeats';
 
-type HomeHeaderProps = {
-  locations: Location[];
-};
-
-function HomeHeader({ locations }: HomeHeaderProps) {
+function HomeHeader({ uniqueCities }: { uniqueCities: string[] }) {
   return (
     <div className="home-header">
       <Subtitle />
 
-      <LocationMenu locations={locations} />
+      <LocationMenu uniqueCities={uniqueCities} />
 
       <div className="home-header__button">
         <Link className="button__header-primary" to="/locations/new">

src/components/HomePage/index.tsx

@@ -2,12 +2,13 @@ import HomeHeader from '../HomeHeader';
 import { LocationCards } from './LocationCards';
 import { useLocations } from '../../useLocations';
 
-export function HomePage() {
+export function HomePage({ uniqueCities }: { uniqueCities: string[] }) {
+
   const locations = useLocations();
 
   return (
     <div className="homepage">
-      <HomeHeader locations={locations} />
+      <HomeHeader uniqueCities={uniqueCities} />
       <LocationCards locations={locations} />
     </div>
   );

src/components/LocationMenu.tsx

@@ -1,22 +1,13 @@
-import type { Location } from '../types/sparkeats';
-
-type LocationSelectProps = {
-  locations: Location[];
-};
-
-function LocationMenu({ locations }: LocationSelectProps) {
-  const allCities = locations.map((location) => location.city);
-  const uniqueCities = [...new Set(allCities)];
-
+function LocationMenu({ uniqueCities }: { uniqueCities: string[] }) {
   return (
     <div className="location-select">
       <h2 className="location-select__title">
-        <label htmlFor="location">Pick a Location</label>
+        <label htmlFor="location">Select a Location</label>
       </h2>
 
       <select className="location-select__menu" name="location" id="location">
         <option className="location-select__option" value="all">
-          All Locations
+          All Cities
         </option>
         {uniqueCities.map((city: string) => (
           <option key={city} value={city}>

src/locations.ts

@@ -161,6 +161,11 @@ function transformLocations(legacyPlaces: LegacyPlace[]): Locations {
     .reduce(mapLocation, {});
 }
 
+function getUniqueCities(locations: Location[]): string[] {
+  return Array.from(new Set(locations.map((location) => location.city)));
+}
+
 const locations = transformLocations(legacyPlaces);
+const uniqueCities = getUniqueCities(locations);
 
-export { locations };
+export { locations, uniqueCities };

src/main.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { App } from './App';
 import { HomePage } from './components/HomePage';
 import { LocationPage } from './components/LocationPage';
+import { locations, uniqueCities } from './locations';
 
 window.__SPARKEATS_VERSION__ = import.meta.env['VITE_SPARKEATS_VERSION'];
 
@@ -13,11 +14,17 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <Routes>
         <Route path="/" element={<App />}>
           <Route path="/" element={<HomePage />} />
+          <Route
+            path="/"
+            element={
+              <HomePage locations={locations} uniqueCities={uniqueCities} />
+            }
+          />
           <Route path="/locations/:id" element={<LocationPage />} />
           <Route path="/locations/new" element={<div>New Location Page</div>} />
           <Route path="/reviews/new" element={<div>New Review Page</div>} />
-        </Route>
-      </Routes>
-    </BrowserRouter>
-  </React.StrictMode>
+        </Route >
+      </Routes >
+    </BrowserRouter >
+  </React.StrictMode >
 );