Added polls to waves

ecency · Jun 7, 2024 · 6dc7cc7 · 6dc7cc7
1 parent bffa20f
commit 6dc7cc7
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 44 deletions.
diff --git a/src/common/features/decks/columns/deck-items/deck-thread-item.tsx b/src/common/features/decks/columns/deck-items/deck-thread-item.tsx
@@ -18,6 +18,8 @@ import { DeckThreadItemHeader } from "./deck-thread-item-header";
 import { dateToRelative } from "../../../../helper/parse-date";
 import EntryMenu from "../../../../components/entry-menu";
 import { Button } from "@ui/button";
+import { useEntryPollExtractor } from "../../../../pages/entry/utils";
+import { PollWidget } from "../../../polls";
 
 export interface ThreadItemProps {
   initialEntry: IdentifiableEntry;
@@ -62,6 +64,8 @@ export const ThreadItem = ({
   const [status, setStatus] = useState<"default" | "pending">("default");
   const [intervalStarted, setIntervalStarted] = useState(false);
 
+  const poll = useEntryPollExtractor(entry);
+
   useEntryChecking(entry, intervalStarted, (nextEntry) => {
     updateCache([
       { ...nextEntry, host: initialEntry.host, container: initialEntry.container } as Entry
@@ -126,6 +130,11 @@ export const ThreadItem = ({
         setRenderInitiated={setRenderInitiated}
         onResize={onResize}
       />
+      {poll && (
+        <div className="p-4">
+          <PollWidget entry={entry} compact={true} poll={poll} isReadOnly={false} />
+        </div>
+      )}
       {entry.updated !== entry.created && (
         <div className="px-3 pb-3 updated-label">
           {_t("decks.columns.updated", { n: dateToRelative(entry.updated) })}

diff --git a/src/common/features/decks/deck-threads-form/api/threads-api.ts b/src/common/features/decks/deck-threads-form/api/threads-api.ts
@@ -1,18 +1,20 @@
 import { Entry } from "../../../../store/entries/types";
-import { createReplyPermlink, makeJsonMetaDataReply } from "../../../../helper/posting";
+import { createReplyPermlink } from "../../../../helper/posting";
 import { comment } from "../../../../api/operations";
 import tempEntry from "../../../../helper/temp-entry";
 import { FullAccount } from "../../../../store/accounts/types";
-import { version } from "../../../../../../package.json";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { v4 } from "uuid";
 import { ThreadItemEntry } from "../../columns/deck-threads-manager";
 import { useContext } from "react";
 import { EntriesCacheContext } from "../../../../core";
+import { PollsContext } from "../../../../pages/submit/hooks/polls-manager";
+import { EntryMetadataManagement } from "../../../entry-management";
 
 export function useThreadsApi() {
   const { activeUser } = useMappedStore();
   const { addReply, updateRepliesCount } = useContext(EntriesCacheContext);
+  const { activePoll } = useContext(PollsContext);
 
   const request = async (entry: Entry, raw: string, editingEntry?: ThreadItemEntry) => {
     if (!activeUser || !activeUser.data.__loaded) {
@@ -24,7 +26,12 @@ export function useThreadsApi() {
     const permlink = editingEntry?.permlink ?? createReplyPermlink(entry.author);
     const tags = raw.match(/\#[a-zA-Z0-9]+/g)?.map((tag) => tag.replace("#", "")) ?? ["ecency"];
 
-    const jsonMeta = makeJsonMetaDataReply(tags, version);
+    const jsonMeta = EntryMetadataManagement.EntryMetadataManager.shared
+      .builder()
+      .default()
+      .withTags(tags)
+      .withPoll(activePoll)
+      .build();
 
     await comment(author, parentAuthor, parentPermlink, permlink, "", raw, jsonMeta, null, true);
 

diff --git a/src/common/features/decks/deck-threads-form/api/use-community-api.ts b/src/common/features/decks/deck-threads-form/api/use-community-api.ts
@@ -5,9 +5,12 @@ import { comment } from "../../../../api/operations";
 import tempEntry from "../../../../helper/temp-entry";
 import { Entry } from "../../../../store/entries/types";
 import { EntryMetadataManagement } from "../../../entry-management";
+import { useContext } from "react";
+import { PollsContext } from "../../../../pages/submit/hooks/polls-manager";
 
 export function useCommunityApi() {
   const { activeUser, addEntry } = useMappedStore();
+  const { activePoll } = useContext(PollsContext);
 
   const request = async (host: string, raw: string, editingEntry?: Entry) => {
     if (!activeUser || !activeUser.data.__loaded) {
@@ -35,6 +38,7 @@ export function useCommunityApi() {
         hostTag,
         ...(raw.match(/\#[a-zA-Z0-9]+/g)?.map((tag) => tag.replace("#", "")) ?? ["ecency"])
       ])
+      .withPoll(activePoll)
       .build();
 
     await comment(author, "", hostTag, permlink, "", cleanedRaw, jsonMeta, options, true);

diff --git a/src/common/features/decks/deck-threads-form/deck-threads-form-control.tsx b/src/common/features/decks/deck-threads-form/deck-threads-form-control.tsx
@@ -1,8 +1,10 @@
 import { _t } from "../../../i18n";
-import React from "react";
+import React, { useContext } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { DeckThreadsFormToolbar } from "./deck-threads-form-toolbar";
 import { closeSvg } from "../../../img/svg";
+import { PollsContext } from "../../../pages/submit/hooks/polls-manager";
+import { PollWidget } from "../../polls";
 
 interface Props {
   text: string;
@@ -27,6 +29,8 @@ export const DeckThreadsFormControl = ({
   onAddVideo,
   video
 }: Props) => {
+  const { activePoll } = useContext(PollsContext);
+
   return (
     <>
       <div className="comment-body">
@@ -65,6 +69,11 @@ export const DeckThreadsFormControl = ({
             </div>
           </div>
         )}
+        {activePoll && (
+          <div className="py-4">
+            <PollWidget compact={true} poll={activePoll} isReadOnly={true} />
+          </div>
+        )}
         <DeckThreadsFormToolbar
           onAddImage={onAddImage}
           onEmojiPick={(v) => setText(`${text}${v}`)}

diff --git a/src/common/features/decks/deck-threads-form/deck-threads-form-toolbar.tsx b/src/common/features/decks/deck-threads-form/deck-threads-form-toolbar.tsx
@@ -1,6 +1,10 @@
-import React from "react";
+import React, { useContext, useState } from "react";
 import { DeckThreadsFormToolbarImagePicker } from "./deck-threads-form-toolbar-image-picker";
 import { DeckThreadsFormEmojiPicker } from "./deck-threads-form-emoji-picker";
+import { PollsCreation } from "../../polls";
+import { Button } from "@ui/button";
+import { UilChart } from "@iconscout/react-unicons";
+import { PollsContext } from "../../../pages/submit/hooks/polls-manager";
 
 interface Props {
   onAddImage: (url: string, name: string) => void;
@@ -9,11 +13,22 @@ interface Props {
 }
 
 export const DeckThreadsFormToolbar = ({ onAddImage, onEmojiPick, onAddVideo }: Props) => {
+  const { activePoll, setActivePoll, clearActivePoll } = useContext(PollsContext);
+  const [show, setShow] = useState(false);
+
   return (
     <div className="deck-threads-form-toolbar">
       <DeckThreadsFormToolbarImagePicker onAddImage={onAddImage} />
       <DeckThreadsFormEmojiPicker onPick={onEmojiPick} />
       {/*<DeckThreadsFormToolbarVideoPicker onSelect={onAddVideo} />*/}
+      <Button appearance="gray-link" icon={<UilChart />} onClick={() => setShow(true)} />
+      <PollsCreation
+        existingPoll={activePoll}
+        show={show}
+        setShow={setShow}
+        onAdd={setActivePoll}
+        onDeletePoll={clearActivePoll}
+      />
     </div>
   );
 };
diff --git a/src/common/features/decks/deck-threads-form/index.tsx b/src/common/features/decks/deck-threads-form/index.tsx
@@ -19,6 +19,7 @@ import { classNameObject } from "../../../helper/class-name-object";
 import usePrevious from "react-use/lib/usePrevious";
 import { Button } from "@ui/button";
 import { Alert } from "@ui/alert";
+import { PollsContext } from "../../../pages/submit/hooks/polls-manager";
 
 interface Props {
   className?: string;
@@ -46,6 +47,8 @@ export const DeckThreadsForm = ({
 
   const { global, activeUser, toggleUIProp } = useMappedStore();
   const { setShow, create, createReply } = useContext(DeckThreadsFormContext);
+  const { clearActivePoll } = useContext(PollsContext);
+
   const location = useLocation();
 
   const [localDraft, setLocalDraft] = useLocalStorage<Record<string, any>>(
@@ -188,6 +191,7 @@ export const DeckThreadsForm = ({
       setText("");
       setImage(null);
       setImageName(null);
+      clearActivePoll();
       _t("decks.threads-form.successfully-created");
     } catch (e) {
       console.error(e);

diff --git a/src/common/features/decks/index.tsx b/src/common/features/decks/index.tsx
@@ -14,6 +14,7 @@ import SSRSuspense from "../../components/ssr-suspense";
 import { classNameObject } from "../../helper/class-name-object";
 import useMount from "react-use/lib/useMount";
 import { DeckFloatingToolbarActivator } from "./deck-toolbar/deck-floating-toolbar-activator";
+import { PollsManager } from "../../pages/submit/hooks/polls-manager";
 
 interface Props {
   history: History;
@@ -40,43 +41,45 @@ export const Decks = ({ history }: Props) => {
       <DeckManager>
         {({ isDecksLoading }) => (
           <DeckThreadsManager>
-            <DeckThreadsFormManager>
-              {({ show: showThreadsForm }) => (
-                <div
-                  className={classNameObject({
-                    "decks grid grid-cols-deck items-center duration-300": true,
-                    "w-full": !isCollapsed,
-                    expanded: isExpanded,
-                    "toolbar-collapsed translate-x-[-72px] w-[calc(100%+72px)] sm:translate-x-0 sm:w-[auto]":
-                      isCollapsed,
-                    "thread-form-showed": showThreadsForm
-                  })}
-                >
-                  <DeckFloatingToolbarActivator
-                    open={!isCollapsed}
-                    setOpen={(v) => setIsCollapsed(!v)}
-                  />
-                  <DeckToolbar
-                    history={history}
-                    isExpanded={isExpanded}
-                    setIsExpanded={setIsExpanded}
-                  />
-                  <DeckThreadsForm className={showThreadsForm ? "show" : ""} persistable={true} />
-                  {isDecksLoading ? (
-                    <DeckLoader />
-                  ) : (
-                    <>
-                      <div className="decks-container w-full overflow-hidden">
-                        {/*<DeckSmoothScroller>*/}
-                        <DeckGrid history={history} />
-                        {/*</DeckSmoothScroller>*/}
-                      </div>
-                      <DeckFloatingManager />
-                    </>
-                  )}
-                </div>
-              )}
-            </DeckThreadsFormManager>
+            <PollsManager>
+              <DeckThreadsFormManager>
+                {({ show: showThreadsForm }) => (
+                  <div
+                    className={classNameObject({
+                      "decks grid grid-cols-deck items-center duration-300": true,
+                      "w-full": !isCollapsed,
+                      expanded: isExpanded,
+                      "toolbar-collapsed translate-x-[-72px] w-[calc(100%+72px)] sm:translate-x-0 sm:w-[auto]":
+                        isCollapsed,
+                      "thread-form-showed": showThreadsForm
+                    })}
+                  >
+                    <DeckFloatingToolbarActivator
+                      open={!isCollapsed}
+                      setOpen={(v) => setIsCollapsed(!v)}
+                    />
+                    <DeckToolbar
+                      history={history}
+                      isExpanded={isExpanded}
+                      setIsExpanded={setIsExpanded}
+                    />
+                    <DeckThreadsForm className={showThreadsForm ? "show" : ""} persistable={true} />
+                    {isDecksLoading ? (
+                      <DeckLoader />
+                    ) : (
+                      <>
+                        <div className="decks-container w-full overflow-hidden">
+                          {/*<DeckSmoothScroller>*/}
+                          <DeckGrid history={history} />
+                          {/*</DeckSmoothScroller>*/}
+                        </div>
+                        <DeckFloatingManager />
+                      </>
+                    )}
+                  </div>
+                )}
+              </DeckThreadsFormManager>
+            </PollsManager>
           </DeckThreadsManager>
         )}
       </DeckManager>

diff --git a/src/common/features/polls/components/poll-widget.tsx b/src/common/features/polls/components/poll-widget.tsx
@@ -14,14 +14,16 @@ import useLocalStorage from "react-use/lib/useLocalStorage";
 import { PREFIX } from "../../../util/local-storage";
 import { FormControl } from "@ui/input";
 import { useSet } from "react-use";
+import { classNameObject } from "../../../helper/class-name-object";
 
 interface Props {
   poll: PollSnapshot;
   isReadOnly: boolean;
   entry?: Entry;
+  compact?: boolean;
 }
 
-export function PollWidget({ poll, isReadOnly, entry }: Props) {
+export function PollWidget({ poll, isReadOnly, entry, compact = false }: Props) {
   const { activeUser } = useMappedStore();
 
   const pollDetails = useGetPollDetailsQuery(entry);
@@ -97,7 +99,13 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
 
   return (
     <div className="grid grid-cols-4">
-      <div className="col-span-4 sm:col-span-3 flex flex-col gap-4 border border-[--border-color] rounded-3xl p-4 dark:border-gray-900">
+      <div
+        className={classNameObject({
+          "col-span-4 flex flex-col gap-4 border border-[--border-color] rounded-3xl p-4 dark:border-gray-900":
+            true,
+          "sm:col-span-3": !compact
+        })}
+      >
         {isReadOnly && (
           <div className="text-xs uppercase tracking-wide font-semibold opacity-50">
             {_t("polls.preview-mode")}