RegularToot: refactor, add env context

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"]>;
-  multiple?: boolean;
-  votesCount: number;
-  expired?: boolean;
-  expiredAt?: Date;
-  voted?: boolean;
-  ownVotes?: readonly number[];
-
-  onVote(votes: readonly number[]): void | Promise<void>;
+  value: mastodon.v1.Poll
+  status: mastodon.v1.Status
 };
 
 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>
-        <Show when={props.expired}>
+        <span>{poll().votesCount} votes in total</span>
+        <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()}>
-              {formatDistance(now(), props.expiredAt!, {
+            <time dateTime={poll().expiresAt!}>
+              {formatDistance(now(), poll().expiresAt!, {
                 locale: dateFnLocale(),
               })}
             </time>
@@ -181,8 +179,8 @@ const TootPoll: Component<TootPollProps> = (props) => {
 
       <TootPollDialog
         open={showVoteDialog()}
-        options={props.options}
-        onVote={(votes) => console.debug(votes)}
+        options={poll().options}
+        onVote={[vote, props.status]}
         onClose={() => setShowVoteDialog(false)}
         initialVotes={[initialVote()]}
       />