Add favicon for event

app/comments/CommentsForm.tsx

@@ -1,3 +1,105 @@
-export default function CommentsForm() {
-  return <h1>User Comments</h1>;
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { Comment } from '../../database/comments';
+import { SiteEvent } from '../../database/events';
+import { User } from '../../database/users';
+import { CommentsResponseBodyPost } from '../api/comments/route';
+
+type Prop = {
+  comments: Comment[];
+  user: Pick<User, 'username'>;
+  event: Pick<SiteEvent, 'name'>;
+};
+
+export default function CommentsForm(props: Prop) {
+  const [commentText, setCommentText] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const router = useRouter();
+
+  return (
+    <>
+      <h1>Notes for {props.user.username}</h1>
+
+      <div>
+        <div>
+          {props.comments.length === 0 ? (
+            'No Comments Posted'
+          ) : (
+            <ul>
+              {props.comments.map((comment) => (
+                <li key={`comments-${comment.id}`}>
+                  <Link href="/comments">{comment.eventId}</Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div>
+          <div>
+            <h2>Create Comment</h2>
+
+            <form
+              onSubmit={async (event) => {
+                event.preventDefault();
+
+                const response = await fetch('/api/comments', {
+                  method: 'POST',
+                  body: JSON.stringify({
+                    commentText,
+                  }),
+                });
+
+                setErrorMessage('');
+
+                if (!response.ok) {
+                  let newErrorMessage = 'Error creating note';
+
+                  try {
+                    const responseBody: CommentsResponseBodyPost =
+                      await response.json();
+
+                    if ('error' in responseBody) {
+                      newErrorMessage = responseBody.error;
+                    }
+                  } catch (error) {
+                    // Don't fail if response JSON body
+                    // cannot be parsed
+                    console.error(error);
+                  }
+
+                  setErrorMessage(newErrorMessage);
+                  return;
+                }
+
+                setCommentText('');
+
+                router.refresh();
+              }}
+            >
+              <div>{props.event.name}</div>
+
+              <label>
+                Comment
+                <input
+                  value={commentText}
+                  onChange={(event) =>
+                    setCommentText(event.currentTarget.value)
+                  }
+                />
+              </label>
+
+              <button>Add Comment</button>
+            </form>
+
+            <div>{errorMessage}</div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }

app/comments/page.tsx

@@ -2,7 +2,8 @@ import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { getComments } from '../../database/comments';
 import { getUser } from '../../database/users';
-import CommentsForm from './CommentsForm';
+
+// import CommentsForm from './CommentsForm';
 
 export default async function CommentsPage() {
   // Task: Restrict access to the notes page and only display notes belonging to the current logged in user
@@ -20,5 +21,7 @@ export default async function CommentsPage() {
   const comments = await getComments(sessionCookie.value);
   console.log(comments);
 
-  return <CommentsForm />;
+  return <h1>posted comments</h1>;
+
+  //   return <CommentsForm comments={comments} user={user} event={event} />;
 }

app/layout.tsx

@@ -47,12 +47,16 @@ export default async function RootLayout({ children }: Props) {
               <div>
                 {user ? (
                   <>
-                    <Link href={`/profile/${user.username}`}>
-                      {user.username}
-                    </Link>
-                    <Link href="/post">Post Events</Link>
-                    <Link href="/comments"> Comments </Link>
-                    <LogoutButton />
+                    <div>
+                      <LogoutButton />
+                    </div>
+                    <div>
+                      <Link href={`/profile/${user.username}`}>
+                        {user.username}
+                      </Link>
+                      <Link href="/post">Post Events</Link>
+                      <Link href="/comments"> Comments </Link>
+                    </div>
                   </>
                 ) : (
                   <>

app/pages/_app.js

@@ -0,0 +1,15 @@
+import Head from 'next/head';
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        <link rel="apple-touch-icon" href="/icon-apple-touch.png" />
+        <link rel="manifest" href="/manifest.json" />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );
+}

database/events.ts

@@ -1,7 +1,7 @@
 import { cache } from 'react';
 import { sql } from './connect';
 
-export type Event = {
+export type SiteEvent = {
   id: number;
   userId: number;
   name: string;
@@ -18,8 +18,40 @@ export type Event = {
   archived: boolean;
 };
 
+export const getEvents = cache(async (sessionToken: string) => {
+  const events = await sql<SiteEvent[]>`
+    SELECT
+      events.*
+    FROM
+      events
+      INNER JOIN sessions ON (
+        sessions.token = ${sessionToken}
+        AND sessions.user_id = events.user_id
+        AND expiry_timestamp > now()
+      )
+  `;
+  return events;
+});
+
+export const getEvent = cache(async (sessionToken: string, eventId: number) => {
+  const [event] = await sql<SiteEvent[]>`
+    SELECT
+      events.*
+    FROM
+      events
+      INNER JOIN sessions ON (
+        sessions.token = ${sessionToken}
+        AND sessions.user_id = events.user_id
+        AND expiry_timestamp > now()
+      )
+    WHERE
+      events.id = ${eventId}
+  `;
+  return event;
+});
+
 export const getEventsInsecure = cache(async () => {
-  const events = await sql<Event[]>`
+  const events = await sql<SiteEvent[]>`
     SELECT
       *
     FROM
@@ -30,7 +62,7 @@ export const getEventsInsecure = cache(async () => {
 });
 
 export const getEventInsecure = cache(async (id: number) => {
-  const [event] = await sql<Event[]>`
+  const [event] = await sql<SiteEvent[]>`
     SELECT
       *
     FROM
@@ -43,8 +75,8 @@ export const getEventInsecure = cache(async (id: number) => {
 });
 
 export const createEvent = cache(
-  async (sessionToken: string, newEvent: Omit<Event, 'id'>) => {
-    const [event] = await sql<Event[]>`
+  async (sessionToken: string, newEvent: Omit<SiteEvent, 'id'>) => {
+    const [event] = await sql<SiteEvent[]>`
       INSERT INTO
         events (
           user_id,

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Short app name",
+  "name": "A longer app name",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}