chore: get vendors on server component

app/api-management/page.js

@@ -1,10 +1,8 @@
 import ApiManagementContainer from "@/containers/api-management";
-import { f } from "@/lib/fetch";
+import { getApiKeys } from "@/lib/db/reads";
 
 export default async function ApiManagementPage() {
-  const res = await f("/api/vendors");
-
-  const vendors = await res.json();
+  const vendors = await getApiKeys();
 
   return <ApiManagementContainer vendors={vendors} />;
 }

app/api/vendors/route.js

@@ -3,7 +3,6 @@ import { NextResponse } from "next/server";
 import { authOptions } from "../auth/[...nextauth]/route";
 import { saveApiKeys } from "@/lib/db/writes";
 import { encrypt } from "@/lib/encryption";
-import { getApiKeys } from "@/lib/db/reads";
 import { getServerSession } from "next-auth/next";
 
 export async function POST(req) {
@@ -74,25 +73,3 @@ export async function POST(req) {
     });
   }
 }
-
-export async function GET() {
-  const session = await getServerSession(authOptions);
-
-  if (!session) {
-    return new NextResponse(JSON.stringify([]), { status: 401 });
-  }
-
-  try {
-    const vendors = await getApiKeys();
-
-    return new NextResponse(JSON.stringify(vendors), {
-      status: 200,
-    });
-  } catch (error) {
-    console.error(error);
-
-    return new NextResponse("Error", {
-      status: 500,
-    });
-  }
-}

containers/api-management.js

@@ -14,9 +14,11 @@ import {
 } from "grommet";
 import { useState } from "react";
 import { StatusGood, More } from "grommet-icons";
+import { useRefreshData } from "@/lib/hooks";
 
 export default function ApiManagementContainer(props) {
   const { vendors } = props;
+  const { refresh } = useRefreshData();
 
   const [open, setOpen] = useState(false);
   const [submitting, setSubmitting] = useState(false);
@@ -27,11 +29,7 @@ export default function ApiManagementContainer(props) {
   const onSubmit = async (event) => {
     setSubmitting(true);
     const {
-      value: {
-        name: vendorName,
-        url: vendorUrl,
-        callbackUrl: vendorCallbackUrl,
-      },
+      value: { vendorName, vendorUrl, vendorCallbackUrl },
     } = event;
 
     const formattedUrl = new URL(vendorUrl);
@@ -58,6 +56,8 @@ export default function ApiManagementContainer(props) {
       so make sure you copy it and store it somewhere safe.`,
         JSON.stringify(data),
       );
+
+      refresh();
     }
 
     setSubmitting(false);
@@ -134,8 +134,7 @@ function Form(props) {
     >
       <FormField
         label="Vendor Name"
-        aria-label="name"
-        name="name"
+        name="vendorName"
         required
         validate={[
           { regexp: /^[a-z]/i },
@@ -154,10 +153,12 @@ function Form(props) {
             };
           },
         ]}
-      />
+      >
+        <TextInput name="vendorName" />
+      </FormField>
       <FormField
         label="Vendor URL"
-        name="url"
+        name="vendorUrl"
         required
         validate={[
           (url) => {
@@ -180,11 +181,11 @@ function Form(props) {
           },
         ]}
       >
-        <TextInput name="url" aria-label="url" type="url" />
+        <TextInput name="vendorUrl" aria-label="url" type="url" />
       </FormField>
       <FormField
         label="Callback URL"
-        name="url"
+        name="vendorCallbackUrl"
         required
         validate={[
           (url) => {
@@ -207,7 +208,7 @@ function Form(props) {
           },
         ]}
       >
-        <TextInput name="callbackUrl" aria-label="url" type="url" />
+        <TextInput name="vendorCallbackUrl" aria-label="url" type="url" />
       </FormField>
     </FormPopUp>
   );

lib/hooks.js

@@ -0,0 +1,19 @@
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+
+/**
+ * Refresh the current route and fetch new data from the server without
+ * losing client-side browser or React state.
+ */
+export function useRefreshData() {
+  const router = useRouter();
+  const [_, startTransition] = useTransition();
+
+  const refresh = () => {
+    startTransition(() => {
+      router.refresh();
+    });
+  };
+
+  return { refresh };
+}