Begin navbar

1 files changed, 84 insertions, 75 deletions

diff --git a/app/src/components/Dashboard.tsx b/app/src/components/Dashboard.tsx
index 51d3020..e16c44e 100644
--- a/app/src/components/Dashboard.tsx
+++ b/app/src/components/Dashboard.tsx
@@ -4,6 +4,7 @@ import styles from '../styles/Dashboard.module.css';
 import { useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import Navbar from './Navbar';
 
 function Dashboard() {
   document.title = 'LinkLogger | Dashboard';
@@ -44,10 +45,15 @@ function Dashboard() {
         }
       })
 
-      // Catch 404 error = user has no links
-
-      .catch(() => {
-        navigate('/login');
+      .catch((error: unknown) => {
+        if (axios.isAxiosError(error)) {
+          if (error.response?.status === 404) {
+            // Create a message alerting the user there are no links
+            navigate('/login');
+          } else {
+            navigate('/login');
+          }
+        }
       });
   }, []);
 
@@ -109,79 +115,82 @@ function Dashboard() {
   };
 
   return (
-    <table id={styles.mainTable}>
-      <thead>
-        <tr style={{ border: '2px solid #ccc' }}>
-          <th>Link</th>
-          <th>Visits</th>
-          <th>Redirect</th>
-          <th>Expire Date</th>
-        </tr>
-      </thead>
-      <tbody>
-        {/* For every link and its logs */}
-        {links.map((link) => (
-          <React.Fragment key={link.link}>
-            <tr className={styles.linkTableRow}>
-              <td>
-                <button
-                  onClick={() => toggleLogRow(link.link)}
-                  className={styles.linkButton}
-                >
-                  {link.link}
-                </button>
-              </td>
-              <td>
-                {logs.filter((log) => log.link === link.link).length || 0}
-              </td>
-              <td>{link.redirect_link}</td>
-              <td>{link.expire_date}</td>
-            </tr>
-
-            {/* Conditionally render logs for this link */}
-            {visibleLog === link.link && (
-              <tr className={styles.logTableRow}>
-                <td colSpan={6}>
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>ID</th>
-                        <th>Timestamp</th>
-                        <th>IP</th>
-                        <th>Location</th>
-                        <th colSpan={2}>ISP</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {/* Render logs only if visibleLog matches the link */}
-                      {logs
-                        .filter((log) => log.link === link.link)
-                        .map((log, index, filteredLogs) => (
-                          <tr key={log.id}>
-                            <td>{filteredLogs.length - index}</td>
-                            <td>{log.timestamp}</td>
-                            <td>{log.ip}</td>
-                            <td>{log.location}</td>
-                            <td>{log.isp}</td>
-                            <td>
-                              <FontAwesomeIcon
-                                icon={faTrash}
-                                className={styles.trashBin}
-                                id={log.id.toString()}
-                                onClick={deleteLog}
-                              />
-                            </td>
-                          </tr>
-                        ))}
-                    </tbody>
-                  </table>
+    <>
+      <Navbar />
+      <table id={styles.mainTable}>
+        <thead>
+          <tr style={{ border: '2px solid #ccc' }}>
+            <th>Link</th>
+            <th>Visits</th>
+            <th>Redirect</th>
+            <th>Expire Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          {/* For every link and its logs */}
+          {links.map((link) => (
+            <React.Fragment key={link.link}>
+              <tr className={styles.linkTableRow}>
+                <td>
+                  <button
+                    onClick={() => toggleLogRow(link.link)}
+                    className={styles.linkButton}
+                  >
+                    {link.link}
+                  </button>
+                </td>
+                <td>
+                  {logs.filter((log) => log.link === link.link).length || 0}
                 </td>
+                <td>{link.redirect_link}</td>
+                <td>{link.expire_date}</td>
               </tr>
-            )}
-          </React.Fragment>
-        ))}
-      </tbody>
-    </table>
+
+              {/* Conditionally render logs for this link */}
+              {visibleLog === link.link && (
+                <tr className={styles.logTableRow}>
+                  <td colSpan={6}>
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>ID</th>
+                          <th>Timestamp</th>
+                          <th>IP</th>
+                          <th>Location</th>
+                          <th colSpan={2}>ISP</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {/* Render logs only if visibleLog matches the link */}
+                        {logs
+                          .filter((log) => log.link === link.link)
+                          .map((log, index, filteredLogs) => (
+                            <tr key={log.id}>
+                              <td>{filteredLogs.length - index}</td>
+                              <td>{log.timestamp}</td>
+                              <td>{log.ip}</td>
+                              <td>{log.location}</td>
+                              <td>{log.isp}</td>
+                              <td>
+                                <FontAwesomeIcon
+                                  icon={faTrash}
+                                  className={styles.trashBin}
+                                  id={log.id.toString()}
+                                  onClick={deleteLog}
+                                />
+                              </td>
+                            </tr>
+                          ))}
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              )}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </>
   );
 }