feat: filter instances by protocol

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>

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;
 };

src/lib/interfaces/instance.ts

@@ -3,3 +3,5 @@ export interface Instance {
   regions: string[];
   operators: string[];
 }
+
+export type InstanceList = Record<string, Instance[]>;