refactor: create useLocations hook

src/components/home/HomePage.tsx

@@ -1,7 +1,9 @@
 import { LocationCards } from './LocationCards';
-import type { Location } from '../../types/sparkeats';
+import { useLocations } from '../../useLocations';
+
+export function HomePage() {
+  const locations = useLocations();
 
-export function HomePage({ locations }: { locations: Location[] }) {
   return (
     <div className="homepage">
       <header>Home Header</header>

src/main.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { App } from './App';
 import { HomePage } from './components/home/HomePage';
-import { locations } from './locations';
 
 window.__SPARKEATS_VERSION__ = import.meta.env['VITE_SPARKEATS_VERSION'];
 
@@ -12,7 +11,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <BrowserRouter basename={`${import.meta.env['BASE_URL']}`}>
       <Routes>
         <Route path="/" element={<App />}>
-          <Route path="/" element={<HomePage locations={locations} />} />
+          <Route path="/" element={<HomePage />} />
           <Route path="/locations/:id" element={<div>Location Page</div>} />
           <Route path="/locations/new" element={<div>New Location Page</div>} />
           <Route path="/reviews/new" element={<div>New Review Page</div>} />

src/useLocations.ts

@@ -0,0 +1,8 @@
+import React, { useContext } from 'react';
+import { locations } from './locations';
+
+const LocationsContext = React.createContext(locations);
+
+export const LocationsProvider = LocationsContext.Provider;
+
+export const useLocations = () => useContext(LocationsContext);