From 4bcb4c6c6cc4ecf374a14ce7ee3cf07447e6f1d3 Mon Sep 17 00:00:00 2001
From: httpjamesm <github@httpjames.space>
Date: Tue, 11 Jun 2024 01:00:06 -0400
Subject: [PATCH] feat: instance row component

---
 .../InstanceRow/InstanceRow.module.scss       |  4 +++
 .../InstancesTable/InstanceRow/index.tsx      | 33 +++++++++++++++++++
 .../InstancesSection/InstancesTable/index.tsx | 27 ++++++++++++---
 src/lib/instances.ts                          | 13 ++++++++
 src/lib/interfaces/instance.ts                |  5 +++
 src/styles/globals.css                        |  8 +++++
 6 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 src/components/sections/InstancesSection/InstancesTable/InstanceRow/InstanceRow.module.scss
 create mode 100644 src/components/sections/InstancesSection/InstancesTable/InstanceRow/index.tsx
 create mode 100644 src/lib/instances.ts
 create mode 100644 src/lib/interfaces/instance.ts

diff --git a/src/components/sections/InstancesSection/InstancesTable/InstanceRow/InstanceRow.module.scss b/src/components/sections/InstancesSection/InstancesTable/InstanceRow/InstanceRow.module.scss
new file mode 100644
index 0000000..a0f956a
--- /dev/null
+++ b/src/components/sections/InstancesSection/InstancesTable/InstanceRow/InstanceRow.module.scss
@@ -0,0 +1,4 @@
+.operators {
+    display: flex;
+    gap: .5rem;
+}
\ No newline at end of file
diff --git a/src/components/sections/InstancesSection/InstancesTable/InstanceRow/index.tsx b/src/components/sections/InstancesSection/InstancesTable/InstanceRow/index.tsx
new file mode 100644
index 0000000..c56eb9d
--- /dev/null
+++ b/src/components/sections/InstancesSection/InstancesTable/InstanceRow/index.tsx
@@ -0,0 +1,33 @@
+import type { Instance } from "@/lib/interfaces/instance";
+import styles from "./InstanceRow.module.scss";
+
+const InstanceRow = ({ instance }: { instance: Instance }) => {
+  const domain = new URL(instance.url).hostname;
+
+  return (
+    <tr>
+      <td>
+        <a href={instance.url} target="_blank" rel="noopener noreferrer">
+          {domain}
+        </a>
+      </td>
+      <td>{instance.regions.join(", ")}</td>
+      <td>
+        <div className={styles.operators}>
+          {instance.operators.map((operator) => (
+            <a
+              href={operator}
+              key={operator}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {new URL(operator).hostname}
+            </a>
+          ))}
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default InstanceRow;
diff --git a/src/components/sections/InstancesSection/InstancesTable/index.tsx b/src/components/sections/InstancesSection/InstancesTable/index.tsx
index f45a380..3427100 100644
--- a/src/components/sections/InstancesSection/InstancesTable/index.tsx
+++ b/src/components/sections/InstancesSection/InstancesTable/index.tsx
@@ -1,5 +1,9 @@
+import { useEffect, useState } from "react";
 import styles from "./InstancesTable.module.scss";
 import { Inter } from "next/font/google";
+import type { Instance } from "@/lib/interfaces/instance";
+import { fetchInstances } from "@/lib/instances";
+import InstanceRow from "./InstanceRow";
 
 const inter = Inter({
   weight: ["400", "500", "600", "700"],
@@ -7,6 +11,21 @@ const inter = Inter({
 });
 
 const InstancesTable = () => {
+  const [instances, setInstances] = useState<Instance[]>([]);
+
+  useEffect(() => {
+    init();
+  }, []);
+
+  const init = async () => {
+    try {
+      const instances = await fetchInstances();
+      setInstances(instances);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   return (
     <div className={[styles.tableContainer, inter.className].join(" ")}>
       <table className={styles.table}>
@@ -18,11 +37,9 @@ const InstancesTable = () => {
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>Instance 1</td>
-            <td>United States</td>
-            <td>Admin 1</td>
-          </tr>
+          {instances.map((instance, i) => (
+            <InstanceRow key={i} instance={instance} />
+          ))}
         </tbody>
       </table>
     </div>
diff --git a/src/lib/instances.ts b/src/lib/instances.ts
new file mode 100644
index 0000000..1b813ee
--- /dev/null
+++ b/src/lib/instances.ts
@@ -0,0 +1,13 @@
+import { Instance } from "./interfaces/instance";
+
+export const fetchInstances = async () => {
+  const instanceManifestUrl =
+    process.env.NEXT_PUBLIC_INSTANCE_MANIFEST_URL ||
+    "https://raw.githubusercontent.com/httpjamesm/AnonymousOverflow/main/instances.json";
+
+  const res = await fetch(instanceManifestUrl);
+
+  const data: Instance[] = await res.json();
+
+  return data;
+};
diff --git a/src/lib/interfaces/instance.ts b/src/lib/interfaces/instance.ts
new file mode 100644
index 0000000..916f6bb
--- /dev/null
+++ b/src/lib/interfaces/instance.ts
@@ -0,0 +1,5 @@
+export interface Instance {
+  url: string;
+  regions: string[];
+  operators: string[];
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 05a8a74..5211404 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -8,4 +8,12 @@ body,
 
 body {
     background-color: #1B1F26;
+}
+
+a {
+    color: #92adff;
+    text-decoration: none;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
 }
\ No newline at end of file