Components: TimePicker: Propagate timeframe state

3 files changed, 33 insertions, 31 deletions

diff --git a/src/App.tsx b/src/App.tsx
index 5304a62..739a64a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,35 +1,47 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { createClient } from '@supabase/supabase-js'
+import { Provider, defaultTheme } from '@adobe/react-spectrum'
+import { today, getLocalTimeZone } from '@internationalized/date';
 
 import Home from './pages/Home'
 import Login from './pages/Login'
 import Logout from './pages/Logout';
 import Recent from './pages/Recent';
 import { useLocalStorage } from "@uidotdev/usehooks";
+import { useState } from "react";
 
 const supabase = createClient('https://slpoocycjgqsuoedhkbn.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNscG9vY3ljamdxc3VvZWRoa2JuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTUyMDU0MjUsImV4cCI6MjAzMDc4MTQyNX0.xZYRTRN65rlms1Hb96IBAQvw3EGtMzUxlGPP5TVey34')
 
 function App() {
   const [session, setSession] = useLocalStorage("session", null)
+
+  const endTimeframe = today(getLocalTimeZone());
+  const [timeframe, setTimeframe] = useState({
+    start: endTimeframe.subtract({ days: 7 }),
+    end: endTimeframe
+  })
+
   return (
     <>
-      <BrowserRouter basename={import.meta.env.DEV ? '/' : '/fs-tracer-frontend'}>
-        <Routes>
-          <Route index element={
-            <Home supabase={supabase} session={session} />
-          } />
-          <Route path="/recent" element={
-            <Recent supabase={supabase} session={session} />
-          } />
-          <Route path="/login" element={
-            <Login supabase={supabase} session={session} setSession={setSession} />
-          } />
-          <Route path="/logout" element={
-            <Logout supabase={supabase} session={session} setSession={setSession} />
-          } />
-          <Route path="*" element={<p>notfound</p>} />
-        </Routes>
-      </BrowserRouter>
+      <Provider theme={defaultTheme}>
+        <BrowserRouter basename={import.meta.env.DEV ? '/' : '/fs-tracer-frontend'}>
+          <Routes>
+            <Route index element={
+              <Home supabase={supabase} session={session} timeframe={timeframe} setTimeframe={setTimeframe} />
+            } />
+            <Route path="/recent" element={
+              <Recent supabase={supabase} session={session} timeframe={timeframe} setTimeframe={setTimeframe} />
+            } />
+            <Route path="/login" element={
+              <Login supabase={supabase} session={session} setSession={setSession} timeframe={timeframe} setTimeframe={setTimeframe} />
+            } />
+            <Route path="/logout" element={
+              <Logout supabase={supabase} session={session} setSession={setSession} timeframe={timeframe} setTimeframe={setTimeframe} />
+            } />
+            <Route path="*" element={<p>notfound</p>} />
+          </Routes>
+        </BrowserRouter>
+      </Provider>
     </>
   )
 }
diff --git a/src/components/TimePicker/TimePicker.tsx b/src/components/TimePicker/TimePicker.tsx
index 174db31..bec1a24 100644
--- a/src/components/TimePicker/TimePicker.tsx
+++ b/src/components/TimePicker/TimePicker.tsx
@@ -1,20 +1,10 @@
-import { DateRangePicker, Provider, defaultTheme } from '@adobe/react-spectrum'
-import { useState } from 'react';
-import { today, getLocalTimeZone } from '@internationalized/date';
+import { DateRangePicker } from '@adobe/react-spectrum'
 
-
-export default function TimePicker() {
-	const endTimeframe = today(getLocalTimeZone());
-	const [value, setValue] = useState({
-		start: endTimeframe.subtract({ days: 7 }),
-		end: endTimeframe
-	});
+export default function TimePicker(props: any) {
 
 	return (
 		<>
-			<Provider theme={defaultTheme}>
-				<DateRangePicker aria-label="timeframe" value={value} onChange={setValue} />
-			</Provider>
+			<DateRangePicker aria-label="timeframe" value={props.timeframe} onChange={props.setTimeframe} />
 		</>
 	)
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 193b033..2ff9954 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -41,7 +41,7 @@ export default function Home(props: any) {
           <div className="flex flex-col w-full gap-7 flex-grow">
             <div className="flex flex-row gap-7 flex-grow">
               <div className="ml-auto mt-2">
-                <TimePicker />
+                <TimePicker timeframe={props.timeframe} setTimeframe={props.setTimeframe} />
               </div>
             </div>
             <div className="flex flex-row gap-7 flex-grow">