Remove the tab from the my votes page, #4073

opensquare-network · Apr 1, 2024 · ea3b7f5 · ea3b7f5
1 parent d1d8d7e
commit ea3b7f5
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 26 deletions.
diff --git a/packages/next/components/myvotes/index.js b/packages/next/components/myvotes/index.js
@@ -1,12 +1,15 @@
 import {
   Democracy,
+  ModuleTab,
   ModuleTabProvider,
   Referenda,
 } from "next-common/components/profile/votingHistory/common";
 import { useChainSettings } from "next-common/context/chain";
 import ModuleVotes from "./moduleVotes";
+import { cn } from "next-common/utils";
+import AccountSubTabs from "next-common/components/overview/account/subTabs";
 
-export default function MyVotes() {
+function MyVoteLayout({ children }) {
   const { hasReferenda, noDemocracyModule } = useChainSettings();
 
   const availableTabs = [];
@@ -24,11 +27,30 @@ export default function MyVotes() {
     defaultTab = Democracy;
   }
 
+  return (
+    <ModuleTabProvider availableTabs={availableTabs} defaultTab={defaultTab}>
+      <div className="flex flex-col gap-[16px]">
+        <div
+          className={cn(
+            "flex justify-between items-center gap-3 mx-6",
+            "max-sm:block max-sm:space-y-3",
+          )}
+        >
+          <AccountSubTabs />
+          <ModuleTab />
+        </div>
+        {children}
+      </div>
+    </ModuleTabProvider>
+  );
+}
+
+export default function MyVotes() {
   return (
     <div>
-      <ModuleTabProvider availableTabs={availableTabs} defaultTab={defaultTab}>
+      <MyVoteLayout>
         <ModuleVotes />
-      </ModuleTabProvider>
+      </MyVoteLayout>
     </div>
   );
 }
diff --git a/packages/next/components/myvotes/summary/summary.js b/packages/next/components/myvotes/summary/summary.js
@@ -1,13 +1,11 @@
 import ValueDisplay from "next-common/components/valueDisplay";
-import { cn, toPrecision } from "next-common/utils";
+import { toPrecision } from "next-common/utils";
 import { useChainSettings } from "next-common/context/chain";
-import { ModuleTab } from "next-common/components/profile/votingHistory/common";
 import { SecondaryCard } from "next-common/components/styled/containers/secondaryCard";
 import Summary from "next-common/components/summary";
 import BigNumber from "bignumber.js";
 import PriorInfo from "./prior";
 import LoadableContent from "next-common/components/common/loadableContent";
-import AccountSubTabs from "next-common/components/overview/account/subTabs";
 
 function CountSummaryContent({ count }) {
   return <span>{(count || 0).toLocaleString()}</span>;
@@ -84,19 +82,8 @@ export default function ReferendaVoteSummary({
   ].filter(Boolean);
 
   return (
-    <>
-      <div
-        className={cn(
-          "flex justify-between items-center gap-3 mx-6",
-          "max-sm:block max-sm:space-y-3",
-        )}
-      >
-        <AccountSubTabs />
-        <ModuleTab />
-      </div>
-      <SecondaryCard>
-        <Summary items={items} />
-      </SecondaryCard>
-    </>
+    <SecondaryCard>
+      <Summary items={items} />
+    </SecondaryCard>
   );
 }
diff --git a/packages/next/pages/account/votes.jsx b/packages/next/pages/account/votes.jsx
@@ -1,12 +1,59 @@
 import { withCommonProps } from "next-common/lib";
 import AccountLayout from "next-common/components/layout/AccountLayout";
-import MyVotes from "components/myvotes";
 import { fetchOpenGovTracksProps } from "next-common/services/serverSide";
+import {
+  Democracy,
+  ModuleTab,
+  ModuleTabProvider,
+  Referenda,
+} from "next-common/components/profile/votingHistory/common";
+import { useChainSettings } from "next-common/context/chain";
+import { cn } from "next-common/utils";
+import AccountSubTabs from "next-common/components/overview/account/subTabs";
+import ModuleVotes from "components/myvotes/moduleVotes";
+
+function MyVoteLayout({ children }) {
+  const { hasReferenda, noDemocracyModule } = useChainSettings();
+
+  const availableTabs = [];
+  if (hasReferenda) {
+    availableTabs.push({ tabId: Referenda, tabTitle: Referenda });
+  }
+  if (!noDemocracyModule) {
+    availableTabs.push({ tabId: Democracy, tabTitle: Democracy });
+  }
+
+  let defaultTab;
+  if (hasReferenda) {
+    defaultTab = Referenda;
+  } else {
+    defaultTab = Democracy;
+  }
+
+  return (
+    <ModuleTabProvider availableTabs={availableTabs} defaultTab={defaultTab}>
+      <div className="flex flex-col gap-[16px]">
+        <div
+          className={cn(
+            "flex justify-between items-center gap-3 mx-6",
+            "max-sm:block max-sm:space-y-3",
+          )}
+        >
+          <AccountSubTabs />
+          <ModuleTab />
+        </div>
+        {children}
+      </div>
+    </ModuleTabProvider>
+  );
+}
 
 export default function AccountVotesPage() {
   return (
     <AccountLayout>
-      <MyVotes />
+      <MyVoteLayout>
+        <ModuleVotes />
+      </MyVoteLayout>
     </AccountLayout>
   );
 }

diff --git a/packages/next/pages/democracy/votes.js b/packages/next/pages/democracy/votes.js
@@ -8,6 +8,28 @@ import { useUser } from "next-common/context/user";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { getServerSidePropsWithTracks } from "next-common/services/serverSide";
+import { cn } from "next-common/utils";
+import { Title } from "components/myvotes/styled";
+import { ModuleTab } from "next-common/components/profile/votingHistory/common";
+
+function DemocracyVoteLayout({ children }) {
+  return (
+    <ModuleTabProvider defaultTab={Democracy}>
+      <div className="flex flex-col gap-[16px]">
+        <div
+          className={cn(
+            "flex justify-between items-center gap-3 mx-6",
+            "max-sm:block max-sm:space-y-3",
+          )}
+        >
+          <Title>My Votes</Title>
+          <ModuleTab />
+        </div>
+        {children}
+      </div>
+    </ModuleTabProvider>
+  );
+}
 
 export default function DemocracyVotes({ summary }) {
   const user = useUser();
@@ -29,9 +51,9 @@ export default function DemocracyVotes({ summary }) {
       title={title}
       summaryData={summary}
     >
-      <ModuleTabProvider defaultTab={Democracy}>
+      <DemocracyVoteLayout>
         <ModuleVotes />
-      </ModuleTabProvider>
+      </DemocracyVoteLayout>
     </DemocracyReferendaLayout>
   );
 }

diff --git a/packages/next/pages/referenda/votes.js b/packages/next/pages/referenda/votes.js
@@ -11,6 +11,28 @@ import { useUser } from "next-common/context/user";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { fetchOpenGovTracksProps } from "next-common/services/serverSide";
+import { cn } from "next-common/utils";
+import { ModuleTab } from "next-common/components/profile/votingHistory/common";
+import { Title } from "components/myvotes/styled";
+
+function ReferendaVoteLayout({ children }) {
+  return (
+    <ModuleTabProvider defaultTab={Referenda}>
+      <div className="flex flex-col gap-[16px]">
+        <div
+          className={cn(
+            "flex justify-between items-center gap-3 mx-6",
+            "max-sm:block max-sm:space-y-3",
+          )}
+        >
+          <Title>My Votes</Title>
+          <ModuleTab />
+        </div>
+        {children}
+      </div>
+    </ModuleTabProvider>
+  );
+}
 
 export default function ReferendaVotesPage({ referendaSummary }) {
   const user = useUser();
@@ -32,9 +54,9 @@ export default function ReferendaVotesPage({ referendaSummary }) {
       title={title}
       summaryData={referendaSummary}
     >
-      <ModuleTabProvider defaultTab={Referenda}>
+      <ReferendaVoteLayout>
         <ModuleVotes />
-      </ModuleTabProvider>
+      </ReferendaVoteLayout>
     </ReferendaLayout>
   );
 }