From 43450ba545a1b91e9db6be804f0e5132398a9fc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Fri, 17 Oct 2025 20:06:12 +0200 Subject: [PATCH] pl-fe: 'show results' button, only use voters_count when appropriate MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- .../src/components/polls/poll-footer.tsx | 24 +++++++++++++++++-- .../src/components/polls/poll-option.tsx | 2 +- packages/pl-fe/src/components/polls/poll.tsx | 10 ++++++-- packages/pl-fe/src/locales/en.json | 2 ++ packages/pl-fe/src/stores/status-meta.ts | 14 ++++++++++- 5 files changed, 46 insertions(+), 6 deletions(-) diff --git a/packages/pl-fe/src/components/polls/poll-footer.tsx b/packages/pl-fe/src/components/polls/poll-footer.tsx index f9aeccb43..aee671c05 100644 --- a/packages/pl-fe/src/components/polls/poll-footer.tsx +++ b/packages/pl-fe/src/components/polls/poll-footer.tsx @@ -8,6 +8,7 @@ import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import Tooltip from 'pl-fe/components/ui/tooltip'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; +import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; import RelativeTimestamp from '../relative-timestamp'; @@ -23,12 +24,15 @@ interface IPollFooter { poll: Poll; showResults: boolean; selected: Selected; + statusId: string; } -const PollFooter: React.FC = ({ poll, showResults, selected }): JSX.Element => { +const PollFooter: React.FC = ({ poll, showResults, selected, statusId }): JSX.Element => { const dispatch = useAppDispatch(); const intl = useIntl(); + const { toggleShowPollResults } = useStatusMetaStore(); + const handleVote = () => dispatch(vote(poll.id, Object.keys(selected) as any as number[])); const handleRefresh: React.EventHandler = (e) => { @@ -45,7 +49,7 @@ const PollFooter: React.FC = ({ poll, showResults, selected }): JSX let votesCount = null; - if (poll.voters_count !== null && poll.voters_count !== undefined) { + if (poll.multiple && poll.voters_count !== null) { votesCount = ; } else { votesCount = ; @@ -84,6 +88,22 @@ const PollFooter: React.FC = ({ poll, showResults, selected }): JSX )} + {(!poll.voted && !poll.expired) && ( + <> + + + · + + )} + {votesCount} diff --git a/packages/pl-fe/src/components/polls/poll-option.tsx b/packages/pl-fe/src/components/polls/poll-option.tsx index 1e8a9ec96..10a9b3def 100644 --- a/packages/pl-fe/src/components/polls/poll-option.tsx +++ b/packages/pl-fe/src/components/polls/poll-option.tsx @@ -114,7 +114,7 @@ const PollOption: React.FC = (props): JSX.Element | null => { if (!poll) return null; - const pollVotesCount = poll.voters_count || poll.votes_count; + const pollVotesCount = (poll.multiple && poll.voters_count) || poll.votes_count; const percent = pollVotesCount === 0 ? 0 : (option.votes_count / pollVotesCount) * 100; const voted = poll.own_votes?.includes(index); const message = intl.formatMessage(messages.votes, { votes: option.votes_count }); diff --git a/packages/pl-fe/src/components/polls/poll.tsx b/packages/pl-fe/src/components/polls/poll.tsx index cc0f63815..3abf16694 100644 --- a/packages/pl-fe/src/components/polls/poll.tsx +++ b/packages/pl-fe/src/components/polls/poll.tsx @@ -7,6 +7,7 @@ import Text from 'pl-fe/components/ui/text'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useModalsStore } from 'pl-fe/stores/modals'; +import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; import PollFooter from './poll-footer'; import PollOption from './poll-option'; @@ -17,7 +18,7 @@ type Selected = Record; interface IPoll { id: string; - status?: Pick; + status: Pick; language?: string; truncate?: boolean; } @@ -34,6 +35,10 @@ const Poll: React.FC = ({ id, status, language, truncate }): JSX.Element const isLoggedIn = useAppSelector((state) => state.me); const poll = useAppSelector((state) => state.polls[id]); + const { statuses: statusesMeta } = useStatusMetaStore(); + + const showPollResults = !!statusesMeta[status.id]?.showPollResults; + const [selected, setSelected] = useState({} as Selected); const openUnauthorizedModal = () => @@ -67,7 +72,7 @@ const Poll: React.FC = ({ id, status, language, truncate }): JSX.Element if (!poll) return null; - const showResults = poll.voted || poll.expired; + const showResults = poll.voted || poll.expired || !!showPollResults; return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions @@ -99,6 +104,7 @@ const Poll: React.FC = ({ id, status, language, truncate }): JSX.Element poll={poll} showResults={showResults} selected={selected} + statusId={status.id} /> diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 647f76bc2..6c8b909fb 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -1354,9 +1354,11 @@ "plfe_config.tile_server_label": "Map tile server", "poll.choose_multiple": "Choose as many as you'd like.", "poll.closed": "Closed", + "poll.hide_results": "Hide results", "poll.non_anonymous": "Public poll", "poll.non_anonymous.label": "Other instances may display the options you voted for", "poll.refresh": "Refresh", + "poll.show_results": "Show results", "poll.total_people": "{count, plural, one {# person} other {# people}}", "poll.total_votes": "{count, plural, one {# vote} other {# votes}}", "poll.vote": "Submit Vote", diff --git a/packages/pl-fe/src/stores/status-meta.ts b/packages/pl-fe/src/stores/status-meta.ts index 009b41368..63182b852 100644 --- a/packages/pl-fe/src/stores/status-meta.ts +++ b/packages/pl-fe/src/stores/status-meta.ts @@ -2,7 +2,13 @@ import { create } from 'zustand'; import { mutative } from 'zustand-mutative'; type State = { - statuses: Record; + statuses: Record; expandStatuses: (statusIds: Array) => void; collapseStatuses: (statusIds: Array) => void; revealStatusesMedia: (statusIds: Array) => void; @@ -11,6 +17,7 @@ type State = { fetchTranslation: (statusId: string, targetLanguage: string) => void; hideTranslation: (statusId: string) => void; setStatusLanguage: (statusId: string, language: string) => void; + toggleShowPollResults: (statusId: string) => void; }; const useStatusMetaStore = create()(mutative((set) => ({ @@ -65,6 +72,11 @@ const useStatusMetaStore = create()(mutative((set) => ({ state.statuses[statusId].currentLanguage = language; }), + toggleShowPollResults: (statusId) => set((state: State) => { + if (!state.statuses[statusId]) state.statuses[statusId] = {}; + + state.statuses[statusId].showPollResults = !state.statuses[statusId].showPollResults; + }), }))); export { useStatusMetaStore };