added caching for habits

Author: roboslone

src/components/habit/break-dialog.tsx

@@ -27,7 +27,7 @@ export const HabitBreakDialog: React.FC<React.PropsWithChildren> = ({ children }
     const handleBreak = () => {
         toast.promise(
             breakHabit
-                .mutateAsync(habit)
+                .mutateAsync()
                 .then(() => setOpen(false))
                 .then(() => navigate({ to: "/" })),
             {

src/components/ordering/provider.tsx

@@ -36,14 +36,13 @@ const reorder = (
 
     if (isReordering) return ordered
 
-    ordered.sort((a, b) => {
+    return ordered.sort((a, b) => {
         const aCompleted = completed.has(a)
         const bCompleted = completed.has(b)
         if (aCompleted && bCompleted) return 0
-        if (aCompleted) return 1
-        return -1
+        if (aCompleted) return -1
+        return 1
     })
-    return ordered
 }
 
 const orderChanged = (a: string[], b: string[]): boolean => {

src/lib/git.ts

@@ -1,4 +1,10 @@
-import { type Collection } from "@/proto/models/v1/models_pb"
+import {
+    type Collection,
+    CollectionSchema,
+    type Habit,
+    HabitSchema,
+} from "@/proto/models/v1/models_pb"
+import { fromJsonString, toJsonString } from "@bufbuild/protobuf"
 import type { components } from "@octokit/openapi-types"
 import type { Octokit } from "octokit"
 import useLocalStorage from "use-local-storage"
@@ -13,6 +19,30 @@ type Stored<T> =
       }
     | undefined
 
+type StoredJSON = {
+    updatedAt: Date
+    data: string
+}
+
+const useStoredProto = <T>(toJSON: (data: T) => string, fromJSON: (data: string) => T) => {
+    const serializer = (data: Stored<T> | undefined): string => {
+        if (data === undefined) return ""
+        return JSON.stringify({
+            updatedAt: data.updatedAt,
+            data: toJSON(data.data),
+        } as StoredJSON)
+    }
+    const parser = (raw: string): Stored<T> | undefined => {
+        if (raw === "") return undefined
+        const parsed = JSON.parse(raw) as StoredJSON
+        return {
+            updatedAt: new Date(parsed.updatedAt),
+            data: fromJSON(parsed.data),
+        }
+    }
+    return { serializer, parser }
+}
+
 export const useStoredRepos = () =>
     useLocalStorage<Repo[] | undefined>("habbitses/repos/v1", undefined, {
         syncData: true,
@@ -29,8 +59,21 @@ export const useStoredRepoContent = () =>
     })
 
 export const useStoredCollection = () =>
-    useLocalStorage<Stored<Collection>>("habbitses/collection/v1", undefined, {
+    useLocalStorage<Stored<Collection>>("habbitses/collection/v2", undefined, {
+        syncData: true,
+        ...useStoredProto<Collection>(
+            (d) => toJsonString(CollectionSchema, d),
+            (s) => fromJsonString(CollectionSchema, s),
+        ),
+    })
+
+export const useStoredHabit = (name: string) =>
+    useLocalStorage<Stored<Habit>>(`habbitses/habits/v1/${name}`, undefined, {
         syncData: true,
+        ...useStoredProto<Habit>(
+            (d) => toJsonString(HabitSchema, d),
+            (s) => fromJsonString(HabitSchema, s),
+        ),
     })
 
 export function* iterHabitNames(content: RepoContent) {

src/lib/queries.ts

@@ -1,5 +1,6 @@
 import { useStoredAccountContext } from "@/components/auth/account-context"
 import { useCollectionContext } from "@/components/collection/context"
+import { useHabitContext } from "@/components/habit/context"
 import { useOrderingContext } from "@/components/ordering/context"
 import { useRepoContentContext } from "@/components/repo/content-context"
 import { useRepoContext } from "@/components/repo/context"
@@ -21,7 +22,13 @@ import { toast } from "sonner"
 import { decode, encode } from "uint8-to-base64"
 
 import { type StoredAccount, useStoredAccount } from "./auth"
-import { type RepoContent, useStoredCollection, useStoredRepoContent, useStoredRepos } from "./git"
+import {
+    type RepoContent,
+    useStoredCollection,
+    useStoredHabit,
+    useStoredRepoContent,
+    useStoredRepos,
+} from "./git"
 
 export const client = new QueryClient()
 
@@ -280,12 +287,15 @@ export const useUpdateHabit = (name: string) => {
 }
 
 export const useBreakHabit = () => {
+    const { habit } = useHabitContext()
     const account = useStoredAccountContext()
     const repo = useRepoContext()
     const octokit = useOctokit()
 
+    const [, setStored] = useStoredHabit(habit.name)
+
     return useMutation({
-        mutationFn: (habit: Habit) => {
+        mutationFn: () => {
             if (repo === undefined) throw new Error("repo is not selected")
 
             return octokit.rest.repos.deleteFile({
@@ -296,8 +306,11 @@ export const useBreakHabit = () => {
                 sha: habit.sha,
             })
         },
-        onSettled: async (_, __, habit) => {
+        onSuccess: () => {
+            setStored(undefined)
             client.removeQueries({ queryKey: ["repo", repo.id, "habit", habit.name] })
+        },
+        onSettled: async () => {
             await client.invalidateQueries({ queryKey: ["repo", repo.id, "content"] })
         },
         retry: handleError("Failed to break a habit", { maxFailures: 0 }),
@@ -318,6 +331,8 @@ export const useHabit = (name: string) => {
     const octokit = useOctokit()
     const { recordCompletion } = useOrderingContext()
 
+    const [stored, setStored] = useStoredHabit(name)
+
     return useQuery({
         queryKey: ["repo", repo.id, "habit", name],
         queryFn: async ({ signal }) => {
@@ -336,8 +351,11 @@ export const useHabit = (name: string) => {
 
             recordCompletion(habit)
 
+            setStored({ data: habit, updatedAt: new Date() })
             return habit
         },
+        initialData: stored?.data,
+        initialDataUpdatedAt: stored?.updatedAt?.getTime?.(),
         staleTime: 5 * 60 * 1000, // todo
         retry: handleError(`Failed to fetch habit data: ${name}`),
     })