Merge pull request #1596 from ecency/feature/poll-fixes

Polls: fixed poll appearing after creating post, fixed poll hide vote…

src/common/app.tsx

@@ -35,7 +35,6 @@ import { useGetAccountFullQuery } from "./api/queries";
 import { UIManager } from "@ui/core";
 import defaults from "./constants/defaults.json";
 import { getAccessToken } from "./helper/user-token";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -118,7 +117,7 @@ const App = (props: any) => {
     <UIManager>
       <EntriesCacheManager>
         {/*Excluded from production*/}
-        <ReactQueryDevtools initialIsOpen={false} />
+        {/*<ReactQueryDevtools initialIsOpen={false} />*/}
         <Tracker />
         <UserActivityRecorder />
         <ChatContextProvider

src/common/features/polls/api/get-poll-details-query.ts

@@ -3,7 +3,7 @@ import { QueryIdentifiers } from "../../../core";
 import { Entry } from "../../../store/entries/types";
 import axios from "axios";
 
-interface GetPollDetailsQueryResponse {
+export interface GetPollDetailsQueryResponse {
   author: string;
   created: string;
   end_time: string;

src/common/features/polls/components/poll-widget.tsx

@@ -41,16 +41,16 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
   const endTimeFullDate = useMemo(() => format(poll.endTime, "dd.MM.yyyy HH:mm"), [poll.endTime]);
   const isFinished = useMemo(() => isBefore(poll.endTime, new Date()), [poll.endTime]);
   const showViewVotes = useMemo(
-    () => poll.hideVotes && !resultsMode,
+    () => !poll.hideVotes && !resultsMode,
     [poll.hideVotes, resultsMode]
   );
   const showChangeVote = useMemo(
     () => poll.voteChange && resultsMode && pollDetails.data?.status === "Active",
     [resultsMode, poll.voteChange, pollDetails.data?.status]
   );
   const showVote = useMemo(
-    () => pollDetails.data?.status === "Active" && !resultsMode,
-    [pollDetails.data?.status, resultsMode]
+    () => pollDetails.data?.status === "Active" && !resultsMode && pollDetails.data?.poll_trx_id,
+    [pollDetails.data?.status, resultsMode, pollDetails.data?.poll_trx_id]
   );
   const isInterpretationSelectionDisabled = useMemo(
     () => pollDetails.data?.poll_stats.total_hive_hp_incl_proxied === null,
@@ -85,6 +85,12 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
     }
   }, [pollDetails.data, isInterpretationSelectionDisabled]);
 
+  useEffect(() => {
+    if (!pollDetails.data?.poll_trx_id) {
+      setTimeout(() => pollDetails.refetch(), 5000);
+    }
+  }, [pollDetails.data?.poll_trx_id]);
+
   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">
@@ -137,24 +143,25 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
               />
             )
           )}
-          {resultsMode && (
-            <div className="flex items-center gap-2 flex-wrap">
-              <div>{_t("polls.interpretation")}</div>
-              <FormControl
-                full={false}
-                disabled={isInterpretationSelectionDisabled}
-                type="select"
-                size="xs"
-                value={interpretation}
-                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                  setInterpretation(e.target.value as PollSnapshot["interpretation"])
-                }
-              >
-                <option value="number_of_votes">{_t("polls.number_of_votes")}</option>
-                <option value="tokens">{_t("polls.tokens")}</option>
-              </FormControl>
-            </div>
-          )}
+          {resultsMode &&
+            activeUser?.username === entry?.author &&
+            !isInterpretationSelectionDisabled && (
+              <div className="flex items-center gap-2 flex-wrap">
+                <div>{_t("polls.interpretation")}</div>
+                <FormControl
+                  full={false}
+                  type="select"
+                  size="xs"
+                  value={interpretation}
+                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                    setInterpretation(e.target.value as PollSnapshot["interpretation"])
+                  }
+                >
+                  <option value="number_of_votes">{_t("polls.number_of_votes")}</option>
+                  <option value="tokens">{_t("polls.tokens")}</option>
+                </FormControl>
+              </div>
+            )}
         </div>
         {showVote && (
           <Button
@@ -171,17 +178,22 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
             {_t(isVoting ? "polls.voting" : "polls.vote")}
           </Button>
         )}
+        {!pollDetails.data?.poll_trx_id && !isReadOnly && (
+          <Button size="sm" disabled={true}>
+            {_t("polls.creating-in-progress")}
+          </Button>
+        )}
         {showChangeVote && (
           <Button appearance="link" size="sm" onClick={() => setResultsMode(false)}>
             {_t("polls.back-to-vote")}
           </Button>
         )}
-        {showViewVotes && (
+        {!resultsMode && (
           <Button appearance="link" size="sm" onClick={() => setResultsMode(true)}>
             {_t("polls.view-votes")}
           </Button>
         )}
-        {resultsMode && <PollVotesListDialog entry={entry} />}
+        {resultsMode && showViewVotes && <PollVotesListDialog entry={entry} />}
       </div>
     </div>
   );

src/common/helper/temp-entry.ts

@@ -1,9 +1,7 @@
 import moment from "moment";
 
 import { FullAccount } from "../store/accounts/types";
-import { Entry } from "../store/entries/types";
-
-import accountReputation from "./account-reputation";
+import { Entry, JsonMetadata } from "../store/entries/types";
 
 import { version } from "../../../package.json";
 
@@ -17,6 +15,7 @@ export interface TempEntryProps {
   description: string | null;
   tags: string[];
   post_id?: string;
+  jsonMeta?: JsonMetadata;
 }
 
 export const correctIsoDate = (d: string): string => d.split(".")[0];
@@ -41,7 +40,7 @@ export default (p: TempEntryProps): Entry => {
     curator_payout_value: "0.000 HBD",
     depth: 0,
     is_paidout: false,
-    json_metadata: {
+    json_metadata: p.jsonMeta ?? {
       app: `ecency/${version}-vision`,
       format: "markdown+html",
       tags: p.tags,

src/common/i18n/locales/en-US.json

@@ -2452,6 +2452,7 @@
     "current-standing": "Hide votes",
     "finished": "Finished",
     "expired-date": "End date should be in present or future",
-    "interpretation": "Interpretation"
+    "interpretation": "Interpretation",
+    "creating-in-progress": "Creating in progress..."
   }
 }

src/common/pages/submit/api/publish.ts

@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { FullAccount } from "../../../store/accounts/types";
 import { createPermlink, makeApp, makeCommentOptions } from "../../../helper/posting";
 import * as bridgeApi from "../../../api/bridge";
@@ -19,16 +19,19 @@ import { History } from "history";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { useThreeSpeakManager } from "../hooks";
 import { useContext } from "react";
-import { EntriesCacheContext } from "../../../core";
+import { EntriesCacheContext, QueryIdentifiers } from "../../../core";
 import { version } from "../../../../../package.json";
 import { PollsContext } from "../hooks/polls-manager";
 import { EntryBodyManagement, EntryMetadataManagement } from "../../../features/entry-management";
+import { Entry } from "../../../store/entries/types";
+import { GetPollDetailsQueryResponse } from "../../../features/polls/api";
 
 export function usePublishApi(history: History, onClear: () => void) {
   const { activeUser } = useMappedStore();
   const { activePoll, clearActivePoll } = useContext(PollsContext);
   const { videos, isNsfw, buildBody } = useThreeSpeakManager();
   const { updateCache } = useContext(EntriesCacheContext);
+  const queryClient = useQueryClient();
 
   return useMutation(
     ["publish"],
@@ -60,7 +63,7 @@ export function usePublishApi(history: History, onClear: () => void) {
 
       // make sure active user fully loaded
       if (!activeUser || !activeUser.data.__loaded) {
-        return;
+        return [];
       }
 
       const author = activeUser.username;
@@ -140,7 +143,8 @@ export function usePublishApi(history: History, onClear: () => void) {
             title,
             body: buildBody(body),
             tags,
-            description
+            description,
+            jsonMeta
           }),
           max_accepted_payout: options.max_accepted_payout,
           percent_hbd: options.percent_hbd
@@ -163,8 +167,44 @@ export function usePublishApi(history: History, onClear: () => void) {
         if (isCommunity(tags[0]) && reblogSwitch) {
           await reblog(author, author, permlink);
         }
+
+        return [entry as Entry, activePoll] as const;
       } catch (e) {
         error(...formatError(e));
+        throw e;
+      }
+    },
+    {
+      onSuccess([entry, poll]) {
+        queryClient.setQueryData<GetPollDetailsQueryResponse | undefined>(
+          [QueryIdentifiers.POLL_DETAILS, entry?.author, entry?.permlink],
+          (data) => {
+            if (!data) {
+              return data;
+            }
+
+            return {
+              author: entry.author,
+              created: new Date().toISOString(),
+              end_time: poll?.endTime.toISOString(),
+              filter_account_age_days: poll?.filters.accountAge,
+              permlink: entry.permlink,
+              poll_choices: poll?.choices.map((c, i) => ({
+                choice_num: i,
+                choice_text: c,
+                votes: null
+              })),
+              poll_stats: { total_voting_accounts_num: 0, total_hive_hp_incl_proxied: null },
+              poll_trx_id: undefined,
+              poll_voters: undefined,
+              preferred_interpretation: poll?.interpretation,
+              question: poll?.title,
+              status: "active",
+              tags: [],
+              token: null
+            } as unknown as GetPollDetailsQueryResponse;
+          }
+        );
       }
     }
   );