From 09e905a0d8627f2a762548237b45b5bfe3dffb91 Mon Sep 17 00:00:00 2001
From: wajeht <58354193+wajeht@users.noreply.github.com>
Date: Wed, 14 Aug 2024 13:06:54 -0500
Subject: [PATCH] feat: Add notifications and jobs page handlers for settings
 and header components

---
 src/handler.ts                     | 16 ++++++++++++----
 src/router.ts                      |  7 +++++--
 src/views/components/header.html   |  9 ++++-----
 src/views/layouts/app.html         | 10 +++++-----
 src/views/layouts/auth.html        |  2 +-
 src/views/pages/jobs.html          |  4 ++++
 src/views/pages/notifications.html |  4 ++++
 src/views/pages/profile.html       |  4 ----
 8 files changed, 35 insertions(+), 21 deletions(-)
 create mode 100644 src/views/pages/jobs.html
 create mode 100644 src/views/pages/notifications.html
 delete mode 100644 src/views/pages/profile.html

diff --git a/src/handler.ts b/src/handler.ts
index fcabd6e..1005b13 100644
--- a/src/handler.ts
+++ b/src/handler.ts
@@ -43,10 +43,18 @@ export function getSettingsPageHandler(req: Request, res: Response) {
 	});
 }
 
-// GET /profile
-export function getProfilePageHandler(req: Request, res: Response) {
-	return res.render('profile.html', {
-		path: '/profile',
+// GET /notifications
+export function getNotificationsPageHandler(req: Request, res: Response) {
+	return res.render('settings.html', {
+		path: '/notifications',
+		layout: '../layouts/auth.html',
+	});
+}
+
+// GET /jobs
+export function getJobsPageHandler(req: Request, res: Response) {
+	return res.render('jobs.html', {
+		path: '/jobs',
 		layout: '../layouts/auth.html',
 	});
 }
diff --git a/src/router.ts b/src/router.ts
index ff6f286..0f1439f 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -3,12 +3,13 @@ import {
 	postNotificationHandler,
 	getHomePageHandler,
 	getAppsPageHandler,
+	getJobsPageHandler,
+	getNotificationsPageHandler,
 	postCreateAppHandler,
 	getNewAppChannelPageHandler,
 	getAppPageHandler,
 	getTermsOfServicePageHandler,
 	getSettingsPageHandler,
-	getProfilePageHandler,
 	getLogoutHandler,
 	getCreateNewAppPageHandler,
 	getAppNotificationsPageHandler,
@@ -45,7 +46,9 @@ router.get('/apps/:id/notifications', catchAsyncErrorMiddleware(getAppNotificati
 
 router.get('/settings', catchAsyncErrorMiddleware(getSettingsPageHandler));
 
-router.get('/profile', catchAsyncErrorMiddleware(getProfilePageHandler));
+router.get('/jobs', catchAsyncErrorMiddleware(getJobsPageHandler));
+
+router.get('/notifications', catchAsyncErrorMiddleware(getNotificationsPageHandler));
 
 router.get('/logout', catchAsyncErrorMiddleware(getLogoutHandler));
 
diff --git a/src/views/components/header.html b/src/views/components/header.html
index d5d693d..c991132 100644
--- a/src/views/components/header.html
+++ b/src/views/components/header.html
@@ -6,14 +6,13 @@ <h1><a href="/">Notify</a></h1>
 
   <nav style="display: flex; justify-content: space-between; align-items: center;">
     <div style="display: flex; align-items: center; gap: 10px;">
-      <a style="font-weight: <%= path === '/apps' ? 'bold' : 'normal' %>;" href="/apps">Apps</a>
-      <a style="font-weight: <%= path === '/jobs' ? 'bold' : 'normal' %>;" href="/jobs">Jobs</a>
-      <a style="font-weight: <%= path === '/notifications' ? 'bold' : 'normal' %>;" href="/notifications">Notifications</a>
+      <a style="font-weight: <%= path === '/apps' ? 'bold' : 'normal' %>; text-decoration: <%= path === '/apps' ? 'underline' : 'none' %>;" href="/apps">Apps</a>
+      <a style="font-weight: <%= path === '/jobs' ? 'bold' : 'normal' %>; text-decoration: <%= path === '/jobs' ? 'underline' : 'none' %>;" href="/jobs">Jobs</a>
+      <a style="font-weight: <%= path === '/notifications' ? 'bold' : 'normal' %>; text-decoration: <%= path === '/notifications' ? 'underline' : 'none' %>;" href="/notifications">Notifications</a>
     </div>
 
     <div style="display: flex; align-items: center; gap: 10px;">
-      <a style="font-weight: <%= path === '/profile' ? 'bold' : 'normal' %>;" href="/profile">Profile</a>
-      <a style="font-weight: <%= path === '/settings' ? 'bold' : 'normal' %>;" href="/settings">Settings</a>
+      <a style="font-weight: <%= path === '/settings' ? 'bold' : 'normal' %>; text-decoration: <%= path === '/settings' ? 'underline' : 'none' %>;" href="/settings">Settings</a>
       <a href="/logout">Logout</a>
     </div>
   </nav>
diff --git a/src/views/layouts/app.html b/src/views/layouts/app.html
index a7c0d81..2751e8c 100644
--- a/src/views/layouts/app.html
+++ b/src/views/layouts/app.html
@@ -2,18 +2,18 @@
 <html lang="en">
 	<%- include('../components/head.html') %>
 
-	<body style="display: flex; flex-direction: column; gap: 10px; min-height: 100vh;">
+	<body style="display: flex; flex-direction: column; gap: 20px; min-height: 100vh;">
 		<%- include('../components/header.html') %>
 
 		<main style="flex: 1; display: flex; flex-direction: column; gap: 10px;">
-			<h2 >Apps / <%= app.id %></h2>
+			<h2>Apps / <%= app.id %></h2>
 
 			<div style="display: grid; grid-template-columns: 20% 80%;">
 				<aside style="display: inline-block;">
 					<div style="display: flex; flex-direction: column; gap: 5px">
-						<a style="font-weight: <%= path === `/apps/${app.id}` ? 'bold' : 'normal' %>;" href="/apps/<%= app.id %>">App</a>
-						<a style="font-weight: <%= /\/apps\/.*\/channels/.test(path) ? 'bold' : 'normal' %>;" href="/apps/<%= app.id %>/channels">Channels</a>
-						<a style="font-weight: <%= /\/apps\/.*\/notifications/.test(path) ? 'bold' : 'normal' %>;" href="/apps/<%= app.id %>/notifications">Notifications</a>
+						<a style="font-weight: <%= path === `/apps/${app.id}` ? 'bold' : 'normal' %>; text-decoration: <%= path === `/apps/${app.id}` ? 'underline' : 'none' %>;" href="/apps/<%= app.id %>">App</a>
+						<a style="font-weight: <%= /\/apps\/.*\/channels/.test(path) ? 'bold' : 'normal' %>; text-decoration: <%= /\/apps\/.*\/channels/.test(path) ? 'underline' : 'none' %>;" href="/apps/<%= app.id %>/channels">Channels</a>
+						<a style="font-weight: <%= /\/apps\/.*\/notifications/.test(path) ? 'bold' : 'normal' %>; text-decoration: <%= /\/apps\/.*\/notifications/.test(path) ? 'underline' : 'none' %>;" href="/apps/<%= app.id %>/notifications">Notifications</a>
 					</div>
 				</aside>
 
diff --git a/src/views/layouts/auth.html b/src/views/layouts/auth.html
index d4e1b6d..a51e3a3 100644
--- a/src/views/layouts/auth.html
+++ b/src/views/layouts/auth.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<%- include('../components/head.html') %>
 
-	<body style="display: flex; flex-direction: column; gap: 10px; min-height: 100vh;">
+	<body style="display: flex; flex-direction: column; gap: 20px; min-height: 100vh;">
 		<%- include('../components/header.html') %>
 
 		<main style="flex: 1;">
diff --git a/src/views/pages/jobs.html b/src/views/pages/jobs.html
new file mode 100644
index 0000000..245be1e
--- /dev/null
+++ b/src/views/pages/jobs.html
@@ -0,0 +1,4 @@
+<div>
+  <h2>Jobs</h2>
+  <p>jobs</p>
+</div>
diff --git a/src/views/pages/notifications.html b/src/views/pages/notifications.html
new file mode 100644
index 0000000..c550947
--- /dev/null
+++ b/src/views/pages/notifications.html
@@ -0,0 +1,4 @@
+<div>
+  <h2>Notifications</h2>
+  <p>notifications</p>
+</div>
diff --git a/src/views/pages/profile.html b/src/views/pages/profile.html
deleted file mode 100644
index 2c204d8..0000000
--- a/src/views/pages/profile.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div>
-  <h2>Profile</h2>
-  <p>profile</p>
-</div>