diff options
author | Ellie Huxtable <ellie@elliehuxtable.com> | 2024-06-19 15:46:53 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-06-19 15:46:53 +0100 |
commit | 80d28ea2dac4adc696b481f5f52e1f3947d7b959 (patch) | |
tree | d5686a010e9fb355d27a57e533161822176e3c74 | |
parent | 5f66fb6a0365994ae2d0702e19c85c649acdd1a7 (diff) |
feat(gui): cache zustand store in localstorage (#2168)
* fix(gui): use the store to cache week start
* feat(gui): cache zustand store in localStorage
This means that before we've loaded any data, we can still display
something up-to-date. Avoid flashing!
I'll probably want to switch this to the tauri sqlite plugin later
-rw-r--r-- | ui/src/App.tsx | 2 | ||||
-rw-r--r-- | ui/src/pages/Home.tsx | 10 | ||||
-rw-r--r-- | ui/src/state/store.ts | 12 |
3 files changed, 13 insertions, 11 deletions
diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 9b5242a7d..c643720ae 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -105,7 +105,7 @@ function App() { </ul> </li> <li className="mt-auto"> - {user && !user.isLoggedIn() && ( + {user && user.username === "" && !user.username && ( <Dialog> <DialogTrigger className="w-full"> <Button diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx index 51c1e934a..750db969c 100644 --- a/ui/src/pages/Home.tsx +++ b/ui/src/pages/Home.tsx @@ -53,11 +53,10 @@ const explicitTheme: ThemeInput = { }; export default function Home() { - const [weekStart, setWeekStart] = useState(0); - const homeInfo = useStore((state) => state.homeInfo); const user = useStore((state) => state.user); const calendar = useStore((state) => state.calendar); + const weekStart = useStore((state) => state.weekStart); const refreshHomeInfo = useStore((state) => state.refreshHomeInfo); const refreshUser = useStore((state) => state.refreshUser); @@ -66,10 +65,6 @@ export default function Home() { const { toast } = useToast(); useEffect(() => { - let locale = new Intl.Locale(navigator.language); - let weekinfo = locale.getWeekInfo(); - setWeekStart(weekinfo.firstDay); - refreshHomeInfo(); refreshUser(); refreshCalendar(); @@ -110,7 +105,6 @@ export default function Home() { <Header name={user.username} /> <div className="pt-10"> - <h2 className="text-xl font-bold">Sync</h2> <Stats stats={[ { @@ -132,7 +126,7 @@ export default function Home() { /> </div> - <div className="pt-10"> + <div className="pt-10 flex justify-around"> <ActivityCalendar theme={explicitTheme} data={calendar} diff --git a/ui/src/state/store.ts b/ui/src/state/store.ts index 822abc263..21fbdf14f 100644 --- a/ui/src/state/store.ts +++ b/ui/src/state/store.ts @@ -1,4 +1,6 @@ import { create } from "zustand"; +import { persist, createJSONStorage } from "zustand/middleware"; + import { parseISO } from "date-fns"; import { fetch } from "@tauri-apps/plugin-http"; @@ -26,6 +28,7 @@ interface AtuinState { vars: Var[]; shellHistory: ShellHistory[]; calendar: any[]; + weekStart: number; refreshHomeInfo: () => void; refreshCalendar: () => void; @@ -36,13 +39,14 @@ interface AtuinState { historyNextPage: (query?: string) => void; } -export const useStore = create<AtuinState>()((set, get) => ({ +let state = (set, get): AtuinState => ({ user: DefaultUser, homeInfo: DefaultHomeInfo, aliases: [], vars: [], shellHistory: [], calendar: [], + weekStart: new Intl.Locale(navigator.language).getWeekInfo().firstDay, refreshAliases: () => { invoke("aliases").then((aliases: any) => { @@ -135,4 +139,8 @@ export const useStore = create<AtuinState>()((set, get) => ({ }); } }, -})); +}); + +export const useStore = create<AtuinState>()( + persist(state, { name: "atuin-storage" }), +); |