RegularToot: refactor, add env context

src/timelines/RegularToot.tsx

@@ -7,6 +7,8 @@ import {
   createRenderEffect,
   createSignal,
   type Setter,
+  createContext,
+  useContext,
 } from "solid-js";
 import tootStyle from "./toot.module.css";
 import { formatRelative, parseISO } from "date-fns";
@@ -38,27 +40,38 @@ import BoostIcon from "./toots/BoostIcon";
 import PreviewCard from "./toots/PreviewCard";
 import TootPoll from "./toots/TootPoll";
 
-type TootActionGroupProps<T extends mastodon.v1.Status> = {
+export type TootEnv = {
-  onRetoot?: (value: T) => void;
+  boost: (value: mastodon.v1.Status) => void;
-  onFavourite?: (value: T) => void;
+  favourite: (value: mastodon.v1.Status) => void;
-  onBookmark?: (value: T) => void;
+  bookmark: (value: mastodon.v1.Status) => void;
-  onReply?: (
+  reply?: (
-    value: T,
+    value: mastodon.v1.Status,
     event: MouseEvent & { currentTarget: HTMLButtonElement },
   ) => void;
+  vote: (
+    status: mastodon.v1.Status,
+    votes: readonly number[],
+  ) => void | Promise<void>;
 };
 
+const TootEnvContext = /* @__PURE__ */ createContext<TootEnv>();
+
+export const TootEnvProvider = TootEnvContext.Provider;
+
+export function useTootEnv() {
+  const env = useContext(TootEnvContext);
+  if (!env) {
+    throw new TypeError("environment not found, use TootEnvProvider to provide")
+  }
+  return env
+}
+
 type RegularTootProps = {
   status: mastodon.v1.Status;
   actionable?: boolean;
   evaluated?: boolean;
   thread?: "top" | "bottom" | "middle";
-
+} &
-  onVote?: (value: {
-    status: mastodon.v1.Status;
-    votes: readonly number[];
-  }) => void | Promise<void>;
-} & TootActionGroupProps<mastodon.v1.Status> &
   JSX.HTMLElementTags["article"];
 
 function isolatedCallback(e: MouseEvent) {
@@ -79,8 +92,9 @@ export function findRootToot(element: HTMLElement) {
 }
 
 function TootActionGroup<T extends mastodon.v1.Status>(
-  props: TootActionGroupProps<T> & { value: T },
+  props: { value: T },
 ) {
+  const {reply, boost, favourite, bookmark} = useTootEnv()
   let actGrpElement: HTMLDivElement;
   const toot = () => props.value;
   return (
@@ -89,10 +103,10 @@ function TootActionGroup<T extends mastodon.v1.Status>(
       class={tootStyle.tootBottomActionGrp}
       onClick={isolatedCallback}
     >
-      <Show when={props.onReply}>
+      <Show when={reply}>
         <Button
           class={tootStyle.tootActionWithCount}
-          onClick={[props.onReply!, props.value]}
+          onClick={[reply!, props.value]}
         >
           <ReplyAll />
           <span>{toot().repliesCount}</span>
@@ -104,7 +118,7 @@ function TootActionGroup<T extends mastodon.v1.Status>(
         style={{
           color: toot().reblogged ? "var(--tutu-color-primary)" : undefined,
         }}
-        onClick={() => props.onRetoot?.(toot())}
+        onClick={[boost, props.value]}
       >
         <Repeat />
         <span>{toot().reblogsCount}</span>
@@ -114,7 +128,7 @@ function TootActionGroup<T extends mastodon.v1.Status>(
         style={{
           color: toot().favourited ? "var(--tutu-color-primary)" : undefined,
         }}
-        onClick={() => props.onFavourite?.(toot())}
+        onClick={[favourite, props.value]}
       >
         {toot().favourited ? <Star /> : <StarOutline />}
         <span>{toot().favouritesCount}</span>
@@ -124,7 +138,7 @@ function TootActionGroup<T extends mastodon.v1.Status>(
         style={{
           color: toot().bookmarked ? "var(--tutu-color-primary)" : undefined,
         }}
-        onClick={() => props.onBookmark?.(toot())}
+        onClick={[bookmark, props.value]}
       >
         {toot().bookmarked ? <Bookmark /> : <BookmarkAddOutlined />}
       </Button>
@@ -243,11 +257,10 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  */
 const RegularToot: Component<RegularTootProps> = (props) => {
   let rootRef: HTMLElement;
-  const [managed, managedActionGroup, pollProps, rest] = splitProps(
+  const {vote} = useTootEnv()
+  const [managed, rest] = splitProps(
     props,
     ["status", "lang", "class", "actionable", "evaluated", "thread"],
-    ["onRetoot", "onFavourite", "onBookmark", "onReply"],
-    ["onVote"],
   );
   const now = useTimeSource();
   const status = () => managed.status;
@@ -361,18 +374,8 @@ const RegularToot: Component<RegularTootProps> = (props) => {
         </Show>
         <Show when={toot().poll}>
           <TootPoll
-            options={toot().poll!.options}
+            value={toot().poll!}
-            multiple={toot().poll!.multiple}
+            status={toot()}
-            votesCount={toot().poll!.votesCount}
-            expired={toot().poll!.expired}
-            expiredAt={
-              toot().poll!.expiresAt
-                ? parseISO(toot().poll!.expiresAt!)
-                : undefined
-            }
-            voted={toot().poll!.voted}
-            ownVotes={toot().poll!.ownVotes || undefined}
-            onVote={(votes) => pollProps.onVote?.({ status: status(), votes })}
           />
         </Show>
         <Show when={managed.actionable}>
@@ -380,7 +383,7 @@ const RegularToot: Component<RegularTootProps> = (props) => {
             class={cardStyle.cardNoPad}
             style={{ "margin-top": "8px" }}
           />
-          <TootActionGroup value={toot()} {...managedActionGroup} />
+          <TootActionGroup value={toot()} />
         </Show>
       </article>
     </>

src/timelines/TootBottomSheet.tsx

@@ -13,7 +13,10 @@ import { Title } from "~material/typography";
 import { Close as CloseIcon } from "@suid/icons-material";
 import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
-import RegularToot, { findElementActionable } from "./RegularToot";
+import RegularToot, {
+  findElementActionable,
+  TootEnvProvider,
+} from "./RegularToot";
 import type { mastodon } from "masto";
 import cards from "~material/cards.module.css";
 import { css } from "solid-styled";
@@ -169,6 +172,33 @@ const TootBottomSheet: Component = (props) => {
     return Array.from(new Set(values).keys());
   };
 
+  const vote = async (status: mastodon.v1.Status, votes: readonly number[]) => {
+    const client = session()?.client;
+    if (!client) return;
+
+    const toot = status.reblog ?? status;
+    if (!toot.poll) return;
+
+    const npoll = await client.v1.polls.$select(toot.poll.id).votes.create({
+      choices: votes,
+    });
+
+    if (status.reblog) {
+      setRemoteToot({
+        ...status,
+        reblog: {
+          ...status.reblog,
+          poll: npoll,
+        },
+      });
+    } else {
+      setRemoteToot({
+        ...status,
+        poll: npoll,
+      });
+    }
+  };
+
   const handleMainTootClick = (
     event: MouseEvent & { currentTarget: HTMLElement },
   ) => {
@@ -255,23 +285,29 @@ const TootBottomSheet: Component = (props) => {
 
           <article>
             <Show when={toot()}>
-              <RegularToot
+              <TootEnvProvider
-                id={`toot-${toot()!.id}`}
+                value={{
-                class={cards.card}
+                  bookmark: onBookmark,
-                style={{
+                  boost: onBoost,
-                  "scroll-margin-top":
+                  favourite: onFav,
-                    "calc(var(--scaffold-topbar-height) + 20px)",
+                  vote,
-                  "cursor": "auto",
-                  "user-select": "auto",
                 }}
-                status={toot()!}
+              >
-                actionable={!!actSession()}
+                <RegularToot
-                evaluated={true}
+                  id={`toot-${toot()!.id}`}
-                onBookmark={onBookmark}
+                  class={cards.card}
-                onRetoot={onBoost}
+                  style={{
-                onFavourite={onFav}
+                    "scroll-margin-top":
-                onClick={handleMainTootClick}
+                      "calc(var(--scaffold-topbar-height) + 20px)",
-              ></RegularToot>
+                    cursor: "auto",
+                    "user-select": "auto",
+                  }}
+                  status={toot()!}
+                  actionable={!!actSession()}
+                  evaluated={true}
+                  onClick={handleMainTootClick}
+                ></RegularToot>
+              </TootEnvProvider>
             </Show>
           </article>
 

src/timelines/TootList.tsx

@@ -14,6 +14,7 @@ import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import RegularToot, {
   findElementActionable,
   findRootToot,
+  TootEnvProvider,
 } from "./RegularToot";
 import cardStyle from "~material/cards.module.css";
 import type { ThreadNode } from "../masto/timelines";
@@ -232,13 +233,10 @@ const TootList: Component<{
     openFullScreenToot(status, element, true);
   };
 
-  const vote = async ({
+  const vote = async (
-    status,
+    status: mastodon.v1.Status,
-    votes,
+    votes: readonly number[]
-  }: {
+  ) => {
-    status: mastodon.v1.Status;
-    votes: readonly number[];
-  }) => {
     const client = session()?.client;
     if (!client) return;
 
@@ -263,7 +261,6 @@ const TootList: Component<{
         poll: npoll,
       });
     }
-
   };
 
   return (
@@ -273,49 +270,50 @@ const TootList: Component<{
         return <p>Oops: {String(err)}</p>;
       }}
     >
-      <div ref={props.ref} id={props.id} class="toot-list">
+      <TootEnvProvider value={{
-        <Index each={props.threads}>
+        boost: toggleBoost,
-          {(threadId, threadIdx) => {
+        bookmark: onBookmark,
-            const thread = createMemo(() =>
+        favourite: toggleFavourite,
-              props.onUnknownThread(threadId())?.reverse(),
+        reply: reply,
-            );
+        vote: vote
+      }}>
+        <div ref={props.ref} id={props.id} class="toot-list">
+          <Index each={props.threads}>
+            {(threadId, threadIdx) => {
+              const thread = createMemo(() =>
+                props.onUnknownThread(threadId())?.reverse(),
+              );
 
-            const threadLength = () => thread()?.length ?? 0;
+              const threadLength = () => thread()?.length ?? 0;
 
-            return (
+              return (
-              <Index each={thread()}>
+                <Index each={thread()}>
-                {(threadNode, index) => {
+                  {(threadNode, index) => {
-                  const status = () => threadNode().value;
+                    const status = () => threadNode().value;
 
-                  return (
+                    return (
-                    <RegularToot
+                      <RegularToot
-                      data-status-id={status().id}
+                        data-status-id={status().id}
-                      data-thread={threadIdx}
+                        data-thread-sort={index}
-                      data-thread-len={threadLength()}
+                        status={status()}
-                      data-thread-sort={index}
+                        thread={
-                      status={status()}
+                          threadLength() > 1
-                      thread={
+                            ? positionTootInThread(index, threadLength())
-                        threadLength() > 1
+                            : undefined
-                          ? positionTootInThread(index, threadLength())
+                        }
-                          : undefined
+                        class={cardStyle.card}
-                      }
+                        evaluated={checkIsExpended(status())}
-                      class={cardStyle.card}
+                        actionable={checkIsExpended(status())}
-                      evaluated={checkIsExpended(status())}
+                        onClick={[onItemClick, status()]}
-                      actionable={checkIsExpended(status())}
+                      />
-                      onBookmark={onBookmark}
+                    );
-                      onRetoot={toggleBoost}
+                  }}
-                      onFavourite={toggleFavourite}
+                </Index>
-                      onReply={reply}
+              );
-                      onVote={vote}
+            }}
-                      onClick={[onItemClick, status()]}
+          </Index>
-                    />
+        </div>
-                  );
+      </TootEnvProvider>
-                }}
-              </Index>
-            );
-          }}
-        </Index>
-      </div>
     </ErrorBoundary>
   );
 };

src/timelines/toots/TootPoll.tsx

@@ -28,21 +28,17 @@ import { useTimeSource } from "~platform/timesrc";
 import { useDateFnLocale } from "~platform/i18n";
 import TootPollDialog from "./TootPollDialog";
 import { ANIM_CURVE_STD } from "~material/theme";
+import { useTootEnv } from "../RegularToot";
 
 type TootPollProps = {
-  options: Readonly<mastodon.v1.Poll["options"]>;
+  value: mastodon.v1.Poll
-  multiple?: boolean;
+  status: mastodon.v1.Status
-  votesCount: number;
-  expired?: boolean;
-  expiredAt?: Date;
-  voted?: boolean;
-  ownVotes?: readonly number[];
-
-  onVote(votes: readonly number[]): void | Promise<void>;
 };
 
 const TootPoll: Component<TootPollProps> = (props) => {
   let list: HTMLUListElement;
+  const {vote}= useTootEnv()
+
   const now = useTimeSource();
   const dateFnLocale = useDateFnLocale();
   const [mustShowResult, setMustShowResult] = createSignal<boolean>();
@@ -50,24 +46,26 @@ const TootPoll: Component<TootPollProps> = (props) => {
 
   const [initialVote, setInitialVote] = createSignal(0);
 
+  const poll = () => props.value
+
   const isShowResult = () => {
     const n = mustShowResult();
     if (typeof n !== "undefined") {
       return n;
     }
 
-    return props.expired || props.voted;
+    return poll().expired || poll().voted;
   };
 
   const isOwnVote = createSelector(
-    () => props.ownVotes,
+    () => poll().ownVotes,
     (idx: number, votes) => votes?.includes(idx) || false,
   );
 
   const openVote = (i: number, event: Event) => {
     event.stopPropagation();
 
-    if (props.expired || props.voted) {
+    if (poll().expired || poll().voted) {
       return;
     }
 
@@ -100,13 +98,13 @@ const TootPoll: Component<TootPollProps> = (props) => {
   return (
     <section class="TootPoll">
       <div class="hints">
-        <span>{props.votesCount} votes in total</span>
+        <span>{poll().votesCount} votes in total</span>
-        <Show when={props.expired}>
+        <Show when={poll().expired}>
           <span>Poll is ended</span>
         </Show>
       </div>
       <List ref={list!} disablePadding class="option-list">
-        <Index each={props.options}>
+        <Index each={poll().options}>
           {(option, index) => {
             return (
               <>
@@ -140,7 +138,7 @@ const TootPoll: Component<TootPollProps> = (props) => {
                   </Show>
 
                   <Show
-                    when={props.multiple}
+                    when={poll().multiple}
                     fallback={
                       <Radio
                         checked={isOwnVote(index)}
@@ -164,14 +162,14 @@ const TootPoll: Component<TootPollProps> = (props) => {
         <Button onClick={animateAndSetMustShow}>
           {isShowResult() ? "Hide result" : "Reveal result"}
         </Button>
-        <Show when={props.expiredAt}>
+        <Show when={poll().expiresAt}>
           <span>
             <span style={{ "margin-inline-end": "0.5ch" }}>
-              {isBefore(now(), props.expiredAt!) ? "Expire in" : "Expired"}
+              {isBefore(now(), poll().expiresAt!) ? "Expire in" : "Expired"}
             </span>
 
-            <time dateTime={props.expiredAt!.toISOString()}>
+            <time dateTime={poll().expiresAt!}>
-              {formatDistance(now(), props.expiredAt!, {
+              {formatDistance(now(), poll().expiresAt!, {
                 locale: dateFnLocale(),
               })}
             </time>
@@ -181,8 +179,8 @@ const TootPoll: Component<TootPollProps> = (props) => {
 
       <TootPollDialog
         open={showVoteDialog()}
-        options={props.options}
+        options={poll().options}
-        onVote={(votes) => console.debug(votes)}
+        onVote={[vote, props.status]}
         onClose={() => setShowVoteDialog(false)}
         initialVotes={[initialVote()]}
       />

src/timelines/toots/TootPollDialog.tsx

@@ -26,7 +26,13 @@ export type TootPollDialogPoll = {
   initialVotes?: readonly number[];
   multiple?: boolean;
 
-  onVote(votes: readonly number[]): void | Promise<void>;
+  onVote: [
+    (
+      status: mastodon.v1.Status,
+      votes: readonly number[],
+    ) => void | Promise<void>,
+    mastodon.v1.Status,
+  ];
   onClose?: BottomSheetProps["onClose"] &
     ((reason: "cancel" | "success") => void);
 };
@@ -50,7 +56,7 @@ const TootPollDialog: Component<TootPollDialogPoll> = (props) => {
   const sendVote = async () => {
     setInProgress(true);
     try {
-      await props.onVote(votes());
+      await props.onVote[0](props.onVote[1], votes());
     } catch (reason) {
       console.error(reason);
       props.onClose?.("cancel");