Fix re-renders from using href

8 files changed, 30 insertions, 29 deletions

diff --git a/src/App.js b/src/App.js
index ca2ec36..93a7a9c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,10 +7,11 @@ import SignUp from './routes/SignUp.js'
 import Zones from './routes/Zones'
 import Button from './uikit/Button'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 
 function ButtonRow() {
   let auth = useAuth()
+  let navigate = useNavigate();
 
   return (
     <div style={{ display: 'flex' }}>
@@ -19,14 +20,14 @@ function ButtonRow() {
           <Button
             className="LoginButton"
             primary
-            onClick={() => (document.location = '/zones')}
+            onClick={() => (navigate('/zones'))}
           >
             Zones
           </Button>
           <Button
             className="LoginButton"
             secondary
-            onClick={() => auth.signout(() => {})}
+            onClick={() => auth.signout(() => navigate('/'))}
           >
             Log Out
           </Button>
@@ -36,14 +37,14 @@ function ButtonRow() {
           <Button
             className="LoginButton"
             primary
-            onClick={() => (document.location = '/login')}
+            onClick={() => (navigate('/login'))}
           >
             Login
           </Button>
           <Button
             className="LoginButton"
             secondary
-            onClick={() => (document.location = '/signup')}
+            onClick={() => (navigate('/signup'))}
           >
             Sign Up
           </Button>
diff --git a/src/components/Record.js b/src/components/Record.js
index 7df84a5..e47b34c 100644
--- a/src/components/Record.js
+++ b/src/components/Record.js
@@ -3,15 +3,15 @@ import React from 'react'
 
 export default function Record(props) {
   return (
-    <div class="records-tr" role="row">
-      <div class="records-td records-col-type">{props.type}</div>
-      <div class="records-td records-col-name">{props.name}</div>
-      <div class="records-td records-col-value">
+    <div className="records-tr" role="row">
+      <div className="records-td records-col-type">{props.type}</div>
+      <div className="records-td records-col-name">{props.name}</div>
+      <div className="records-td records-col-value">
         {props.value}
         {props.recordSpecial}
       </div>
-      <div class="records-td records-col-ttl">{props.ttl}</div>
-      <div class="records-td records-col-actions">
+      <div className="records-td records-col-ttl">{props.ttl}</div>
+      <div className="records-td records-col-actions">
         <IconButton icon="pencil" action={() => props.setAndOpenRecord()}>
           (edit)
         </IconButton>
diff --git a/src/components/RecordTable.js b/src/components/RecordTable.js
index cd36fb4..c98bec2 100644
--- a/src/components/RecordTable.js
+++ b/src/components/RecordTable.js
@@ -44,18 +44,18 @@ export default function RecordsTable({
 }) {
   return (
     // checkbox here that toggles smart sorting
-    <div role="table" class="table">
-      <div class="records-thead" role="rowgroup">
-        <div class="records-tr" role="row">
-          <div class="records-th records-col-type">
+    <div role="table" className="table">
+      <div className="records-thead" role="rowgroup">
+        <div className="records-tr" role="row">
+          <div className="records-th records-col-type">
             Type{' '}
             {/* We need to put a button here which switches sorting direction and column*/}
           </div>
-          <div class="records-th records-col-name">Name</div>
-          <div class="records-th records-col-value">Value</div>
-          <div class="records-th records-col-ttl">TTL</div>
+          <div className="records-th records-col-name">Name</div>
+          <div className="records-th records-col-value">Value</div>
+          <div className="records-th records-col-ttl">TTL</div>
           {/* TODO: Stop using NBSP for styling */}
-          <div class="records-th records-col-actions">
+          <div className="records-th records-col-actions">
             <Button
               onClick={() =>
                 setAndOpenRecord({
@@ -72,7 +72,7 @@ export default function RecordsTable({
           </div>
         </div>
       </div>
-      <div class="records-tbody" role="rowgroup">
+      <div className="records-tbody" role="rowgroup">
         {records != null &&
           sort(records, sortDirections.UP, true, sortColumns.TYPE).map(
             (val) => {
diff --git a/src/editModal.html b/src/editModal.html
index 075d6b4..af3a79d 100644
--- a/src/editModal.html
+++ b/src/editModal.html
@@ -82,10 +82,10 @@
   <body>
     <main>
       <h1>Add record</h1>
-      <div class="flex-row">
+      <div className="flex-row">
         <div>
           <label for="cuts">Type</label>
-          <select id="cuts" class="svelte-components-form-Select--1t68vuw">
+          <select id="cuts" className="svelte-components-form-Select--1t68vuw">
             <option value="4sm">A</option>
             <option value="5sm">AAAA</option>
             <option value="5">CNAME</option>
@@ -103,7 +103,7 @@
         </div>
         <div>
           <label for="cuts">TTL</label>
-          <select id="cuts" class="svelte-components-form-Select--1t68vuw">
+          <select id="cuts" className="svelte-components-form-Select--1t68vuw">
             <option value="4sm">1 Day</option>
             <option value="5sm">AAAA</option>
             <option value="5">CNAME</option>
@@ -112,7 +112,7 @@
           </select>
         </div>
       </div>
-      <div class="flex-row">
+      <div className="flex-row">
         <button>Cancel</button>
         <button>Update</button>
       </div>
diff --git a/src/routes/Home.js b/src/routes/Home.js
index 382ea47..c867fda 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -1,4 +1,3 @@
-import Button from '../uikit/Button'
 import { useEffect, useState } from 'react'
 
 export default function Home() {
diff --git a/src/routes/Records.js b/src/routes/Records.js
index 095bb70..bae8b3d 100644
--- a/src/routes/Records.js
+++ b/src/routes/Records.js
@@ -119,7 +119,7 @@ export function Records() {
 
   return (
     <RequireAuth>
-      <main class="records-table-container">
+      <main className="records-table-container">
         <h1>DNS Records for {zoneName}</h1>
         {zone && (
           <RecordTable
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index b21b138..c5ff731 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -64,7 +64,7 @@ export function SignUp() {
     if (auth.isAuthenticated()) {
       navigate(from, { replace: true })
     }
-  }, [auth.token, from, navigate])
+  }, [auth, from, navigate])
 
   const checkPasswordsMatch = debounce((e) => {
     const password = document.getElementById('password').value
diff --git a/src/routes/Zones.js b/src/routes/Zones.js
index d9ab52c..5fee579 100644
--- a/src/routes/Zones.js
+++ b/src/routes/Zones.js
@@ -1,6 +1,7 @@
 import { RequireAuth, useAuth } from '../hooks/useAuth'
 import useFetch from '../hooks/useFetch'
 import { styled } from '@stitches/react'
+import { Link } from 'react-router-dom'
 
 const Container = styled('main', {
   maxWidth: '800px',
@@ -20,7 +21,7 @@ const Card = styled('div', {
   },
 })
 
-const LinkStyled = styled('a', {
+const LinkStyled = styled(Link, {
   textDecoration: 'none',
   color: 'inherit',
 })
@@ -58,7 +59,7 @@ export default function Zones() {
           <div style={{ display: 'flex' }}>
             {data.map((zone) => {
               return (
-                <LinkStyled href={'/zones/' + zone.id}>
+                <LinkStyled to={'/zones/' + zone.id}>
                   <Card>{zone.id}</Card>
                 </LinkStyled>
               )