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 ( - - - - - - - - - - - {/* For every link and its logs */} - {links.map((link) => ( - - - - - - - - - {/* Conditionally render logs for this link */} - {visibleLog === link.link && ( - - + + + )} + + ))} + +
LinkVisitsRedirectExpire Date
- - - {logs.filter((log) => log.link === link.link).length || 0} - {link.redirect_link}{link.expire_date}
- - - - - - - - - - - - {/* Render logs only if visibleLog matches the link */} - {logs - .filter((log) => log.link === link.link) - .map((log, index, filteredLogs) => ( - - - - - - - - - ))} - -
IDTimestampIPLocationISP
{filteredLogs.length - index}{log.timestamp}{log.ip}{log.location}{log.isp} - -
+ <> + + + + + + + + + + + + {/* For every link and its logs */} + {links.map((link) => ( + + + + + + - )} - - ))} - -
LinkVisitsRedirectExpire Date
+ + {logs.filter((log) => log.link === link.link).length || 0} + {link.redirect_link}{link.expire_date}
+ + {/* Conditionally render logs for this link */} + {visibleLog === link.link && ( +
+ + + + + + + + + + + + {/* Render logs only if visibleLog matches the link */} + {logs + .filter((log) => log.link === link.link) + .map((log, index, filteredLogs) => ( + + + + + + + + + ))} + +
IDTimestampIPLocationISP
{filteredLogs.length - index}{log.timestamp}{log.ip}{log.location}{log.isp} + +
+
+ ); } diff --git a/app/src/components/Login.tsx b/app/src/components/Login.tsx index 2a81295..807face 100644 --- a/app/src/components/Login.tsx +++ b/app/src/components/Login.tsx @@ -3,6 +3,7 @@ import styles from '../styles/Login.module.css'; import { Link } from 'react-router-dom'; import { useNavigate } from 'react-router-dom'; import axios from 'axios'; +import Navbar from './Navbar'; function Login() { document.title = 'LinkLogger | Login'; @@ -48,43 +49,46 @@ function Login() { }; return ( -
-

Log In

-

- {error} -

-
-
-
-
- setUsername(e.target.value)} - required - /> - setPassword(e.target.value)} - required - /> - -
-
-

- Don't have an account?{' '} - - Create one now - -

-
+ <> + +
+

Log In

+

+ {error} +

+
+
+
+
+ setUsername(e.target.value)} + required + /> + setPassword(e.target.value)} + required + /> + +
+
+

+ Don't have an account?{' '} + + Create one now + +

+
+
-
+ ); } diff --git a/app/src/components/Navbar.tsx b/app/src/components/Navbar.tsx new file mode 100644 index 0000000..7ffb514 --- /dev/null +++ b/app/src/components/Navbar.tsx @@ -0,0 +1,11 @@ +import styles from '../styles/Navbar.module.css'; + +function Navbar() { + return ( + + ); +} + +export default Navbar; diff --git a/app/src/styles/Navbar.module.css b/app/src/styles/Navbar.module.css new file mode 100644 index 0000000..217e4b1 --- /dev/null +++ b/app/src/styles/Navbar.module.css @@ -0,0 +1,18 @@ +/* Create the nav and center the span */ +.navbar { + display: flex; + justify-content: center; + align-items: center; + height: 60px; + background-color: #f8f9fa; +} + +/* Create the nav links */ + +span { + font-size: 35px; + font-weight: 600; + color: #333; + text-decoration: none; + margin-right: 10px; +} \ No newline at end of file