Updated submissions editing and fetching to account for changes to ch…

…efsFormAPIKey (allows submissions for each rule to be supported properly), Removed unneeded library, Switched home page to use client component to hopefully fix loading issue

app/admin/page.tsx

@@ -35,6 +35,7 @@ export default function Admin() {
       title: "",
       goRulesJSONFilename: "",
       chefsFormId: "",
+      chefsFormAPIKey: "",
     });
     setRules(newRules);
   };
@@ -62,7 +63,8 @@ export default function Admin() {
           initialRule._id !== rule._id ||
           initialRule.title !== rule.title ||
           initialRule.goRulesJSONFilename !== rule.goRulesJSONFilename ||
-          initialRule.chefsFormId !== rule.chefsFormId
+          initialRule.chefsFormId !== rule.chefsFormId ||
+          initialRule.chefsFormAPIKey !== rule.chefsFormAPIKey
         ) {
           return { rule, action: ACTION_STATUS.UPDATE };
         }
@@ -127,6 +129,11 @@ export default function Admin() {
       dataIndex: "chefsFormId",
       render: renderInputField("chefsFormId"),
     },
+    {
+      title: "CHEFS Form API Key",
+      dataIndex: "chefsFormAPIKey",
+      render: renderInputField("chefsFormAPIKey"),
+    },
     {
       dataIndex: "delete",
       render: (value: string, _: RuleInfo, index: number) => (

app/components/SubmissionSelector/SubmissionSelector.tsx

@@ -20,7 +20,7 @@ export default function SubmissionSelector({ chefsFormId, setSelectedSubmissionI
       submission: {
         submission: { data },
       },
-    } = await getSubmissionFromCHEFSById(valueToIdMap[value]);
+    } = await getSubmissionFromCHEFSById(chefsFormId, valueToIdMap[value]);
     setSelectedSubmissionInputs(data);
   };
 

app/page.tsx

@@ -1,17 +1,33 @@
-import { Table, Button, Flex } from "antd";
+"use client";
+import { useState, useEffect } from "react";
 import Link from "next/link";
+import { Button, Flex, Spin, Table } from "antd";
 import { RuleInfo } from "./types/ruleInfo";
 import { getAllRuleData } from "./utils/api";
 
-export default async function Home() {
-  const rules: RuleInfo[] = await getAllRuleData();
+export default function Home() {
+  const [rules, setRules] = useState<RuleInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
-  const mappedRules = rules.map(({ _id, title, chefsFormId }, key) => {
+  useEffect(() => {
+    const getRules = async () => {
+      try {
+        const ruleData = await getAllRuleData();
+        setRules(ruleData);
+        setIsLoading(false);
+      } catch (error) {
+        console.error(`Error loading rules: ${error}`);
+      }
+    };
+    getRules();
+  }, []);
+
+  const mappedRules = rules.map(({ _id, title, chefsFormId }) => {
     return {
-      key,
+      key: _id,
       titleLink: (
         <b>
-          <a href={`/rule/${_id}`}>{title}</a>
+          <Link href={`/rule/${_id}`}>{title}</Link>
         </b>
       ),
       editRule: (
@@ -46,7 +62,13 @@ export default async function Home() {
           <Button>Admin</Button>
         </Link>
       </Flex>
-      <Table columns={columns} dataSource={mappedRules} />
+      {isLoading ? (
+        <Spin tip="Loading rules...">
+          <div className="content" />
+        </Spin>
+      ) : (
+        <Table columns={columns} dataSource={mappedRules} />
+      )}
     </>
   );
 }

app/types/ruleInfo.d.ts

@@ -3,4 +3,5 @@ export interface RuleInfo {
   title: string;
   goRulesJSONFilename: string;
   chefsFormId: string;
+  chefsFormAPIKey?: string;
 }

app/utils/api.ts

@@ -73,9 +73,9 @@ export const getSubmissionsFromCHEFS = async (formId: string) => {
  * @returns The submissions data.
  * @throws If an error occurs while fetching the submissions.
  */
-export const getSubmissionFromCHEFSById = async (id: string) => {
+export const getSubmissionFromCHEFSById = async (formId: string, id: string) => {
   try {
-    const { data } = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/submissions/${id}`);
+    const { data } = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/submissions/${formId}/${id}`);
     return data;
   } catch (error) {
     console.error(`Error fetching submissions: ${error}`);

package.json

@@ -21,7 +21,6 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@types/antd": "^1.0.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",