From cd11f3b70166b1a902fbb2e19e808227ddca5d4c Mon Sep 17 00:00:00 2001
From: subject026 <subject026@protonmail.com>
Date: Mon, 2 Sep 2024 10:48:08 +0100
Subject: [PATCH] customize project order on page

---
 src/app/governance/GovernancePage.tsx         | 78 ++++++++++++++++---
 .../governance/components/ResultsPanel.tsx    | 31 ++++----
 2 files changed, 83 insertions(+), 26 deletions(-)

diff --git a/src/app/governance/GovernancePage.tsx b/src/app/governance/GovernancePage.tsx
index d67966f..e7d780f 100644
--- a/src/app/governance/GovernancePage.tsx
+++ b/src/app/governance/GovernancePage.tsx
@@ -19,12 +19,33 @@ import { useMinRequiredVotingPower } from "./useMinRequiredVotingPower";
 import { InfoCallout } from "./components/InfoCallout";
 import { useDistributions } from "./useDistributions";
 import { useModal } from "../core/context/ModalContext";
+import { ProjectMeta, projectsMeta } from "../projectsMeta";
 
 export type Project = {
   address: Hex;
   points: number;
 };
 
+type ProjectWithMeta = Prettify<
+  ProjectMeta & { account: Hex; currentDistribution: number }
+>;
+
+type Prettify<T> = {
+  [K in keyof T]: T[K];
+} & {};
+
+export type CurrentProjectsLoading = { status: "LOADING"; data: null };
+export type CurrentProjectsSuccess = {
+  status: "SUCCESS";
+  data: ProjectWithMeta[];
+  sortedData: ProjectWithMeta[];
+};
+export type CurrentProjectsError = { status: "ERROR"; data: null };
+export type CurrentProjectsState =
+  | CurrentProjectsLoading
+  | CurrentProjectsSuccess
+  | CurrentProjectsError;
+
 export function GovernancePage() {
   const { user, isSafe } = useConnectedUser();
   const { currentVotingDistribution } = useCurrentVotingDistribution();
@@ -49,25 +70,62 @@ export function GovernancePage() {
     }
   }, [modalState, setModal]);
 
+  const currentProjects = useMemo<CurrentProjectsState>(() => {
+    if (currentVotingDistribution.status === "LOADING")
+      return { status: "LOADING", data: null };
+
+    if (currentVotingDistribution.status === "ERROR")
+      return { status: "ERROR", data: null };
+    let data;
+    try {
+      data = currentVotingDistribution.data[0].map(
+        (account, i): ProjectWithMeta => {
+          if (!projectsMeta[account])
+            throw new Error("no metadata found for project!");
+          return {
+            account,
+            ...projectsMeta[account],
+            currentDistribution: currentVotingDistribution.data[1][i],
+          };
+        }
+      );
+    } catch (err) {
+      console.log(err);
+      return {
+        status: "ERROR",
+        data: null,
+      };
+    }
+    return {
+      status: "SUCCESS",
+      data,
+      sortedData: data.toSorted((a, b) => a.order - b.order),
+    };
+  }, [currentVotingDistribution]);
+
   useEffect(() => {
     if (projects.length) return;
-    if (currentVotingDistribution.status === "SUCCESS") {
+    if (currentProjects.status === "SUCCESS") {
       setProjects(
-        currentVotingDistribution.data[0].map((address) => ({
-          address,
+        currentProjects.data.map((project) => ({
+          address: project.account,
           points: 0,
         }))
       );
     }
-  }, [currentVotingDistribution, projects]);
+  }, [currentProjects, projects]);
 
   function updateValue(value: number, address: Hex) {
+    console.log("value: ", value);
+    console.log("address: ", address);
     const updatedProjects = projects.map((project) => {
       if (project.address === address) {
         return { ...project, points: value };
       }
       return project;
     });
+    console.dir({ projects });
+    console.dir({ updatedProjects });
     setProjects(updatedProjects);
   }
 
@@ -106,7 +164,7 @@ export function GovernancePage() {
       : false;
 
   if (
-    currentVotingDistribution.status === "ERROR" ||
+    currentProjects.status === "ERROR" ||
     cycleDates.status === "ERROR" ||
     cycleLength.status === "ERROR"
   )
@@ -117,7 +175,7 @@ export function GovernancePage() {
     );
 
   if (
-    !projects.length ||
+    currentProjects.status === "LOADING" ||
     currentVotingDistribution.status === "LOADING" ||
     cycleDates.status === "LOADING" ||
     cycleLength.status === "LOADING"
@@ -151,7 +209,7 @@ export function GovernancePage() {
         />
 
         <div className="max-w-md m-auto col-span-12 row-start-3 row-span-1 lg:row-start-3 lg:col-start-9 lg:col-span-4 h-full flex flex-col gap-4">
-          <ResultsPanel distribution={currentVotingDistribution} />
+          <ResultsPanel projects={currentProjects} />
           <InfoCallout />
         </div>
 
@@ -169,9 +227,9 @@ export function GovernancePage() {
           />
         </div>
         <div className="col-span-12 row-start-5 lg:col-start-1 lg:col-span-8 lg:row-start-3 grid grid-cols-1 gap-3">
-          {currentVotingDistribution.data[0].map((address, i) => {
+          {currentProjects.sortedData.map((project, i) => {
             return (
-              <ProjectRow key={address} address={address}>
+              <ProjectRow key={project.account} address={project.account}>
                 {!isRecasting && castVote && castVote.length > 0 ? (
                   <VoteDisplay
                     points={castVote[i]}
@@ -181,7 +239,7 @@ export function GovernancePage() {
                   <VoteForm
                     value={projects[i].points}
                     updateValue={updateValue}
-                    address={address}
+                    address={project.account}
                     totalPoints={totalPoints}
                     user={user}
                     userCanVote={userCanVote}
diff --git a/src/app/governance/components/ResultsPanel.tsx b/src/app/governance/components/ResultsPanel.tsx
index 2778495..40d3ddb 100644
--- a/src/app/governance/components/ResultsPanel.tsx
+++ b/src/app/governance/components/ResultsPanel.tsx
@@ -2,18 +2,18 @@ import { Hex } from "viem";
 
 import { projectsMeta } from "@/app/projectsMeta";
 import { formatVotePercentage } from "@/app/core/util/formatter";
-import { CurrentVotingDistributionState } from "../useCurrentVotingDistribution";
 import { CardBox } from "@/app/core/components/CardBox";
+import { CurrentProjectsSuccess } from "../GovernancePage";
 
 export function ResultsPanel({
-  distribution,
+  projects,
 }: {
-  distribution: CurrentVotingDistributionState;
+  projects: CurrentProjectsSuccess;
 }) {
-  const totalPoints =
-    distribution.status === "SUCCESS"
-      ? distribution.data[1].reduce((acc, points) => acc + points, 0)
-      : 0;
+  const totalPoints = projects.sortedData.reduce(
+    (acc, points) => acc + points.currentDistribution,
+    0
+  );
 
   return (
     <section className="grid grid-cols-1 gap-4">
@@ -24,15 +24,14 @@ export function ResultsPanel({
               results
             </h3>
             <div className="grid grid-cols-1 gap-4">
-              {distribution.status === "SUCCESS" &&
-                distribution.data[0].map((account, i) => (
-                  <ResultsProject
-                    key={`project_result_${account}`}
-                    address={account}
-                    projectPoints={distribution.data[1][i]}
-                    totalPoints={totalPoints}
-                  />
-                ))}
+              {projects.sortedData.map((project, i) => (
+                <ResultsProject
+                  key={`project_result_${project.account}`}
+                  address={project.account}
+                  projectPoints={projects.sortedData[i].currentDistribution}
+                  totalPoints={totalPoints}
+                />
+              ))}
             </div>
           </div>
         </div>