Loading prop types form the top level page (#160)

voteagora · Mar 10, 2024 · 1836bff · 1836bff
1 parent 772f88b
commit 1836bff
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 42 deletions.
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
@@ -1,5 +1,6 @@
 import AdminForm from "@/components/Admin/AdminForm";
 import { getVotableSupply } from "@/app/api/common/votableSupply/getVotableSupply";
+import { fetchProposalTypes } from "@/app/admin/actions";
 
 async function fetchVotableSupply() {
   "use server";
@@ -8,6 +9,9 @@ async function fetchVotableSupply() {
 
 export default async function Page() {
   const votableSupply = await fetchVotableSupply();
+  const proposalTypes = await fetchProposalTypes();
 
-  return <AdminForm votableSupply={votableSupply} />;
+  return (
+    <AdminForm votableSupply={votableSupply} proposalTypes={proposalTypes} />
+  );
 }
diff --git a/src/components/Admin/AdminForm.tsx b/src/components/Admin/AdminForm.tsx
@@ -1,18 +1,24 @@
 import ProposalTypeSettings from "./ProposalTypeSettings";
 import GovernorSettings from "./GovernorSettings";
 import FAQs from "./FAQs";
+import { OptimismProposalTypes } from "@prisma/client";
 
 // TODO: Take init values from the chain
 export default function AdminForm({
   votableSupply,
+  proposalTypes,
 }: {
   votableSupply: string;
+  proposalTypes: OptimismProposalTypes[];
 }) {
   return (
     <div className="space-y-8 sm:space-y-0 sm:flex sm:gap-12 mt-12">
       <div className="space-y-8 sm:flex-grow">
         <GovernorSettings />
-        <ProposalTypeSettings votableSupply={votableSupply} />
+        <ProposalTypeSettings
+          votableSupply={votableSupply}
+          proposalTypes={proposalTypes}
+        />
       </div>
       <FAQs />
     </div>

diff --git a/src/components/Admin/ProposalTypeSettings.tsx b/src/components/Admin/ProposalTypeSettings.tsx
@@ -1,66 +1,51 @@
 "use client";
 
 import { Separator } from "@/components/ui/separator";
-import { Fragment, useState, useEffect } from "react";
+import { Fragment, useState } from "react";
 import { Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { OptimismProposalTypes } from "@prisma/client";
 import ProposalType from "./ProposalType";
-import { fetchProposalTypes } from "@/app/admin/actions";
-import AgoraLoader from "@/components/shared/AgoraLoader/AgoraLoader";
 
 // TODO: Take init values from the chain
 export default function ProposalTypeSettings({
   votableSupply,
+  proposalTypes,
 }: {
   votableSupply: string;
+  proposalTypes: OptimismProposalTypes[];
 }) {
-  const [loading, setLoading] = useState(true);
-  const [proposalTypes, setProposalTypes] = useState<
-    { name: string; quorum: number; approval_threshold: number }[]
-  >([]);
+  const fmtPropTypes = proposalTypes.map(
+    ({ quorum, approval_threshold, name }) => ({
+      name,
+      quorum: Number(quorum) / 100,
+      approval_threshold: Number(approval_threshold) / 100,
+    })
+  );
 
-  useEffect(() => {
-    const getProposalTypes = async () => {
-      const response = (await fetchProposalTypes().catch((error) =>
-        console.error(error)
-      )) as OptimismProposalTypes[];
-      const _proposalTypes = response.map(
-        ({ quorum, approval_threshold, name }) => ({
-          name,
-          quorum: Number(quorum) / 100,
-          approval_threshold: Number(approval_threshold) / 100,
-        })
-      );
-      setLoading(false);
-      setProposalTypes(_proposalTypes);
-    };
-    getProposalTypes();
-  }, []);
+  const [propTypes, setPropTypes] = useState(fmtPropTypes);
 
   return (
     <section className="gl_box">
       <h1 className="font-extrabold text-2xl">Proposal type settings</h1>
       <p>Create and manage different types of proposals</p>
-      {loading ? (
-        <AgoraLoader />
-      ) : (
-        proposalTypes.map((proposalType, key) => (
-          <Fragment key={key}>
-            <ProposalType
-              votableSupply={votableSupply}
-              proposalType={proposalType}
-              index={key}
-            />
-            <Separator className="my-8" />
-          </Fragment>
-        ))
-      )}
+
+      {propTypes.map((proposalType, key) => (
+        <Fragment key={key}>
+          <ProposalType
+            votableSupply={votableSupply}
+            proposalType={proposalType}
+            index={key}
+          />
+          <Separator className="my-8" />
+        </Fragment>
+      ))}
+
       <div
         className="inline-flex items-center gap-2 cursor-pointer"
         onClick={() => {
-          setProposalTypes((prev) => [
-            ...prev,
+          setPropTypes((prevPropTypes) => [
+            ...prevPropTypes,
             { quorum: 50, approval_threshold: 50, name: "" },
           ]);
         }}