improved date picker; added optimistic collection updates

Author: roboslone

src/components/habit/card.tsx

@@ -62,13 +62,9 @@ export const HabitCard: React.FC = () => {
     return (
         <div
             {...extraProps}
-            className={cn(
-                "habit-card rounded truncate w-full max-w-211 flex flex-col gap-1",
-                {
-                    "min-h-40": !displayOptions.hideChart && !isReordering,
-                },
-                { "cursor-move": isReordering },
-            )}
+            className={cn("habit-card rounded truncate w-full max-w-211 flex flex-col gap-1", {
+                "min-h-40": !displayOptions.hideChart && !isReordering,
+            })}
         >
             <div
                 className={cn(

src/components/habit/date-picker.tsx

@@ -1,4 +1,3 @@
-import { DateContext } from "@/components/date/context"
 import { Button } from "@/components/ui/button"
 import { Calendar } from "@/components/ui/calendar"
 import {
@@ -9,20 +8,16 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "@/components/ui/dialog"
-import { formatDate } from "@/lib/dates"
-import { ArrowRight, CalendarIcon, Undo2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { ArrowRight, CalendarIcon, CalendarSearch, Undo2 } from "lucide-react"
 import React from "react"
 
 import { useHabitContext } from "./context"
 
 export const HabitDatePicker: React.FC = () => {
-    const today = React.useContext(DateContext)
     const { selectedDate, setSelectedDate } = useHabitContext()
     const [open, setOpen] = React.useState(false)
 
-    const dateStr = formatDate(selectedDate ?? today)
-    const todayStr = formatDate(new Date())
-
     const handleSelect = (d: Date | undefined) => {
         setSelectedDate(d || new Date())
         setOpen(false)
@@ -34,7 +29,7 @@ export const HabitDatePicker: React.FC = () => {
                 variant="ghost"
                 size="sm"
                 className="w-fit"
-                disabled={dateStr === todayStr}
+                disabled={selectedDate === undefined}
                 onClick={() => setSelectedDate(undefined)}
             >
                 <Undo2 />
@@ -44,8 +39,12 @@ export const HabitDatePicker: React.FC = () => {
                 <DialogTrigger asChild>
                     <div className="flex items-center gap-2">
                         <Button variant="ghost" size="sm" className="w-fit">
-                            <CalendarIcon />
-                            {selectedDate?.toLocaleDateString()}
+                            <CalendarSearch
+                                className={cn({ "text-amber-600": selectedDate !== undefined })}
+                            />
+                            {selectedDate === undefined
+                                ? "Today"
+                                : selectedDate?.toLocaleDateString()}
                         </Button>
                     </div>
                 </DialogTrigger>

src/components/habit/icon.tsx

@@ -12,11 +12,20 @@ export const HabitIcon: React.FC<LucideProps> = (props) => {
     const color = colors.index[colors.fromString(habit.color)]
 
     if (isFetching) {
-        return <Loader2 {...props} className={cn("animate-spin", color.text, props.className)} />
+        return (
+            <Loader2
+                data-testid="habit-icon-locader"
+                {...props}
+                className={cn("animate-spin", color.text, props.className)}
+            />
+        )
     }
 
-    const className = cn(color.text, props.className)
+    const className = cn(color.text, props.className, {
+        "cursor-move": isReordering,
+    })
+    const finalProps = { ...props, className, "data-testid": "habit-icon" }
 
-    if (isReordering) return React.createElement(GripVertical, { ...props, className })
-    return icons.render(habit.icon, { ...props, className })
+    if (isReordering) return React.createElement(GripVertical, finalProps)
+    return icons.render(habit.icon, finalProps)
 }

src/components/ordering/provider.tsx

@@ -75,18 +75,19 @@ export const OrderingProvider: React.FC<React.PropsWithChildren> = ({ children }
         })
     }
 
+    const orderHabits = (isReordering: boolean) =>
+        reorder(habits, completed, collection.order, isReordering)
+
     const [isReordering, _setReordering] = React.useState(false)
-    const [orderedNames, setOrderedNames] = React.useState<string[]>(
-        reorder(habits, completed, collection.order, isReordering),
-    )
+    const [orderedNames, setOrderedNames] = React.useState<string[]>(orderHabits(isReordering))
 
     React.useEffect(() => {
         setCompleted(new Set())
     }, [date])
 
     React.useEffect(() => {
-        setOrderedNames(reorder(habits, completed, collection.order, isReordering))
-    }, [completed, habits])
+        setOrderedNames(orderHabits(isReordering))
+    }, [completed, habits, collection.order])
 
     const handleDragEnd = (event: DragEndEvent) => {
         const { active, over } = event
@@ -105,7 +106,7 @@ export const OrderingProvider: React.FC<React.PropsWithChildren> = ({ children }
     const updateOrder = useUpdateOrder()
     const setReordering = (v: boolean) => {
         _setReordering(v)
-        setOrderedNames(reorder(habits, completed, collection.order, v))
+        setOrderedNames(orderHabits(v))
 
         if (!v && orderChanged(collection.order, orderedNames)) {
             updateOrder.mutate(orderedNames)

src/lib/queries.ts

@@ -347,13 +347,16 @@ const usePushCollection = () => {
     const repo = useRepoContext()
     const { collection } = useCollectionContext()
     const octokit = useOctokit()
+    const onSettled = useInvalidateCollection()
 
-    return (update: (c: Collection) => void, message: string) => {
+    const mutate = (update: (c: Collection) => void, message: string) => {
         const copy = clone(CollectionSchema, collection)
 
         update(copy)
         copy.sha = ""
 
+        client.setQueryData(["repo", repo.id, "collection"], copy)
+
         return octokit.rest.repos.createOrUpdateFileContents({
             path: "collection.json",
             owner: account.login,
@@ -364,6 +367,8 @@ const usePushCollection = () => {
             headers: { "If-None-Match": "" },
         })
     }
+
+    return { mutate, onSettled }
 }
 
 const useInvalidateCollection = () => {
@@ -374,41 +379,37 @@ const useInvalidateCollection = () => {
 }
 
 export const useDeleteTags = () => {
-    const pushCollection = usePushCollection()
-    const invalidateCollection = useInvalidateCollection()
+    const { mutate, onSettled } = usePushCollection()
 
     return useMutation({
         mutationFn: (tags: string[]) =>
-            pushCollection((c) => {
+            mutate((c) => {
                 for (const name of tags) {
                     delete c.tags[name]
                 }
             }, `deleted ${tags.length} tag(s)`),
-        onSettled: invalidateCollection,
+        onSettled,
         retry: handleError("Failed to delete tags", { maxFailures: 0 }),
     })
 }
 
 export const useNewTag = () => {
-    const pushCollection = usePushCollection()
-    const invalidateCollection = useInvalidateCollection()
+    const { mutate, onSettled } = usePushCollection()
 
     return useMutation({
         mutationFn: (tag: Tag) =>
-            pushCollection((c) => (c.tags[tag.name] = tag), `created tag - ${tag.name}`),
-        onSettled: invalidateCollection,
+            mutate((c) => (c.tags[tag.name] = tag), `created tag - ${tag.name}`),
+        onSettled,
         retry: handleError("Failed to create tag", { maxFailures: 0 }),
     })
 }
 
 export const useUpdateOrder = () => {
-    const pushCollection = usePushCollection()
-    const invalidateCollection = useInvalidateCollection()
+    const { mutate, onSettled } = usePushCollection()
 
     return useMutation({
-        mutationFn: (order: string[]) =>
-            pushCollection((c) => (c.order = order), `reordered habits`),
-        onSettled: invalidateCollection,
+        mutationFn: (order: string[]) => mutate((c) => (c.order = order), `reordered habits`),
+        onSettled,
         retry: handleError("Failed to update order", { maxFailures: 0 }),
     })
 }