diff options
Diffstat (limited to 'app/src/components/Dashboard.tsx')
| -rw-r--r-- | app/src/components/Dashboard.tsx | 159 |
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> + </> ); } |