From 21c2f61dc80ed7b747b14689ce891bcbf5893f50 Mon Sep 17 00:00:00 2001
From: httpjamesm <github@httpjames.space>
Date: Tue, 11 Jun 2024 01:39:24 -0400
Subject: [PATCH] feat: filter instances by protocol

---
 .../InstancesSection/InstancesTable/index.tsx | 33 +++++++++++++++++--
 src/lib/instances.ts                          |  4 +--
 src/lib/interfaces/instance.ts                |  2 ++
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/InstancesSection/InstancesTable/index.tsx b/src/components/sections/InstancesSection/InstancesTable/index.tsx
index 3427100..cd0ed9a 100644
--- a/src/components/sections/InstancesSection/InstancesTable/index.tsx
+++ b/src/components/sections/InstancesSection/InstancesTable/index.tsx
@@ -1,7 +1,7 @@
 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 { Instance, type InstanceList } from "@/lib/interfaces/instance";
 import { fetchInstances } from "@/lib/instances";
 import InstanceRow from "./InstanceRow";
 
@@ -11,23 +11,52 @@ const inter = Inter({
 });
 
 const InstancesTable = () => {
+  const [instanceList, setInstanceList] = useState<InstanceList | undefined>(
+    undefined
+  );
+  const [selectedProtocol, setSelectedProtocol] = useState<string>("");
   const [instances, setInstances] = useState<Instance[]>([]);
 
   useEffect(() => {
     init();
   }, []);
 
+  useEffect(() => {
+    if (!instanceList) return;
+    setInstances(instanceList[selectedProtocol]);
+  }, [selectedProtocol]);
+
   const init = async () => {
     try {
       const instances = await fetchInstances();
-      setInstances(instances);
+      setInstanceList(instances);
+      const protocols = Object.keys(instances);
+      if (!protocols.length) return;
+      setSelectedProtocol(protocols[0]);
     } catch (e) {
       console.error(e);
     }
   };
 
+  if (!instanceList) return null;
+
   return (
     <div className={[styles.tableContainer, inter.className].join(" ")}>
+      <label>
+        Protocol{" "}
+        <select
+          className={styles.select}
+          onChange={(e) => setSelectedProtocol(e.target.value)}
+        >
+          {Object.keys(instanceList).map((protocol, i) => (
+            <option key={i} value={protocol}>
+              {protocol}
+            </option>
+          ))}
+        </select>
+      </label>
+      <br />
+      <br />
       <table className={styles.table}>
         <thead>
           <tr>
diff --git a/src/lib/instances.ts b/src/lib/instances.ts
index 1b813ee..e4ffa3e 100644
--- a/src/lib/instances.ts
+++ b/src/lib/instances.ts
@@ -1,4 +1,4 @@
-import { Instance } from "./interfaces/instance";
+import type { InstanceList } from "./interfaces/instance";
 
 export const fetchInstances = async () => {
   const instanceManifestUrl =
@@ -7,7 +7,7 @@ export const fetchInstances = async () => {
 
   const res = await fetch(instanceManifestUrl);
 
-  const data: Instance[] = await res.json();
+  const data: InstanceList = await res.json();
 
   return data;
 };
diff --git a/src/lib/interfaces/instance.ts b/src/lib/interfaces/instance.ts
index 916f6bb..61fba66 100644
--- a/src/lib/interfaces/instance.ts
+++ b/src/lib/interfaces/instance.ts
@@ -3,3 +3,5 @@ export interface Instance {
   regions: string[];
   operators: string[];
 }
+
+export type InstanceList = Record<string, Instance[]>;