Merge branch 'main' into feat/emailJS

UoaWDCC · Aug 20, 2024 · a6c2098 · a6c2098
2 parents ba3d962 + 8f8a27d
commit a6c2098
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 130 deletions.
diff --git a/backend/.gitignore b/backend/.gitignore
@@ -1,3 +1,3 @@
 node_modules
 # Keep environment variables out of version control
-.env
+.env
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -33,4 +33,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
@@ -1,4 +1,5 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+};
+
+export default nextConfig;
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,8 +1,8 @@
-export default function App() {
-
-  return (
-    <>
-    </>
-
-  );
-}
+export default function App() {
+
+  return (
+    <>
+    </>
+
+  );
+}
diff --git a/frontend/src/ui/Modal.tsx b/frontend/src/ui/Modal.tsx
@@ -1,20 +1,16 @@
 'use client'
-import { useSearchParams, usePathname, useRouter } from 'next/navigation'
+
 import React from 'react';
 import { useRef, useEffect } from 'react'
 import styles from "./Modal.module.css"
 
 type Props = {
+    showModal: boolean,
     onConfirm: (() => void) | null,
     onDeny: (() => void) | null,
     children: React.ReactNode,
 }
 
-type Params = {
-    key: string,
-    value: string,
-}
-
 /**\
  * Function to return the modal component for any necessary popups
  * 
@@ -25,61 +21,26 @@ type Params = {
  * 
  * @returns the modal component
  */
-export default function Modal({ onConfirm, onDeny, children }:
+export default function Modal({ showModal, onConfirm, onDeny, children }:
     Props
 ) {
-    const searchParams = useSearchParams()
     const modalRef = useRef<null | HTMLDialogElement>(null)
-    const showModal = searchParams.get('showModal')
-
-    const pathname = usePathname()
-    const {replace} = useRouter()
-
-    function updateSearchParams({key, value}: Params) {
-        const params = new URLSearchParams(searchParams)
-        if (value) {
-          params.set(key, value)
-        } else {
-          params.delete(key)
-        }
-
-        const newUrl = `${pathname}?${params.toString()}`
-        replace(newUrl)
-    }
-
-    // Ensure that there is at least one button to close the modal
-    if (!onConfirm && !onDeny) {
-        throw new InvalidModalError("The modal has no onConfirm and no onDeny function");
-    }
-
+
     useEffect(() => {
-        if (showModal === 'y') {
-            modalRef.current?.showModal()
-        } else {
-            modalRef.current?.close()
-        }
+      if (showModal == true) {
+          modalRef.current?.showModal()
+      } else {
+          modalRef.current?.close()
+      }
     }, [showModal])
 
-    const closeModal = () => {
-        modalRef.current?.close()
-        updateSearchParams({key: "showModal", value: "n"})
-    }
-
-    const clickDeny = () => {
-        if (onDeny) {
-            onDeny()
-        }
-        closeModal()
-    }
 
-    const clickConfirm = () => {
-        if (onConfirm) {
-            onConfirm()
-        }
-        closeModal()
+    // Ensure that there is at least one button to close the modal
+    if (!onConfirm && !onDeny) {
+        throw new InvalidModalError("The modal has no onConfirm or no onDeny function");
     }
 
-    const modal: JSX.Element | null = showModal === "y"
+    const modal: JSX.Element | null = showModal === true
         ? (
             <dialog ref={modalRef}>
                 <div className={styles.modal}>
@@ -90,11 +51,11 @@ export default function Modal({ onConfirm, onDeny, children }:
                             {/*If onConfirm or onDeny are null then don't include their buttons*/}
                             {!onConfirm
                                 ? null
-                                : <button onClick={clickConfirm} className={styles.confirmButton}>Confirm</button>
+                                : <button onClick={onConfirm} className={styles.confirmButton}>Confirm</button>
                             }
                             {!onDeny
                                 ? null
-                                : <button onClick={clickDeny} className={styles.denyButton}>Deny</button>
+                                : <button onClick={onDeny} className={styles.denyButton}>Deny</button>
                             }
                         </div>
                 </div>

diff --git a/frontend/src/ui/PastEvents.tsx b/frontend/src/ui/PastEvents.tsx
@@ -1,26 +1,27 @@
-import styles from "./PastEvents.module.css";
-import EventCard from "./EventCard"
-
-export default function PastEvents() {
-  const pastEvents = [
-    {eventName: "Event 1", eventDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eia pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", imgUrl: "https://fastly.4sqi.net/img/general/200x200/32264433_4nGcfHNabq9lyah9S3b1PlpX_6p0qENU25inJ93SWZ4.jpg"},
-    {eventName: "Event 2", eventDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eia pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", imgUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Backyardpool.jpg/1200px-Backyardpool.jpg"},
-    {eventName: "Event 3", eventDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eia pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", imgUrl: "https://spothopper-static.s3.us-east-1.amazonaws.com/web/daviebilliardclub--com/custom/fb_image.jpg"}
-]
-  return (
-    <div className={styles.container}>
-      <h1 className={styles.title}>
-        Past Events
-      </h1>
-      <div className={styles.content}>
-        {pastEvents.map((event) => (
-          <EventCard key={event.eventName} event={event} />     
-        ))}
-      </div>
-      <button className={styles.button}>
-        View All Events
-      </button>
-    </div>
-
-  );
+import styles from "./PastEvents.module.css";
+import EventCard from "./EventCard"
+
+export default function PastEvents() {
+  const pastEvents = [
+    {eventName: "Event 1", eventDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eia pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", imgUrl: "https://fastly.4sqi.net/img/general/200x200/32264433_4nGcfHNabq9lyah9S3b1PlpX_6p0qENU25inJ93SWZ4.jpg"},
+    {eventName: "Event 2", eventDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eia pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", imgUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Backyardpool.jpg/1200px-Backyardpool.jpg"},
+    {eventName: "Event 3", eventDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eia pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", imgUrl: "https://spothopper-static.s3.us-east-1.amazonaws.com/web/daviebilliardclub--com/custom/fb_image.jpg"}
+  ]
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>
+        Past Events
+      </h1>
+      <div className={styles.content}>
+        {pastEvents.map((event) => (
+          <EventCard key={event.eventName} event={event} />     
+        ))}
+      </div>
+      <button className={styles.button}>
+        View All Events
+      </button>
+    </div>
+
+  );
 }
diff --git a/frontend/src/ui/TestButton.tsx b/frontend/src/ui/TestButton.tsx
@@ -1,40 +1,10 @@
-'use client'
-import { useRouter, useSearchParams, usePathname } from 'next/navigation'
+import { MouseEventHandler } from "react";
 import styles from "./TestButton.module.css";
 
-type Params = {
-    key: string,
-    value: string,
-}
-
-export default function TestButton() {
-    const searchParams = useSearchParams()
-    const pathname = usePathname()
-    const {replace} = useRouter()
-    const showModal = searchParams.get('showModal')
-
-    function updateSearchParams({key, value}: Params) {
-        const params = new URLSearchParams(searchParams)
-        if (value) {
-          params.set(key, value)
-        } else {
-          params.delete(key)
-        }
-        const newUrl = `${pathname}?${params.toString()}`
-        replace(newUrl)
-    }
-
-    function handleClick() {
-        if (showModal === 'y') {
-            updateSearchParams({key: "showModal", value: "n"})
-        } else {
-            updateSearchParams({key: "showModal", value: "y"})
-        }
-    }
-
-    return (
-        <div className={styles.button}>
-            <button onClick={handleClick}>Toggle Modal</button>
-        </div>
-    );
+export default function TestButton({ handleClick }: {handleClick: MouseEventHandler<HTMLButtonElement>;}) {
+  return (
+      <div className={styles.button}>
+          <button onClick={handleClick}>Toggle Modal</button>
+      </div>
+  );
 }