wip: update widget list

src/utils/hooks/useWidget.ts

@@ -17,6 +17,32 @@ export function useWidget() {
     },
   });
 
+  const replaceWidget = useMutation({
+    mutationFn: async ({ currentId, widget }: { currentId: string; widget: Widget }) => {
+      // Cancel any outgoing refetches
+      await queryClient.cancelQueries({ queryKey: ['widgets'] });
+
+      // Snapshot the previous value
+      const prevWidgets = queryClient.getQueryData(['widgets']);
+
+      // create new widget
+      await db.removeWidget(currentId);
+      const newWidget = await db.createWidget(widget.kind, widget.title, widget.content);
+
+      // Optimistically update to the new value
+      queryClient.setQueryData(['widgets'], (prev: Widget[]) => [
+        ...prev.filter((t) => t.id !== currentId),
+        newWidget,
+      ]);
+
+      // Return a context object with the snapshotted value
+      return { prevWidgets };
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['widgets'] });
+    },
+  });
+
   const removeWidget = useMutation({
     mutationFn: async (id: string) => {
       // Cancel any outgoing refetches
@@ -41,5 +67,5 @@ export function useWidget() {
     },
   });
 
-  return { addWidget, removeWidget };
+  return { addWidget, replaceWidget, removeWidget };
 }