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> = {
-  onRetoot?: (value: T) => void;
-  onFavourite?: (value: T) => void;
-  onBookmark?: (value: T) => void;
-  onReply?: (
-    value: T,
+export type TootEnv = {
+  boost: (value: mastodon.v1.Status) => void;
+  favourite: (value: mastodon.v1.Status) => void;
+  bookmark: (value: mastodon.v1.Status) => void;
+  reply?: (
+    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}
-            multiple={toot().poll!.multiple}
-            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 })}
+            value={toot().poll!}
+            status={toot()}
           />
         </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>
     </>