From bdc3cc19c6fb41dc1492c722bd669e3283a16255 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Fri, 23 Feb 2024 10:46:01 +0700 Subject: [PATCH] fix: vote internal --- CHANGELOG.md | 1 + .../DepositOverview.tsx | 3 +- .../VotingOverview.tsx | 3 +- .../vote-details/VoteDetailsAccordionItem.tsx | 7 +- .../deposit-period/DepositPeriodSection.tsx | 3 +- .../components/vote-details/index.tsx | 68 +++++-------------- src/lib/pages/proposal-details/index.tsx | 9 +-- src/lib/pages/proposal-details/types.ts | 12 ---- 8 files changed, 25 insertions(+), 81 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 876b4a7c1..68f0df93a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -66,6 +66,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#797](https://github.com/alleslabs/celatone-frontend/pull/797) Fix Vote Periods subtab internal state instead of route - [#784](https://github.com/alleslabs/celatone-frontend/pull/784) Make proposal list row clickable with command/ctrl - [#776](https://github.com/alleslabs/celatone-frontend/pull/776) Add expand/collapse all to proposal messages in detail page - [#781](https://github.com/alleslabs/celatone-frontend/pull/781) Tooltip default shouldWrap diff --git a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/DepositOverview.tsx b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/DepositOverview.tsx index 016df6d35..7863d7130 100644 --- a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/DepositOverview.tsx +++ b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/DepositOverview.tsx @@ -8,7 +8,7 @@ import { ErrorFetchingProposalInfos } from "../../ErrorFetchingProposalInfos"; import { useInternalNavigate } from "lib/app-provider"; import { CustomIcon } from "lib/components/icon"; import { Loading } from "lib/components/Loading"; -import { TabIndex, PeriodIndex } from "lib/pages/proposal-details/types"; +import { TabIndex } from "lib/pages/proposal-details/types"; import { extractParams } from "lib/pages/proposal-details/utils"; import { ProposalStatus } from "lib/types"; import { formatUTC } from "lib/utils"; @@ -59,7 +59,6 @@ const DepositOverviewBody = ({ query: { id: proposalData.id, tab: TabIndex.Vote, - period: PeriodIndex.Deposit, }, options: { shallow: true, diff --git a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx index c3af3ee75..04a124646 100644 --- a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx +++ b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx @@ -5,7 +5,7 @@ import { ErrorFetchingProposalInfos } from "../../ErrorFetchingProposalInfos"; import { useInternalNavigate } from "lib/app-provider"; import { CustomIcon } from "lib/components/icon"; import { Loading } from "lib/components/Loading"; -import { TabIndex, PeriodIndex } from "lib/pages/proposal-details/types"; +import { TabIndex } from "lib/pages/proposal-details/types"; import { ProposalStatus } from "lib/types"; import { formatUTC } from "lib/utils"; @@ -68,7 +68,6 @@ const VotingOverviewBody = ({ query: { id: proposalData.id, tab: TabIndex.Vote, - period: PeriodIndex.Voting, }, options: { shallow: true, diff --git a/src/lib/pages/proposal-details/components/vote-details/VoteDetailsAccordionItem.tsx b/src/lib/pages/proposal-details/components/vote-details/VoteDetailsAccordionItem.tsx index 7796fda26..e3551c67e 100644 --- a/src/lib/pages/proposal-details/components/vote-details/VoteDetailsAccordionItem.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/VoteDetailsAccordionItem.tsx @@ -13,7 +13,6 @@ interface VoteDetailsAccordionItemProps { step: number; proposalData: ProposalData; children: ReactNode; - onClick: () => void; isDisabled?: boolean; } @@ -21,13 +20,11 @@ export const VoteDetailsAccordionItem = ({ step, proposalData, children, - onClick, isDisabled, }: VoteDetailsAccordionItemProps) => ( @@ -36,8 +33,8 @@ export const VoteDetailsAccordionItem = ({ diff --git a/src/lib/pages/proposal-details/components/vote-details/deposit-period/DepositPeriodSection.tsx b/src/lib/pages/proposal-details/components/vote-details/deposit-period/DepositPeriodSection.tsx index 8734b7d80..a8ee58b96 100644 --- a/src/lib/pages/proposal-details/components/vote-details/deposit-period/DepositPeriodSection.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/deposit-period/DepositPeriodSection.tsx @@ -30,8 +30,7 @@ export const DepositPeriodSection = ({ + track(AmpEvent.USE_SUBTAB, { + currentTab: index === 0 ? "deposit" : "voting", + }); + export interface VoteDetailsProps { proposalData: ProposalData; votesInfo: Option; params: Option; isLoading: boolean; - period?: PeriodIndex; } -export const VoteDetails = ({ - proposalData, - period, - ...props -}: VoteDetailsProps) => { +export const VoteDetails = ({ proposalData, ...props }: VoteDetailsProps) => { const isMobile = useMobile(); - const navigate = useInternalNavigate(); const isDepositOnly = proposalData.status === ProposalStatus.DEPOSIT_FAILED || @@ -46,52 +43,25 @@ export const VoteDetails = ({ (proposalData.status === ProposalStatus.CANCELLED && isNull(proposalData.votingTime)); - const periodTab = - period ?? (isDepositOnly ? PeriodIndex.Deposit : PeriodIndex.Voting); - const periodTabIndex = Object.values(PeriodIndex).indexOf(periodTab); - - const handleTabChange = useCallback( - (nextSubTab: PeriodIndex) => () => { - if (nextSubTab === periodTab) return; - track(AmpEvent.USE_SUBTAB, { currentTab: periodTab }); - navigate({ - pathname: "/proposals/[id]/[tab]", - query: { - id: proposalData.id, - tab: TabIndex.Vote, - period: nextSubTab, - }, - options: { - shallow: true, - }, - }); - }, - [navigate, periodTab, proposalData.id] - ); - - useEffect(() => { - if (period === PeriodIndex.Voting && isDepositOnly) - handleTabChange(PeriodIndex.Deposit)(); - }, [handleTabChange, isDepositOnly, period]); + const subtabIndex = isDepositOnly ? 0 : 1; return isMobile ? ( { + if (expandedIndex === -1) return; + trackPeriodSubtab(expandedIndex); + }} > - + @@ -103,18 +73,14 @@ export const VoteDetails = ({ lazyBehavior="keepMounted" mt={6} w="full" - index={periodTabIndex} + defaultIndex={subtabIndex} + onChange={(index) => trackPeriodSubtab(index)} > - + diff --git a/src/lib/pages/proposal-details/index.tsx b/src/lib/pages/proposal-details/index.tsx index 4c5f47176..6c1b8f5d0 100644 --- a/src/lib/pages/proposal-details/index.tsx +++ b/src/lib/pages/proposal-details/index.tsx @@ -15,11 +15,7 @@ import { useDerivedProposalData, useDerivedProposalParams } from "./data"; import type { ProposalDetailsQueryParams } from "./types"; import { zProposalDetailsQueryParams, TabIndex } from "./types"; -const ProposalDetailsBody = ({ - id, - tab, - period, -}: ProposalDetailsQueryParams) => { +const ProposalDetailsBody = ({ id, tab }: ProposalDetailsQueryParams) => { useGovConfig({ shouldRedirect: true }); const navigate = useInternalNavigate(); @@ -85,7 +81,6 @@ const ProposalDetailsBody = ({ votesInfo={votesInfo} params={params} isLoading={isVotesInfoLoading || isParamsLoading} - period={period} /> @@ -108,7 +103,7 @@ const ProposalDetails = () => { return ( {!validated.success ? ( - + ) : ( )} diff --git a/src/lib/pages/proposal-details/types.ts b/src/lib/pages/proposal-details/types.ts index 68da946c6..eb7aa40d9 100644 --- a/src/lib/pages/proposal-details/types.ts +++ b/src/lib/pages/proposal-details/types.ts @@ -12,11 +12,6 @@ export enum TabIndex { Vote = "vote", } -export enum PeriodIndex { - Deposit = "deposit", - Voting = "voting", -} - export const zProposalDetailsQueryParams = z.object({ id: z.coerce.number(), tab: z.union([ @@ -26,13 +21,6 @@ export const zProposalDetailsQueryParams = z.object({ .optional() .transform(() => TabIndex.Overview), ]), - period: z.union([ - z.nativeEnum(PeriodIndex), - z - .string() - .optional() - .transform(() => undefined), - ]), }); export type ProposalDetailsQueryParams = z.infer<