useTimeline: use store to provide partial editing

src/timelines/Home.tsx

@@ -37,21 +37,25 @@ import { makeEventListener } from "@solid-primitives/event-listener";
 import BottomSheet from "../material/BottomSheet";
 import { $settings } from "../settings/stores";
 import { useStore } from "@nanostores/solid";
+import { vibrate } from "../platform/hardware";
 
 const TimelinePanel: Component<{
   client: mastodon.rest.Client;
   name: "home" | "public" | "trends";
   prefetch?: boolean;
 }> = (props) => {
-  const [timeline, { refetch: refetchTimeline, mutate: mutateTimeline }] =
-    useTimeline(() =>
-      props.name !== "trends"
-        ? props.client.v1.timelines[props.name]
-        : props.client.v1.trends.statuses,
-    );
+  const [
+    timeline,
+    snapshot,
+    { refetch: refetchTimeline, mutate: mutateTimeline },
+  ] = useTimeline(() =>
+    props.name !== "trends"
+      ? props.client.v1.timelines[props.name]
+      : props.client.v1.trends.statuses,
+  );
 
   const tlEndObserver = new IntersectionObserver(() => {
-    if (untrack(() => props.prefetch) && !timeline.loading)
+    if (untrack(() => props.prefetch) && !snapshot.loading)
       refetchTimeline({ direction: "old" });
   });
 
@@ -76,12 +80,19 @@ const TimelinePanel: Component<{
     client: mastodon.rest.Client,
     status: mastodon.v1.Status,
   ) => {
-    const reblogged = false;
-    mutateTimeline((o) => {
-      Object.assign(o[index].reblog ?? o[index], {
-        reblogged: !reblogged,
-      });
-      return o;
+    const reblogged = status.reblog
+      ? status.reblog.reblogged
+      : status.reblogged;
+    vibrate(50);
+    mutateTimeline(index, (x) => {
+      if (x.reblog) {
+        x.reblog = { ...x.reblog, reblogged: !reblogged };
+        return Object.assign({}, x);
+      } else {
+        return Object.assign({}, x, {
+          reblogged: !reblogged,
+        });
+      }
     });
     const result = reblogged
       ? await client.v1.statuses.$select(status.id).unreblog()
@@ -98,7 +109,7 @@ const TimelinePanel: Component<{
   return (
     <>
       <div>
-        <For each={timeline()}>
+        <For each={timeline}>
           {(item, index) => {
             return (
               <TootThread
@@ -113,12 +124,12 @@ const TimelinePanel: Component<{
       </div>
 
       <div ref={(e) => tlEndObserver.observe(e)}></div>
-      <Show when={timeline.loading}>
+      <Show when={snapshot.loading}>
         <div class="loading-line" style={{ width: "100%" }}>
           <LinearProgress />
         </div>
       </Show>
-      <Show when={timeline.error}>
+      <Show when={snapshot.error}>
         <div
           style={{
             display: "flex",
@@ -132,7 +143,7 @@ const TimelinePanel: Component<{
           </Button>
         </div>
       </Show>
-      <Show when={!props.prefetch && !timeline.loading}>
+      <Show when={!props.prefetch && !snapshot.loading}>
         <div
           style={{
             display: "flex",