From 26952eab9a2b0b57904cec01a9bb36bb172eca04 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Fri, 29 Mar 2024 14:30:43 -0700
Subject: [PATCH 01/34] feedback API

---
 src/lib/api/FeedbackAPI.ts | 82 ++++++++++++++++++++++++++++++++++++++
 src/lib/api/index.ts       |  1 +
 src/lib/config.ts          |  1 +
 3 files changed, 84 insertions(+)
 create mode 100644 src/lib/api/FeedbackAPI.ts

diff --git a/src/lib/api/FeedbackAPI.ts b/src/lib/api/FeedbackAPI.ts
new file mode 100644
index 00000000..088adefd
--- /dev/null
+++ b/src/lib/api/FeedbackAPI.ts
@@ -0,0 +1,82 @@
+import config from '@/lib/config';
+import { SubmitFeedbackRequest, UpdateFeedbackStatusRequest } from '@/lib/types/apiRequests';
+import {
+  GetFeedbackResponse,
+  PublicFeedback,
+  SubmitFeedbackResponse,
+  UpdateFeedbackStatusResponse,
+} from '@/lib/types/apiResponses';
+import { FeedbackStatus, FeedbackType } from '@/lib/types/enums';
+import axios from 'axios';
+
+/**
+ * Submit feedback
+ * @param token Bearer token. Authenticated user must strictly be in the
+ * `ACTIVE` state (not `PASSWORD_RESET`)
+ * @param title Title of feedback
+ * @param description Description of feedback. Must be at least 100 characters
+ * long.
+ * @param type Type of ACM offering that the feedback is addressed to.
+ * @returns The submitted feedback
+ */
+export const addFeedback = async (
+  token: string,
+  title: string,
+  description: string,
+  type: FeedbackType
+): Promise<PublicFeedback> => {
+  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.feedback}`;
+
+  const requestBody: SubmitFeedbackRequest = { feedback: { title, description, type } };
+
+  const response = await axios.post<SubmitFeedbackResponse>(requestUrl, requestBody, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return response.data.feedback;
+};
+
+/**
+ * Get all feedback submitted by user, or by all users if current user is an
+ * admin.
+ * @param token Bearer token
+ * @returns List of submitted feedback
+ */
+export const getFeedback = async (token: string): Promise<PublicFeedback[]> => {
+  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.feedback}`;
+
+  const response = await axios.get<GetFeedbackResponse>(requestUrl, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return response.data.feedback;
+};
+
+/**
+ * Set status (e.g. acknowledged, ignored) of feedback
+ * @param token Bearer token
+ * @param uuid Feedback ID
+ * @param status Status to set feedback to
+ * @returns The updated feedback object
+ */
+export const respondToFeedback = async (
+  token: string,
+  uuid: string,
+  status: FeedbackStatus
+): Promise<PublicFeedback> => {
+  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.feedback}/${uuid}`;
+
+  const requestBody: UpdateFeedbackStatusRequest = { status };
+
+  const response = await axios.post<UpdateFeedbackStatusResponse>(requestUrl, requestBody, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return response.data.feedback;
+};
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index d0d44c46..91b6d28e 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -1,5 +1,6 @@
 export * as AuthAPI from './AuthAPI';
 export * as EventAPI from './EventAPI';
+export * as FeedbackAPI from './FeedbackAPI';
 export * as KlefkiAPI from './KlefkiAPI';
 export * as LeaderboardAPI from './LeaderboardAPI';
 export * as ResumeAPI from './ResumeAPI';
diff --git a/src/lib/config.ts b/src/lib/config.ts
index eb8031c9..71a5249d 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -37,6 +37,7 @@ const config = {
         attendance: '/attendance',
         forUserByUUID: '/attendance/user',
       },
+      feedback: '/feedback',
       leaderboard: '/leaderboard',
       store: {
         collection: '/merch/collection',

From fe1ffcb06538b5f728812f9f1b89a5d005531cce Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Fri, 29 Mar 2024 21:28:57 -0700
Subject: [PATCH 02/34] Feedback form

---
 src/components/events/FeedbackForm/index.tsx  | 72 +++++++++++++++++++
 .../events/FeedbackForm/style.module.scss     | 20 ++++++
 .../FeedbackForm/style.module.scss.d.ts       | 10 +++
 src/lib/utils.ts                              | 21 ++++--
 4 files changed, 118 insertions(+), 5 deletions(-)
 create mode 100644 src/components/events/FeedbackForm/index.tsx
 create mode 100644 src/components/events/FeedbackForm/style.module.scss
 create mode 100644 src/components/events/FeedbackForm/style.module.scss.d.ts

diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/events/FeedbackForm/index.tsx
new file mode 100644
index 00000000..9cdaa46b
--- /dev/null
+++ b/src/components/events/FeedbackForm/index.tsx
@@ -0,0 +1,72 @@
+import { Dropdown, Typography } from '@/components/common';
+import { FeedbackAPI } from '@/lib/api';
+import { FeedbackType } from '@/lib/types/enums';
+import { isEnum } from '@/lib/utils';
+import { useState } from 'react';
+import styles from './style.module.scss';
+
+const feedbackTypeNames: Record<FeedbackType, string> = {
+  GENERAL: 'ACM',
+  MERCH_STORE: 'Store',
+  BIT_BYTE: 'Bit-Byte Program',
+  AI: 'ACM AI',
+  CYBER: 'ACM Cyber',
+  DESIGN: 'ACM Design',
+  HACK: 'ACM Hack',
+  INNOVATE: 'ACM Innovate',
+};
+
+interface FeedbackFormProps {
+  authToken: string;
+}
+
+const FeedbackForm = ({ authToken }: FeedbackFormProps) => {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [type, setType] = useState(FeedbackType.GENERAL);
+
+  return (
+    <form
+      className={styles.form}
+      onSubmit={e => {
+        e.preventDefault();
+        FeedbackAPI.addFeedback(authToken, title, description, FeedbackType.GENERAL);
+      }}
+    >
+      <Typography variant="h2/bold">Feedback</Typography>
+      <p>
+        Feel free to give event suggestions, friendly words, constructive crisitism, or just say
+        what’s on your mind!
+      </p>
+      <input
+        aria-label="Feedback title"
+        placeholder="Title"
+        value={title}
+        onChange={e => setTitle(e.currentTarget.value)}
+        className={styles.field}
+      />
+      <textarea
+        aria-label="Feedback description"
+        placeholder="The Hack School event had informational slides that taught more niche than usual so I learned a lot. It was difficult to find the room though. Maybe put up a sign next time."
+        value={description}
+        onChange={e => setDescription(e.currentTarget.value)}
+        className={styles.field}
+      />
+      <Dropdown
+        name="feedback-type"
+        ariaLabel="Feedback target"
+        options={Object.entries(feedbackTypeNames).map(([value, label]) => ({ value, label }))}
+        value={type}
+        onChange={type => {
+          if (isEnum(FeedbackType, type)) {
+            setType(type);
+          }
+        }}
+        className={styles.field}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+export default FeedbackForm;
diff --git a/src/components/events/FeedbackForm/style.module.scss b/src/components/events/FeedbackForm/style.module.scss
new file mode 100644
index 00000000..590cad57
--- /dev/null
+++ b/src/components/events/FeedbackForm/style.module.scss
@@ -0,0 +1,20 @@
+@use 'src/styles/vars.scss' as vars;
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .field {
+    border: 2px solid currentColor;
+    border-radius: 0.75rem;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+
+    &:is(textarea) {
+      min-height: 10rem;
+      padding: 1rem;
+      resize: vertical;
+    }
+  }
+}
diff --git a/src/components/events/FeedbackForm/style.module.scss.d.ts b/src/components/events/FeedbackForm/style.module.scss.d.ts
new file mode 100644
index 00000000..cb5301ec
--- /dev/null
+++ b/src/components/events/FeedbackForm/style.module.scss.d.ts
@@ -0,0 +1,10 @@
+export type Styles = {
+  field: string;
+  form: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 55763694..da067acb 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -404,13 +404,24 @@ export const getOrderItemQuantities = (items: PublicOrderItem[]): PublicOrderIte
   return Array.from(itemMap.values());
 };
 
-/** Normalizes string as a capitalized community name. Defaults to General. */
-export const toCommunity = (community = ''): Community => {
-  const formattedName = capitalize(community) as Community;
+export function isEnum<T extends Record<string, string>>(
+  Enum: T,
+  value: string
+): value is T[keyof T] {
+  return Object.values(Enum).includes(value);
+}
 
-  if (Object.values(Community).includes(formattedName)) return formattedName;
+export function stringToEnum<T extends Record<string, string>>(
+  Enum: T,
+  value: string
+): T[keyof T] | null {
+  if (isEnum(Enum, value)) return value;
 
-  return Community.GENERAL;
+  return null;
+}
+
+export const toCommunity = (community = ''): Community => {
+  return stringToEnum(Community, capitalize(community)) ?? Community.GENERAL;
 };
 
 /**

From 225dbb5f0d651f182abfe1e63fdbe57f66adc8b6 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Fri, 29 Mar 2024 21:40:22 -0700
Subject: [PATCH 03/34] Create a separate event page:

1. Can open multiple events in a new tab
2. Can't have a feedback <form> inside a modal
---
 src/components/events/EventCard/index.tsx   | 15 ++++---
 src/components/events/EventDetail/index.tsx | 11 +++--
 src/components/events/EventModal/index.tsx  |  2 +-
 src/pages/events/[uuid].tsx                 | 47 +++++++++++++++++++++
 src/styles/pages/event.module.scss          |  7 +++
 src/styles/pages/event.module.scss.d.ts     |  9 ++++
 6 files changed, 81 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/events/[uuid].tsx
 create mode 100644 src/styles/pages/event.module.scss
 create mode 100644 src/styles/pages/event.module.scss.d.ts

diff --git a/src/components/events/EventCard/index.tsx b/src/components/events/EventCard/index.tsx
index 79a9d0a0..e0c2c4e8 100644
--- a/src/components/events/EventCard/index.tsx
+++ b/src/components/events/EventCard/index.tsx
@@ -1,6 +1,7 @@
 import { Typography } from '@/components/common';
 import EventModal from '@/components/events/EventModal';
 import PickupEventPreviewModal from '@/components/store/PickupEventPreviewModal';
+import { config } from '@/lib';
 import { communityNames } from '@/lib/constants/communities';
 import {
   PublicEvent,
@@ -14,6 +15,7 @@ import {
   toCommunity,
 } from '@/lib/utils';
 import Image from 'next/image';
+import Link from 'next/link';
 import { useState } from 'react';
 import styles from './style.module.scss';
 
@@ -34,7 +36,7 @@ const EventCard = ({
   borderless,
   hideInfo,
 }: EventCardProps) => {
-  const { cover, title, start, end, location, committee } = isOrderPickupEvent(event)
+  const { uuid, cover, title, start, end, location, committee } = isOrderPickupEvent(event)
     ? {
         ...(event.linkedEvent ?? {}),
         ...event,
@@ -72,11 +74,14 @@ const EventCard = ({
         />
       )}
 
-      <button
-        type="button"
+      <Link
+        href={`${config.eventsRoute}/${uuid}`}
         data-community={community}
         className={`${styles.container} ${borderless ? '' : styles.bordered} ${className || ''}`}
-        onClick={() => setExpanded(true)}
+        onClick={e => {
+          e.preventDefault();
+          setExpanded(true);
+        }}
       >
         <div className={styles.image}>
           <Image
@@ -134,7 +139,7 @@ const EventCard = ({
             </div>
           </div>
         ) : null}
-      </button>
+      </Link>
     </>
   );
 };
diff --git a/src/components/events/EventDetail/index.tsx b/src/components/events/EventDetail/index.tsx
index 79488ee1..3ce99111 100644
--- a/src/components/events/EventDetail/index.tsx
+++ b/src/components/events/EventDetail/index.tsx
@@ -12,9 +12,10 @@ import styles from './style.module.scss';
 interface EventDetailProps {
   event: PublicEvent | PublicOrderPickupEvent;
   attended: boolean;
+  showCloseBtn?: boolean;
 }
 
-const EventDetail = ({ event, attended }: EventDetailProps) => {
+const EventDetail = ({ event, attended, showCloseBtn = false }: EventDetailProps) => {
   const { cover, title, start, end, location, committee, pointValue, eventLink, description } =
     isOrderPickupEvent(event)
       ? {
@@ -32,9 +33,11 @@ const EventDetail = ({ event, attended }: EventDetailProps) => {
   return (
     <>
       <div className={styles.image}>
-        <button type="submit" aria-label="Close" className={styles.close}>
-          <CloseIcon aria-hidden className={styles.closeIcon} />
-        </button>
+        {showCloseBtn ? (
+          <button type="submit" aria-label="Close" className={styles.close}>
+            <CloseIcon aria-hidden className={styles.closeIcon} />
+          </button>
+        ) : null}
         {pointValue && <PointsDisplay points={pointValue} attended={attended} />}
         <Image src={displayCover} alt="Event Cover Image" style={{ objectFit: 'cover' }} fill />
       </div>
diff --git a/src/components/events/EventModal/index.tsx b/src/components/events/EventModal/index.tsx
index a23364cb..8fc47cc0 100644
--- a/src/components/events/EventModal/index.tsx
+++ b/src/components/events/EventModal/index.tsx
@@ -12,7 +12,7 @@ interface EventModalProps {
 const EventModal = ({ open, attended, event, onClose }: EventModalProps) => {
   return (
     <Modal open={open} onClose={onClose} bottomSheet>
-      <EventDetail event={event} attended={attended} />
+      <EventDetail event={event} attended={attended} showCloseBtn />
     </Modal>
   );
 };
diff --git a/src/pages/events/[uuid].tsx b/src/pages/events/[uuid].tsx
new file mode 100644
index 00000000..2cf64c9b
--- /dev/null
+++ b/src/pages/events/[uuid].tsx
@@ -0,0 +1,47 @@
+import EventDetail from '@/components/events/EventDetail';
+import FeedbackForm from '@/components/events/FeedbackForm';
+import { EventAPI } from '@/lib/api';
+import withAccessType from '@/lib/hoc/withAccessType';
+import { CookieService, PermissionService } from '@/lib/services';
+import type { PublicEvent } from '@/lib/types/apiResponses';
+import { CookieType } from '@/lib/types/enums';
+import styles from '@/styles/pages/event.module.scss';
+import type { GetServerSideProps } from 'next';
+import { useMemo } from 'react';
+
+interface EventPageProps {
+  token: string;
+  event: PublicEvent;
+  attended: boolean;
+}
+const EventPage = ({ token, event, attended }: EventPageProps) => {
+  const started = useMemo(() => new Date() >= new Date(event.start), [event.start]);
+
+  return (
+    <div className={styles.page}>
+      <EventDetail event={event} attended={attended} />
+      {started ? <FeedbackForm authToken={token} /> : null}
+    </div>
+  );
+};
+
+export default EventPage;
+
+const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res }) => {
+  const uuid = params?.uuid as string;
+  const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
+
+  try {
+    const event = await EventAPI.getEvent(uuid, token);
+    return {
+      props: { token, event },
+    };
+  } catch {
+    return { notFound: true };
+  }
+};
+
+export const getServerSideProps = withAccessType(
+  getServerSidePropsFunc,
+  PermissionService.loggedInUser
+);
diff --git a/src/styles/pages/event.module.scss b/src/styles/pages/event.module.scss
new file mode 100644
index 00000000..9cfe0fec
--- /dev/null
+++ b/src/styles/pages/event.module.scss
@@ -0,0 +1,7 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 0 auto;
+  max-width: 70rem;
+}
diff --git a/src/styles/pages/event.module.scss.d.ts b/src/styles/pages/event.module.scss.d.ts
new file mode 100644
index 00000000..190f135c
--- /dev/null
+++ b/src/styles/pages/event.module.scss.d.ts
@@ -0,0 +1,9 @@
+export type Styles = {
+  page: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

From 05796594f34e78ec9590570dd443dce4e1a4662a Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Fri, 29 Mar 2024 22:03:21 -0700
Subject: [PATCH 04/34] Improve feedback submitting experience

---
 src/components/events/FeedbackForm/index.tsx  | 29 ++++++++++++++++---
 .../events/FeedbackForm/style.module.scss     | 14 ++++++++-
 .../FeedbackForm/style.module.scss.d.ts       |  1 +
 src/lib/config.ts                             |  1 +
 src/lib/utils.ts                              |  4 ++-
 src/pages/events/[uuid].tsx                   | 13 +++++++--
 6 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/events/FeedbackForm/index.tsx
index 9cdaa46b..71e2d9b0 100644
--- a/src/components/events/FeedbackForm/index.tsx
+++ b/src/components/events/FeedbackForm/index.tsx
@@ -1,7 +1,8 @@
 import { Dropdown, Typography } from '@/components/common';
+import { showToast } from '@/lib';
 import { FeedbackAPI } from '@/lib/api';
 import { FeedbackType } from '@/lib/types/enums';
-import { isEnum } from '@/lib/utils';
+import { isEnum, reportError } from '@/lib/utils';
 import { useState } from 'react';
 import styles from './style.module.scss';
 
@@ -28,9 +29,25 @@ const FeedbackForm = ({ authToken }: FeedbackFormProps) => {
   return (
     <form
       className={styles.form}
-      onSubmit={e => {
+      onSubmit={async e => {
         e.preventDefault();
-        FeedbackAPI.addFeedback(authToken, title, description, FeedbackType.GENERAL);
+        if (title.length === 0) {
+          return;
+        }
+        try {
+          await FeedbackAPI.addFeedback(
+            authToken,
+            title,
+            description.padEnd(100, ' '),
+            FeedbackType.GENERAL
+          );
+          showToast(
+            'Feedback received!',
+            'Thank you for taking the time to help us make our events better for you.'
+          );
+        } catch (error) {
+          reportError('Failed to submit feedback', error);
+        }
       }}
     >
       <Typography variant="h2/bold">Feedback</Typography>
@@ -64,7 +81,11 @@ const FeedbackForm = ({ authToken }: FeedbackFormProps) => {
         }}
         className={styles.field}
       />
-      <button type="submit">Submit</button>
+      {title.length > 0 ? (
+        <button type="submit" className={styles.submit}>
+          Submit
+        </button>
+      ) : null}
     </form>
   );
 };
diff --git a/src/components/events/FeedbackForm/style.module.scss b/src/components/events/FeedbackForm/style.module.scss
index 590cad57..2fa1a4d6 100644
--- a/src/components/events/FeedbackForm/style.module.scss
+++ b/src/components/events/FeedbackForm/style.module.scss
@@ -9,7 +9,8 @@
     border: 2px solid currentColor;
     border-radius: 0.75rem;
     font-size: 1rem;
-    padding: 0.5rem 1rem;
+    min-height: 3rem;
+    padding: 0 1rem;
 
     &:is(textarea) {
       min-height: 10rem;
@@ -17,4 +18,15 @@
       resize: vertical;
     }
   }
+
+  .submit {
+    align-self: center;
+    background-color: var(--theme-text-on-background-1);
+    border-radius: 2rem;
+    color: var(--theme-background);
+    font-size: 1rem;
+    font-weight: bold;
+    min-height: 3rem;
+    padding: 0 2rem;
+  }
 }
diff --git a/src/components/events/FeedbackForm/style.module.scss.d.ts b/src/components/events/FeedbackForm/style.module.scss.d.ts
index cb5301ec..b1d259c0 100644
--- a/src/components/events/FeedbackForm/style.module.scss.d.ts
+++ b/src/components/events/FeedbackForm/style.module.scss.d.ts
@@ -1,6 +1,7 @@
 export type Styles = {
   field: string;
   form: string;
+  submit: string;
 };
 
 export type ClassNames = keyof Styles;
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 71a5249d..79e68cc8 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -83,6 +83,7 @@ const config = {
   leaderboardRoute: '/leaderboard',
   profileRoute: '/profile',
   aboutRoute: '/about',
+  feedbackRoute: '/feedback',
   userProfileRoute: '/u/',
   store: {
     homeRoute: '/store',
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index da067acb..b4351de0 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -3,6 +3,7 @@ import ranks from '@/lib/constants/ranks';
 import showToast from '@/lib/showToast';
 import type { URL } from '@/lib/types';
 import type {
+  ApiResponse,
   CustomErrorBody,
   PublicEvent,
   PublicMerchCollection,
@@ -55,7 +56,8 @@ export const getMessagesFromError = (errBody: CustomErrorBody): string[] => {
 
 export function getErrorMessage(error: unknown): string {
   if (error instanceof AxiosError && error.response?.data?.error) {
-    return getMessagesFromError(error.response.data.error).join('\n\n');
+    const response: ApiResponse = error.response.data;
+    return getMessagesFromError(response.error).join('\n\n') || error.message;
   }
   if (error instanceof Error) {
     return error.message;
diff --git a/src/pages/events/[uuid].tsx b/src/pages/events/[uuid].tsx
index 2cf64c9b..f404815c 100644
--- a/src/pages/events/[uuid].tsx
+++ b/src/pages/events/[uuid].tsx
@@ -1,6 +1,6 @@
 import EventDetail from '@/components/events/EventDetail';
 import FeedbackForm from '@/components/events/FeedbackForm';
-import { EventAPI } from '@/lib/api';
+import { EventAPI, UserAPI } from '@/lib/api';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { CookieService, PermissionService } from '@/lib/services';
 import type { PublicEvent } from '@/lib/types/apiResponses';
@@ -32,9 +32,16 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res })
   const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
 
   try {
-    const event = await EventAPI.getEvent(uuid, token);
+    const [event, attendances] = await Promise.all([
+      EventAPI.getEvent(uuid, token),
+      UserAPI.getAttendancesForCurrentUser(token),
+    ]);
     return {
-      props: { token, event },
+      props: {
+        token,
+        event,
+        attended: attendances.some(attendance => attendance.event.uuid === uuid),
+      },
     };
   } catch {
     return { notFound: true };

From 5327b01ec1f02ad7f5922d1a22118f3f62be7731 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Fri, 29 Mar 2024 22:28:58 -0700
Subject: [PATCH 05/34] Feedback page

---
 src/components/events/Feedback/index.tsx      | 47 ++++++++++++++++
 .../events/Feedback/style.module.scss         | 53 +++++++++++++++++++
 .../events/Feedback/style.module.scss.d.ts    | 13 +++++
 src/components/events/FeedbackForm/index.tsx  |  4 +-
 src/lib/types/apiResponses.ts                 |  2 +-
 src/pages/admin/index.tsx                     |  1 +
 src/pages/feedback.tsx                        | 38 +++++++++++++
 src/styles/pages/feedback.module.scss         |  7 +++
 src/styles/pages/feedback.module.scss.d.ts    |  9 ++++
 9 files changed, 172 insertions(+), 2 deletions(-)
 create mode 100644 src/components/events/Feedback/index.tsx
 create mode 100644 src/components/events/Feedback/style.module.scss
 create mode 100644 src/components/events/Feedback/style.module.scss.d.ts
 create mode 100644 src/pages/feedback.tsx
 create mode 100644 src/styles/pages/feedback.module.scss
 create mode 100644 src/styles/pages/feedback.module.scss.d.ts

diff --git a/src/components/events/Feedback/index.tsx b/src/components/events/Feedback/index.tsx
new file mode 100644
index 00000000..1f8c986a
--- /dev/null
+++ b/src/components/events/Feedback/index.tsx
@@ -0,0 +1,47 @@
+import { GifSafeImage, Typography } from '@/components/common';
+import { config } from '@/lib';
+import { PublicFeedback } from '@/lib/types/apiResponses';
+import { formatDate, getProfilePicture } from '@/lib/utils';
+import Link from 'next/link';
+import styles from './style.module.scss';
+
+interface FeedbackProps {
+  feedback: PublicFeedback;
+  adminView: boolean;
+}
+
+const Feedback = ({ feedback, adminView }: FeedbackProps) => {
+  return (
+    <div className={styles.wrapper}>
+      {adminView ? (
+        <div className={styles.top}>
+          <Link href={`${config.userProfileRoute}${feedback.user.handle}`} className={styles.user}>
+            <GifSafeImage
+              src={getProfilePicture(feedback.user)}
+              width={24}
+              height={24}
+              quality={10}
+              alt={`Profile picture for ${feedback.user.firstName} ${feedback.user.lastName}`}
+            />
+            <span>
+              {feedback.user.firstName} {feedback.user.lastName}
+            </span>
+          </Link>
+        </div>
+      ) : null}
+      <div className={styles.feedback}>
+        <Typography variant="h4/bold" component="h2">
+          {feedback.title}
+        </Typography>
+        <Typography variant="body/medium" component="p">
+          {feedback.description}
+        </Typography>
+        <Typography variant="body/small" component="p" className={styles.date}>
+          {formatDate(feedback.timestamp, true)}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default Feedback;
diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss
new file mode 100644
index 00000000..fc874e5b
--- /dev/null
+++ b/src/components/events/Feedback/style.module.scss
@@ -0,0 +1,53 @@
+.wrapper {
+  border: 1px solid var(--theme-elevated-stroke);
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    background-color: var(--theme-elevated-background);
+    border-bottom: 1px solid var(--theme-elevated-stroke);
+    border-radius: 0.5rem 0.5rem 0 0;
+    display: flex;
+    position: relative;
+
+    .user {
+      align-items: center;
+      display: flex;
+      flex: auto;
+      gap: 0.5rem;
+      padding: 0.5rem;
+
+      img {
+        border-radius: 50%;
+      }
+    }
+
+    &::after {
+      background-color: var(--theme-background);
+      border-right: 1px solid var(--theme-elevated-stroke);
+      border-top: 1px solid var(--theme-elevated-stroke);
+      content: '';
+      height: 0.5rem;
+      left: 1.25rem;
+      margin: -0.25rem;
+      position: absolute;
+      top: 100%;
+      transform: rotate(-45deg);
+      width: 0.5rem;
+    }
+  }
+
+  .feedback {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+
+    .date {
+      color: var(--theme-text-on-background-2);
+    }
+  }
+}
diff --git a/src/components/events/Feedback/style.module.scss.d.ts b/src/components/events/Feedback/style.module.scss.d.ts
new file mode 100644
index 00000000..ac25430a
--- /dev/null
+++ b/src/components/events/Feedback/style.module.scss.d.ts
@@ -0,0 +1,13 @@
+export type Styles = {
+  date: string;
+  feedback: string;
+  top: string;
+  user: string;
+  wrapper: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;
diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/events/FeedbackForm/index.tsx
index 71e2d9b0..512b1966 100644
--- a/src/components/events/FeedbackForm/index.tsx
+++ b/src/components/events/FeedbackForm/index.tsx
@@ -50,7 +50,9 @@ const FeedbackForm = ({ authToken }: FeedbackFormProps) => {
         }
       }}
     >
-      <Typography variant="h2/bold">Feedback</Typography>
+      <Typography variant="h2/bold" component="h2">
+        Feedback
+      </Typography>
       <p>
         Feel free to give event suggestions, friendly words, constructive crisitism, or just say
         what’s on your mind!
diff --git a/src/lib/types/apiResponses.ts b/src/lib/types/apiResponses.ts
index 01ba4ffc..659797f9 100644
--- a/src/lib/types/apiResponses.ts
+++ b/src/lib/types/apiResponses.ts
@@ -375,7 +375,7 @@ export interface PublicFeedback {
   user: PublicProfile;
   title: string;
   description: string;
-  timestamp: Date;
+  timestamp: string;
   status: FeedbackStatus;
   type: FeedbackType;
 }
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index c11b2181..e71b3b2f 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -30,6 +30,7 @@ const AdminPage = ({ user: { accessType }, preview }: AdminProps) => {
         }}
       >
         <LinkButton href={config.admin.events.homeRoute}>Manage Events</LinkButton>
+        <LinkButton href={config.feedbackRoute}>View Feedback</LinkButton>
       </div>
       <br />
       <Typography variant="h2/bold">Store</Typography>
diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
new file mode 100644
index 00000000..375f4d7f
--- /dev/null
+++ b/src/pages/feedback.tsx
@@ -0,0 +1,38 @@
+import { Typography } from '@/components/common';
+import Feedback from '@/components/events/Feedback';
+import { FeedbackAPI } from '@/lib/api';
+import withAccessType from '@/lib/hoc/withAccessType';
+import { CookieService, PermissionService } from '@/lib/services';
+import type { PublicFeedback } from '@/lib/types/apiResponses';
+import { CookieType } from '@/lib/types/enums';
+import styles from '@/styles/pages/feedback.module.scss';
+import type { GetServerSideProps } from 'next';
+
+interface FeedbackPageProps {
+  feedback: PublicFeedback[];
+}
+const FeedbackPage = ({ feedback }: FeedbackPageProps) => {
+  return (
+    <div className={styles.page}>
+      <Typography variant="h2/bold" component="h1">
+        Feedback Submissions
+      </Typography>
+      {feedback.map(feedback => (
+        <Feedback key={feedback.uuid} feedback={feedback} adminView />
+      ))}
+    </div>
+  );
+};
+
+export default FeedbackPage;
+
+const getServerSidePropsFunc: GetServerSideProps = async ({ req, res }) => {
+  const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
+  const feedback = await FeedbackAPI.getFeedback(token);
+  return { props: { feedback } };
+};
+
+export const getServerSideProps = withAccessType(
+  getServerSidePropsFunc,
+  PermissionService.loggedInUser
+);
diff --git a/src/styles/pages/feedback.module.scss b/src/styles/pages/feedback.module.scss
new file mode 100644
index 00000000..7dd2324c
--- /dev/null
+++ b/src/styles/pages/feedback.module.scss
@@ -0,0 +1,7 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 0 auto;
+  max-width: 70rem;
+}
diff --git a/src/styles/pages/feedback.module.scss.d.ts b/src/styles/pages/feedback.module.scss.d.ts
new file mode 100644
index 00000000..190f135c
--- /dev/null
+++ b/src/styles/pages/feedback.module.scss.d.ts
@@ -0,0 +1,9 @@
+export type Styles = {
+  page: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

From 3758afa6d6491a5911c3e70074d28255a2b9763b Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Fri, 29 Mar 2024 23:00:40 -0700
Subject: [PATCH 06/34] Add statuses

turns out you can't change status after responding
---
 src/components/events/Feedback/index.tsx      | 128 ++++++++++++++----
 .../events/Feedback/style.module.scss         |  74 +++++++---
 .../events/Feedback/style.module.scss.d.ts    |   6 +-
 src/components/events/FeedbackForm/index.tsx  |   9 +-
 src/lib/api/FeedbackAPI.ts                    |   2 +-
 src/pages/feedback.tsx                        |  20 ++-
 6 files changed, 180 insertions(+), 59 deletions(-)

diff --git a/src/components/events/Feedback/index.tsx b/src/components/events/Feedback/index.tsx
index 1f8c986a..1aa612cf 100644
--- a/src/components/events/Feedback/index.tsx
+++ b/src/components/events/Feedback/index.tsx
@@ -1,44 +1,116 @@
 import { GifSafeImage, Typography } from '@/components/common';
+import { feedbackTypeNames } from '@/components/events/FeedbackForm';
 import { config } from '@/lib';
+import { FeedbackAPI } from '@/lib/api';
 import { PublicFeedback } from '@/lib/types/apiResponses';
-import { formatDate, getProfilePicture } from '@/lib/utils';
+import { FeedbackStatus } from '@/lib/types/enums';
+import { formatDate, getProfilePicture, reportError } from '@/lib/utils';
 import Link from 'next/link';
+import { useId, useState } from 'react';
+import { BsCheck, BsEyeFill, BsEyeSlashFill } from 'react-icons/bs';
 import styles from './style.module.scss';
 
 interface FeedbackProps {
   feedback: PublicFeedback;
-  adminView: boolean;
+  showUser?: boolean;
+  /**
+   * Auth token. Provide it only if the user has permission to respond to
+   * feedback (i.e. they're an admin)
+   */
+  responseToken?: string | null;
 }
 
-const Feedback = ({ feedback, adminView }: FeedbackProps) => {
+const Feedback = ({ feedback, showUser = false, responseToken = null }: FeedbackProps) => {
+  const [status, setStatus] = useState(feedback.status);
+  const id = useId();
+
+  const handleStatus = async (newStatus: FeedbackStatus) => {
+    if (!responseToken) {
+      return;
+    }
+    setStatus(newStatus);
+    try {
+      await FeedbackAPI.respondToFeedback(responseToken, feedback.uuid, newStatus);
+    } catch (error) {
+      reportError('Failed to update feedback status', error);
+      // Reset status
+      setStatus(status);
+    }
+  };
+
   return (
     <div className={styles.wrapper}>
-      {adminView ? (
-        <div className={styles.top}>
-          <Link href={`${config.userProfileRoute}${feedback.user.handle}`} className={styles.user}>
-            <GifSafeImage
-              src={getProfilePicture(feedback.user)}
-              width={24}
-              height={24}
-              quality={10}
-              alt={`Profile picture for ${feedback.user.firstName} ${feedback.user.lastName}`}
-            />
-            <span>
-              {feedback.user.firstName} {feedback.user.lastName}
-            </span>
-          </Link>
-        </div>
+      {showUser ? (
+        <Link href={`${config.userProfileRoute}${feedback.user.handle}`} className={styles.user}>
+          <GifSafeImage
+            src={getProfilePicture(feedback.user)}
+            width={24}
+            height={24}
+            quality={10}
+            alt={`Profile picture for ${feedback.user.firstName} ${feedback.user.lastName}`}
+          />
+          <span>
+            {feedback.user.firstName} {feedback.user.lastName}
+          </span>
+        </Link>
       ) : null}
-      <div className={styles.feedback}>
-        <Typography variant="h4/bold" component="h2">
-          {feedback.title}
-        </Typography>
-        <Typography variant="body/medium" component="p">
-          {feedback.description}
-        </Typography>
-        <Typography variant="body/small" component="p" className={styles.date}>
-          {formatDate(feedback.timestamp, true)}
-        </Typography>
+      <div className={styles.body}>
+        <div className={styles.feedback}>
+          <Typography variant="h4/bold" component="h2">
+            {feedback.title}
+          </Typography>
+          <Typography variant="body/medium" component="p">
+            {feedback.description}
+          </Typography>
+          <Typography variant="body/small" component="p" className={styles.date}>
+            {formatDate(feedback.timestamp, true)} &middot; {feedbackTypeNames[feedback.type]}
+          </Typography>
+        </div>
+        <div
+          className={`${styles.statuses} ${
+            responseToken === null ? styles.userView : styles.adminView
+          }`}
+        >
+          <input
+            type="radio"
+            name={id}
+            id={`${id}-SUBMITTED`}
+            value="submitted"
+            checked={status === FeedbackStatus.SUBMITTED}
+            onClick={() => handleStatus(FeedbackStatus.SUBMITTED)}
+            disabled={responseToken === null}
+          />
+          <label htmlFor={`${id}-SUBMITTED`} className={styles.status}>
+            <BsCheck aria-hidden />
+            Received
+          </label>
+          <input
+            type="radio"
+            name={id}
+            id={`${id}-ACKNOWLEDGED`}
+            value="submitted"
+            checked={status === FeedbackStatus.ACKNOWLEDGED}
+            onClick={() => handleStatus(FeedbackStatus.ACKNOWLEDGED)}
+            disabled={responseToken === null}
+          />
+          <label htmlFor={`${id}-ACKNOWLEDGED`} className={styles.status}>
+            <BsEyeFill aria-hidden />
+            Acknowledged
+          </label>
+          <input
+            type="radio"
+            name={id}
+            id={`${id}-IGNORED`}
+            value="submitted"
+            checked={status === FeedbackStatus.IGNORED}
+            onClick={() => handleStatus(FeedbackStatus.IGNORED)}
+            disabled={responseToken === null}
+          />
+          <label htmlFor={`${id}-IGNORED`} className={styles.status}>
+            <BsEyeSlashFill aria-hidden />
+            Ignored
+          </label>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss
index fc874e5b..535700e0 100644
--- a/src/components/events/Feedback/style.module.scss
+++ b/src/components/events/Feedback/style.module.scss
@@ -1,26 +1,29 @@
+@use 'src/styles/vars.scss' as vars;
+
 .wrapper {
   border: 1px solid var(--theme-elevated-stroke);
   border-radius: 0.5rem;
   display: flex;
   flex-direction: column;
 
-  .top {
+  .user {
+    align-items: center;
     background-color: var(--theme-elevated-background);
     border-bottom: 1px solid var(--theme-elevated-stroke);
     border-radius: 0.5rem 0.5rem 0 0;
     display: flex;
+    display: flex;
+    flex: auto;
+    gap: 0.5rem;
+    padding: 0.5rem;
     position: relative;
 
-    .user {
-      align-items: center;
-      display: flex;
-      flex: auto;
-      gap: 0.5rem;
-      padding: 0.5rem;
+    img {
+      border-radius: 50%;
+    }
 
-      img {
-        border-radius: 50%;
-      }
+    &:hover span {
+      text-decoration: underline;
     }
 
     &::after {
@@ -38,16 +41,53 @@
     }
   }
 
-  .feedback {
+  .body {
     display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    gap: 1rem;
     padding: 1rem;
-    white-space: pre-wrap;
-    word-break: break-word;
 
-    .date {
-      color: var(--theme-text-on-background-2);
+    .feedback {
+      display: flex;
+      flex: auto;
+      flex-direction: column;
+      gap: 0.5rem;
+      white-space: pre-wrap;
+      word-break: break-word;
+
+      .date {
+        color: var(--theme-text-on-background-2);
+      }
+    }
+
+    .statuses {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+
+      input,
+      &.userView input:not(:checked) + .status {
+        @include vars.accessibly-hidden;
+      }
+
+      .status {
+        border: 1px solid currentColor;
+        border-radius: 1rem;
+        display: flex;
+        gap: 0.25rem;
+        padding: 0.25rem;
+      }
+
+      &.adminView {
+        .status {
+          cursor: pointer;
+        }
+
+        input:checked + .status {
+          background-color: var(--theme-text-on-background-1);
+          border-color: transparent;
+          color: var(--theme-background);
+        }
+      }
     }
   }
 }
diff --git a/src/components/events/Feedback/style.module.scss.d.ts b/src/components/events/Feedback/style.module.scss.d.ts
index ac25430a..3fe37e2f 100644
--- a/src/components/events/Feedback/style.module.scss.d.ts
+++ b/src/components/events/Feedback/style.module.scss.d.ts
@@ -1,8 +1,12 @@
 export type Styles = {
+  adminView: string;
+  body: string;
   date: string;
   feedback: string;
-  top: string;
+  status: string;
+  statuses: string;
   user: string;
+  userView: string;
   wrapper: string;
 };
 
diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/events/FeedbackForm/index.tsx
index 512b1966..0cdbe2ca 100644
--- a/src/components/events/FeedbackForm/index.tsx
+++ b/src/components/events/FeedbackForm/index.tsx
@@ -6,7 +6,7 @@ import { isEnum, reportError } from '@/lib/utils';
 import { useState } from 'react';
 import styles from './style.module.scss';
 
-const feedbackTypeNames: Record<FeedbackType, string> = {
+export const feedbackTypeNames: Record<FeedbackType, string> = {
   GENERAL: 'ACM',
   MERCH_STORE: 'Store',
   BIT_BYTE: 'Bit-Byte Program',
@@ -35,12 +35,7 @@ const FeedbackForm = ({ authToken }: FeedbackFormProps) => {
           return;
         }
         try {
-          await FeedbackAPI.addFeedback(
-            authToken,
-            title,
-            description.padEnd(100, ' '),
-            FeedbackType.GENERAL
-          );
+          await FeedbackAPI.addFeedback(authToken, title, description.padEnd(100, ' '), type);
           showToast(
             'Feedback received!',
             'Thank you for taking the time to help us make our events better for you.'
diff --git a/src/lib/api/FeedbackAPI.ts b/src/lib/api/FeedbackAPI.ts
index 088adefd..1b682de6 100644
--- a/src/lib/api/FeedbackAPI.ts
+++ b/src/lib/api/FeedbackAPI.ts
@@ -72,7 +72,7 @@ export const respondToFeedback = async (
 
   const requestBody: UpdateFeedbackStatusRequest = { status };
 
-  const response = await axios.post<UpdateFeedbackStatusResponse>(requestUrl, requestBody, {
+  const response = await axios.patch<UpdateFeedbackStatusResponse>(requestUrl, requestBody, {
     headers: {
       Authorization: `Bearer ${token}`,
     },
diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
index 375f4d7f..771c2d5f 100644
--- a/src/pages/feedback.tsx
+++ b/src/pages/feedback.tsx
@@ -3,22 +3,32 @@ import Feedback from '@/components/events/Feedback';
 import { FeedbackAPI } from '@/lib/api';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { CookieService, PermissionService } from '@/lib/services';
-import type { PublicFeedback } from '@/lib/types/apiResponses';
-import { CookieType } from '@/lib/types/enums';
+import type { PrivateProfile, PublicFeedback } from '@/lib/types/apiResponses';
+import { CookieType, UserAccessType } from '@/lib/types/enums';
 import styles from '@/styles/pages/feedback.module.scss';
 import type { GetServerSideProps } from 'next';
 
 interface FeedbackPageProps {
+  user: PrivateProfile;
   feedback: PublicFeedback[];
+  token: string;
 }
-const FeedbackPage = ({ feedback }: FeedbackPageProps) => {
+const FeedbackPage = ({ user, feedback, token }: FeedbackPageProps) => {
+  /** Whether the user can respond to feedback */
+  const isAdmin = user.accessType === UserAccessType.ADMIN;
+
   return (
     <div className={styles.page}>
       <Typography variant="h2/bold" component="h1">
         Feedback Submissions
       </Typography>
       {feedback.map(feedback => (
-        <Feedback key={feedback.uuid} feedback={feedback} adminView />
+        <Feedback
+          key={feedback.uuid}
+          feedback={feedback}
+          showUser={isAdmin}
+          responseToken={isAdmin ? token : null}
+        />
       ))}
     </div>
   );
@@ -29,7 +39,7 @@ export default FeedbackPage;
 const getServerSidePropsFunc: GetServerSideProps = async ({ req, res }) => {
   const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
   const feedback = await FeedbackAPI.getFeedback(token);
-  return { props: { feedback } };
+  return { props: { feedback, token } };
 };
 
 export const getServerSideProps = withAccessType(

From 643f232c93193880808dda399d73e79dee45270d Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Fri, 29 Mar 2024 23:15:07 -0700
Subject: [PATCH 07/34] Switch to ack/ignore buttons

---
 src/components/events/Feedback/index.tsx      | 92 +++++++++----------
 .../events/Feedback/style.module.scss         | 47 ++++++----
 .../events/Feedback/style.module.scss.d.ts    |  9 +-
 .../events/FeedbackForm/style.module.scss     |  1 +
 4 files changed, 79 insertions(+), 70 deletions(-)

diff --git a/src/components/events/Feedback/index.tsx b/src/components/events/Feedback/index.tsx
index 1aa612cf..0b5503cf 100644
--- a/src/components/events/Feedback/index.tsx
+++ b/src/components/events/Feedback/index.tsx
@@ -6,7 +6,7 @@ import { PublicFeedback } from '@/lib/types/apiResponses';
 import { FeedbackStatus } from '@/lib/types/enums';
 import { formatDate, getProfilePicture, reportError } from '@/lib/utils';
 import Link from 'next/link';
-import { useId, useState } from 'react';
+import { useState } from 'react';
 import { BsCheck, BsEyeFill, BsEyeSlashFill } from 'react-icons/bs';
 import styles from './style.module.scss';
 
@@ -22,7 +22,6 @@ interface FeedbackProps {
 
 const Feedback = ({ feedback, showUser = false, responseToken = null }: FeedbackProps) => {
   const [status, setStatus] = useState(feedback.status);
-  const id = useId();
 
   const handleStatus = async (newStatus: FeedbackStatus) => {
     if (!responseToken) {
@@ -38,6 +37,30 @@ const Feedback = ({ feedback, showUser = false, responseToken = null }: Feedback
     }
   };
 
+  let badge;
+  if (status === FeedbackStatus.SUBMITTED) {
+    badge = (
+      <div className={styles.status}>
+        <BsCheck aria-hidden />
+        Received
+      </div>
+    );
+  } else if (status === FeedbackStatus.ACKNOWLEDGED) {
+    badge = (
+      <div className={`${styles.status} ${styles.acknowledged}`}>
+        <BsEyeFill aria-hidden />
+        Acknowledged
+      </div>
+    );
+  } else {
+    badge = (
+      <div className={`${styles.status} ${styles.ignored}`}>
+        <BsEyeSlashFill aria-hidden />
+        Ignored
+      </div>
+    );
+  }
+
   return (
     <div className={styles.wrapper}>
       {showUser ? (
@@ -66,51 +89,26 @@ const Feedback = ({ feedback, showUser = false, responseToken = null }: Feedback
             {formatDate(feedback.timestamp, true)} &middot; {feedbackTypeNames[feedback.type]}
           </Typography>
         </div>
-        <div
-          className={`${styles.statuses} ${
-            responseToken === null ? styles.userView : styles.adminView
-          }`}
-        >
-          <input
-            type="radio"
-            name={id}
-            id={`${id}-SUBMITTED`}
-            value="submitted"
-            checked={status === FeedbackStatus.SUBMITTED}
-            onClick={() => handleStatus(FeedbackStatus.SUBMITTED)}
-            disabled={responseToken === null}
-          />
-          <label htmlFor={`${id}-SUBMITTED`} className={styles.status}>
-            <BsCheck aria-hidden />
-            Received
-          </label>
-          <input
-            type="radio"
-            name={id}
-            id={`${id}-ACKNOWLEDGED`}
-            value="submitted"
-            checked={status === FeedbackStatus.ACKNOWLEDGED}
-            onClick={() => handleStatus(FeedbackStatus.ACKNOWLEDGED)}
-            disabled={responseToken === null}
-          />
-          <label htmlFor={`${id}-ACKNOWLEDGED`} className={styles.status}>
-            <BsEyeFill aria-hidden />
-            Acknowledged
-          </label>
-          <input
-            type="radio"
-            name={id}
-            id={`${id}-IGNORED`}
-            value="submitted"
-            checked={status === FeedbackStatus.IGNORED}
-            onClick={() => handleStatus(FeedbackStatus.IGNORED)}
-            disabled={responseToken === null}
-          />
-          <label htmlFor={`${id}-IGNORED`} className={styles.status}>
-            <BsEyeSlashFill aria-hidden />
-            Ignored
-          </label>
-        </div>
+        {responseToken !== null && status === FeedbackStatus.SUBMITTED ? (
+          <div className={styles.response}>
+            <button
+              type="button"
+              onClick={() => handleStatus(FeedbackStatus.ACKNOWLEDGED)}
+              className={`${styles.button} ${styles.acknowledge}`}
+            >
+              Acknowledge
+            </button>
+            <button
+              type="button"
+              onClick={() => handleStatus(FeedbackStatus.IGNORED)}
+              className={`${styles.button} ${styles.ignore}`}
+            >
+              Ignore
+            </button>
+          </div>
+        ) : (
+          badge
+        )}
       </div>
     </div>
   );
diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss
index 535700e0..f2cece3d 100644
--- a/src/components/events/Feedback/style.module.scss
+++ b/src/components/events/Feedback/style.module.scss
@@ -59,35 +59,42 @@
       }
     }
 
-    .statuses {
+    .response {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
+      justify-content: space-between;
 
-      input,
-      &.userView input:not(:checked) + .status {
-        @include vars.accessibly-hidden;
-      }
-
-      .status {
-        border: 1px solid currentColor;
-        border-radius: 1rem;
-        display: flex;
-        gap: 0.25rem;
-        padding: 0.25rem;
-      }
+      .button {
+        border-radius: 2rem;
+        color: var(--theme-background);
+        font-size: 1rem;
+        font-weight: bold;
+        height: 2rem;
+        padding: 0 1rem;
 
-      &.adminView {
-        .status {
-          cursor: pointer;
+        &.acknowledge {
+          background-color: var(--theme-primary-2);
         }
 
-        input:checked + .status {
-          background-color: var(--theme-text-on-background-1);
-          border-color: transparent;
-          color: var(--theme-background);
+        &.ignore {
+          background-color: var(--theme-text-on-background-2);
         }
       }
     }
+
+    .status {
+      display: flex;
+      gap: 0.25rem;
+      margin-top: auto;
+
+      &.acknowledged {
+        color: var(--theme-blue-text-button);
+      }
+
+      &.ignored {
+        color: var(--theme-text-on-background-2);
+      }
+    }
   }
 }
diff --git a/src/components/events/Feedback/style.module.scss.d.ts b/src/components/events/Feedback/style.module.scss.d.ts
index 3fe37e2f..e9e7cd06 100644
--- a/src/components/events/Feedback/style.module.scss.d.ts
+++ b/src/components/events/Feedback/style.module.scss.d.ts
@@ -1,12 +1,15 @@
 export type Styles = {
-  adminView: string;
+  acknowledge: string;
+  acknowledged: string;
   body: string;
+  button: string;
   date: string;
   feedback: string;
+  ignore: string;
+  ignored: string;
+  response: string;
   status: string;
-  statuses: string;
   user: string;
-  userView: string;
   wrapper: string;
 };
 
diff --git a/src/components/events/FeedbackForm/style.module.scss b/src/components/events/FeedbackForm/style.module.scss
index 2fa1a4d6..a5239efc 100644
--- a/src/components/events/FeedbackForm/style.module.scss
+++ b/src/components/events/FeedbackForm/style.module.scss
@@ -6,6 +6,7 @@
   gap: 1rem;
 
   .field {
+    background: none;
     border: 2px solid currentColor;
     border-radius: 0.75rem;
     font-size: 1rem;

From 6c0dbe22b8a943b2ef136a2b775c1c514d86f05e Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Fri, 29 Mar 2024 23:22:13 -0700
Subject: [PATCH 08/34] Link to feedback page from event modal

---
 src/components/events/EventModal/index.tsx       | 13 +++++++++++++
 src/components/events/Feedback/style.module.scss |  4 ++++
 2 files changed, 17 insertions(+)

diff --git a/src/components/events/EventModal/index.tsx b/src/components/events/EventModal/index.tsx
index 8fc47cc0..b8ad9377 100644
--- a/src/components/events/EventModal/index.tsx
+++ b/src/components/events/EventModal/index.tsx
@@ -1,6 +1,9 @@
 import { Modal } from '@/components/common';
 import EventDetail from '@/components/events/EventDetail';
+import { config } from '@/lib';
 import { PublicEvent } from '@/lib/types/apiResponses';
+import Link from 'next/link';
+import { useMemo } from 'react';
 
 interface EventModalProps {
   open: boolean;
@@ -10,9 +13,19 @@ interface EventModalProps {
 }
 
 const EventModal = ({ open, attended, event, onClose }: EventModalProps) => {
+  const started = useMemo(() => new Date() >= new Date(event.start), [event.start]);
+
   return (
     <Modal open={open} onClose={onClose} bottomSheet>
       <EventDetail event={event} attended={attended} showCloseBtn />
+      {started ? (
+        <Link
+          href={`${config.eventsRoute}/${event.uuid}`}
+          style={{ color: 'var(--theme-blue-text-button)' }}
+        >
+          Give feedback
+        </Link>
+      ) : null}
     </Modal>
   );
 };
diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss
index f2cece3d..9459527c 100644
--- a/src/components/events/Feedback/style.module.scss
+++ b/src/components/events/Feedback/style.module.scss
@@ -46,6 +46,10 @@
     gap: 1rem;
     padding: 1rem;
 
+    @media (max-width: vars.$breakpoint-sm) {
+      flex-direction: column;
+    }
+
     .feedback {
       display: flex;
       flex: auto;

From efe0b0d0fc33c0de14c96475b0de6be5a21cea01 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Fri, 29 Mar 2024 23:28:06 -0700
Subject: [PATCH 09/34] Fix event page

---
 src/components/events/EventDetail/index.tsx | 8 +++++---
 src/styles/pages/event.module.scss          | 5 +++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/events/EventDetail/index.tsx b/src/components/events/EventDetail/index.tsx
index 8ce1a72f..ae22d61b 100644
--- a/src/components/events/EventDetail/index.tsx
+++ b/src/components/events/EventDetail/index.tsx
@@ -26,9 +26,11 @@ const EventDetail = ({ event, attended, showCloseBtn = false }: EventDetailProps
 
   return (
     <div className={styles.container}>
-      <button type="submit" aria-label="Close" className={styles.close}>
-        <CloseIcon aria-hidden className={styles.closeIcon} />
-      </button>
+      {showCloseBtn ? (
+        <button type="submit" aria-label="Close" className={styles.close}>
+          <CloseIcon aria-hidden className={styles.closeIcon} />
+        </button>
+      ) : null}
       <div className={styles.image}>
         <Image src={displayCover} alt="Event Cover Image" style={{ objectFit: 'cover' }} fill />
       </div>
diff --git a/src/styles/pages/event.module.scss b/src/styles/pages/event.module.scss
index 9cfe0fec..0af24bcf 100644
--- a/src/styles/pages/event.module.scss
+++ b/src/styles/pages/event.module.scss
@@ -4,4 +4,9 @@
   gap: 2rem;
   margin: 0 auto;
   max-width: 70rem;
+
+  div:first-child {
+    padding: 0;
+    width: auto;
+  }
 }

From ada0ab05e9a1bd3f302ff49905e247fda9dd9236 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 18:51:23 -0700
Subject: [PATCH 10/34] Restrict view feedback link in admin page

And add titles to new pages
---
 src/pages/admin/index.tsx   | 6 ++++--
 src/pages/events/[uuid].tsx | 1 +
 src/pages/feedback.tsx      | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 70212a89..1357a1e0 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -30,11 +30,13 @@ const AdminPage = ({ user: { accessType }, preview }: AdminProps) => {
         }}
       >
         {PermissionService.canManageEvents.includes(accessType) ? (
-          <LinkButton href={config.admin.events.homeRoute}>Manage Events</LinkButton>
+          <>
+            <LinkButton href={config.admin.events.homeRoute}>Manage Events</LinkButton>
+            <LinkButton href={config.feedbackRoute}>View Feedback</LinkButton>
+          </>
         ) : (
           'Restricted Access'
         )}
-        <LinkButton href={config.feedbackRoute}>View Feedback</LinkButton>
       </div>
       <br />
       <Typography variant="h2/bold">Store</Typography>
diff --git a/src/pages/events/[uuid].tsx b/src/pages/events/[uuid].tsx
index f404815c..69362663 100644
--- a/src/pages/events/[uuid].tsx
+++ b/src/pages/events/[uuid].tsx
@@ -38,6 +38,7 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res })
     ]);
     return {
       props: {
+        title: event.title,
         token,
         event,
         attended: attendances.some(attendance => attendance.event.uuid === uuid),
diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
index 771c2d5f..40335a97 100644
--- a/src/pages/feedback.tsx
+++ b/src/pages/feedback.tsx
@@ -39,7 +39,7 @@ export default FeedbackPage;
 const getServerSidePropsFunc: GetServerSideProps = async ({ req, res }) => {
   const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
   const feedback = await FeedbackAPI.getFeedback(token);
-  return { props: { feedback, token } };
+  return { props: { title: 'Feedback Submissions', feedback, token } };
 };
 
 export const getServerSideProps = withAccessType(

From 77b27693f35149f1e4ff68ebab76a194c7a4f55d Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 21:13:51 -0700
Subject: [PATCH 11/34] Sort feedback by unacknowledged first, if admin

backend suggestion
---
 src/components/events/Feedback/index.tsx |  3 ++-
 src/pages/feedback.tsx                   | 30 +++++++++++++++++-------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/events/Feedback/index.tsx b/src/components/events/Feedback/index.tsx
index 0b5503cf..e42f0aa5 100644
--- a/src/components/events/Feedback/index.tsx
+++ b/src/components/events/Feedback/index.tsx
@@ -86,7 +86,8 @@ const Feedback = ({ feedback, showUser = false, responseToken = null }: Feedback
             {feedback.description}
           </Typography>
           <Typography variant="body/small" component="p" className={styles.date}>
-            {formatDate(feedback.timestamp, true)} &middot; {feedbackTypeNames[feedback.type]}
+            <time dateTime={feedback.timestamp}>{formatDate(feedback.timestamp, true)}</time>
+            &nbsp;&middot; {feedbackTypeNames[feedback.type]}
           </Typography>
         </div>
         {responseToken !== null && status === FeedbackStatus.SUBMITTED ? (
diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
index 40335a97..78e22f62 100644
--- a/src/pages/feedback.tsx
+++ b/src/pages/feedback.tsx
@@ -4,7 +4,7 @@ import { FeedbackAPI } from '@/lib/api';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { CookieService, PermissionService } from '@/lib/services';
 import type { PrivateProfile, PublicFeedback } from '@/lib/types/apiResponses';
-import { CookieType, UserAccessType } from '@/lib/types/enums';
+import { CookieType, FeedbackStatus, UserAccessType } from '@/lib/types/enums';
 import styles from '@/styles/pages/feedback.module.scss';
 import type { GetServerSideProps } from 'next';
 
@@ -22,14 +22,26 @@ const FeedbackPage = ({ user, feedback, token }: FeedbackPageProps) => {
       <Typography variant="h2/bold" component="h1">
         Feedback Submissions
       </Typography>
-      {feedback.map(feedback => (
-        <Feedback
-          key={feedback.uuid}
-          feedback={feedback}
-          showUser={isAdmin}
-          responseToken={isAdmin ? token : null}
-        />
-      ))}
+      {feedback
+        .sort((a, b) => {
+          // If admin, put SUBMITTED feedback on top
+          if (isAdmin && a.status !== b.status) {
+            return (
+              (a.status === FeedbackStatus.SUBMITTED ? 0 : 1) -
+              (b.status === FeedbackStatus.SUBMITTED ? 0 : 1)
+            );
+          }
+          // Otherwise, just put most recent first
+          return +new Date(b.timestamp) - +new Date(a.timestamp);
+        })
+        .map(feedback => (
+          <Feedback
+            key={feedback.uuid}
+            feedback={feedback}
+            showUser={isAdmin}
+            responseToken={isAdmin ? token : null}
+          />
+        ))}
     </div>
   );
 };

From da447262fa41747774b275c5221d2d20b02d1a8a Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 21:54:45 -0700
Subject: [PATCH 12/34] Update to handle API changes

---
 src/components/events/Feedback/index.tsx     |  2 +-
 src/components/events/FeedbackForm/index.tsx | 22 ++++++++++--------
 src/lib/api/FeedbackAPI.ts                   | 17 +++++++-------
 src/lib/types/apiRequests.ts                 | 24 ++++++++++++--------
 src/lib/types/apiResponses.ts                | 19 ++++++++++------
 src/lib/types/{index.d.ts => index.ts}       |  6 +++++
 src/pages/events/[uuid].tsx                  |  2 +-
 7 files changed, 54 insertions(+), 38 deletions(-)
 rename src/lib/types/{index.d.ts => index.ts} (64%)

diff --git a/src/components/events/Feedback/index.tsx b/src/components/events/Feedback/index.tsx
index e42f0aa5..b0564198 100644
--- a/src/components/events/Feedback/index.tsx
+++ b/src/components/events/Feedback/index.tsx
@@ -80,7 +80,7 @@ const Feedback = ({ feedback, showUser = false, responseToken = null }: Feedback
       <div className={styles.body}>
         <div className={styles.feedback}>
           <Typography variant="h4/bold" component="h2">
-            {feedback.title}
+            {feedback.source}
           </Typography>
           <Typography variant="body/medium" component="p">
             {feedback.description}
diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/events/FeedbackForm/index.tsx
index 0cdbe2ca..50f82104 100644
--- a/src/components/events/FeedbackForm/index.tsx
+++ b/src/components/events/FeedbackForm/index.tsx
@@ -1,6 +1,7 @@
 import { Dropdown, Typography } from '@/components/common';
 import { showToast } from '@/lib';
 import { FeedbackAPI } from '@/lib/api';
+import { PublicEvent } from '@/lib/types/apiResponses';
 import { FeedbackType } from '@/lib/types/enums';
 import { isEnum, reportError } from '@/lib/utils';
 import { useState } from 'react';
@@ -19,9 +20,10 @@ export const feedbackTypeNames: Record<FeedbackType, string> = {
 
 interface FeedbackFormProps {
   authToken: string;
+  event: PublicEvent;
 }
 
-const FeedbackForm = ({ authToken }: FeedbackFormProps) => {
+const FeedbackForm = ({ authToken, event }: FeedbackFormProps) => {
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
   const [type, setType] = useState(FeedbackType.GENERAL);
@@ -31,11 +33,13 @@ const FeedbackForm = ({ authToken }: FeedbackFormProps) => {
       className={styles.form}
       onSubmit={async e => {
         e.preventDefault();
-        if (title.length === 0) {
-          return;
-        }
         try {
-          await FeedbackAPI.addFeedback(authToken, title, description.padEnd(100, ' '), type);
+          await FeedbackAPI.addFeedback(authToken, {
+            event: event.uuid,
+            source: title,
+            description: description.padEnd(20, ' '),
+            type,
+          });
           showToast(
             'Feedback received!',
             'Thank you for taking the time to help us make our events better for you.'
@@ -78,11 +82,9 @@ const FeedbackForm = ({ authToken }: FeedbackFormProps) => {
         }}
         className={styles.field}
       />
-      {title.length > 0 ? (
-        <button type="submit" className={styles.submit}>
-          Submit
-        </button>
-      ) : null}
+      <button type="submit" className={styles.submit}>
+        Submit
+      </button>
     </form>
   );
 };
diff --git a/src/lib/api/FeedbackAPI.ts b/src/lib/api/FeedbackAPI.ts
index 1b682de6..c9b5d9b1 100644
--- a/src/lib/api/FeedbackAPI.ts
+++ b/src/lib/api/FeedbackAPI.ts
@@ -1,12 +1,16 @@
 import config from '@/lib/config';
-import { SubmitFeedbackRequest, UpdateFeedbackStatusRequest } from '@/lib/types/apiRequests';
+import {
+  Feedback,
+  SubmitFeedbackRequest,
+  UpdateFeedbackStatusRequest,
+} from '@/lib/types/apiRequests';
 import {
   GetFeedbackResponse,
   PublicFeedback,
   SubmitFeedbackResponse,
   UpdateFeedbackStatusResponse,
 } from '@/lib/types/apiResponses';
-import { FeedbackStatus, FeedbackType } from '@/lib/types/enums';
+import { FeedbackStatus } from '@/lib/types/enums';
 import axios from 'axios';
 
 /**
@@ -19,15 +23,10 @@ import axios from 'axios';
  * @param type Type of ACM offering that the feedback is addressed to.
  * @returns The submitted feedback
  */
-export const addFeedback = async (
-  token: string,
-  title: string,
-  description: string,
-  type: FeedbackType
-): Promise<PublicFeedback> => {
+export const addFeedback = async (token: string, feedback: Feedback): Promise<PublicFeedback> => {
   const requestUrl = `${config.api.baseUrl}${config.api.endpoints.feedback}`;
 
-  const requestBody: SubmitFeedbackRequest = { feedback: { title, description, type } };
+  const requestBody: SubmitFeedbackRequest = { feedback };
 
   const response = await axios.post<SubmitFeedbackResponse>(requestUrl, requestBody, {
     headers: {
diff --git a/src/lib/types/apiRequests.ts b/src/lib/types/apiRequests.ts
index 2dafebad..75a5396b 100644
--- a/src/lib/types/apiRequests.ts
+++ b/src/lib/types/apiRequests.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-use-before-define */
-import { URL, UUID } from '.';
+import { Date, URL, UUID } from '.';
 import { FeedbackStatus, FeedbackType, SocialMediaType, UserAccessType } from './enums';
 
 // REQUEST TYPES
@@ -46,15 +46,12 @@ export interface RegistrationRequest {
 // USER
 
 export interface Feedback {
-  title: string;
+  event: UUID;
+  source: string;
   description: string;
   type: FeedbackType;
 }
 
-export interface SendPasswordResetEmailRequest {
-  email: string;
-}
-
 export interface SocialMedia {
   type: SocialMediaType;
   url: URL;
@@ -87,6 +84,13 @@ export interface UpdateFeedbackStatusRequest {
   status: FeedbackStatus;
 }
 
+export interface FeedbackSearchOptions {
+  event?: string;
+  type?: string;
+  status?: string;
+  user?: string;
+}
+
 export interface InsertUserSocialMediaRequest {
   socialMedia: SocialMedia;
 }
@@ -158,8 +162,8 @@ export interface Event extends OptionalEventProperties {
   title: string;
   description: string;
   location: string;
-  start: string;
-  end: string;
+  start: Date;
+  end: Date;
   attendanceCode: string;
   pointValue: number;
 }
@@ -346,8 +350,8 @@ export interface MerchItemOptionAndQuantity {
 
 export interface OrderPickupEvent {
   title: string;
-  start: string;
-  end: string;
+  start: Date;
+  end: Date;
   description: string;
   orderLimit: number;
   linkedEventUuid?: UUID | null;
diff --git a/src/lib/types/apiResponses.ts b/src/lib/types/apiResponses.ts
index 66dc4580..708113c4 100644
--- a/src/lib/types/apiResponses.ts
+++ b/src/lib/types/apiResponses.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 import { MerchItemOptionMetadata } from '@/lib/types/apiRequests';
-import { URL, UUID } from '.';
+import { Date, UUID } from '.';
 import {
   ActivityScope,
   ActivityType,
@@ -126,8 +126,8 @@ export interface PublicEvent {
   description: string;
   location: string;
   eventLink: string;
-  start: string;
-  end: string;
+  start: Date;
+  end: Date;
   attendanceCode?: string;
   pointValue: number;
   requiresStaff: boolean;
@@ -339,6 +339,10 @@ export interface VerifyMerchOrderResponse extends ApiResponse {}
 
 export interface EditMerchOrderResponse extends ApiResponse {}
 
+export interface CancelMerchOrderResponse extends ApiResponse {
+  order: PublicOrderWithItems;
+}
+
 export interface GetCartResponse extends ApiResponse {
   cart: PublicOrderMerchItemOption[];
 }
@@ -381,9 +385,10 @@ export interface PrivateProfile extends PublicProfile {
 export interface PublicFeedback {
   uuid: UUID;
   user: PublicProfile;
-  title: string;
+  event: PublicEvent;
+  source: string;
   description: string;
-  timestamp: string;
+  timestamp: Date;
   status: FeedbackStatus;
   type: FeedbackType;
 }
@@ -452,8 +457,8 @@ export interface DeleteSocialMediaResponse extends ApiResponse {}
 export interface PublicOrderPickupEvent {
   uuid: UUID;
   title: string;
-  start: string;
-  end: string;
+  start: Date;
+  end: Date;
   description: string;
   orders?: PublicOrderWithItems[];
   orderLimit?: number;
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.ts
similarity index 64%
rename from src/lib/types/index.d.ts
rename to src/lib/types/index.ts
index 141e6aa7..cc816e36 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.ts
@@ -2,6 +2,12 @@ export type URL = string;
 export type UUID = string;
 export type FillInLater = any;
 
+/**
+ * The API sends `Date` object as strings in the ISO 8601 format. You can turn
+ * them back into dates using `new Date(date)`.
+ */
+export type Date = string;
+
 export type APIHandlerProps<T> = {
   onSuccessCallback?: (data: T) => void;
   onFailCallback?: (error: unknown) => void;
diff --git a/src/pages/events/[uuid].tsx b/src/pages/events/[uuid].tsx
index 69362663..0cedf456 100644
--- a/src/pages/events/[uuid].tsx
+++ b/src/pages/events/[uuid].tsx
@@ -20,7 +20,7 @@ const EventPage = ({ token, event, attended }: EventPageProps) => {
   return (
     <div className={styles.page}>
       <EventDetail event={event} attended={attended} />
-      {started ? <FeedbackForm authToken={token} /> : null}
+      {started ? <FeedbackForm event={event} authToken={token} /> : null}
     </div>
   );
 };

From c3725914474ebb6a28cac52d98252ced7ba6aa02 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 22:41:44 -0700
Subject: [PATCH 13/34] Keep most of the theme toggle mounted so only the
 indicator flickers in

---
 src/components/common/ThemeToggle/index.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/common/ThemeToggle/index.tsx b/src/components/common/ThemeToggle/index.tsx
index 5d555459..98dce9a9 100644
--- a/src/components/common/ThemeToggle/index.tsx
+++ b/src/components/common/ThemeToggle/index.tsx
@@ -22,7 +22,7 @@ const ThemeToggle = () => {
   };
 
   const switchPos = themeToSwitch[theme];
-  const currAltText = `Icon representing ${theme} theme is on.`;
+  const currAltText = mounted ? `Icon representing ${theme} theme is on.` : '';
 
   useEffect(() => {
     // Adjusting the <meta name="theme-color"> tag.
@@ -39,10 +39,6 @@ const ThemeToggle = () => {
     setMounted(true);
   }, []);
 
-  if (!mounted) {
-    return null;
-  }
-
   return (
     <form className={styles.switch}>
       <label htmlFor={lightId}>
@@ -55,8 +51,8 @@ const ThemeToggle = () => {
           id={lightId}
           name="state-d"
           type="radio"
-          defaultChecked={theme === 'light'}
-          onClick={() => setTheme('light')}
+          checked={theme === 'light'}
+          onChange={() => setTheme('light')}
         />
       </label>
 
@@ -70,8 +66,8 @@ const ThemeToggle = () => {
           id={systemId}
           name="state-d"
           type="radio"
-          defaultChecked={theme === 'system'}
-          onClick={() => setTheme('system')}
+          checked={theme === 'system'}
+          onChange={() => setTheme('system')}
         />
       </label>
 
@@ -85,11 +81,11 @@ const ThemeToggle = () => {
           id={darkId}
           name="state-d"
           type="radio"
-          defaultChecked={theme === 'dark'}
-          onClick={() => setTheme('dark')}
+          checked={theme === 'dark'}
+          onChange={() => setTheme('dark')}
         />
       </label>
-      <div className={`${switchPos} ${styles.switchindicator}`} />
+      {mounted ? <div className={`${switchPos} ${styles.switchindicator}`} /> : null}
     </form>
   );
 };

From 2cce33556ddb355c06c443b20b4f089a40436d85 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 22:53:37 -0700
Subject: [PATCH 14/34] Improve "Give feedback" button design

---
 src/components/events/EventDetail/index.tsx   | 25 ++++++++++---
 .../events/EventDetail/style.module.scss      | 17 +++++++++
 .../events/EventDetail/style.module.scss.d.ts |  1 +
 src/components/events/EventModal/index.tsx    | 15 +-------
 src/components/events/FeedbackForm/index.tsx  | 36 ++++++-------------
 .../events/FeedbackForm/style.module.scss     |  3 +-
 6 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/src/components/events/EventDetail/index.tsx b/src/components/events/EventDetail/index.tsx
index ae22d61b..a3dff68c 100644
--- a/src/components/events/EventDetail/index.tsx
+++ b/src/components/events/EventDetail/index.tsx
@@ -1,19 +1,22 @@
 import { Typography } from '@/components/common';
 import CalendarButtons from '@/components/events/CalendarButtons';
 import EventBadges from '@/components/events/EventBadges';
+import { config } from '@/lib';
 import { PublicEvent, PublicOrderPickupEvent } from '@/lib/types/apiResponses';
 import { formatEventDate, getDefaultEventCover, isOrderPickupEvent } from '@/lib/utils';
 import CloseIcon from '@/public/assets/icons/close-icon.svg';
 import Image from 'next/image';
+import Link from 'next/link';
+import { VscFeedback } from 'react-icons/vsc';
 import styles from './style.module.scss';
 
 interface EventDetailProps {
   event: PublicEvent | PublicOrderPickupEvent;
   attended: boolean;
-  showCloseBtn?: boolean;
+  inModal?: boolean;
 }
 
-const EventDetail = ({ event, attended, showCloseBtn = false }: EventDetailProps) => {
+const EventDetail = ({ event, attended, inModal = false }: EventDetailProps) => {
   const { cover, title, start, end, location, description } = isOrderPickupEvent(event)
     ? {
         ...(event.linkedEvent ?? {}),
@@ -24,9 +27,23 @@ const EventDetail = ({ event, attended, showCloseBtn = false }: EventDetailProps
   const displayCover = getDefaultEventCover(cover);
   const isUpcomingEvent = new Date(start) > new Date();
 
+  let buttons = null;
+  if (!isOrderPickupEvent(event)) {
+    if (isUpcomingEvent) {
+      buttons = <CalendarButtons event={event} />;
+    } else if (inModal) {
+      buttons = (
+        <Link href={`${config.eventsRoute}/${event.uuid}`} className={styles.feedbackBtn}>
+          <VscFeedback aria-hidden />
+          Give feedback
+        </Link>
+      );
+    }
+  }
+
   return (
     <div className={styles.container}>
-      {showCloseBtn ? (
+      {inModal ? (
         <button type="submit" aria-label="Close" className={styles.close}>
           <CloseIcon aria-hidden className={styles.closeIcon} />
         </button>
@@ -54,7 +71,7 @@ const EventDetail = ({ event, attended, showCloseBtn = false }: EventDetailProps
           </div>
         </div>
 
-        {isUpcomingEvent && !isOrderPickupEvent(event) ? <CalendarButtons event={event} /> : null}
+        {buttons}
       </div>
 
       <Typography
diff --git a/src/components/events/EventDetail/style.module.scss b/src/components/events/EventDetail/style.module.scss
index b754be5a..5b0b9b2c 100644
--- a/src/components/events/EventDetail/style.module.scss
+++ b/src/components/events/EventDetail/style.module.scss
@@ -139,6 +139,23 @@
         }
       }
     }
+
+    .feedbackBtn {
+      align-items: center;
+      align-self: flex-start;
+      background-color: var(--theme-elevated-background);
+      border: 1px solid var(--theme-elevated-stroke);
+      border-radius: 10px;
+      display: flex;
+      gap: 0.5rem;
+      justify-content: flex-start;
+      padding: 0.75rem;
+      transition: all 0.2s;
+
+      &:hover {
+        background: var(--theme-surface-2);
+      }
+    }
   }
 
   .description {
diff --git a/src/components/events/EventDetail/style.module.scss.d.ts b/src/components/events/EventDetail/style.module.scss.d.ts
index 0d43f625..c84f5211 100644
--- a/src/components/events/EventDetail/style.module.scss.d.ts
+++ b/src/components/events/EventDetail/style.module.scss.d.ts
@@ -7,6 +7,7 @@ export type Styles = {
   eventDetails: string;
   eventInfo: string;
   eventTitle: string;
+  feedbackBtn: string;
   header: string;
   image: string;
 };
diff --git a/src/components/events/EventModal/index.tsx b/src/components/events/EventModal/index.tsx
index b8ad9377..bc8c570c 100644
--- a/src/components/events/EventModal/index.tsx
+++ b/src/components/events/EventModal/index.tsx
@@ -1,9 +1,6 @@
 import { Modal } from '@/components/common';
 import EventDetail from '@/components/events/EventDetail';
-import { config } from '@/lib';
 import { PublicEvent } from '@/lib/types/apiResponses';
-import Link from 'next/link';
-import { useMemo } from 'react';
 
 interface EventModalProps {
   open: boolean;
@@ -13,19 +10,9 @@ interface EventModalProps {
 }
 
 const EventModal = ({ open, attended, event, onClose }: EventModalProps) => {
-  const started = useMemo(() => new Date() >= new Date(event.start), [event.start]);
-
   return (
     <Modal open={open} onClose={onClose} bottomSheet>
-      <EventDetail event={event} attended={attended} showCloseBtn />
-      {started ? (
-        <Link
-          href={`${config.eventsRoute}/${event.uuid}`}
-          style={{ color: 'var(--theme-blue-text-button)' }}
-        >
-          Give feedback
-        </Link>
-      ) : null}
+      <EventDetail event={event} attended={attended} inModal />
     </Modal>
   );
 };
diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/events/FeedbackForm/index.tsx
index 50f82104..dc800b29 100644
--- a/src/components/events/FeedbackForm/index.tsx
+++ b/src/components/events/FeedbackForm/index.tsx
@@ -1,21 +1,18 @@
-import { Dropdown, Typography } from '@/components/common';
+import { Typography } from '@/components/common';
 import { showToast } from '@/lib';
 import { FeedbackAPI } from '@/lib/api';
 import { PublicEvent } from '@/lib/types/apiResponses';
-import { FeedbackType } from '@/lib/types/enums';
-import { isEnum, reportError } from '@/lib/utils';
+import { Community, FeedbackType } from '@/lib/types/enums';
+import { reportError, toCommunity } from '@/lib/utils';
 import { useState } from 'react';
 import styles from './style.module.scss';
 
-export const feedbackTypeNames: Record<FeedbackType, string> = {
-  GENERAL: 'ACM',
-  MERCH_STORE: 'Store',
-  BIT_BYTE: 'Bit-Byte Program',
-  AI: 'ACM AI',
-  CYBER: 'ACM Cyber',
-  DESIGN: 'ACM Design',
-  HACK: 'ACM Hack',
-  INNOVATE: 'ACM Innovate',
+export const communityToFeedbackType: Record<Community, FeedbackType> = {
+  [Community.HACK]: FeedbackType.HACK,
+  [Community.AI]: FeedbackType.AI,
+  [Community.CYBER]: FeedbackType.CYBER,
+  [Community.DESIGN]: FeedbackType.DESIGN,
+  [Community.GENERAL]: FeedbackType.GENERAL,
 };
 
 interface FeedbackFormProps {
@@ -26,7 +23,6 @@ interface FeedbackFormProps {
 const FeedbackForm = ({ authToken, event }: FeedbackFormProps) => {
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
-  const [type, setType] = useState(FeedbackType.GENERAL);
 
   return (
     <form
@@ -38,7 +34,7 @@ const FeedbackForm = ({ authToken, event }: FeedbackFormProps) => {
             event: event.uuid,
             source: title,
             description: description.padEnd(20, ' '),
-            type,
+            type: communityToFeedbackType[toCommunity(event.committee)],
           });
           showToast(
             'Feedback received!',
@@ -70,18 +66,6 @@ const FeedbackForm = ({ authToken, event }: FeedbackFormProps) => {
         onChange={e => setDescription(e.currentTarget.value)}
         className={styles.field}
       />
-      <Dropdown
-        name="feedback-type"
-        ariaLabel="Feedback target"
-        options={Object.entries(feedbackTypeNames).map(([value, label]) => ({ value, label }))}
-        value={type}
-        onChange={type => {
-          if (isEnum(FeedbackType, type)) {
-            setType(type);
-          }
-        }}
-        className={styles.field}
-      />
       <button type="submit" className={styles.submit}>
         Submit
       </button>
diff --git a/src/components/events/FeedbackForm/style.module.scss b/src/components/events/FeedbackForm/style.module.scss
index a5239efc..6eb62333 100644
--- a/src/components/events/FeedbackForm/style.module.scss
+++ b/src/components/events/FeedbackForm/style.module.scss
@@ -7,7 +7,8 @@
 
   .field {
     background: none;
-    border: 2px solid currentColor;
+    background-color: var(--theme-elevated-background);
+    border: 2px solid var(--theme-elevated-stroke);
     border-radius: 0.75rem;
     font-size: 1rem;
     min-height: 3rem;

From c4b7fd565f1877f1c1444664f8357d419eda3f82 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 22:57:40 -0700
Subject: [PATCH 15/34] Add feedback filter options to getFeedback

---
 src/components/events/FeedbackForm/index.tsx | 12 +++----
 src/lib/api/FeedbackAPI.ts                   | 33 +++++++++++++-------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/events/FeedbackForm/index.tsx
index dc800b29..b083ff60 100644
--- a/src/components/events/FeedbackForm/index.tsx
+++ b/src/components/events/FeedbackForm/index.tsx
@@ -21,7 +21,7 @@ interface FeedbackFormProps {
 }
 
 const FeedbackForm = ({ authToken, event }: FeedbackFormProps) => {
-  const [title, setTitle] = useState('');
+  const [source, setSource] = useState('');
   const [description, setDescription] = useState('');
 
   return (
@@ -32,7 +32,7 @@ const FeedbackForm = ({ authToken, event }: FeedbackFormProps) => {
         try {
           await FeedbackAPI.addFeedback(authToken, {
             event: event.uuid,
-            source: title,
+            source: source,
             description: description.padEnd(20, ' '),
             type: communityToFeedbackType[toCommunity(event.committee)],
           });
@@ -53,10 +53,10 @@ const FeedbackForm = ({ authToken, event }: FeedbackFormProps) => {
         what’s on your mind!
       </p>
       <input
-        aria-label="Feedback title"
-        placeholder="Title"
-        value={title}
-        onChange={e => setTitle(e.currentTarget.value)}
+        aria-label="Feedback source"
+        placeholder="Source"
+        value={source}
+        onChange={e => setSource(e.currentTarget.value)}
         className={styles.field}
       />
       <textarea
diff --git a/src/lib/api/FeedbackAPI.ts b/src/lib/api/FeedbackAPI.ts
index c9b5d9b1..05c02684 100644
--- a/src/lib/api/FeedbackAPI.ts
+++ b/src/lib/api/FeedbackAPI.ts
@@ -1,4 +1,5 @@
 import config from '@/lib/config';
+import { UUID } from '@/lib/types';
 import {
   Feedback,
   SubmitFeedbackRequest,
@@ -10,17 +11,13 @@ import {
   SubmitFeedbackResponse,
   UpdateFeedbackStatusResponse,
 } from '@/lib/types/apiResponses';
-import { FeedbackStatus } from '@/lib/types/enums';
+import { FeedbackStatus, FeedbackType } from '@/lib/types/enums';
 import axios from 'axios';
 
 /**
  * Submit feedback
- * @param token Bearer token. Authenticated user must strictly be in the
- * `ACTIVE` state (not `PASSWORD_RESET`)
- * @param title Title of feedback
- * @param description Description of feedback. Must be at least 100 characters
- * long.
- * @param type Type of ACM offering that the feedback is addressed to.
+ * @param token Bearer token
+ * @param feedback Feedback object
  * @returns The submitted feedback
  */
 export const addFeedback = async (token: string, feedback: Feedback): Promise<PublicFeedback> => {
@@ -37,14 +34,28 @@ export const addFeedback = async (token: string, feedback: Feedback): Promise<Pu
   return response.data.feedback;
 };
 
+export interface FeedbackSearchOptions {
+  event?: UUID;
+  type?: FeedbackType;
+  status?: FeedbackStatus;
+  user?: UUID;
+}
+
 /**
- * Get all feedback submitted by user, or by all users if current user is an
- * admin.
+ * Get all feedback submitted by user, or by all users if current user can see
+ * all feedback
  * @param token Bearer token
+ * @param options Filter feedback by properties. Ignored if user can't see all
+ * feedback
  * @returns List of submitted feedback
  */
-export const getFeedback = async (token: string): Promise<PublicFeedback[]> => {
-  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.feedback}`;
+export const getFeedback = async (
+  token: string,
+  options: FeedbackSearchOptions = {}
+): Promise<PublicFeedback[]> => {
+  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.feedback}?${new URLSearchParams(
+    Object.entries(options)
+  )}`;
 
   const response = await axios.get<GetFeedbackResponse>(requestUrl, {
     headers: {

From 62a0d4d09ba634accb393d4fa140bc8f80f936f7 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 23:16:03 -0700
Subject: [PATCH 16/34] Improve design of some search/filter inputs

change currentColor borders to elevated-stroke
---
 src/components/events/Feedback/index.tsx      | 20 ++++++++++++----
 .../store/OrderSummary/style.module.scss      |  2 +-
 src/styles/pages/events.module.scss           | 24 +++++++++++--------
 src/styles/pages/leaderboard.module.scss      |  3 ++-
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/events/Feedback/index.tsx b/src/components/events/Feedback/index.tsx
index b0564198..22ecb60f 100644
--- a/src/components/events/Feedback/index.tsx
+++ b/src/components/events/Feedback/index.tsx
@@ -1,15 +1,25 @@
 import { GifSafeImage, Typography } from '@/components/common';
-import { feedbackTypeNames } from '@/components/events/FeedbackForm';
 import { config } from '@/lib';
 import { FeedbackAPI } from '@/lib/api';
 import { PublicFeedback } from '@/lib/types/apiResponses';
-import { FeedbackStatus } from '@/lib/types/enums';
+import { FeedbackStatus, FeedbackType } from '@/lib/types/enums';
 import { formatDate, getProfilePicture, reportError } from '@/lib/utils';
 import Link from 'next/link';
 import { useState } from 'react';
 import { BsCheck, BsEyeFill, BsEyeSlashFill } from 'react-icons/bs';
 import styles from './style.module.scss';
 
+const feedbackTypeNames: Record<FeedbackType, string> = {
+  GENERAL: 'ACM',
+  MERCH_STORE: 'Store',
+  BIT_BYTE: 'Bit-Byte Program',
+  AI: 'ACM AI',
+  CYBER: 'ACM Cyber',
+  DESIGN: 'ACM Design',
+  HACK: 'ACM Hack',
+  INNOVATE: 'ACM Innovate',
+};
+
 interface FeedbackProps {
   feedback: PublicFeedback;
   showUser?: boolean;
@@ -79,12 +89,12 @@ const Feedback = ({ feedback, showUser = false, responseToken = null }: Feedback
       ) : null}
       <div className={styles.body}>
         <div className={styles.feedback}>
-          <Typography variant="h4/bold" component="h2">
-            {feedback.source}
-          </Typography>
           <Typography variant="body/medium" component="p">
             {feedback.description}
           </Typography>
+          <Typography variant="body/medium" component="p">
+            <strong>Where did you hear about this event?</strong> {feedback.source}
+          </Typography>
           <Typography variant="body/small" component="p" className={styles.date}>
             <time dateTime={feedback.timestamp}>{formatDate(feedback.timestamp, true)}</time>
             &nbsp;&middot; {feedbackTypeNames[feedback.type]}
diff --git a/src/components/store/OrderSummary/style.module.scss b/src/components/store/OrderSummary/style.module.scss
index 56230b2f..abf27420 100644
--- a/src/components/store/OrderSummary/style.module.scss
+++ b/src/components/store/OrderSummary/style.module.scss
@@ -10,7 +10,7 @@
     padding: 0.75rem 1.5rem;
 
     .image {
-      border: 1px solid currentColor;
+      border: 1px solid var(--theme-elevated-stroke);
       border-radius: 0.375rem;
       flex-shrink: 0;
       height: 9.375rem;
diff --git a/src/styles/pages/events.module.scss b/src/styles/pages/events.module.scss
index 0c36b684..deafcbe5 100644
--- a/src/styles/pages/events.module.scss
+++ b/src/styles/pages/events.module.scss
@@ -13,9 +13,9 @@
     gap: 1rem;
 
     .search {
-      background: none;
-      border: 1px solid var(--theme-text-on-background-1);
-      border-radius: 1rem;
+      background: var(--theme-elevated-background);
+      border: 1px solid var(--theme-elevated-stroke);
+      border-radius: 2rem;
       color: inherit;
       font-size: 1rem;
       line-height: 1.25rem;
@@ -29,14 +29,18 @@
     }
 
     .filterOption {
-      border: 1px solid var(--theme-text-on-background-1);
-      border-radius: 1rem;
-      padding: 0.5rem 1rem;
+      background-color: var(--theme-elevated-background);
+      border: 1px solid var(--theme-elevated-stroke);
+      border-radius: 2rem;
+
+      > div {
+        padding: 0.5rem 1rem;
 
-      div > select {
-        font-size: 1rem;
-        font-weight: normal;
-        line-height: 1.25rem;
+        > select {
+          font-size: 1rem;
+          font-weight: normal;
+          line-height: 1.25rem;
+        }
       }
     }
   }
diff --git a/src/styles/pages/leaderboard.module.scss b/src/styles/pages/leaderboard.module.scss
index 7203e823..43d016aa 100644
--- a/src/styles/pages/leaderboard.module.scss
+++ b/src/styles/pages/leaderboard.module.scss
@@ -50,7 +50,8 @@
 
     .search {
       background: none;
-      border: 1px solid var(--theme-text-on-background-1);
+      background-color: var(--theme-elevated-background);
+      border: 1px solid var(--theme-elevated-stroke);
       border-radius: 1rem;
       color: inherit;
       font-size: 14px;

From bc39690727a710e1adcf1b114849e2f9aaf13016 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 23:24:26 -0700
Subject: [PATCH 17/34] Add filters to feedback

---
 src/components/events/Feedback/index.tsx   |   2 +-
 src/pages/feedback.tsx                     | 105 +++++++++++++++++++--
 src/styles/pages/feedback.module.scss      |  24 +++++
 src/styles/pages/feedback.module.scss.d.ts |   2 +
 4 files changed, 126 insertions(+), 7 deletions(-)

diff --git a/src/components/events/Feedback/index.tsx b/src/components/events/Feedback/index.tsx
index 22ecb60f..eb3dd608 100644
--- a/src/components/events/Feedback/index.tsx
+++ b/src/components/events/Feedback/index.tsx
@@ -9,7 +9,7 @@ import { useState } from 'react';
 import { BsCheck, BsEyeFill, BsEyeSlashFill } from 'react-icons/bs';
 import styles from './style.module.scss';
 
-const feedbackTypeNames: Record<FeedbackType, string> = {
+export const feedbackTypeNames: Record<FeedbackType, string> = {
   GENERAL: 'ACM',
   MERCH_STORE: 'Store',
   BIT_BYTE: 'Bit-Byte Program',
diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
index 78e22f62..b59a2c88 100644
--- a/src/pages/feedback.tsx
+++ b/src/pages/feedback.tsx
@@ -1,19 +1,56 @@
-import { Typography } from '@/components/common';
-import Feedback from '@/components/events/Feedback';
+import { Dropdown, PaginationControls, Typography } from '@/components/common';
+import Feedback, { feedbackTypeNames } from '@/components/events/Feedback';
+import { config } from '@/lib';
 import { FeedbackAPI } from '@/lib/api';
 import withAccessType from '@/lib/hoc/withAccessType';
+import useQueryState from '@/lib/hooks/useQueryState';
 import { CookieService, PermissionService } from '@/lib/services';
 import type { PrivateProfile, PublicFeedback } from '@/lib/types/apiResponses';
-import { CookieType, FeedbackStatus, UserAccessType } from '@/lib/types/enums';
+import { CookieType, FeedbackStatus, FeedbackType, UserAccessType } from '@/lib/types/enums';
+import { isEnum } from '@/lib/utils';
 import styles from '@/styles/pages/feedback.module.scss';
 import type { GetServerSideProps } from 'next';
+import { useState } from 'react';
+
+type FilterOptions = {
+  type: 'any' | FeedbackType;
+  status: 'any' | FeedbackStatus;
+};
+
+const DEFAULT_FILTER_STATE: FilterOptions = {
+  type: 'any',
+  status: 'any',
+};
+
+const ROWS_PER_PAGE = 25;
 
 interface FeedbackPageProps {
   user: PrivateProfile;
   feedback: PublicFeedback[];
   token: string;
+  initialFilters: FilterOptions;
 }
-const FeedbackPage = ({ user, feedback, token }: FeedbackPageProps) => {
+const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPageProps) => {
+  const [page, setPage] = useState(0);
+
+  const [states, setStates] = useQueryState({
+    pathName: config.feedbackRoute,
+    initialFilters,
+    queryStates: {
+      type: {
+        defaultValue: DEFAULT_FILTER_STATE.type,
+        valid: type => type === 'any' || isEnum(FeedbackType, type),
+      },
+      status: {
+        defaultValue: DEFAULT_FILTER_STATE.status,
+        valid: status => status === 'any' || isEnum(FeedbackStatus, status),
+      },
+    },
+  });
+
+  const typeFilter = states.type?.value || DEFAULT_FILTER_STATE.type;
+  const statusFilter = states.status?.value || DEFAULT_FILTER_STATE.status;
+
   /** Whether the user can respond to feedback */
   const isAdmin = user.accessType === UserAccessType.ADMIN;
 
@@ -22,6 +59,41 @@ const FeedbackPage = ({ user, feedback, token }: FeedbackPageProps) => {
       <Typography variant="h2/bold" component="h1">
         Feedback Submissions
       </Typography>
+      <div className={styles.controls}>
+        <div className={styles.filterOption}>
+          <Dropdown
+            name="typeOptions"
+            ariaLabel="Filter feedback by type"
+            options={[
+              { value: 'any', label: 'Any type' },
+              ...Object.entries(feedbackTypeNames).map(([value, label]) => ({ value, label })),
+            ]}
+            value={typeFilter}
+            onChange={v => {
+              setStates('type', v);
+              setPage(0);
+            }}
+          />
+        </div>
+
+        <div className={styles.filterOption}>
+          <Dropdown
+            name="statusOptions"
+            ariaLabel="Filter feedback by status"
+            options={[
+              { value: 'any', label: 'Any status' },
+              { value: FeedbackStatus.SUBMITTED, label: 'Pending response' },
+              { value: FeedbackStatus.ACKNOWLEDGED, label: 'Acknowledged' },
+              { value: FeedbackStatus.IGNORED, label: 'Ignored' },
+            ]}
+            value={statusFilter}
+            onChange={v => {
+              setStates('status', v);
+              setPage(0);
+            }}
+          />
+        </div>
+      </div>
       {feedback
         .sort((a, b) => {
           // If admin, put SUBMITTED feedback on top
@@ -42,16 +114,37 @@ const FeedbackPage = ({ user, feedback, token }: FeedbackPageProps) => {
             responseToken={isAdmin ? token : null}
           />
         ))}
+      {feedback.length > 0 ? (
+        <PaginationControls
+          page={page}
+          onPage={page => setPage(page)}
+          pages={Math.ceil(feedback.length / ROWS_PER_PAGE)}
+        />
+      ) : null}
     </div>
   );
 };
 
 export default FeedbackPage;
 
-const getServerSidePropsFunc: GetServerSideProps = async ({ req, res }) => {
+const getServerSidePropsFunc: GetServerSideProps = async ({ req, res, query }) => {
   const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
   const feedback = await FeedbackAPI.getFeedback(token);
-  return { props: { title: 'Feedback Submissions', feedback, token } };
+
+  const { type, status = DEFAULT_FILTER_STATE.status } = query;
+
+  const initialFilters: FilterOptions = {
+    type:
+      type === 'any' || (typeof type === 'string' && isEnum(FeedbackType, type))
+        ? type
+        : DEFAULT_FILTER_STATE.type,
+    status:
+      status === 'any' || (typeof status === 'string' && isEnum(FeedbackStatus, status))
+        ? status
+        : DEFAULT_FILTER_STATE.status,
+  };
+
+  return { props: { title: 'Feedback Submissions', feedback, token, initialFilters } };
 };
 
 export const getServerSideProps = withAccessType(
diff --git a/src/styles/pages/feedback.module.scss b/src/styles/pages/feedback.module.scss
index 7dd2324c..874a7bb2 100644
--- a/src/styles/pages/feedback.module.scss
+++ b/src/styles/pages/feedback.module.scss
@@ -4,4 +4,28 @@
   gap: 1rem;
   margin: 0 auto;
   max-width: 70rem;
+
+  .controls {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    .filterOption {
+      background-color: var(--theme-elevated-background);
+      border: 1px solid var(--theme-elevated-stroke);
+      border-radius: 2rem;
+
+      > div {
+        padding: 0.5rem 1rem;
+
+        > select {
+          font-size: 1rem;
+          font-weight: normal;
+          line-height: 1.25rem;
+        }
+      }
+    }
+  }
 }
diff --git a/src/styles/pages/feedback.module.scss.d.ts b/src/styles/pages/feedback.module.scss.d.ts
index 190f135c..eca805fd 100644
--- a/src/styles/pages/feedback.module.scss.d.ts
+++ b/src/styles/pages/feedback.module.scss.d.ts
@@ -1,4 +1,6 @@
 export type Styles = {
+  controls: string;
+  filterOption: string;
   page: string;
 };
 

From 8d796fa2f314890be128641066017708668109fe Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 23:31:48 -0700
Subject: [PATCH 18/34] Actually filter feedback

---
 src/pages/feedback.tsx | 63 +++++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
index b59a2c88..1249b84f 100644
--- a/src/pages/feedback.tsx
+++ b/src/pages/feedback.tsx
@@ -10,7 +10,7 @@ import { CookieType, FeedbackStatus, FeedbackType, UserAccessType } from '@/lib/
 import { isEnum } from '@/lib/utils';
 import styles from '@/styles/pages/feedback.module.scss';
 import type { GetServerSideProps } from 'next';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 type FilterOptions = {
   type: 'any' | FeedbackType;
@@ -31,6 +31,8 @@ interface FeedbackPageProps {
   initialFilters: FilterOptions;
 }
 const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPageProps) => {
+  /** Whether the user can respond to feedback */
+  const isAdmin = user.accessType === UserAccessType.ADMIN;
   const [page, setPage] = useState(0);
 
   const [states, setStates] = useQueryState({
@@ -51,8 +53,27 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro
   const typeFilter = states.type?.value || DEFAULT_FILTER_STATE.type;
   const statusFilter = states.status?.value || DEFAULT_FILTER_STATE.status;
 
-  /** Whether the user can respond to feedback */
-  const isAdmin = user.accessType === UserAccessType.ADMIN;
+  const filteredFeedback = useMemo(
+    () =>
+      feedback
+        .filter(
+          feedback =>
+            (typeFilter === 'any' || feedback.type === typeFilter) &&
+            (statusFilter === 'any' || feedback.status === statusFilter)
+        )
+        .sort((a, b) => {
+          // If admin, put SUBMITTED feedback on top
+          if (isAdmin && a.status !== b.status) {
+            return (
+              (a.status === FeedbackStatus.SUBMITTED ? 0 : 1) -
+              (b.status === FeedbackStatus.SUBMITTED ? 0 : 1)
+            );
+          }
+          // Otherwise, just put most recent first
+          return +new Date(b.timestamp) - +new Date(a.timestamp);
+        }),
+    [feedback, isAdmin, typeFilter, statusFilter]
+  );
 
   return (
     <div className={styles.page}>
@@ -94,33 +115,23 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro
           />
         </div>
       </div>
-      {feedback
-        .sort((a, b) => {
-          // If admin, put SUBMITTED feedback on top
-          if (isAdmin && a.status !== b.status) {
-            return (
-              (a.status === FeedbackStatus.SUBMITTED ? 0 : 1) -
-              (b.status === FeedbackStatus.SUBMITTED ? 0 : 1)
-            );
-          }
-          // Otherwise, just put most recent first
-          return +new Date(b.timestamp) - +new Date(a.timestamp);
-        })
-        .map(feedback => (
-          <Feedback
-            key={feedback.uuid}
-            feedback={feedback}
-            showUser={isAdmin}
-            responseToken={isAdmin ? token : null}
-          />
-        ))}
-      {feedback.length > 0 ? (
+      {filteredFeedback.slice(page * ROWS_PER_PAGE, (page + 1) * ROWS_PER_PAGE).map(feedback => (
+        <Feedback
+          key={feedback.uuid}
+          feedback={feedback}
+          showUser={isAdmin}
+          responseToken={isAdmin ? token : null}
+        />
+      ))}
+      {filteredFeedback.length > 0 ? (
         <PaginationControls
           page={page}
           onPage={page => setPage(page)}
-          pages={Math.ceil(feedback.length / ROWS_PER_PAGE)}
+          pages={Math.ceil(filteredFeedback.length / ROWS_PER_PAGE)}
         />
-      ) : null}
+      ) : (
+        <Typography variant="body/medium">No feedback matches these criteria.</Typography>
+      )}
     </div>
   );
 };

From 14df1fbb344bd6be47cc767b7bdd304d6532f200 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 23:40:45 -0700
Subject: [PATCH 19/34] Show event in feedback card

---
 src/components/events/EventCard/index.tsx     |  2 +-
 src/components/events/Feedback/index.tsx      | 40 +++++++++----
 .../events/Feedback/style.module.scss         | 59 +++++++++++--------
 .../events/Feedback/style.module.scss.d.ts    |  2 +
 4 files changed, 66 insertions(+), 37 deletions(-)

diff --git a/src/components/events/EventCard/index.tsx b/src/components/events/EventCard/index.tsx
index 86d25991..a67b728a 100644
--- a/src/components/events/EventCard/index.tsx
+++ b/src/components/events/EventCard/index.tsx
@@ -83,7 +83,7 @@ const EventCard = ({
         <div className={styles.image}>
           <Image
             src={displayCover}
-            alt="Event Cover Image"
+            alt={`${event.title} cover image`}
             style={{ objectFit: 'cover' }}
             sizes="20rem"
             fill
diff --git a/src/components/events/Feedback/index.tsx b/src/components/events/Feedback/index.tsx
index eb3dd608..144bb838 100644
--- a/src/components/events/Feedback/index.tsx
+++ b/src/components/events/Feedback/index.tsx
@@ -3,7 +3,8 @@ import { config } from '@/lib';
 import { FeedbackAPI } from '@/lib/api';
 import { PublicFeedback } from '@/lib/types/apiResponses';
 import { FeedbackStatus, FeedbackType } from '@/lib/types/enums';
-import { formatDate, getProfilePicture, reportError } from '@/lib/utils';
+import { formatDate, getDefaultEventCover, getProfilePicture, reportError } from '@/lib/utils';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { BsCheck, BsEyeFill, BsEyeSlashFill } from 'react-icons/bs';
@@ -74,18 +75,31 @@ const Feedback = ({ feedback, showUser = false, responseToken = null }: Feedback
   return (
     <div className={styles.wrapper}>
       {showUser ? (
-        <Link href={`${config.userProfileRoute}${feedback.user.handle}`} className={styles.user}>
-          <GifSafeImage
-            src={getProfilePicture(feedback.user)}
-            width={24}
-            height={24}
-            quality={10}
-            alt={`Profile picture for ${feedback.user.firstName} ${feedback.user.lastName}`}
-          />
-          <span>
-            {feedback.user.firstName} {feedback.user.lastName}
-          </span>
-        </Link>
+        <div className={styles.header}>
+          <Link href={`${config.userProfileRoute}${feedback.user.handle}`} className={styles.user}>
+            <GifSafeImage
+              src={getProfilePicture(feedback.user)}
+              width={24}
+              height={24}
+              quality={10}
+              alt={`Profile picture for ${feedback.user.firstName} ${feedback.user.lastName}`}
+            />
+            <span>
+              {feedback.user.firstName} {feedback.user.lastName}
+            </span>
+          </Link>
+          <span>for</span>
+          <Link href={`${config.eventsRoute}/${feedback.event.uuid}`} className={styles.event}>
+            <Image
+              src={getDefaultEventCover(feedback.event.cover)}
+              alt={`${feedback.event.title} cover image`}
+              width={24 * (16 / 9)}
+              height={24}
+              quality={10}
+            />
+            <span>{feedback.event.title}</span>
+          </Link>
+        </div>
       ) : null}
       <div className={styles.body}>
         <div className={styles.feedback}>
diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss
index 9459527c..78cddb81 100644
--- a/src/components/events/Feedback/style.module.scss
+++ b/src/components/events/Feedback/style.module.scss
@@ -6,38 +6,51 @@
   display: flex;
   flex-direction: column;
 
-  .user {
-    align-items: center;
+  .header {
     background-color: var(--theme-elevated-background);
     border-bottom: 1px solid var(--theme-elevated-stroke);
     border-radius: 0.5rem 0.5rem 0 0;
     display: flex;
-    display: flex;
-    flex: auto;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    position: relative;
 
-    img {
-      border-radius: 50%;
+    .user,
+    .event {
+      align-items: center;
+      display: flex;
+      gap: 0.5rem;
+      padding: 0.5rem;
+      position: relative;
+
+      &:hover span {
+        text-decoration: underline;
+      }
+    }
+
+    .user {
+      img {
+        border-radius: 50%;
+      }
+
+      &::after {
+        background-color: var(--theme-background);
+        border-right: 1px solid var(--theme-elevated-stroke);
+        border-top: 1px solid var(--theme-elevated-stroke);
+        content: '';
+        height: 0.5rem;
+        left: 1.25rem;
+        margin: -0.25rem;
+        position: absolute;
+        top: 100%;
+        transform: rotate(-45deg);
+        width: 0.5rem;
+      }
     }
 
-    &:hover span {
-      text-decoration: underline;
+    .event img {
+      border-radius: 2px;
     }
 
-    &::after {
-      background-color: var(--theme-background);
-      border-right: 1px solid var(--theme-elevated-stroke);
-      border-top: 1px solid var(--theme-elevated-stroke);
-      content: '';
-      height: 0.5rem;
-      left: 1.25rem;
-      margin: -0.25rem;
-      position: absolute;
-      top: 100%;
-      transform: rotate(-45deg);
-      width: 0.5rem;
+    > span {
+      margin: auto 0;
     }
   }
 
diff --git a/src/components/events/Feedback/style.module.scss.d.ts b/src/components/events/Feedback/style.module.scss.d.ts
index e9e7cd06..05dee3f2 100644
--- a/src/components/events/Feedback/style.module.scss.d.ts
+++ b/src/components/events/Feedback/style.module.scss.d.ts
@@ -4,7 +4,9 @@ export type Styles = {
   body: string;
   button: string;
   date: string;
+  event: string;
   feedback: string;
+  header: string;
   ignore: string;
   ignored: string;
   response: string;

From d4d05eb4415436255b6fde84f3e6e620427ab607 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 30 Mar 2024 23:52:07 -0700
Subject: [PATCH 20/34] tell users to send feedback if they have no feedback

---
 .../events/Feedback/style.module.scss         | 49 +++++++++++--------
 src/pages/feedback.tsx                        | 14 +++++-
 src/pages/index.tsx                           |  2 +-
 src/styles/pages/feedback.module.scss         |  8 +++
 src/styles/pages/feedback.module.scss.d.ts    |  1 +
 5 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss
index 78cddb81..2079e21c 100644
--- a/src/components/events/Feedback/style.module.scss
+++ b/src/components/events/Feedback/style.module.scss
@@ -7,42 +7,29 @@
   flex-direction: column;
 
   .header {
+    align-items: center;
     background-color: var(--theme-elevated-background);
     border-bottom: 1px solid var(--theme-elevated-stroke);
     border-radius: 0.5rem 0.5rem 0 0;
     display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    position: relative;
 
     .user,
     .event {
       align-items: center;
       display: flex;
       gap: 0.5rem;
-      padding: 0.5rem;
-      position: relative;
 
       &:hover span {
         text-decoration: underline;
       }
     }
 
-    .user {
-      img {
-        border-radius: 50%;
-      }
-
-      &::after {
-        background-color: var(--theme-background);
-        border-right: 1px solid var(--theme-elevated-stroke);
-        border-top: 1px solid var(--theme-elevated-stroke);
-        content: '';
-        height: 0.5rem;
-        left: 1.25rem;
-        margin: -0.25rem;
-        position: absolute;
-        top: 100%;
-        transform: rotate(-45deg);
-        width: 0.5rem;
-      }
+    .user img {
+      border-radius: 50%;
     }
 
     .event img {
@@ -52,6 +39,20 @@
     > span {
       margin: auto 0;
     }
+
+    &::after {
+      background-color: var(--theme-background);
+      border-right: 1px solid var(--theme-elevated-stroke);
+      border-top: 1px solid var(--theme-elevated-stroke);
+      content: '';
+      height: 0.5rem;
+      left: 1.25rem;
+      margin: -0.25rem;
+      position: absolute;
+      top: 100%;
+      transform: rotate(-45deg);
+      width: 0.5rem;
+    }
   }
 
   .body {
@@ -82,6 +83,10 @@
       gap: 0.5rem;
       justify-content: space-between;
 
+      @media (max-width: vars.$breakpoint-sm) {
+        flex-direction: row;
+      }
+
       .button {
         border-radius: 2rem;
         color: var(--theme-background);
@@ -90,6 +95,10 @@
         height: 2rem;
         padding: 0 1rem;
 
+        @media (max-width: vars.$breakpoint-sm) {
+          flex: auto;
+        }
+
         &.acknowledge {
           background-color: var(--theme-primary-2);
         }
diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
index 1249b84f..06b931f9 100644
--- a/src/pages/feedback.tsx
+++ b/src/pages/feedback.tsx
@@ -10,6 +10,7 @@ import { CookieType, FeedbackStatus, FeedbackType, UserAccessType } from '@/lib/
 import { isEnum } from '@/lib/utils';
 import styles from '@/styles/pages/feedback.module.scss';
 import type { GetServerSideProps } from 'next';
+import Link from 'next/link';
 import { useMemo, useState } from 'react';
 
 type FilterOptions = {
@@ -130,7 +131,18 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro
           pages={Math.ceil(filteredFeedback.length / ROWS_PER_PAGE)}
         />
       ) : (
-        <Typography variant="body/medium">No feedback matches these criteria.</Typography>
+        <Typography variant="body/medium">
+          {typeFilter !== 'any' || statusFilter !== 'any' ? (
+            'No feedback matches these criteria.'
+          ) : (
+            <>
+              You haven&lsquo;t submitted any feedback yet!{' '}
+              <Link href={`${config.eventsRoute}?attendance=attended`} className={styles.link}>
+                Review your recent events.
+              </Link>
+            </>
+          )}
+        </Typography>
       )}
     </div>
   );
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index dbe8d87b..211e97b5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -59,7 +59,7 @@ const PortalHomePage = ({
       const newAttendance: PublicAttendance = {
         user: user,
         event,
-        timestamp: new Date(),
+        timestamp: new Date().toString(),
         asStaff: false,
         feedback: [],
       };
diff --git a/src/styles/pages/feedback.module.scss b/src/styles/pages/feedback.module.scss
index 874a7bb2..631178d4 100644
--- a/src/styles/pages/feedback.module.scss
+++ b/src/styles/pages/feedback.module.scss
@@ -28,4 +28,12 @@
       }
     }
   }
+
+  .link {
+    color: var(--theme-blue-text-button);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
diff --git a/src/styles/pages/feedback.module.scss.d.ts b/src/styles/pages/feedback.module.scss.d.ts
index eca805fd..9d9f99e2 100644
--- a/src/styles/pages/feedback.module.scss.d.ts
+++ b/src/styles/pages/feedback.module.scss.d.ts
@@ -1,6 +1,7 @@
 export type Styles = {
   controls: string;
   filterOption: string;
+  link: string;
   page: string;
 };
 

From dfd1a2cc472a38997912b91fd4d3d92ac3522ef7 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 00:10:08 -0700
Subject: [PATCH 21/34] show submitted feedback on event page, improve
 standalone eventdetails spacing, feedback form submit btn

---
 src/components/events/EventDetail/index.tsx   |  8 ++--
 .../events/EventDetail/style.module.scss      | 13 +++++++
 .../events/EventDetail/style.module.scss.d.ts |  1 +
 src/components/events/FeedbackForm/index.tsx  | 10 +++--
 .../events/FeedbackForm/style.module.scss     |  5 ++-
 src/lib/hoc/withAccessType.ts                 | 20 ++++++++--
 src/pages/events/[uuid].tsx                   | 37 ++++++++++++++-----
 src/styles/pages/event.module.scss            |  7 ++--
 src/styles/pages/event.module.scss.d.ts       |  1 +
 9 files changed, 78 insertions(+), 24 deletions(-)

diff --git a/src/components/events/EventDetail/index.tsx b/src/components/events/EventDetail/index.tsx
index a3dff68c..ed15474a 100644
--- a/src/components/events/EventDetail/index.tsx
+++ b/src/components/events/EventDetail/index.tsx
@@ -42,16 +42,16 @@ const EventDetail = ({ event, attended, inModal = false }: EventDetailProps) =>
   }
 
   return (
-    <div className={styles.container}>
+    <div className={`${styles.container} ${inModal ? '' : styles.standalone}`}>
       {inModal ? (
         <button type="submit" aria-label="Close" className={styles.close}>
           <CloseIcon aria-hidden className={styles.closeIcon} />
         </button>
       ) : null}
-      <div className={styles.image}>
+      <div className={`${styles.image} ${inModal ? '' : styles.standalone}`}>
         <Image src={displayCover} alt="Event Cover Image" style={{ objectFit: 'cover' }} fill />
       </div>
-      <div className={styles.header}>
+      <div className={`${styles.header} ${inModal ? '' : styles.standalone}`}>
         <div className={styles.eventDetails}>
           <div>
             <Typography
@@ -77,7 +77,7 @@ const EventDetail = ({ event, attended, inModal = false }: EventDetailProps) =>
       <Typography
         variant="h5/regular"
         style={{ wordBreak: 'break-word' }}
-        className={styles.description}
+        className={`${styles.description} ${inModal ? '' : styles.standalone}`}
       >
         {description}
       </Typography>
diff --git a/src/components/events/EventDetail/style.module.scss b/src/components/events/EventDetail/style.module.scss
index 5b0b9b2c..9d8ae791 100644
--- a/src/components/events/EventDetail/style.module.scss
+++ b/src/components/events/EventDetail/style.module.scss
@@ -11,6 +11,11 @@
   position: relative;
   width: 80vw;
 
+  &.standalone {
+    padding: 0;
+    width: auto;
+  }
+
   .image {
     aspect-ratio: 1920 / 1080;
     border-radius: 10px;
@@ -36,10 +41,18 @@
     .description {
       padding: 0 2.5rem;
       width: 100%;
+
+      &.standalone {
+        padding: 0;
+      }
     }
 
     .image {
       border-radius: 10px 10px 0 0;
+
+      &.standalone {
+        border-radius: 10px;
+      }
     }
   }
 
diff --git a/src/components/events/EventDetail/style.module.scss.d.ts b/src/components/events/EventDetail/style.module.scss.d.ts
index c84f5211..a7953af3 100644
--- a/src/components/events/EventDetail/style.module.scss.d.ts
+++ b/src/components/events/EventDetail/style.module.scss.d.ts
@@ -10,6 +10,7 @@ export type Styles = {
   feedbackBtn: string;
   header: string;
   image: string;
+  standalone: string;
 };
 
 export type ClassNames = keyof Styles;
diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/events/FeedbackForm/index.tsx
index b083ff60..4bfd726b 100644
--- a/src/components/events/FeedbackForm/index.tsx
+++ b/src/components/events/FeedbackForm/index.tsx
@@ -1,7 +1,7 @@
 import { Typography } from '@/components/common';
 import { showToast } from '@/lib';
 import { FeedbackAPI } from '@/lib/api';
-import { PublicEvent } from '@/lib/types/apiResponses';
+import { PublicEvent, PublicFeedback } from '@/lib/types/apiResponses';
 import { Community, FeedbackType } from '@/lib/types/enums';
 import { reportError, toCommunity } from '@/lib/utils';
 import { useState } from 'react';
@@ -18,9 +18,10 @@ export const communityToFeedbackType: Record<Community, FeedbackType> = {
 interface FeedbackFormProps {
   authToken: string;
   event: PublicEvent;
+  onSubmit?: (feedback: PublicFeedback) => void;
 }
 
-const FeedbackForm = ({ authToken, event }: FeedbackFormProps) => {
+const FeedbackForm = ({ authToken, event, onSubmit }: FeedbackFormProps) => {
   const [source, setSource] = useState('');
   const [description, setDescription] = useState('');
 
@@ -30,16 +31,17 @@ const FeedbackForm = ({ authToken, event }: FeedbackFormProps) => {
       onSubmit={async e => {
         e.preventDefault();
         try {
-          await FeedbackAPI.addFeedback(authToken, {
+          const feedback = await FeedbackAPI.addFeedback(authToken, {
             event: event.uuid,
             source: source,
-            description: description.padEnd(20, ' '),
+            description,
             type: communityToFeedbackType[toCommunity(event.committee)],
           });
           showToast(
             'Feedback received!',
             'Thank you for taking the time to help us make our events better for you.'
           );
+          onSubmit?.(feedback);
         } catch (error) {
           reportError('Failed to submit feedback', error);
         }
diff --git a/src/components/events/FeedbackForm/style.module.scss b/src/components/events/FeedbackForm/style.module.scss
index 6eb62333..748bc76b 100644
--- a/src/components/events/FeedbackForm/style.module.scss
+++ b/src/components/events/FeedbackForm/style.module.scss
@@ -22,7 +22,7 @@
   }
 
   .submit {
-    align-self: center;
+    align-self: flex-start;
     background-color: var(--theme-text-on-background-1);
     border-radius: 2rem;
     color: var(--theme-background);
@@ -30,5 +30,8 @@
     font-weight: bold;
     min-height: 3rem;
     padding: 0 2rem;
+    @media (max-width: vars.$breakpoint-sm) {
+      align-self: center;
+    }
   }
 }
diff --git a/src/lib/hoc/withAccessType.ts b/src/lib/hoc/withAccessType.ts
index 818a45b8..1cee57c4 100644
--- a/src/lib/hoc/withAccessType.ts
+++ b/src/lib/hoc/withAccessType.ts
@@ -4,7 +4,21 @@ import { CookieService } from '@/lib/services';
 import type { URL } from '@/lib/types';
 import { PrivateProfile } from '@/lib/types/apiResponses';
 import { CookieType, UserAccessType } from '@/lib/types/enums';
-import type { GetServerSideProps, GetServerSidePropsContext } from 'next';
+import type {
+  GetServerSideProps,
+  GetServerSidePropsContext,
+  GetServerSidePropsResult,
+  PreviewData,
+} from 'next';
+import { ParsedUrlQuery } from 'querystring';
+
+export type GetServerSidePropsWithUser<
+  Props extends { [key: string]: any } = { [key: string]: any },
+  Params extends ParsedUrlQuery = ParsedUrlQuery,
+  Preview extends PreviewData = PreviewData
+> = (
+  context: GetServerSidePropsContext<Params, Preview> & { user: PrivateProfile }
+) => Promise<GetServerSidePropsResult<Props>>;
 
 interface AccessTypeOptions {
   /**
@@ -21,7 +35,7 @@ interface AccessTypeOptions {
  * @returns
  */
 export default function withAccessType(
-  gssp: GetServerSideProps,
+  gssp: GetServerSidePropsWithUser,
   validAccessTypes: UserAccessType[],
   { redirectTo = config.loginRoute }: AccessTypeOptions = {}
 ): GetServerSideProps {
@@ -84,7 +98,7 @@ export default function withAccessType(
     if (!validAccessTypes.includes(userAccessLevel)) return missingAccessRedirect;
 
     // If we haven't short-circuited, user has valid access. Show the page and add the user prop.
-    const originalReturnValue = await gssp(context);
+    const originalReturnValue = await gssp({ ...context, user });
     // Insert the user object to the original return value if it doesn't exist already
     if ('props' in originalReturnValue) {
       const existingProps = await Promise.resolve(originalReturnValue.props);
diff --git a/src/pages/events/[uuid].tsx b/src/pages/events/[uuid].tsx
index 0cedf456..da730268 100644
--- a/src/pages/events/[uuid].tsx
+++ b/src/pages/events/[uuid].tsx
@@ -1,40 +1,58 @@
+import { Typography } from '@/components/common';
 import EventDetail from '@/components/events/EventDetail';
+import Feedback from '@/components/events/Feedback';
 import FeedbackForm from '@/components/events/FeedbackForm';
-import { EventAPI, UserAPI } from '@/lib/api';
-import withAccessType from '@/lib/hoc/withAccessType';
+import { EventAPI, FeedbackAPI, UserAPI } from '@/lib/api';
+import withAccessType, { GetServerSidePropsWithUser } from '@/lib/hoc/withAccessType';
 import { CookieService, PermissionService } from '@/lib/services';
-import type { PublicEvent } from '@/lib/types/apiResponses';
+import type { PublicEvent, PublicFeedback } from '@/lib/types/apiResponses';
 import { CookieType } from '@/lib/types/enums';
 import styles from '@/styles/pages/event.module.scss';
-import type { GetServerSideProps } from 'next';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 interface EventPageProps {
   token: string;
   event: PublicEvent;
   attended: boolean;
+  feedback: PublicFeedback | null;
 }
-const EventPage = ({ token, event, attended }: EventPageProps) => {
+const EventPage = ({ token, event, attended, feedback: initFeedback }: EventPageProps) => {
   const started = useMemo(() => new Date() >= new Date(event.start), [event.start]);
+  const [feedback, setFeedback] = useState(initFeedback);
+
+  let feedbackForm = null;
+  if (feedback) {
+    feedbackForm = (
+      <div className={styles.submittedFeedback}>
+        <Typography variant="h2/bold" component="h2">
+          Your Feedback
+        </Typography>
+        <Feedback feedback={feedback} />
+      </div>
+    );
+  } else if (started) {
+    feedbackForm = <FeedbackForm event={event} authToken={token} onSubmit={setFeedback} />;
+  }
 
   return (
     <div className={styles.page}>
       <EventDetail event={event} attended={attended} />
-      {started ? <FeedbackForm event={event} authToken={token} /> : null}
+      {feedbackForm}
     </div>
   );
 };
 
 export default EventPage;
 
-const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res }) => {
+const getServerSidePropsFunc: GetServerSidePropsWithUser = async ({ params, req, res, user }) => {
   const uuid = params?.uuid as string;
   const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
 
   try {
-    const [event, attendances] = await Promise.all([
+    const [event, attendances, [feedback = null]] = await Promise.all([
       EventAPI.getEvent(uuid, token),
       UserAPI.getAttendancesForCurrentUser(token),
+      FeedbackAPI.getFeedback(token, { user: user.uuid, event: uuid }),
     ]);
     return {
       props: {
@@ -42,6 +60,7 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res })
         token,
         event,
         attended: attendances.some(attendance => attendance.event.uuid === uuid),
+        feedback,
       },
     };
   } catch {
diff --git a/src/styles/pages/event.module.scss b/src/styles/pages/event.module.scss
index 0af24bcf..5dc0f135 100644
--- a/src/styles/pages/event.module.scss
+++ b/src/styles/pages/event.module.scss
@@ -5,8 +5,9 @@
   margin: 0 auto;
   max-width: 70rem;
 
-  div:first-child {
-    padding: 0;
-    width: auto;
+  .submittedFeedback {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
 }
diff --git a/src/styles/pages/event.module.scss.d.ts b/src/styles/pages/event.module.scss.d.ts
index 190f135c..03f54589 100644
--- a/src/styles/pages/event.module.scss.d.ts
+++ b/src/styles/pages/event.module.scss.d.ts
@@ -1,5 +1,6 @@
 export type Styles = {
   page: string;
+  submittedFeedback: string;
 };
 
 export type ClassNames = keyof Styles;

From 5f4bc6fbc40a31d17103ca4dc3658c037686cc12 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 00:18:12 -0700
Subject: [PATCH 22/34] Sort feedback chronologically or SUBMITTED first

---
 .../events/Feedback/style.module.scss         |  4 +--
 src/pages/feedback.tsx                        | 34 ++++++++++++++++---
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss
index 2079e21c..45c3e2a8 100644
--- a/src/components/events/Feedback/style.module.scss
+++ b/src/components/events/Feedback/style.module.scss
@@ -5,6 +5,8 @@
   border-radius: 0.5rem;
   display: flex;
   flex-direction: column;
+  white-space: pre-wrap;
+  word-break: break-word;
 
   .header {
     align-items: center;
@@ -69,8 +71,6 @@
       flex: auto;
       flex-direction: column;
       gap: 0.5rem;
-      white-space: pre-wrap;
-      word-break: break-word;
 
       .date {
         color: var(--theme-text-on-background-2);
diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
index 06b931f9..bee995fa 100644
--- a/src/pages/feedback.tsx
+++ b/src/pages/feedback.tsx
@@ -16,11 +16,13 @@ import { useMemo, useState } from 'react';
 type FilterOptions = {
   type: 'any' | FeedbackType;
   status: 'any' | FeedbackStatus;
+  sort: 'chronological' | 'submitted-first';
 };
 
 const DEFAULT_FILTER_STATE: FilterOptions = {
   type: 'any',
   status: 'any',
+  sort: 'chronological',
 };
 
 const ROWS_PER_PAGE = 25;
@@ -48,11 +50,16 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro
         defaultValue: DEFAULT_FILTER_STATE.status,
         valid: status => status === 'any' || isEnum(FeedbackStatus, status),
       },
+      sort: {
+        defaultValue: DEFAULT_FILTER_STATE.sort,
+        valid: sort => sort === 'chronological' || sort === 'submitted-first',
+      },
     },
   });
 
   const typeFilter = states.type?.value || DEFAULT_FILTER_STATE.type;
   const statusFilter = states.status?.value || DEFAULT_FILTER_STATE.status;
+  const sortFilter = states.sort?.value || DEFAULT_FILTER_STATE.sort;
 
   const filteredFeedback = useMemo(
     () =>
@@ -63,8 +70,8 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro
             (statusFilter === 'any' || feedback.status === statusFilter)
         )
         .sort((a, b) => {
-          // If admin, put SUBMITTED feedback on top
-          if (isAdmin && a.status !== b.status) {
+          // Put SUBMITTED feedback on top
+          if (sortFilter === 'submitted-first' && a.status !== b.status) {
             return (
               (a.status === FeedbackStatus.SUBMITTED ? 0 : 1) -
               (b.status === FeedbackStatus.SUBMITTED ? 0 : 1)
@@ -73,7 +80,7 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro
           // Otherwise, just put most recent first
           return +new Date(b.timestamp) - +new Date(a.timestamp);
         }),
-    [feedback, isAdmin, typeFilter, statusFilter]
+    [feedback, typeFilter, statusFilter, sortFilter]
   );
 
   return (
@@ -115,6 +122,24 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro
             }}
           />
         </div>
+
+        {isAdmin ? (
+          <div className={styles.filterOption}>
+            <Dropdown
+              name="sortOptions"
+              ariaLabel="Sort feedback"
+              options={[
+                { value: 'chronological', label: 'Most recent first' },
+                { value: 'submitted-first', label: 'Pending response first' },
+              ]}
+              value={sortFilter}
+              onChange={v => {
+                setStates('sort', v);
+                setPage(0);
+              }}
+            />
+          </div>
+        ) : null}
       </div>
       {filteredFeedback.slice(page * ROWS_PER_PAGE, (page + 1) * ROWS_PER_PAGE).map(feedback => (
         <Feedback
@@ -154,7 +179,7 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ req, res, query }) =
   const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
   const feedback = await FeedbackAPI.getFeedback(token);
 
-  const { type, status = DEFAULT_FILTER_STATE.status } = query;
+  const { type, status, sort } = query;
 
   const initialFilters: FilterOptions = {
     type:
@@ -165,6 +190,7 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ req, res, query }) =
       status === 'any' || (typeof status === 'string' && isEnum(FeedbackStatus, status))
         ? status
         : DEFAULT_FILTER_STATE.status,
+    sort: sort === 'chronological' || sort === 'submitted-first' ? sort : DEFAULT_FILTER_STATE.sort,
   };
 
   return { props: { title: 'Feedback Submissions', feedback, token, initialFilters } };

From fde1cb4b011b9c227d7c0a3b381bab778292fca0 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 00:20:10 -0700
Subject: [PATCH 23/34] Where did you hear about this event?

---
 src/components/events/FeedbackForm/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/events/FeedbackForm/index.tsx
index 4bfd726b..95966828 100644
--- a/src/components/events/FeedbackForm/index.tsx
+++ b/src/components/events/FeedbackForm/index.tsx
@@ -56,7 +56,7 @@ const FeedbackForm = ({ authToken, event, onSubmit }: FeedbackFormProps) => {
       </p>
       <input
         aria-label="Feedback source"
-        placeholder="Source"
+        placeholder="Where did you hear about this event?"
         value={source}
         onChange={e => setSource(e.currentTarget.value)}
         className={styles.field}

From dab0fb923483f5528688987d969acd40b66d128c Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 00:24:57 -0700
Subject: [PATCH 24/34] Fix type errors I introduced in api types update

---
 src/lib/types/apiRequests.ts  | 4 ++++
 src/lib/types/apiResponses.ts | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/types/apiRequests.ts b/src/lib/types/apiRequests.ts
index 75a5396b..1d22c5a8 100644
--- a/src/lib/types/apiRequests.ts
+++ b/src/lib/types/apiRequests.ts
@@ -52,6 +52,10 @@ export interface Feedback {
   type: FeedbackType;
 }
 
+export interface SendPasswordResetEmailRequest {
+  email: string;
+}
+
 export interface SocialMedia {
   type: SocialMediaType;
   url: URL;
diff --git a/src/lib/types/apiResponses.ts b/src/lib/types/apiResponses.ts
index 708113c4..5bbfc274 100644
--- a/src/lib/types/apiResponses.ts
+++ b/src/lib/types/apiResponses.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 import { MerchItemOptionMetadata } from '@/lib/types/apiRequests';
-import { Date, UUID } from '.';
+import { Date, URL, UUID } from '.';
 import {
   ActivityScope,
   ActivityType,

From 96afd317754eda917c6df608e383fcd4d6eea823 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 01:50:57 -0700
Subject: [PATCH 25/34] Show/hide event info separately from user

---
 src/components/events/EventDetail/index.tsx   |  2 +-
 src/components/events/Feedback/index.tsx      | 73 +++++++++++--------
 .../events/Feedback/style.module.scss         |  2 +-
 .../events/Feedback/style.module.scss.d.ts    |  1 +
 src/pages/feedback.tsx                        |  1 +
 5 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/components/events/EventDetail/index.tsx b/src/components/events/EventDetail/index.tsx
index ed15474a..d13ca026 100644
--- a/src/components/events/EventDetail/index.tsx
+++ b/src/components/events/EventDetail/index.tsx
@@ -35,7 +35,7 @@ const EventDetail = ({ event, attended, inModal = false }: EventDetailProps) =>
       buttons = (
         <Link href={`${config.eventsRoute}/${event.uuid}`} className={styles.feedbackBtn}>
           <VscFeedback aria-hidden />
-          Give feedback
+          Add Feedback
         </Link>
       );
     }
diff --git a/src/components/events/Feedback/index.tsx b/src/components/events/Feedback/index.tsx
index 144bb838..ce6f8a36 100644
--- a/src/components/events/Feedback/index.tsx
+++ b/src/components/events/Feedback/index.tsx
@@ -24,6 +24,7 @@ export const feedbackTypeNames: Record<FeedbackType, string> = {
 interface FeedbackProps {
   feedback: PublicFeedback;
   showUser?: boolean;
+  showEvent?: boolean;
   /**
    * Auth token. Provide it only if the user has permission to respond to
    * feedback (i.e. they're an admin)
@@ -31,7 +32,12 @@ interface FeedbackProps {
   responseToken?: string | null;
 }
 
-const Feedback = ({ feedback, showUser = false, responseToken = null }: FeedbackProps) => {
+const Feedback = ({
+  feedback,
+  showUser = false,
+  showEvent,
+  responseToken = null,
+}: FeedbackProps) => {
   const [status, setStatus] = useState(feedback.status);
 
   const handleStatus = async (newStatus: FeedbackStatus) => {
@@ -74,31 +80,38 @@ const Feedback = ({ feedback, showUser = false, responseToken = null }: Feedback
 
   return (
     <div className={styles.wrapper}>
-      {showUser ? (
-        <div className={styles.header}>
-          <Link href={`${config.userProfileRoute}${feedback.user.handle}`} className={styles.user}>
-            <GifSafeImage
-              src={getProfilePicture(feedback.user)}
-              width={24}
-              height={24}
-              quality={10}
-              alt={`Profile picture for ${feedback.user.firstName} ${feedback.user.lastName}`}
-            />
-            <span>
-              {feedback.user.firstName} {feedback.user.lastName}
-            </span>
-          </Link>
-          <span>for</span>
-          <Link href={`${config.eventsRoute}/${feedback.event.uuid}`} className={styles.event}>
-            <Image
-              src={getDefaultEventCover(feedback.event.cover)}
-              alt={`${feedback.event.title} cover image`}
-              width={24 * (16 / 9)}
-              height={24}
-              quality={10}
-            />
-            <span>{feedback.event.title}</span>
-          </Link>
+      {showUser || showEvent ? (
+        <div className={`${styles.header} ${showUser ? styles.hasUser : ''}`}>
+          {showUser ? (
+            <Link
+              href={`${config.userProfileRoute}${feedback.user.handle}`}
+              className={styles.user}
+            >
+              <GifSafeImage
+                src={getProfilePicture(feedback.user)}
+                width={24}
+                height={24}
+                quality={10}
+                alt={`Profile picture for ${feedback.user.firstName} ${feedback.user.lastName}`}
+              />
+              <span>
+                {feedback.user.firstName} {feedback.user.lastName}
+              </span>
+            </Link>
+          ) : null}
+          {showUser && showEvent ? <span>for</span> : null}
+          {showEvent ? (
+            <Link href={`${config.eventsRoute}/${feedback.event.uuid}`} className={styles.event}>
+              <Image
+                src={getDefaultEventCover(feedback.event.cover)}
+                alt={`${feedback.event.title} cover image`}
+                width={24 * (16 / 9)}
+                height={24}
+                quality={10}
+              />
+              <span>{feedback.event.title}</span>
+            </Link>
+          ) : null}
         </div>
       ) : null}
       <div className={styles.body}>
@@ -106,9 +119,11 @@ const Feedback = ({ feedback, showUser = false, responseToken = null }: Feedback
           <Typography variant="body/medium" component="p">
             {feedback.description}
           </Typography>
-          <Typography variant="body/medium" component="p">
-            <strong>Where did you hear about this event?</strong> {feedback.source}
-          </Typography>
+          {feedback.source ? (
+            <Typography variant="body/medium" component="p">
+              <strong>Where did you hear about this event?</strong> {feedback.source}
+            </Typography>
+          ) : null}
           <Typography variant="body/small" component="p" className={styles.date}>
             <time dateTime={feedback.timestamp}>{formatDate(feedback.timestamp, true)}</time>
             &nbsp;&middot; {feedbackTypeNames[feedback.type]}
diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss
index 45c3e2a8..1b796634 100644
--- a/src/components/events/Feedback/style.module.scss
+++ b/src/components/events/Feedback/style.module.scss
@@ -42,7 +42,7 @@
       margin: auto 0;
     }
 
-    &::after {
+    &.hasUser::after {
       background-color: var(--theme-background);
       border-right: 1px solid var(--theme-elevated-stroke);
       border-top: 1px solid var(--theme-elevated-stroke);
diff --git a/src/components/events/Feedback/style.module.scss.d.ts b/src/components/events/Feedback/style.module.scss.d.ts
index 05dee3f2..936fde1e 100644
--- a/src/components/events/Feedback/style.module.scss.d.ts
+++ b/src/components/events/Feedback/style.module.scss.d.ts
@@ -6,6 +6,7 @@ export type Styles = {
   date: string;
   event: string;
   feedback: string;
+  hasUser: string;
   header: string;
   ignore: string;
   ignored: string;
diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
index bee995fa..3ec6af0c 100644
--- a/src/pages/feedback.tsx
+++ b/src/pages/feedback.tsx
@@ -146,6 +146,7 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro
           key={feedback.uuid}
           feedback={feedback}
           showUser={isAdmin}
+          showEvent
           responseToken={isAdmin ? token : null}
         />
       ))}

From 42d950f0dfc730dd72d40ef5002875188617dc6b Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 02:36:49 -0700
Subject: [PATCH 26/34] i'm about to create a bunch of components for feedback
 form so move feedback components to its own folder

---
 src/components/{events => feedback}/Feedback/index.tsx         | 0
 src/components/{events => feedback}/Feedback/style.module.scss | 0
 .../{events => feedback}/Feedback/style.module.scss.d.ts       | 0
 src/components/{events => feedback}/FeedbackForm/index.tsx     | 0
 .../{events => feedback}/FeedbackForm/style.module.scss        | 0
 .../{events => feedback}/FeedbackForm/style.module.scss.d.ts   | 0
 src/components/feedback/index.tsx                              | 2 ++
 src/pages/events/[uuid].tsx                                    | 3 +--
 src/pages/feedback.tsx                                         | 2 +-
 9 files changed, 4 insertions(+), 3 deletions(-)
 rename src/components/{events => feedback}/Feedback/index.tsx (100%)
 rename src/components/{events => feedback}/Feedback/style.module.scss (100%)
 rename src/components/{events => feedback}/Feedback/style.module.scss.d.ts (100%)
 rename src/components/{events => feedback}/FeedbackForm/index.tsx (100%)
 rename src/components/{events => feedback}/FeedbackForm/style.module.scss (100%)
 rename src/components/{events => feedback}/FeedbackForm/style.module.scss.d.ts (100%)
 create mode 100644 src/components/feedback/index.tsx

diff --git a/src/components/events/Feedback/index.tsx b/src/components/feedback/Feedback/index.tsx
similarity index 100%
rename from src/components/events/Feedback/index.tsx
rename to src/components/feedback/Feedback/index.tsx
diff --git a/src/components/events/Feedback/style.module.scss b/src/components/feedback/Feedback/style.module.scss
similarity index 100%
rename from src/components/events/Feedback/style.module.scss
rename to src/components/feedback/Feedback/style.module.scss
diff --git a/src/components/events/Feedback/style.module.scss.d.ts b/src/components/feedback/Feedback/style.module.scss.d.ts
similarity index 100%
rename from src/components/events/Feedback/style.module.scss.d.ts
rename to src/components/feedback/Feedback/style.module.scss.d.ts
diff --git a/src/components/events/FeedbackForm/index.tsx b/src/components/feedback/FeedbackForm/index.tsx
similarity index 100%
rename from src/components/events/FeedbackForm/index.tsx
rename to src/components/feedback/FeedbackForm/index.tsx
diff --git a/src/components/events/FeedbackForm/style.module.scss b/src/components/feedback/FeedbackForm/style.module.scss
similarity index 100%
rename from src/components/events/FeedbackForm/style.module.scss
rename to src/components/feedback/FeedbackForm/style.module.scss
diff --git a/src/components/events/FeedbackForm/style.module.scss.d.ts b/src/components/feedback/FeedbackForm/style.module.scss.d.ts
similarity index 100%
rename from src/components/events/FeedbackForm/style.module.scss.d.ts
rename to src/components/feedback/FeedbackForm/style.module.scss.d.ts
diff --git a/src/components/feedback/index.tsx b/src/components/feedback/index.tsx
new file mode 100644
index 00000000..06dcc057
--- /dev/null
+++ b/src/components/feedback/index.tsx
@@ -0,0 +1,2 @@
+export { default as Feedback, feedbackTypeNames } from './Feedback';
+export { default as FeedbackForm } from './FeedbackForm';
diff --git a/src/pages/events/[uuid].tsx b/src/pages/events/[uuid].tsx
index da730268..88e96c44 100644
--- a/src/pages/events/[uuid].tsx
+++ b/src/pages/events/[uuid].tsx
@@ -1,7 +1,6 @@
 import { Typography } from '@/components/common';
 import EventDetail from '@/components/events/EventDetail';
-import Feedback from '@/components/events/Feedback';
-import FeedbackForm from '@/components/events/FeedbackForm';
+import { Feedback, FeedbackForm } from '@/components/feedback';
 import { EventAPI, FeedbackAPI, UserAPI } from '@/lib/api';
 import withAccessType, { GetServerSidePropsWithUser } from '@/lib/hoc/withAccessType';
 import { CookieService, PermissionService } from '@/lib/services';
diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
index 3ec6af0c..68dd6a95 100644
--- a/src/pages/feedback.tsx
+++ b/src/pages/feedback.tsx
@@ -1,5 +1,5 @@
 import { Dropdown, PaginationControls, Typography } from '@/components/common';
-import Feedback, { feedbackTypeNames } from '@/components/events/Feedback';
+import { Feedback, feedbackTypeNames } from '@/components/feedback';
 import { config } from '@/lib';
 import { FeedbackAPI } from '@/lib/api';
 import withAccessType from '@/lib/hoc/withAccessType';

From 88fdfe1b80a96f9faf8594d57e1301522906dd97 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 03:27:34 -0700
Subject: [PATCH 27/34] Feedback question implementation

---
 .../feedback/FeedbackChoice/index.tsx         | 77 +++++++++++++++++++
 .../feedback/FeedbackChoice/style.module.scss |  7 ++
 .../feedback/FeedbackForm/index.tsx           | 54 ++++++++++---
 src/pages/events/[uuid].tsx                   |  4 +-
 4 files changed, 132 insertions(+), 10 deletions(-)
 create mode 100644 src/components/feedback/FeedbackChoice/index.tsx
 create mode 100644 src/components/feedback/FeedbackChoice/style.module.scss

diff --git a/src/components/feedback/FeedbackChoice/index.tsx b/src/components/feedback/FeedbackChoice/index.tsx
new file mode 100644
index 00000000..ab3c311d
--- /dev/null
+++ b/src/components/feedback/FeedbackChoice/index.tsx
@@ -0,0 +1,77 @@
+import { Typography } from '@/components/common';
+import { useId, useState } from 'react';
+import styles from './style.module.scss';
+
+interface FeedbackChoiceProps {
+  question: string;
+  choices: string[];
+  singleChoice?: boolean;
+  onExport: (choices: string) => void;
+}
+
+const FeedbackChoice = ({
+  question,
+  choices,
+  singleChoice = false,
+  onExport,
+}: FeedbackChoiceProps) => {
+  const id = useId();
+  const [selected, setSelected] = useState<string[]>([]);
+  const [other, setOther] = useState<string>('');
+
+  const handleSelection = (selected: string[], other = '') => {
+    setSelected(selected);
+    setOther(other);
+    onExport(
+      (selected.length > 0 ? `${selected.join(', ')}\n` : '') +
+        (other.length > 0 ? `${other}\n` : '')
+    );
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <Typography variant="body/medium" component="p">
+        <strong>{question}</strong> {singleChoice ? 'Choose one.' : 'Select all that apply.'}
+        {singleChoice && selected.length > 0 ? (
+          <button type="button" onClick={() => handleSelection([])}>
+            Clear selection
+          </button>
+        ) : null}
+      </Typography>
+      {choices.map((choice, i) => (
+        <label key={choice}>
+          <input
+            type={singleChoice ? 'radio' : 'checkbox'}
+            name={singleChoice ? id : `${id}_${i}`}
+            checked={selected.includes(choice)}
+            onChange={() => {
+              if (singleChoice) {
+                handleSelection([choice]);
+              } else {
+                handleSelection(
+                  selected.includes(choice)
+                    ? selected.filter(c => c !== choice)
+                    : [...selected, choice],
+                  other
+                );
+              }
+            }}
+          />
+          &nbsp;
+          {choice}
+        </label>
+      ))}
+      {singleChoice ? null : (
+        <label>
+          Other:&nbsp;
+          <textarea
+            value={other}
+            onChange={e => handleSelection(selected, e.currentTarget.value)}
+          />
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default FeedbackChoice;
diff --git a/src/components/feedback/FeedbackChoice/style.module.scss b/src/components/feedback/FeedbackChoice/style.module.scss
new file mode 100644
index 00000000..c928c030
--- /dev/null
+++ b/src/components/feedback/FeedbackChoice/style.module.scss
@@ -0,0 +1,7 @@
+@use 'src/styles/vars.scss' as vars;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
diff --git a/src/components/feedback/FeedbackForm/index.tsx b/src/components/feedback/FeedbackForm/index.tsx
index 95966828..12794792 100644
--- a/src/components/feedback/FeedbackForm/index.tsx
+++ b/src/components/feedback/FeedbackForm/index.tsx
@@ -1,4 +1,5 @@
 import { Typography } from '@/components/common';
+import FeedbackChoice from '@/components/feedback/FeedbackChoice';
 import { showToast } from '@/lib';
 import { FeedbackAPI } from '@/lib/api';
 import { PublicEvent, PublicFeedback } from '@/lib/types/apiResponses';
@@ -18,10 +19,11 @@ export const communityToFeedbackType: Record<Community, FeedbackType> = {
 interface FeedbackFormProps {
   authToken: string;
   event: PublicEvent;
+  attended: boolean;
   onSubmit?: (feedback: PublicFeedback) => void;
 }
 
-const FeedbackForm = ({ authToken, event, onSubmit }: FeedbackFormProps) => {
+const FeedbackForm = ({ authToken, event, attended, onSubmit }: FeedbackFormProps) => {
   const [source, setSource] = useState('');
   const [description, setDescription] = useState('');
 
@@ -54,20 +56,54 @@ const FeedbackForm = ({ authToken, event, onSubmit }: FeedbackFormProps) => {
         Feel free to give event suggestions, friendly words, constructive crisitism, or just say
         what’s on your mind!
       </p>
-      <input
-        aria-label="Feedback source"
-        placeholder="Where did you hear about this event?"
-        value={source}
-        onChange={e => setSource(e.currentTarget.value)}
-        className={styles.field}
-      />
       <textarea
         aria-label="Feedback description"
-        placeholder="The Hack School event had informational slides that taught more niche than usual so I learned a lot. It was difficult to find the room though. Maybe put up a sign next time."
+        placeholder="The Hack School event had informational slides that taught more niche than usual so I learned a lot."
         value={description}
         onChange={e => setDescription(e.currentTarget.value)}
         className={styles.field}
       />
+      <p>
+        Answer as few of the following optional questions as you want. You can elaborate on your
+        responses above.
+      </p>
+      <FeedbackChoice
+        question="How did you hear about this event?"
+        choices={[
+          'Instagram',
+          'Discord',
+          'ACM website',
+          'Flyer or tabling',
+          'A friend/word of mouth',
+          'Just passing by',
+        ]}
+        onExport={setSource}
+      />
+      {attended ? (
+        <FeedbackChoice
+          question="How easy was it to find the event?"
+          choices={[
+            'I was already familiar with the event location.',
+            "I didn't know where it was, but it was easy to figure out myself.",
+            'It was a bit difficult to find the event location.',
+          ]}
+          singleChoice
+          onExport={console.log}
+        />
+      ) : (
+        <FeedbackChoice
+          question="Why weren't you able to make it to the event?"
+          choices={[
+            'Forgot to check in',
+            'Busy with classes',
+            'Conflict with another class or event',
+            'Forgot that the event was happening',
+            'Already made plans for something else today',
+            "Couldn't find the room",
+          ]}
+          onExport={console.log}
+        />
+      )}
       <button type="submit" className={styles.submit}>
         Submit
       </button>
diff --git a/src/pages/events/[uuid].tsx b/src/pages/events/[uuid].tsx
index 88e96c44..15f210c6 100644
--- a/src/pages/events/[uuid].tsx
+++ b/src/pages/events/[uuid].tsx
@@ -30,7 +30,9 @@ const EventPage = ({ token, event, attended, feedback: initFeedback }: EventPage
       </div>
     );
   } else if (started) {
-    feedbackForm = <FeedbackForm event={event} authToken={token} onSubmit={setFeedback} />;
+    feedbackForm = (
+      <FeedbackForm event={event} attended={attended} authToken={token} onSubmit={setFeedback} />
+    );
   }
 
   return (

From 5de68dc4b13fda65bcf8e40fd5f6730225e10c4a Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 03:50:50 -0700
Subject: [PATCH 28/34] style checkbox/radio

---
 .../feedback/Feedback/style.module.scss       |  2 +
 .../feedback/FeedbackChoice/index.tsx         | 23 +++--
 .../feedback/FeedbackChoice/style.module.scss | 85 +++++++++++++++++++
 .../FeedbackChoice/style.module.scss.d.ts     | 14 +++
 .../feedback/FeedbackForm/index.tsx           | 25 +++---
 5 files changed, 130 insertions(+), 19 deletions(-)
 create mode 100644 src/components/feedback/FeedbackChoice/style.module.scss.d.ts

diff --git a/src/components/feedback/Feedback/style.module.scss b/src/components/feedback/Feedback/style.module.scss
index 1b796634..b0c0cb8b 100644
--- a/src/components/feedback/Feedback/style.module.scss
+++ b/src/components/feedback/Feedback/style.module.scss
@@ -79,6 +79,7 @@
 
     .response {
       display: flex;
+      flex: none;
       flex-direction: column;
       gap: 0.5rem;
       justify-content: space-between;
@@ -111,6 +112,7 @@
 
     .status {
       display: flex;
+      flex: none;
       gap: 0.25rem;
       margin-top: auto;
 
diff --git a/src/components/feedback/FeedbackChoice/index.tsx b/src/components/feedback/FeedbackChoice/index.tsx
index ab3c311d..c31e6d26 100644
--- a/src/components/feedback/FeedbackChoice/index.tsx
+++ b/src/components/feedback/FeedbackChoice/index.tsx
@@ -6,7 +6,7 @@ interface FeedbackChoiceProps {
   question: string;
   choices: string[];
   singleChoice?: boolean;
-  onExport: (choices: string) => void;
+  onExport: (question: string, choices: string) => void;
 }
 
 const FeedbackChoice = ({
@@ -23,23 +23,28 @@ const FeedbackChoice = ({
     setSelected(selected);
     setOther(other);
     onExport(
+      question,
       (selected.length > 0 ? `${selected.join(', ')}\n` : '') +
-        (other.length > 0 ? `${other}\n` : '')
+        (other.length > 0 ? `Other: ${other}\n` : '')
     );
   };
 
   return (
     <div className={styles.wrapper}>
       <Typography variant="body/medium" component="p">
-        <strong>{question}</strong> {singleChoice ? 'Choose one.' : 'Select all that apply.'}
+        <strong>{question}</strong> {singleChoice ? 'Choose one.' : 'Select all that apply.'}&nbsp;
         {singleChoice && selected.length > 0 ? (
-          <button type="button" onClick={() => handleSelection([])}>
+          <button
+            type="button"
+            onClick={() => handleSelection([])}
+            className={styles.clearSelection}
+          >
             Clear selection
           </button>
         ) : null}
       </Typography>
       {choices.map((choice, i) => (
-        <label key={choice}>
+        <label className={styles.response} key={choice}>
           <input
             type={singleChoice ? 'radio' : 'checkbox'}
             name={singleChoice ? id : `${id}_${i}`}
@@ -57,16 +62,18 @@ const FeedbackChoice = ({
               }
             }}
           />
-          &nbsp;
+          <div className={styles.indicator}> </div>
           {choice}
         </label>
       ))}
       {singleChoice ? null : (
-        <label>
+        <label className={styles.other}>
           Other:&nbsp;
-          <textarea
+          <input
+            type="text"
             value={other}
             onChange={e => handleSelection(selected, e.currentTarget.value)}
+            className={styles.otherField}
           />
         </label>
       )}
diff --git a/src/components/feedback/FeedbackChoice/style.module.scss b/src/components/feedback/FeedbackChoice/style.module.scss
index c928c030..0ab50915 100644
--- a/src/components/feedback/FeedbackChoice/style.module.scss
+++ b/src/components/feedback/FeedbackChoice/style.module.scss
@@ -4,4 +4,89 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+
+  .clearSelection {
+    background: none;
+    color: var(--theme-blue-text-button);
+    display: inline;
+    font: inherit;
+    padding: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .response {
+    display: flex;
+    gap: 0.5rem;
+
+    input {
+      @include vars.accessibly-hidden;
+    }
+
+    .indicator {
+      align-items: center;
+      background-color: var(--theme-elevated-background);
+      border: 1px solid var(--theme-elevated-stroke);
+      cursor: pointer;
+      display: flex;
+      height: 1rem;
+      justify-content: center;
+      width: 1rem;
+
+      &::after {
+        color: var(--theme-background);
+        visibility: hidden;
+      }
+    }
+
+    [type='checkbox'] + .indicator {
+      border-radius: 5px;
+
+      &::after {
+        content: '✔';
+        font-size: 0.8rem;
+      }
+    }
+
+    [type='radio'] + .indicator {
+      border-radius: 50%;
+
+      &::after {
+        background-color: currentColor;
+        border-radius: 50%;
+        content: '';
+        display: block;
+        height: 0.5rem;
+        width: 0.5rem;
+      }
+    }
+
+    :checked + .indicator {
+      background-color: var(--theme-primary-2);
+      border-color: transparent;
+
+      &::after {
+        visibility: visible;
+      }
+    }
+  }
+
+  .other {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    margin: -0.5rem 0;
+    padding-left: 1.5rem;
+
+    .otherField {
+      background-color: var(--theme-elevated-background);
+      border: 1px solid var(--theme-elevated-stroke);
+      border-radius: 1rem;
+      height: 2rem;
+      padding: 0.5rem 1rem;
+      width: 15rem;
+    }
+  }
 }
diff --git a/src/components/feedback/FeedbackChoice/style.module.scss.d.ts b/src/components/feedback/FeedbackChoice/style.module.scss.d.ts
new file mode 100644
index 00000000..66f25cf8
--- /dev/null
+++ b/src/components/feedback/FeedbackChoice/style.module.scss.d.ts
@@ -0,0 +1,14 @@
+export type Styles = {
+  clearSelection: string;
+  indicator: string;
+  other: string;
+  otherField: string;
+  response: string;
+  wrapper: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;
diff --git a/src/components/feedback/FeedbackForm/index.tsx b/src/components/feedback/FeedbackForm/index.tsx
index 12794792..fbfb283a 100644
--- a/src/components/feedback/FeedbackForm/index.tsx
+++ b/src/components/feedback/FeedbackForm/index.tsx
@@ -25,7 +25,8 @@ interface FeedbackFormProps {
 
 const FeedbackForm = ({ authToken, event, attended, onSubmit }: FeedbackFormProps) => {
   const [source, setSource] = useState('');
-  const [description, setDescription] = useState('');
+  const [response, setResponse] = useState('');
+  const [questions, setQuestions] = useState<Record<string, string>>({});
 
   return (
     <form
@@ -33,10 +34,15 @@ const FeedbackForm = ({ authToken, event, attended, onSubmit }: FeedbackFormProp
       onSubmit={async e => {
         e.preventDefault();
         try {
+          const allQuestions = Object.entries(questions)
+            .map(([question, response]) => (response ? `${question}: ${response}` : ''))
+            .join('');
+          const description =
+            (allQuestions ? `${allQuestions}\nAdditional comments:\n` : '') + response;
           const feedback = await FeedbackAPI.addFeedback(authToken, {
             event: event.uuid,
             source: source,
-            description,
+            description: description.padEnd(20, ' '),
             type: communityToFeedbackType[toCommunity(event.committee)],
           });
           showToast(
@@ -59,14 +65,11 @@ const FeedbackForm = ({ authToken, event, attended, onSubmit }: FeedbackFormProp
       <textarea
         aria-label="Feedback description"
         placeholder="The Hack School event had informational slides that taught more niche than usual so I learned a lot."
-        value={description}
-        onChange={e => setDescription(e.currentTarget.value)}
+        value={response}
+        onChange={e => setResponse(e.currentTarget.value)}
         className={styles.field}
       />
-      <p>
-        Answer as few of the following optional questions as you want. You can elaborate on your
-        responses above.
-      </p>
+      <p>The following questions are optional. You can elaborate on your responses above.</p>
       <FeedbackChoice
         question="How did you hear about this event?"
         choices={[
@@ -77,7 +80,7 @@ const FeedbackForm = ({ authToken, event, attended, onSubmit }: FeedbackFormProp
           'A friend/word of mouth',
           'Just passing by',
         ]}
-        onExport={setSource}
+        onExport={(_, response) => setSource(response)}
       />
       {attended ? (
         <FeedbackChoice
@@ -88,7 +91,7 @@ const FeedbackForm = ({ authToken, event, attended, onSubmit }: FeedbackFormProp
             'It was a bit difficult to find the event location.',
           ]}
           singleChoice
-          onExport={console.log}
+          onExport={(question, response) => setQuestions({ ...questions, [question]: response })}
         />
       ) : (
         <FeedbackChoice
@@ -101,7 +104,7 @@ const FeedbackForm = ({ authToken, event, attended, onSubmit }: FeedbackFormProp
             'Already made plans for something else today',
             "Couldn't find the room",
           ]}
-          onExport={console.log}
+          onExport={(question, response) => setQuestions({ ...questions, [question]: response })}
         />
       )}
       <button type="submit" className={styles.submit}>

From ed34a4e8e361e58191d7221aeb1a39c5a1f4411b Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 03:59:03 -0700
Subject: [PATCH 29/34] adjustments

---
 src/components/feedback/FeedbackChoice/index.tsx         | 1 +
 src/components/feedback/FeedbackChoice/style.module.scss | 3 ++-
 src/components/feedback/FeedbackForm/index.tsx           | 2 +-
 src/components/feedback/FeedbackForm/style.module.scss   | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/feedback/FeedbackChoice/index.tsx b/src/components/feedback/FeedbackChoice/index.tsx
index c31e6d26..71e1dfab 100644
--- a/src/components/feedback/FeedbackChoice/index.tsx
+++ b/src/components/feedback/FeedbackChoice/index.tsx
@@ -71,6 +71,7 @@ const FeedbackChoice = ({
           Other:&nbsp;
           <input
             type="text"
+            placeholder="Something else"
             value={other}
             onChange={e => handleSelection(selected, e.currentTarget.value)}
             className={styles.otherField}
diff --git a/src/components/feedback/FeedbackChoice/style.module.scss b/src/components/feedback/FeedbackChoice/style.module.scss
index 0ab50915..2a2b46ba 100644
--- a/src/components/feedback/FeedbackChoice/style.module.scss
+++ b/src/components/feedback/FeedbackChoice/style.module.scss
@@ -9,7 +9,7 @@
     background: none;
     color: var(--theme-blue-text-button);
     display: inline;
-    font: inherit;
+    font-size: 1rem;
     padding: 0;
 
     &:hover {
@@ -84,6 +84,7 @@
       background-color: var(--theme-elevated-background);
       border: 1px solid var(--theme-elevated-stroke);
       border-radius: 1rem;
+      font-size: 1rem;
       height: 2rem;
       padding: 0.5rem 1rem;
       width: 15rem;
diff --git a/src/components/feedback/FeedbackForm/index.tsx b/src/components/feedback/FeedbackForm/index.tsx
index fbfb283a..0b6f87ec 100644
--- a/src/components/feedback/FeedbackForm/index.tsx
+++ b/src/components/feedback/FeedbackForm/index.tsx
@@ -64,7 +64,7 @@ const FeedbackForm = ({ authToken, event, attended, onSubmit }: FeedbackFormProp
       </p>
       <textarea
         aria-label="Feedback description"
-        placeholder="The Hack School event had informational slides that taught more niche than usual so I learned a lot."
+        placeholder="The Hack School event had informational slides that taught more niche topics than usual, so I learned a lot."
         value={response}
         onChange={e => setResponse(e.currentTarget.value)}
         className={styles.field}
diff --git a/src/components/feedback/FeedbackForm/style.module.scss b/src/components/feedback/FeedbackForm/style.module.scss
index 748bc76b..045e7389 100644
--- a/src/components/feedback/FeedbackForm/style.module.scss
+++ b/src/components/feedback/FeedbackForm/style.module.scss
@@ -15,7 +15,7 @@
     padding: 0 1rem;
 
     &:is(textarea) {
-      min-height: 10rem;
+      min-height: 5rem;
       padding: 1rem;
       resize: vertical;
     }

From c7946d5d49fcd1fe710be659b7e1f49fcf9f971a Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 31 Mar 2024 04:06:30 -0700
Subject: [PATCH 30/34] Add "Add Feedback" button to checkin modal

---
 src/components/events/CheckInModal/index.tsx  | 13 +++++++--
 .../events/CheckInModal/style.module.scss     | 28 +++++++++++++------
 .../CheckInModal/style.module.scss.d.ts       |  2 ++
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/events/CheckInModal/index.tsx b/src/components/events/CheckInModal/index.tsx
index 49e788a7..6155a3ec 100644
--- a/src/components/events/CheckInModal/index.tsx
+++ b/src/components/events/CheckInModal/index.tsx
@@ -1,6 +1,8 @@
 import { Modal, Typography } from '@/components/common';
+import { config } from '@/lib';
 import { PublicEvent } from '@/lib/types/apiResponses';
 import Image from 'next/image';
+import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
 import Confetti from 'react-confetti';
 import style from './style.module.scss';
@@ -105,9 +107,14 @@ const CheckInModal = ({ open, event, onClose }: CheckInModalProps) => {
             <Typography variant="h4/regular" className={style.subheaderText} />
           </div>
         </div>
-        <button type="submit" className={style.done}>
-          <Typography variant="h4/bold">Done</Typography>
-        </button>
+        <div className={style.buttonRow}>
+          <button type="submit" className={`${style.button} ${style.done}`}>
+            <Typography variant="h4/bold">Close</Typography>
+          </button>
+          <Link href={`${config.eventsRoute}/${event.uuid}`} className={style.button}>
+            <Typography variant="h4/bold">Add Feedback</Typography>
+          </Link>
+        </div>
       </div>
     </Modal>
   );
diff --git a/src/components/events/CheckInModal/style.module.scss b/src/components/events/CheckInModal/style.module.scss
index 0c5d8222..c2532b71 100644
--- a/src/components/events/CheckInModal/style.module.scss
+++ b/src/components/events/CheckInModal/style.module.scss
@@ -46,17 +46,27 @@
     }
   }
 
-  .done {
-    border-radius: 2rem;
-    padding: 1rem;
-    width: 50%;
+  .buttonRow {
+    display: flex;
+    gap: 1rem;
+
+    .button {
+      background-color: var(--theme-surface-1);
+      border-radius: 2rem;
+      padding: 1rem 1.5rem;
+
+      &.done {
+        background-color: var(--theme-primary-2);
+        color: var(--theme-background);
+      }
 
-    @media screen and (width <= vars.$breakpoint-md) {
-      padding: 0.5rem;
+      @media screen and (width <= vars.$breakpoint-md) {
+        padding: 0.5rem;
 
-      div {
-        font-size: 1rem !important;
-        line-height: 1.5rem !important;
+        div {
+          font-size: 1rem !important;
+          line-height: 1.5rem !important;
+        }
       }
     }
   }
diff --git a/src/components/events/CheckInModal/style.module.scss.d.ts b/src/components/events/CheckInModal/style.module.scss.d.ts
index 55521cce..e825af2e 100644
--- a/src/components/events/CheckInModal/style.module.scss.d.ts
+++ b/src/components/events/CheckInModal/style.module.scss.d.ts
@@ -1,5 +1,7 @@
 export type Styles = {
   ai: string;
+  button: string;
+  buttonRow: string;
   container: string;
   cyber: string;
   design: string;

From a41521f9adf8777ada1e7235f68366f067c4b0e5 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Mon, 1 Apr 2024 10:25:22 -0700
Subject: [PATCH 31/34] remove question, adjust response spacing

---
 src/components/feedback/Feedback/style.module.scss |  2 +-
 src/components/feedback/FeedbackForm/index.tsx     | 13 +------------
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/feedback/Feedback/style.module.scss b/src/components/feedback/Feedback/style.module.scss
index b0c0cb8b..bbd89168 100644
--- a/src/components/feedback/Feedback/style.module.scss
+++ b/src/components/feedback/Feedback/style.module.scss
@@ -82,7 +82,7 @@
       flex: none;
       flex-direction: column;
       gap: 0.5rem;
-      justify-content: space-between;
+      justify-content: flex-end;
 
       @media (max-width: vars.$breakpoint-sm) {
         flex-direction: row;
diff --git a/src/components/feedback/FeedbackForm/index.tsx b/src/components/feedback/FeedbackForm/index.tsx
index 0b6f87ec..b1fc28a1 100644
--- a/src/components/feedback/FeedbackForm/index.tsx
+++ b/src/components/feedback/FeedbackForm/index.tsx
@@ -82,18 +82,7 @@ const FeedbackForm = ({ authToken, event, attended, onSubmit }: FeedbackFormProp
         ]}
         onExport={(_, response) => setSource(response)}
       />
-      {attended ? (
-        <FeedbackChoice
-          question="How easy was it to find the event?"
-          choices={[
-            'I was already familiar with the event location.',
-            "I didn't know where it was, but it was easy to figure out myself.",
-            'It was a bit difficult to find the event location.',
-          ]}
-          singleChoice
-          onExport={(question, response) => setQuestions({ ...questions, [question]: response })}
-        />
-      ) : (
+      {attended ? null : (
         <FeedbackChoice
           question="Why weren't you able to make it to the event?"
           choices={[

From a527c3e067c80b0f6c2e24bf8f5c6de8aa3d4ac3 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Mon, 1 Apr 2024 11:09:07 -0700
Subject: [PATCH 32/34] swap add feedback and close buttons in checkin modal

---
 src/components/events/CheckInModal/index.tsx     | 11 +++++++----
 .../events/CheckInModal/style.module.scss        |  4 ++--
 .../events/CheckInModal/style.module.scss.d.ts   |  2 +-
 .../feedback/FeedbackForm/style.module.scss      | 16 +++++-----------
 4 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/events/CheckInModal/index.tsx b/src/components/events/CheckInModal/index.tsx
index 6155a3ec..74bfe91c 100644
--- a/src/components/events/CheckInModal/index.tsx
+++ b/src/components/events/CheckInModal/index.tsx
@@ -108,12 +108,15 @@ const CheckInModal = ({ open, event, onClose }: CheckInModalProps) => {
           </div>
         </div>
         <div className={style.buttonRow}>
-          <button type="submit" className={`${style.button} ${style.done}`}>
-            <Typography variant="h4/bold">Close</Typography>
-          </button>
-          <Link href={`${config.eventsRoute}/${event.uuid}`} className={style.button}>
+          <Link
+            href={`${config.eventsRoute}/${event.uuid}`}
+            className={`${style.button} ${style.addFeedback}`}
+          >
             <Typography variant="h4/bold">Add Feedback</Typography>
           </Link>
+          <button type="submit" className={style.button}>
+            <Typography variant="h4/bold">Close</Typography>
+          </button>
         </div>
       </div>
     </Modal>
diff --git a/src/components/events/CheckInModal/style.module.scss b/src/components/events/CheckInModal/style.module.scss
index c2532b71..0cca1fa6 100644
--- a/src/components/events/CheckInModal/style.module.scss
+++ b/src/components/events/CheckInModal/style.module.scss
@@ -51,11 +51,11 @@
     gap: 1rem;
 
     .button {
-      background-color: var(--theme-surface-1);
+      background-color: var(--theme-surface-2);
       border-radius: 2rem;
       padding: 1rem 1.5rem;
 
-      &.done {
+      &.addFeedback {
         background-color: var(--theme-primary-2);
         color: var(--theme-background);
       }
diff --git a/src/components/events/CheckInModal/style.module.scss.d.ts b/src/components/events/CheckInModal/style.module.scss.d.ts
index e825af2e..9ab7a566 100644
--- a/src/components/events/CheckInModal/style.module.scss.d.ts
+++ b/src/components/events/CheckInModal/style.module.scss.d.ts
@@ -1,11 +1,11 @@
 export type Styles = {
+  addFeedback: string;
   ai: string;
   button: string;
   buttonRow: string;
   container: string;
   cyber: string;
   design: string;
-  done: string;
   general: string;
   graphic: string;
   hack: string;
diff --git a/src/components/feedback/FeedbackForm/style.module.scss b/src/components/feedback/FeedbackForm/style.module.scss
index 045e7389..52ca45b3 100644
--- a/src/components/feedback/FeedbackForm/style.module.scss
+++ b/src/components/feedback/FeedbackForm/style.module.scss
@@ -6,24 +6,18 @@
   gap: 1rem;
 
   .field {
-    background: none;
     background-color: var(--theme-elevated-background);
-    border: 2px solid var(--theme-elevated-stroke);
+    border: 1px solid var(--theme-elevated-stroke);
     border-radius: 0.75rem;
     font-size: 1rem;
-    min-height: 3rem;
-    padding: 0 1rem;
-
-    &:is(textarea) {
-      min-height: 5rem;
-      padding: 1rem;
-      resize: vertical;
-    }
+    min-height: 5rem;
+    padding: 1rem;
+    resize: vertical;
   }
 
   .submit {
     align-self: flex-start;
-    background-color: var(--theme-text-on-background-1);
+    background-color: var(--theme-primary-2);
     border-radius: 2rem;
     color: var(--theme-background);
     font-size: 1rem;

From fe07d096874ae16b05adb661a863a9e43ed1c6b0 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Mon, 1 Apr 2024 11:15:30 -0700
Subject: [PATCH 33/34] make feedback elevated

---
 src/components/feedback/Feedback/index.tsx              | 2 +-
 src/components/feedback/Feedback/style.module.scss      | 4 ++++
 src/components/feedback/Feedback/style.module.scss.d.ts | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/feedback/Feedback/index.tsx b/src/components/feedback/Feedback/index.tsx
index ce6f8a36..760af546 100644
--- a/src/components/feedback/Feedback/index.tsx
+++ b/src/components/feedback/Feedback/index.tsx
@@ -79,7 +79,7 @@ const Feedback = ({
   }
 
   return (
-    <div className={styles.wrapper}>
+    <div className={`${styles.wrapper} ${showUser || showEvent ? '' : styles.noHeader}`}>
       {showUser || showEvent ? (
         <div className={`${styles.header} ${showUser ? styles.hasUser : ''}`}>
           {showUser ? (
diff --git a/src/components/feedback/Feedback/style.module.scss b/src/components/feedback/Feedback/style.module.scss
index bbd89168..a263ffeb 100644
--- a/src/components/feedback/Feedback/style.module.scss
+++ b/src/components/feedback/Feedback/style.module.scss
@@ -8,6 +8,10 @@
   white-space: pre-wrap;
   word-break: break-word;
 
+  &.noHeader {
+    background-color: var(--theme-elevated-background);
+  }
+
   .header {
     align-items: center;
     background-color: var(--theme-elevated-background);
diff --git a/src/components/feedback/Feedback/style.module.scss.d.ts b/src/components/feedback/Feedback/style.module.scss.d.ts
index 936fde1e..53833df0 100644
--- a/src/components/feedback/Feedback/style.module.scss.d.ts
+++ b/src/components/feedback/Feedback/style.module.scss.d.ts
@@ -10,6 +10,7 @@ export type Styles = {
   header: string;
   ignore: string;
   ignored: string;
+  noHeader: string;
   response: string;
   status: string;
   user: string;

From eff5f9c676d0f4976207bb7fef8d700009bfd6e4 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Mon, 1 Apr 2024 16:58:49 -0700
Subject: [PATCH 34/34] Hotfix: Reduce reliance on backend's feedback filters

since they don't work for non-admins
---
 src/pages/events/[uuid].tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/pages/events/[uuid].tsx b/src/pages/events/[uuid].tsx
index 15f210c6..131aa954 100644
--- a/src/pages/events/[uuid].tsx
+++ b/src/pages/events/[uuid].tsx
@@ -50,10 +50,10 @@ const getServerSidePropsFunc: GetServerSidePropsWithUser = async ({ params, req,
   const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
 
   try {
-    const [event, attendances, [feedback = null]] = await Promise.all([
+    const [event, attendances, feedback] = await Promise.all([
       EventAPI.getEvent(uuid, token),
       UserAPI.getAttendancesForCurrentUser(token),
-      FeedbackAPI.getFeedback(token, { user: user.uuid, event: uuid }),
+      FeedbackAPI.getFeedback(token),
     ]);
     return {
       props: {
@@ -61,7 +61,10 @@ const getServerSidePropsFunc: GetServerSidePropsWithUser = async ({ params, req,
         token,
         event,
         attended: attendances.some(attendance => attendance.event.uuid === uuid),
-        feedback,
+        feedback:
+          feedback.find(
+            feedback => feedback.event.uuid === uuid && feedback.user.uuid === user.uuid
+          ) ?? null,
       },
     };
   } catch {