fix #35: the actions don't update the status

src/timelines/TootList.tsx

@@ -20,6 +20,8 @@ import RegularToot, {
   findRootToot,
 } from "./RegularToot";
 import cardStyle from "../material/cards.module.css";
+import type { ReactiveMap } from "@solid-primitives/map";
+import type { ThreadNode } from "../masto/timelines";
 
 function positionTootInThread(index: number, threadLength: number) {
   if (index === 0) {
@@ -34,7 +36,7 @@ const TootList: Component<{
   ref?: Ref<HTMLDivElement>;
   id?: string;
   threads: readonly string[];
-  onUnknownThread: (id: string) => { value: mastodon.v1.Status }[] | undefined;
+  onUnknownThread: (id: string) => ThreadNode[] | undefined;
   onChangeToot: (id: string, value: mastodon.v1.Status) => void;
 }> = (props) => {
   const session = useDefaultSession();
@@ -71,7 +73,7 @@ const TootList: Component<{
       });
     }
 
-    const result = reblogged
+    /* const result = reblogged
       ? await client.v1.statuses.$select(status.id).unreblog()
       : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
 
@@ -82,13 +84,15 @@ const TootList: Component<{
       });
     } else {
       props.onChangeToot(status.id, result);
-    }
+    } */
   };
 
   const toggleFavourite = async (status: mastodon.v1.Status) => {
     const client = session()?.client;
     if (!client) return;
     const ovalue = status.favourited;
+    props.onChangeToot(status.id, { ...status, favourited: !ovalue });
+
     const result = ovalue
       ? await client.v1.statuses.$select(status.id).unfavourite()
       : await client.v1.statuses.$select(status.id).favourite();
@@ -170,11 +174,12 @@ const TootList: Component<{
   const checkIsExpended = (status: mastodon.v1.Status) =>
     checkIsExpendedId(status.id);
 
-  const getPath = (itemId: string) => {
-    return props
-      .onUnknownThread(itemId)!
-      .reverse()
-      .map((x) => x.value);
+  const reply = (
+    status: mastodon.v1.Status,
+    event: { currentTarget: HTMLElement },
+  ) => {
+    const element = findRootToot(event.currentTarget);
+    openFullScreenToot(status, element, true);
   };
 
   return (
@@ -184,38 +189,46 @@ const TootList: Component<{
       }}
     >
       <div ref={props.ref} id={props.id} class="toot-list">
-        <For each={props.threads}>
-          {(itemId) => {
-            const toots = createMemo(() => getPath(itemId));
+        <Index each={props.threads}>
+          {(threadId, threadIdx) => {
+            const thread = createMemo(() =>
+              props.onUnknownThread(threadId())?.reverse(),
+            );
+
+            const threadLength = () => thread()?.length ?? 0;
+
             return (
-              <Index each={toots()}>
-                {(status, index) => (
-                  <RegularToot
-                    data-status-id={status().id}
-                    data-thread-sort={index}
-                    status={status()}
-                    thread={
-                      toots().length > 1
-                        ? positionTootInThread(index, toots().length)
-                        : undefined
-                    }
-                    class={cardStyle.card}
-                    evaluated={checkIsExpended(status())}
-                    actionable={checkIsExpended(status())}
-                    onBookmark={onBookmark}
-                    onRetoot={toggleBoost}
-                    onFavourite={toggleFavourite}
-                    onReply={(status, event) => {
-                      const element = findRootToot(event.currentTarget);
-                      openFullScreenToot(status, element, true);
-                    }}
-                    onClick={[onItemClick, status()]}
-                  />
-                )}
+              <Index each={thread()}>
+                {(threadNode, index) => {
+                  const status = () => threadNode().value;
+
+                  return (
+                    <RegularToot
+                      data-status-id={status().id}
+                      data-thread={threadIdx}
+                      data-thread-len={threadLength()}
+                      data-thread-sort={index}
+                      status={status()}
+                      thread={
+                        threadLength() > 1
+                          ? positionTootInThread(index, threadLength())
+                          : undefined
+                      }
+                      class={cardStyle.card}
+                      evaluated={checkIsExpended(status())}
+                      actionable={checkIsExpended(status())}
+                      onBookmark={onBookmark}
+                      onRetoot={toggleBoost}
+                      onFavourite={toggleFavourite}
+                      onReply={reply}
+                      onClick={[onItemClick, status()]}
+                    />
+                  );
+                }}
               </Index>
             );
           }}
-        </For>
+        </Index>
       </div>
     </ErrorBoundary>
   );