From ab648332b7f9be548badb9e8b8a043773342a370 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Gessler?=
 <36667834+gessfred@users.noreply.github.com>
Date: Sun, 7 Jan 2024 22:20:50 +0000
Subject: [PATCH] implement lookback selector

---
 web/src/App.js                  |  4 ++--
 web/src/foundation/Selectors.js |  2 +-
 web/src/foundation/api.js       | 24 ++++++++++++++++++++++--
 web/src/pages/Insights.js       | 19 +++++++++++--------
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/web/src/App.js b/web/src/App.js
index e8237e9..918bd62 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -2,14 +2,14 @@ import { useState, useEffect } from 'react'
 import './App.css'
 import { LandingPage } from './pages/LandingPage'
 import { Insights } from './pages/Insights'
-import api, { isAuthenticated } from './foundation/api'
+import api, { useAuth } from './foundation/api'
 
 //TODO make moving SVG background
 //TODO Add blurry foreground  
 
 function Pages() {
   const [flag, setFlag] = useState(false)
-  const authenticated = isAuthenticated()
+  const authenticated = useAuth()
   return (
     <div className="App">
         {!authenticated && <LandingPage onLogin={() => setFlag(p => !p)} />}
diff --git a/web/src/foundation/Selectors.js b/web/src/foundation/Selectors.js
index 4f56b38..a28ca96 100644
--- a/web/src/foundation/Selectors.js
+++ b/web/src/foundation/Selectors.js
@@ -12,7 +12,7 @@ export function BarSelector({choices, onChoice}) {
     if(choices && choices.length > 0) {
       onChoice_(choices[0])
     } 
-  }, [choices])
+  }, [JSON.stringify(choices)])
   return (
     <div className="bar-selector-container">
       {choices.map(choice => <span key={choice} onClick={() => onChoice_(choice)} className={choiceClass(choice)}>{choice}</span>)}
diff --git a/web/src/foundation/api.js b/web/src/foundation/api.js
index dc8f7f2..cdfe2f9 100644
--- a/web/src/foundation/api.js
+++ b/web/src/foundation/api.js
@@ -1,4 +1,5 @@
-import axios from 'axios';
+import axios from 'axios'
+import { useState, useEffect } from 'react'
 
 const url = 'https://keylogg.pub.gessfred.xyz/api'
 let failures = 0
@@ -70,10 +71,29 @@ export async function login(username, password) {
     const { access_token, refresh_token } = await response.json()
     localStorage.setItem('token', access_token)
     localStorage.setItem('refreshToken', refresh_token)
+    console.log("logged in")
 }
 
-export function isAuthenticated() {
+export function hasToken() {
     return localStorage.getItem('token') && localStorage.getItem('refreshToken')
 }
 
+
+
+export function useAuth() {
+  const [isAuthenticated, setIsAuthenticated] = useState(hasToken())
+  useEffect(() => {
+    const checkAuthStatus = () => {
+      console.log("checking auth status")
+      setIsAuthenticated(hasToken())
+    }
+    window.addEventListener('storage', checkAuthStatus)
+    return () => {
+      window.removeEventListener('storage', checkAuthStatus)
+    }
+  }, [])
+  return isAuthenticated
+}
+
+
 export default api
\ No newline at end of file
diff --git a/web/src/pages/Insights.js b/web/src/pages/Insights.js
index ae80cb0..dad9484 100644
--- a/web/src/pages/Insights.js
+++ b/web/src/pages/Insights.js
@@ -98,25 +98,28 @@ function TopSites({data}) {
 
 export function Insights({show}) {
   const isAuthenticated = false
-  const [state, setState] = useState({})
+  const [state, setState] = useState({evalPeriod: '1 week'})
   const [] = useState([])
   useEffect(() => {
     (async () => {
-      const ts = (await api.get('/stats/top-sites')).data.data
-      const typing = JSON.parse((await api.get('/stats/typing')).data.stats)
-      setState({topSites: ts, typingData: typing})
-    })().then(() => {})
-  }, [isAuthenticated])
+      console.log("updating dashobard...", {params: {interval: state.evalPeriod}})
+      const ts = (await api.get('/stats/top-sites', {params: {interval: state.evalPeriod}}))
+      const typing = JSON.parse((await api.get('/stats/typing', {params: {lookback_time: state.evalPeriod}})).data.stats)
+      console.log("ok")
+      setState(p => Object.assign({}, p, {topSites: ts.data.data, typingData: typing}))
+    })().then(() => {}).catch(err => console.warn("couldn't refresh dashboard", err))
+  }, [isAuthenticated, state.evalPeriod])
   const typingData = state.typingData || []
   const topSites = state.topSites || []
+  // 
   return (
     <div>
       <Background />
       <BlurOverlay>
         <h1>Insights</h1>
         <BarSelector 
-          choices={['24m', '12m', '3d', '24h']}
-          onChoice={() => {}}
+          choices={['6 months', '1 month', '2 weeks', '1 week', '1 day', '12 hours']}
+          onChoice={(p) => setState(prev => Object.assign({}, prev, {evalPeriod: p}))}
         />
         <input type="text" id="insights-lang-request" />
         <div id="insights-feed">