feat(handler): Implement async/await for database query in getAppsPageHandler

Author: wajeht

src/handler.ts

@@ -1,4 +1,5 @@
 import { Request, Response } from 'express';
+import { db } from './db/db';
 
 // GET /healthz
 export function getHealthzHandler(req: Request, res: Response) {
@@ -45,8 +46,10 @@ export function getProfilePageHandler(req: Request, res: Response) {
 }
 
 // GET /apps
-export function getAppsPageHandler(req: Request, res: Response) {
+export async function getAppsPageHandler(req: Request, res: Response) {
+	const apps = await db.select('*').from('apps');
 	return res.render('apps.html', {
+		apps,
 		layout: '../layouts/auth.html',
 	});
 }

src/middleware.ts

@@ -9,13 +9,13 @@ export function notFoundMiddleware() {
 
 export function errorMiddleware() {
 	return async (
-		error: Error & { statusCode: number },
+		error: Error & { statusCode?: number },
 		req: Request,
 		res: Response,
 		next: NextFunction,
 	) => {
-		return res.status(error.statusCode).render('error.html', {
-			statusCode: error.statusCode,
+		return res.status(error.statusCode || 500).render('error.html', {
+			statusCode: error.statusCode || 500,
 			message: error.message,
 		});
 	};

src/views/components/header.html

@@ -1,4 +1,4 @@
-<header class="navbar p-10 sticky top-0 z-10 backdrop-blur-sm bg-white/70 border border-b">
+<header class="navbar p-10 sticky top-0 z-10 backdrop-blur-sm bg-white/70 border border-b border-gray-100">
   <div class="max-w-6xl mx-auto justify-between w-full items-center">
     <div class="flex-1">
       <a class="btn btn-ghost text-xl" href="/">Notify</a>

src/views/pages/apps.html

@@ -6,8 +6,20 @@ <h2 class="mt-0">Apps</h2>
       <button class="btn">Create a new app</button>
     </div>
 
-    <div>
+    <div class="grid grid-cols-3 gap-5 mt-5">
+      <% if (apps.length) { %>
+        <% apps.forEach(app => { %>
+          <div class="p-5 border border-gray-100 rounded-md">
+            <!-- App content here -->
+          </div>
+        <% }) %>
+      <% } %>
 
+      <% if (!apps.length) { %>
+        <div class="p-5 border border-gray-100 rounded-md">
+          There are no apps currently
+        </div>
+      <% } %>
     </div>
 
   </div>