List available zones

3 files changed, 38 insertions, 5 deletions

diff --git a/src/editModal.html b/src/editModal.html
index 93672a9..6fb41a1 100644
--- a/src/editModal.html
+++ b/src/editModal.html
@@ -69,7 +69,7 @@
       button {
         display: block;
         padding: 0.5rem;
-        margin:  0.25rem 0.25rem;
+        margin: 0.25rem 0.25rem;
         font-size: 1rem;
         border: medium none;
         border-radius: 0.5rem;
@@ -114,7 +114,7 @@
       </div>
       <div class="flex-row">
         <button>Cancel</button>
-         <button>Update</button>
+        <button>Update</button>
       </div>
     </main>
   </body>
diff --git a/src/index.js b/src/index.js
index 42a3a77..9684da6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import reportWebVitals from "./reportWebVitals";
 import { AuthProvider } from "./hooks/useAuth";
 import { FeaturesProvider } from "./hooks/useFeatures";
 import Records from "./routes/Records";
+import Zones from "./routes/Zones";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
@@ -18,9 +19,10 @@ root.render(
         <BrowserRouter>
           <Routes>
             {/* <Route path="/" element={<Home />} /> */}
-            <Route path="login" element={<Login />} />
-            <Route path="signup" element={<SignUp />} />
-            <Route path="zones/:zoneName" element={<Records />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/signup" element={<SignUp />} />
+            <Route path="/zones" element={<Zones />} />
+            <Route path="/zones/:zoneName" element={<Records />} />
           </Routes>
         </BrowserRouter>
       </FeaturesProvider>
diff --git a/src/routes/Zones.js b/src/routes/Zones.js
new file mode 100644
index 0000000..6c434d9
--- /dev/null
+++ b/src/routes/Zones.js
@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { RequireAuth, useAuth } from "../hooks/useAuth";
+import useFetch from "../hooks/useFetch";
+
+export default function Zones() {
+  const auth = useAuth();
+
+  const { data, loading, error } = useFetch("/api/v1/zones", {
+    headers: {
+      Authorization: auth.token,
+    },
+  });
+
+  if (loading) {
+    return (
+      <RequireAuth>
+        <h1>Available Zones</h1>
+        <h2>Loading zones...</h2>
+      </RequireAuth>
+    );
+  }
+
+  return (
+    <RequireAuth>
+      <h1>Available Zones</h1>
+      {data.map((zone) => {
+        return <a href={"/zones/"+zone.id}>{zone.id}</a>;
+      })}
+    </RequireAuth>
+  );
+}