From 2403fef329b5d4c7e271a5b839909d20e574e6b1 Mon Sep 17 00:00:00 2001
From: marcelovicentegc <marcelovicentegc@gmail.com>
Date: Wed, 15 Nov 2023 13:21:26 -0300
Subject: [PATCH] chore: get vendors on server component

---
 app/api-management/page.js   |  6 ++----
 app/api/vendors/route.js     | 23 -----------------------
 containers/api-management.js | 25 +++++++++++++------------
 lib/fetch.js                 | 14 --------------
 lib/hooks.js                 | 19 +++++++++++++++++++
 5 files changed, 34 insertions(+), 53 deletions(-)
 delete mode 100644 lib/fetch.js
 create mode 100644 lib/hooks.js

diff --git a/app/api-management/page.js b/app/api-management/page.js
index e28900c..67ceeb6 100644
--- a/app/api-management/page.js
+++ b/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} />;
 }
diff --git a/app/api/vendors/route.js b/app/api/vendors/route.js
index 1094784..1b329ba 100644
--- a/app/api/vendors/route.js
+++ b/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,
-    });
-  }
-}
diff --git a/containers/api-management.js b/containers/api-management.js
index b93b84f..415f622 100644
--- a/containers/api-management.js
+++ b/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>
   );
diff --git a/lib/fetch.js b/lib/fetch.js
deleted file mode 100644
index 89a491e..0000000
--- a/lib/fetch.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { headers } from "next/headers";
-
-export async function f(input, init = {}) {
-  const url = process.env.NEXTAUTH_URL + input;
-
-  return fetch(url, {
-    ...init,
-    cache: "no-cache", // 'force-cache' is the default in Next.js 🤦‍
-    // Headers cannot be modified, error on deployment, working locally
-    // https://nextjs-forum.com/post/1160308077753544805
-    // https://github.com/nextauthjs/next-auth/issues/7423
-    headers: headers(),
-  });
-}
diff --git a/lib/hooks.js b/lib/hooks.js
new file mode 100644
index 0000000..0156998
--- /dev/null
+++ b/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 };
+}