From 88bd4e8b3523f5719b880adb59cb7cafa43578ff Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 17 Feb 2025 11:55:34 -0700
Subject: [PATCH] add FED API status on admin page

---
 src/pages/admin/AdminPage.tsx            |  2 +
 src/pages/parts/admin/FEDAPITestPart.tsx | 98 ++++++++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 src/pages/parts/admin/FEDAPITestPart.tsx

diff --git a/src/pages/admin/AdminPage.tsx b/src/pages/admin/AdminPage.tsx
index 7f86eedb..49ffba54 100644
--- a/src/pages/admin/AdminPage.tsx
+++ b/src/pages/admin/AdminPage.tsx
@@ -6,6 +6,7 @@ import { TMDBTestPart } from "@/pages/parts/admin/TMDBTestPart";
 import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart";
 
 import { BackendTestPart } from "../parts/admin/BackendTestPart";
+import { FEDAPITestPart } from "../parts/admin/FEDAPITestPart";
 
 export function AdminPage() {
   return (
@@ -18,6 +19,7 @@ export function AdminPage() {
         <BackendTestPart />
         <WorkerTestPart />
         <TMDBTestPart />
+        <FEDAPITestPart />
       </ThinContainer>
     </SubPageLayout>
   );
diff --git a/src/pages/parts/admin/FEDAPITestPart.tsx b/src/pages/parts/admin/FEDAPITestPart.tsx
new file mode 100644
index 00000000..195d3db8
--- /dev/null
+++ b/src/pages/parts/admin/FEDAPITestPart.tsx
@@ -0,0 +1,98 @@
+import { useState } from "react";
+import { useAsyncFn } from "react-use";
+
+import { Button } from "@/components/buttons/Button";
+import { Icon, Icons } from "@/components/Icon";
+import { Box } from "@/components/layout/Box";
+import { Spinner } from "@/components/layout/Spinner";
+import { Heading2 } from "@/components/utils/Text";
+
+export function FEDAPITestPart() {
+  const [status, setStatus] = useState({
+    hasTested: false,
+    success: false,
+    errorText: "",
+    tokenStatus: "",
+  });
+
+  const [testState, runTests] = useAsyncFn(async () => {
+    setStatus({
+      hasTested: false,
+      success: false,
+      errorText: "",
+      tokenStatus: "",
+    });
+
+    try {
+      const response = await fetch(
+        "https://fed-api.up.railway.app/token/status",
+      );
+      const data = await response.json();
+
+      if (!response.ok) {
+        return setStatus({
+          hasTested: true,
+          success: false,
+          errorText: data.message || "Not found",
+          tokenStatus: "",
+        });
+      }
+
+      return setStatus({
+        hasTested: true,
+        success: true,
+        errorText: "",
+        tokenStatus: data.status,
+      });
+    } catch (err) {
+      return setStatus({
+        hasTested: true,
+        success: false,
+        errorText:
+          "Failed to connect to FED API, please check your internet connection",
+        tokenStatus: "",
+      });
+    }
+  }, [setStatus]);
+
+  return (
+    <>
+      <Heading2 className="mb-8 mt-12">FED API test</Heading2>
+      <Box>
+        <div className="flex items-center">
+          <div className="flex-1">
+            {!status.hasTested ? (
+              <p>Run the test to check FED API status</p>
+            ) : status.success ? (
+              <div>
+                <p className="flex items-center">
+                  <Icon
+                    icon={Icons.CIRCLE_CHECK}
+                    className="text-video-scraping-success mr-2"
+                  />
+                  FED API is working
+                </p>
+                <p className="mt-2">Current status: {status.tokenStatus}</p>
+              </div>
+            ) : (
+              <>
+                <p className="text-white font-bold w-full mb-3 flex items-center gap-1">
+                  <Icon
+                    icon={Icons.CIRCLE_EXCLAMATION}
+                    className="text-video-scraping-error mr-2"
+                  />
+                  FED API is not working
+                </p>
+                <p>{status.errorText}</p>
+              </>
+            )}
+          </div>
+          <Button theme="purple" onClick={runTests}>
+            {testState.loading ? <Spinner className="text-base mr-2" /> : null}
+            Test FED API
+          </Button>
+        </div>
+      </Box>
+    </>
+  );
+}