Bepro 2193 points system redesign header

components/pages/points/points-page.controller.tsx

@@ -1,17 +1,43 @@
+import { useState } from "react";
+
+import { useTranslation } from "next-i18next";
+
 import { PointsPageView } from "components/pages/points/points-page.view";
 
+import { useUserStore } from "x-hooks/stores/user/user.store";
 import { userPointsOfUser } from "x-hooks/use-points-of-user";
 
 export function PointsPage() {
+  const { t } = useTranslation("points");
+
+  const [activeTab, setActiveTab] = useState<"collected-points" | "history">("collected-points");
+
+  const { currentUser } = useUserStore();
   const { totalPoints, pointsBase } = userPointsOfUser();
 
   const boost = pointsBase?.find(base => base?.scalingFactor > 1);
+  const tabs = [
+    {
+      label: t("current-quests"),
+      active: activeTab === "collected-points",
+      onClick: () => setActiveTab("collected-points"),
+    }
+  ];
+
+  if (currentUser?.walletAddress)
+    tabs.push({
+      label: t("history"),
+      active: activeTab === "history",
+      onClick: () => setActiveTab("history"),
+    });
 
   return(
     <PointsPageView
       totalPoints={totalPoints}
       hasBoost={!!boost}
       boostValue={boost?.scalingFactor}
+      tabs={tabs}
+      activeTab={activeTab}
     />
   );
 }

components/pages/points/points-page.view.tsx

@@ -1,18 +1,30 @@
 import CustomContainer from "components/custom-container";
+import ScrollableTabs from "components/navigation/scrollable-tabs/view";
 import { PointsPageHero } from "components/pages/points/hero/points-page-hero.view";
 import { CollectedPoints } from "components/points-system/collected-points/collected-points.controller";
 
+import { MiniTabsItem } from "types/components";
+
 interface PointsPageViewProps {
   totalPoints: number;
   hasBoost?: boolean;
   boostValue?: number;
+  tabs: MiniTabsItem[];
+  activeTab: "collected-points" | "history";
 }
 
 export function PointsPageView({
   totalPoints,
   hasBoost,
   boostValue,
+  tabs,
+  activeTab,
 }: PointsPageViewProps) {
+  const tabsComponents = {
+    "history": <h1>History</h1>,
+    "collected-points": <CollectedPoints />,
+  };
+
   return(
     <CustomContainer className="pb-5">
       <PointsPageHero
@@ -21,7 +33,13 @@ export function PointsPageView({
         boostValue={boostValue}
       />
 
-      <CollectedPoints />
+      <ScrollableTabs
+        tabs={tabs}
+      />
+
+      <div className="mt-4">
+        {tabsComponents[activeTab]}
+      </div>
     </CustomContainer>
   );
 }

components/profile/dashboard-router.tsx

@@ -5,7 +5,6 @@ import { useRouter } from "next/router";
 import MyMarketplacePage from "components/pages/profile/my-marketplace/controller";
 import PaymentsPage from "components/pages/profile/payments/controller";
 import DeliverablesPage from "components/profile/pages/deliverables";
-import { MyPointsPage } from "components/profile/pages/my-points/my-points.controller";
 import DashboardPage from "components/profile/pages/profile-page/controller";
 import ProposalsPage from "components/profile/pages/proposals";
 import TasksPage from "components/profile/pages/tasks";
@@ -28,7 +27,6 @@ export default function DashboardRouter(props: DashboardPageProps) {
     Route("/dashboard/deliverables", DeliverablesPage),
     Route("/dashboard/proposals", ProposalsPage),
     Route("/dashboard/my-marketplace", MyMarketplacePage),
-    Route("/dashboard/my-points", MyPointsPage),
   ];
   const currentRoute = routes.find(({ path }) => asPath.split("?")[0].endsWith(path));
 

pages/dashboard/[[...dashboardPage]].tsx

@@ -13,8 +13,6 @@ import { useSearchNetworks } from "x-hooks/api/marketplace";
 import {useGetProfileBounties, useGetProfilePayments} from "x-hooks/api/pages/profile";
 import {useGetTokens} from "x-hooks/api/token";
 
-import {useGetPointsHistory} from "../../x-hooks/api/pages/profile/use-get-points-history";
-
 const { serverRuntimeConfig: { auth: { secret } } } = getConfig();
 
 export default function Dashboard(props: DashboardPageProps) {
@@ -58,9 +56,6 @@ export const getServerSideProps: GetServerSideProps = async ({ req, query, local
         .catch(({ rows }) => rows),
     ])
       .then(([bounties, marketplaces]) => ({ bounties, marketplaces })),
-    "my-points": async () => ({
-      history: await useGetPointsHistory(wallet),
-    }),
   };
 
   const pageData = getDataFn[pageName] ? await getDataFn[pageName]() : {};

public/locales/en/points.json

@@ -16,6 +16,8 @@
   "booster-active": "Booster Active",
   "on-going-quests": "On-going quests",
   "recurring-quests": "Recurring quests",
+  "current-quests": "Current Quests",
+  "history": "History",
   "rules": {
     "add_linkedin": {
       "title": "Fill LinkedIn link",