fix: vote internal

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

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,

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,

src/lib/pages/proposal-details/components/vote-details/VoteDetailsAccordionItem.tsx

@@ -13,21 +13,18 @@ interface VoteDetailsAccordionItemProps {
   step: number;
   proposalData: ProposalData;
   children: ReactNode;
-  onClick: () => void;
   isDisabled?: boolean;
 }
 
 export const VoteDetailsAccordionItem = ({
   step,
   proposalData,
   children,
-  onClick,
   isDisabled,
 }: VoteDetailsAccordionItemProps) => (
   <AccordionItem
     borderTop="1px solid"
     borderColor="gray.700"
-    onClick={onClick}
     isDisabled={isDisabled}
   >
     <AccordionButton py={3} px={0}>
@@ -36,8 +33,8 @@ export const VoteDetailsAccordionItem = ({
     </AccordionButton>
     <AccordionPanel
       bg="transparent"
-      py={3}
-      px={0}
+      p={0}
+      pt={3}
       borderTop="1px solid"
       borderColor="gray.700"
     >

src/lib/pages/proposal-details/components/vote-details/deposit-period/DepositPeriodSection.tsx

@@ -30,8 +30,7 @@ export const DepositPeriodSection = ({
     <Flex
       direction="column"
       background={isMobile ? "transparent" : "gray.900"}
-      border="1px solid"
-      borderColor={isMobile ? "transparent" : "gray.700"}
+      border={isMobile ? undefined : "1px solid var(--chakra-colors-gray-700)"}
       borderRadius="8px"
       p={isMobile ? 0 : 6}
       gap={4}

src/lib/pages/proposal-details/components/vote-details/index.tsx

@@ -6,11 +6,9 @@ import {
   Tabs,
 } from "@chakra-ui/react";
 import { isNull } from "lodash";
-import { useCallback, useEffect } from "react";
 
-import { PeriodIndex, TabIndex } from "../../types";
 import { AmpEvent, track } from "lib/amplitude";
-import { useInternalNavigate, useMobile } from "lib/app-provider";
+import { useMobile } from "lib/app-provider";
 import {
   ProposalStatus,
   type Option,
@@ -24,74 +22,46 @@ import { VoteDetailsAccordionItem } from "./VoteDetailsAccordionItem";
 import { VoteDetailsTab } from "./VoteDetailsTab";
 import { VotingPeriod } from "./voting-period";
 
+const trackPeriodSubtab = (index: number) =>
+  track(AmpEvent.USE_SUBTAB, {
+    currentTab: index === 0 ? "deposit" : "voting",
+  });
+
 export interface VoteDetailsProps {
   proposalData: ProposalData;
   votesInfo: Option<ProposalVotesInfo>;
   params: Option<ProposalParams>;
   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 ||
     proposalData.status === ProposalStatus.DEPOSIT_PERIOD ||
     (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 ? (
     <Accordion
       allowToggle
       w="full"
       variant="transparent"
-      defaultIndex={[periodTabIndex]}
+      defaultIndex={[subtabIndex]}
+      onChange={(expandedIndex: number) => {
+        if (expandedIndex === -1) return;
+        trackPeriodSubtab(expandedIndex);
+      }}
     >
-      <VoteDetailsAccordionItem
-        step={1}
-        proposalData={proposalData}
-        onClick={handleTabChange(PeriodIndex.Deposit)}
-      >
+      <VoteDetailsAccordionItem step={1} proposalData={proposalData}>
         <DepositPeriodSection proposalData={proposalData} {...props} />
       </VoteDetailsAccordionItem>
       <VoteDetailsAccordionItem
         step={2}
         proposalData={proposalData}
-        onClick={handleTabChange(PeriodIndex.Voting)}
         isDisabled={isDepositOnly}
       >
         <VotingPeriod proposalData={proposalData} {...props} />
@@ -103,18 +73,14 @@ export const VoteDetails = ({
       lazyBehavior="keepMounted"
       mt={6}
       w="full"
-      index={periodTabIndex}
+      defaultIndex={subtabIndex}
+      onChange={(index) => trackPeriodSubtab(index)}
     >
       <TabList borderBottom="0px solid" gap={2}>
-        <VoteDetailsTab
-          step={1}
-          proposalData={proposalData}
-          onClick={handleTabChange(PeriodIndex.Deposit)}
-        />
+        <VoteDetailsTab step={1} proposalData={proposalData} />
         <VoteDetailsTab
           step={2}
           proposalData={proposalData}
-          onClick={handleTabChange(PeriodIndex.Voting)}
           isDisabled={isDepositOnly}
         />
       </TabList>

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}
             />
           </TabPanel>
         </TabPanels>
@@ -108,7 +103,7 @@ const ProposalDetails = () => {
   return (
     <PageContainer>
       {!validated.success ? (
-        <InvalidState title="Proposal does not euuuxist" />
+        <InvalidState title="Proposal does not exist" />
       ) : (
         <ProposalDetailsBody {...validated.data} />
       )}

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<