diff --git a/packages/berlin/src/App.tsx b/packages/berlin/src/App.tsx index 603551ca..8477dd86 100644 --- a/packages/berlin/src/App.tsx +++ b/packages/berlin/src/App.tsx @@ -251,8 +251,6 @@ const router = (queryClient: QueryClient) => loader: ({ params }) => redirectToCycleIfOpen(queryClient, params.eventId, params.cycleId), path: ':cycleId/results', - loader: ({ params }) => - redirectToCycleIfOpen(queryClient, params.eventId, params.cycleId), Component: Results, }, { diff --git a/packages/berlin/src/components/tables/groups-table/GroupsTable.tsx b/packages/berlin/src/components/tables/groups-table/GroupsTable.tsx index 192cd47c..9ba3d51c 100644 --- a/packages/berlin/src/components/tables/groups-table/GroupsTable.tsx +++ b/packages/berlin/src/components/tables/groups-table/GroupsTable.tsx @@ -102,7 +102,11 @@ function GroupCard({ userToGroup, theme, onLeaveGroup }: GroupCardProps) { No secret )} Leave} + trigger={ + + } title="Are you sure?" description={`This action cannot be undone. This will remove you from group ${userToGroup.group.name}.`} onActionClick={() => onLeaveGroup(userToGroup.id)} diff --git a/packages/berlin/src/components/tables/results-table/ResultsTable.tsx b/packages/berlin/src/components/tables/results-table/ResultsTable.tsx index 1b661914..00d0eb4b 100644 --- a/packages/berlin/src/components/tables/results-table/ResultsTable.tsx +++ b/packages/berlin/src/components/tables/results-table/ResultsTable.tsx @@ -17,9 +17,12 @@ import IconButton from '../../icon-button'; // Styled Components import { Card } from './ResultsTable.styled'; +import { useNavigate } from 'react-router-dom'; type ResultsTableProps = { $expanded: boolean; + eventId?: string; + cycleId?: string; option: { optionTitle: string; pluralityScore: string; @@ -35,9 +38,9 @@ type ResultsTableProps = { onClick: () => void; }; -function ResultsTable({ $expanded, option, onClick }: ResultsTableProps) { +function ResultsTable({ $expanded, option, onClick, cycleId, eventId }: ResultsTableProps) { const theme = useAppStore((state) => state.theme); - + const navigate = useNavigate(); const formattedQuadraticScore = useMemo(() => { const score = parseFloat(option.quadraticScore); return score % 1 === 0 ? score.toFixed(0) : score.toFixed(3); @@ -54,6 +57,10 @@ function ResultsTable({ $expanded, option, onClick }: ResultsTableProps) { enabled: !!option.id, }); + const handleCommentsClick = () => { + navigate(`/events/${eventId}/cycles/${cycleId}/options/${option.id}`); + }; + return ( Voter affiliations: {option.listOfGroupNames.join(', ')} + + + ); diff --git a/packages/berlin/src/pages/Account.tsx b/packages/berlin/src/pages/Account.tsx index 18ffae41..99ee3f09 100644 --- a/packages/berlin/src/pages/Account.tsx +++ b/packages/berlin/src/pages/Account.tsx @@ -520,7 +520,7 @@ function AccountForm({ icon={{ src: `/icons/add-${theme}.svg`, alt: 'Add icon' }} /> - diff --git a/packages/berlin/src/pages/Comments.tsx b/packages/berlin/src/pages/Comments.tsx index 6f361816..d30167bc 100644 --- a/packages/berlin/src/pages/Comments.tsx +++ b/packages/berlin/src/pages/Comments.tsx @@ -1,29 +1,21 @@ // React and third-party libraries import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useParams } from 'react-router-dom'; -import { useEffect, useMemo, useState } from 'react'; -import toast from 'react-hot-toast'; +import { useMemo, useState } from 'react'; // API -import { - fetchOption, - postVotes, - fetchUserVotes, - fetchComments, - postComment, - fetchOptionUsers, -} from 'api'; +import { fetchOption, fetchComments, postComment, fetchOptionUsers } from 'api'; // Hooks -import useUser from '../hooks/useUser'; +// import useUser from '../hooks/useUser'; // Utils -import { - handleSaveVotes, - handleAvailableHearts, - handleLocalUnVote, - handleLocalVote, -} from '../utils/voting'; +// import { +// handleSaveVotes, +// handleAvailableHearts, +// handleLocalUnVote, +// handleLocalVote, +// } from '../utils/voting'; // Store import { useAppStore } from '../store'; @@ -41,17 +33,17 @@ import CommentsTable from '../components/tables/comment-table'; import CommentsColumns from '../components/columns/comments-columns'; import IconButton from '../components/icon-button'; import Textarea from '../components/textarea'; -import { INITIAL_HEARTS } from '../utils/constants'; +// import { INITIAL_HEARTS } from '../utils/constants'; -type LocalUserVotes = { optionId: string; numOfVotes: number }[]; +// type LocalUserVotes = { optionId: string; numOfVotes: number }[]; function Comments() { const theme = useAppStore((state) => state.theme); const queryClient = useQueryClient(); - const { cycleId, optionId } = useParams(); - const { user } = useUser(); - const [localUserVotes, setLocalUserVotes] = useState([]); - const [localOptionHearts, setLocalOptionHearts] = useState(0); + const { optionId } = useParams(); + // const { user } = useUser(); + // const [localUserVotes, setLocalUserVotes] = useState([]); + // const [localOptionHearts, setLocalOptionHearts] = useState(0); const [comment, setComment] = useState(''); const [sortOrder, setSortOrder] = useState('desc'); // 'asc' for ascending, 'desc' for descending @@ -61,16 +53,16 @@ function Comments() { enabled: !!optionId, }); - const availableHearts = - useAppStore((state) => state.availableHearts[option?.questionId || '']) ?? INITIAL_HEARTS; - const setAvailableHearts = useAppStore((state) => state.setAvailableHearts); + // const availableHearts = + // useAppStore((state) => state.availableHearts[option?.questionId || '']) ?? INITIAL_HEARTS; + // const setAvailableHearts = useAppStore((state) => state.setAvailableHearts); - const { data: userVotes } = useQuery({ - queryKey: ['votes', cycleId], - queryFn: () => fetchUserVotes(cycleId || ''), - enabled: !!user?.id && !!cycleId, - retry: false, - }); + // const { data: userVotes } = useQuery({ + // queryKey: ['votes', cycleId], + // queryFn: () => fetchUserVotes(cycleId || ''), + // enabled: !!user?.id && !!cycleId, + // retry: false, + // }); const { data: optionUsers } = useQuery({ queryKey: ['option', optionId, 'users'], @@ -99,19 +91,19 @@ function Comments() { }); }, [comments, sortOrder]); - useEffect(() => { - if (optionId) { - const sumOfAllVotes = userVotes?.reduce((acc, option) => acc + option.numOfVotes, 0) || 0; - const hearts = userVotes?.find((option) => optionId === option.optionId)?.numOfVotes || 0; - setLocalOptionHearts(hearts); - setLocalUserVotes([{ optionId: optionId, numOfVotes: hearts }]); - // update the available hearts - setAvailableHearts({ - questionId: option?.questionId ?? '', - hearts: Math.max(0, INITIAL_HEARTS - sumOfAllVotes), - }); - } - }, [optionId, userVotes, setAvailableHearts, option?.questionId]); + // useEffect(() => { + // if (optionId) { + // const sumOfAllVotes = userVotes?.reduce((acc, option) => acc + option.numOfVotes, 0) || 0; + // const hearts = userVotes?.find((option) => optionId === option.optionId)?.numOfVotes || 0; + // setLocalOptionHearts(hearts); + // setLocalUserVotes([{ optionId: optionId, numOfVotes: hearts }]); + // // update the available hearts + // setAvailableHearts({ + // questionId: option?.questionId ?? '', + // hearts: Math.max(0, INITIAL_HEARTS - sumOfAllVotes), + // }); + // } + // }, [optionId, userVotes, setAvailableHearts, option?.questionId]); const { mutate: mutateComments } = useMutation({ mutationFn: postComment, @@ -122,51 +114,51 @@ function Comments() { }, }); - const handleVoteWrapper = (optionId: string) => { - if (availableHearts === 0) { - toast.error('No hearts left to give'); - return; - } - - setLocalOptionHearts((prevLocalOptionHearts) => prevLocalOptionHearts + 1); - setLocalUserVotes((prevLocalUserVotes) => handleLocalVote(optionId, prevLocalUserVotes)); - setAvailableHearts({ - questionId: option?.questionId ?? '', - hearts: handleAvailableHearts(availableHearts, 'vote'), - }); - }; - - const handleUnVoteWrapper = (optionId: string) => { - if (availableHearts === INITIAL_HEARTS) { - toast.error('No votes to left to remove'); - return; - } - - setLocalOptionHearts((prevLocalOptionHearts) => Math.max(0, prevLocalOptionHearts - 1)); - setLocalUserVotes((prevLocalUserVotes) => handleLocalUnVote(optionId, prevLocalUserVotes)); - setAvailableHearts({ - questionId: option?.questionId ?? '', - hearts: handleAvailableHearts(availableHearts, 'unVote'), - }); - }; - - const { mutate: mutateVotes } = useMutation({ - mutationFn: postVotes, - onSuccess: (body) => { - if (body?.errors?.length) { - toast.error(`Failed to save votes, ${body?.errors[0].message}`); - } else if (body?.data.length) { - queryClient.invalidateQueries({ queryKey: ['votes', cycleId] }); - // this is to update the plural scores in each option - queryClient.invalidateQueries({ queryKey: ['cycles', cycleId] }); - toast.success('Votes saved successfully!'); - } - }, - }); - - const handleSaveVoteWrapper = () => { - handleSaveVotes(userVotes, localUserVotes, mutateVotes); - }; + // const handleVoteWrapper = (optionId: string) => { + // if (availableHearts === 0) { + // toast.error('No hearts left to give'); + // return; + // } + + // setLocalOptionHearts((prevLocalOptionHearts) => prevLocalOptionHearts + 1); + // setLocalUserVotes((prevLocalUserVotes) => handleLocalVote(optionId, prevLocalUserVotes)); + // setAvailableHearts({ + // questionId: option?.questionId ?? '', + // hearts: handleAvailableHearts(availableHearts, 'vote'), + // }); + // }; + + // const handleUnVoteWrapper = (optionId: string) => { + // if (availableHearts === INITIAL_HEARTS) { + // toast.error('No votes to left to remove'); + // return; + // } + + // setLocalOptionHearts((prevLocalOptionHearts) => Math.max(0, prevLocalOptionHearts - 1)); + // setLocalUserVotes((prevLocalUserVotes) => handleLocalUnVote(optionId, prevLocalUserVotes)); + // setAvailableHearts({ + // questionId: option?.questionId ?? '', + // hearts: handleAvailableHearts(availableHearts, 'unVote'), + // }); + // }; + + // const { mutate: mutateVotes } = useMutation({ + // mutationFn: postVotes, + // onSuccess: (body) => { + // if (body?.errors?.length) { + // toast.error(`Failed to save votes, ${body?.errors[0].message}`); + // } else if (body?.data.length) { + // queryClient.invalidateQueries({ queryKey: ['votes', cycleId] }); + // // this is to update the plural scores in each option + // queryClient.invalidateQueries({ queryKey: ['cycles', cycleId] }); + // toast.success('Votes saved successfully!'); + // } + // }, + // }); + + // const handleSaveVoteWrapper = () => { + // handleSaveVotes(userVotes, localUserVotes, mutateVotes); + // }; const handlePostComment = () => { if (optionId && comment) { @@ -183,7 +175,7 @@ function Comments() { - + {/* {localOptionHearts} - + */} {option?.optionTitle} {option?.optionSubTitle} @@ -218,7 +210,7 @@ function Comments() { )} - + {/* */}