Fix some lint errors, move RecordModal into its own component

9 files changed, 122 insertions, 105 deletions

diff --git a/src/components/RecordModal.js b/src/components/RecordModal.js
new file mode 100644
index 0000000..81f2791
--- /dev/null
+++ b/src/components/RecordModal.js
@@ -0,0 +1,85 @@
+import Modal from "react-modal";
+import Button from "../uikit/Button";
+import Input from "../uikit/Input";
+
+const modalStyle = {
+  content: {
+    top: "50%",
+    left: "50%",
+    right: "auto",
+    bottom: "auto",
+    marginRight: "-50%",
+    transform: "translate(-50%, -50%)",
+  },
+};
+
+export default function RecordModal(props) {
+  const { showModal, setShowModal, openRecord, setOpenRecord, saveRecord } =
+    props;
+  return (
+    <Modal
+      isOpen={showModal}
+      onRequestClose={() => setShowModal(false)}
+      style={modalStyle}
+    >
+      <table className="modal-table">
+        <thead>
+          <tr>
+            <th style={{ width: "24em" }}>Name</th>
+            <th style={{ width: "8em" }}>Content</th>
+            <th style={{ width: "6em" }}>TTL</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <Input
+                rows={1}
+                onChange={(e) =>
+                  setOpenRecord({
+                    ...openRecord,
+                    name: e.target.value,
+                  })
+                }
+                defaultValue={openRecord.name}
+              ></Input>
+            </td>
+            <td>
+              <Input
+                rows={1}
+                onChange={(e) =>
+                  setOpenRecord({
+                    ...openRecord,
+                    content: e.target.value,
+                  })
+                }
+                defaultValue={openRecord.content}
+              ></Input>
+            </td>
+            <td>
+              <Input
+                rows={1}
+                onChange={(e) =>
+                  setOpenRecord({
+                    ...openRecord,
+                    ttl: parseInt(e.target.value),
+                  })
+                }
+                type="number"
+                defaultValue={openRecord.ttl}
+              ></Input>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div style={{ display: "flex" }}>
+        <Button secondary onClick={() => setShowModal(false)}>
+          Cancel
+        </Button>
+        <Button primary onClick={() => saveRecord()}>
+          Save
+        </Button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/RecordTable.js b/src/components/RecordTable.js
index 19e1a48..e41fd70 100644
--- a/src/components/RecordTable.js
+++ b/src/components/RecordTable.js
@@ -54,7 +54,9 @@ export default function RecordsTable({
           <div class="records-th records-col-value">Value</div>
           <div class="records-th records-col-ttl">TTL</div>
           {/* TODO: Stop using NBSP for styling */}
-          <div class="records-th records-col-actions">+&nbsp;&nbsp;&nbsp;&nbsp;</div>
+          <div class="records-th records-col-actions">
+            +&nbsp;&nbsp;&nbsp;&nbsp;
+          </div>
         </div>
       </div>
       <div class="records-tbody" role="rowgroup">
diff --git a/src/hooks/useFetch.js b/src/hooks/useFetch.js
index a4eaa74..311e846 100644
--- a/src/hooks/useFetch.js
+++ b/src/hooks/useFetch.js
@@ -11,7 +11,7 @@ export default function useFetch(url, options) {
       .then((resp) => setData(resp))
       .catch((err) => setError(err))
       .finally(() => setLoading(false));
-  }, []);
+  });
 
   return { data, loading, error };
 }
diff --git a/src/index.js b/src/index.js
index 9684da6..97d63c5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
-import React, { useEffect } from "react";
+import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./index.css";
 import SignUp from "./routes/SignUp.js";
 import Login from "./routes/Login";
diff --git a/src/routes/Login.js b/src/routes/Login.js
index c035ea9..e39d01e 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -1,16 +1,13 @@
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import React from "react";
-import {
-  useNavigate,
-  useLocation,
-} from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import Button from "../uikit/Button.js";
 import Input from "../uikit/Input.js";
-import {useAuth} from "../hooks/useAuth";
-import {useFeatures} from "../hooks/useFeatures";
-import {isExpired} from "react-jwt";
-import {styled} from "@stitches/react";
-import {debounce} from "lodash";
+import { useAuth } from "../hooks/useAuth";
+import { useFeatures } from "../hooks/useFeatures";
+import { isExpired } from "react-jwt";
+import { styled } from "@stitches/react";
+import { debounce } from "lodash";
 
 const Flex = styled("div", {
   display: "flex",
@@ -67,7 +64,7 @@ function Login(props) {
 
   useEffect(() => {
     if (auth.token && !isExpired(auth.token)) {
-      navigate(from, {replace: true});
+      navigate(from, { replace: true });
     }
   }, [auth.token, from, navigate]);
 
@@ -85,7 +82,7 @@ function Login(props) {
       if (res.status === 200) {
         res.json().then((data) => {
           auth.signin(data.token, () => {
-            navigate(from, {replace: true});
+            navigate(from, { replace: true });
           });
         });
       } else {
diff --git a/src/routes/Records.css b/src/routes/Records.css
index 2ab2d82..0ba5c1e 100644
--- a/src/routes/Records.css
+++ b/src/routes/Records.css
@@ -102,6 +102,6 @@
 .ReactModal__Content {
   border-radius: 10px !important;
   border-color: #d4d4d8 !important;
-  background-color: #FAFAFA !important;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  background-color: #fafafa !important;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
diff --git a/src/routes/Records.js b/src/routes/Records.js
index 1272fe9..0a5c510 100644
--- a/src/routes/Records.js
+++ b/src/routes/Records.js
@@ -1,25 +1,10 @@
 // Meow meow meow meow
-import { styled } from "@stitches/react";
 import { RequireAuth, useAuth } from "../hooks/useAuth";
 import React, { useEffect } from "react";
 import "./Records.css";
 import RecordTable from "../components/RecordTable";
-import Modal from "react-modal";
-import useFetch from "../hooks/useFetch";
+import RecordModal from "../components/RecordModal";
 import { useParams } from "react-router-dom";
-import Button from "../uikit/Button";
-import Input from "../uikit/Input"
-
-const modalStyle = {
-  content: {
-    top: "50%",
-    left: "50%",
-    right: "auto",
-    bottom: "auto",
-    marginRight: "-50%",
-    transform: "translate(-50%, -50%)",
-  },
-};
 
 export function Records() {
   const { zoneName } = useParams();
@@ -118,70 +103,13 @@ export function Records() {
             deleteRecord={deleteRecord}
           ></RecordTable>
         )}
-        <Modal
-          isOpen={showModal}
-          onRequestClose={() => setShowModal(false)}
-          style={modalStyle}
-        >
-          <table className="modal-table">
-            <thead>
-              <tr>
-                <th style={{ width: "24em" }}>Name</th>
-                <th style={{ width: "8em" }}>Content</th>
-                <th style={{ width: "6em" }}>TTL</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <Input
-                    rows={1}
-                    onChange={(e) =>
-                      setOpenRecord({
-                        ...openRecord,
-                        name: e.target.value,
-                      })
-                    }
-                    defaultValue={openRecord.name}
-                  ></Input>
-                </td>
-                <td>
-                  <Input
-                    rows={1}
-                    onChange={(e) =>
-                      setOpenRecord({
-                        ...openRecord,
-                        content: e.target.value,
-                      })
-                    }
-                    defaultValue={openRecord.content}
-                  ></Input>
-                </td>
-                <td>
-                  <Input
-                    rows={1}
-                    onChange={(e) =>
-                      setOpenRecord({
-                        ...openRecord,
-                        ttl: parseInt(e.target.value),
-                      })
-                    }
-                    type="number"
-                    defaultValue={openRecord.ttl}
-                  ></Input>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div style={{ display: "flex" }}>
-            <Button secondary onClick={() => setShowModal(false)}>
-              Cancel
-            </Button>
-            <Button primary onClick={() => saveRecord()}>
-              Save
-            </Button>
-          </div>
-        </Modal>
+        <RecordModal
+          showModal={showModal}
+          setShowModal={setShowModal}
+          openRecord={openRecord}
+          setOpenRecord={setOpenRecord}
+          saveRecord={saveRecord}
+        />
       </main>
     </RequireAuth>
   );
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index 47e626b..f223dad 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -122,7 +122,9 @@ export function SignUp() {
         <Title>HOSTSdotTXT</Title>
         <LoginCard>
           <Subtitle>Sign Up</Subtitle>
-          <center><p>Sorry, but sign-ups are currently disabled.</p></center>
+          <center>
+            <p>Sorry, but sign-ups are currently disabled.</p>
+          </center>
         </LoginCard>
       </Flex>
     );
diff --git a/src/routes/Zones.js b/src/routes/Zones.js
index e751476..00f55be 100644
--- a/src/routes/Zones.js
+++ b/src/routes/Zones.js
@@ -1,5 +1,5 @@
-import {styled} from "@stitches/react";
-import {RequireAuth, useAuth} from "../hooks/useAuth";
+import { styled } from "@stitches/react";
+import { RequireAuth, useAuth } from "../hooks/useAuth";
 import useFetch from "../hooks/useFetch";
 
 const Container = styled("main", {
@@ -28,7 +28,7 @@ const LinkStyled = styled("a", {
 export default function Zones() {
   const auth = useAuth();
 
-  let {data, loading, error} = useFetch("/api/v1/zones", {
+  let { data, loading, error } = useFetch("/api/v1/zones", {
     headers: {
       Authorization: auth.token,
     },
@@ -38,7 +38,7 @@ export default function Zones() {
     return (
       <RequireAuth>
         <Container>
-          <div style={{padding: "0px 32px"}}>
+          <div style={{ padding: "0px 32px" }}>
             <h1>Available Zones</h1>
             <h2>Loading zones...</h2>
           </div>
@@ -46,13 +46,16 @@ export default function Zones() {
       </RequireAuth>
     );
   }
+  if (error) {
+    alert(error);
+  }
 
   return (
     <RequireAuth>
       <Container>
-        <div style={{padding: "0px 32px"}}>
+        <div style={{ padding: "0px 32px" }}>
           <h1>Available Zones</h1>
-          <div style={{display: "flex"}}>
+          <div style={{ display: "flex" }}>
             {data.map((zone) => {
               return (
                 <LinkStyled href={"/zones/" + zone.id}>