fix(calendar): properly show subject names

Author: nicholaschiang

components/calendar/dialog/create-page.tsx

@@ -245,7 +245,7 @@ export default function CreatePage({
             textarea
             rows={4}
             placeholder={t('meeting:description-placeholder', {
-              subject: join(editing.subjects) || 'Computer Science',
+              subject: join(editing.subjects.map((s) => s.name)) || 'Computer Science',
             })}
             label='Add description'
             className={styles.field}

components/calendar/dialog/display-page.tsx

@@ -54,7 +54,7 @@ export default function DisplayPage({
         ))}
         <dl className={styles.info}>
           <dt>Subjects</dt>
-          <dd>{join(editing.subjects)}</dd>
+          <dd>{join(editing.subjects.map((s) => s.name))}</dd>
           <dt>Meeting link</dt>
           <dd>
             <a href={editing.venue} target='_blank' rel='noopener noreferrer'>

components/calendar/dialog/edit-page.tsx

@@ -262,7 +262,7 @@ export default function EditPage({
             textarea
             rows={4}
             placeholder={t('meeting:description-placeholder', {
-              subject: join(editing.subjects) || 'Computer Science',
+              subject: join(editing.subjects.map((s) => s.name)) || 'Computer Science',
             })}
             label={t('meeting:description')}
             className={styles.field}

components/calendar/meetings/content.tsx

@@ -54,7 +54,7 @@ const MeetingContent = forwardRef(
     }, [eventTarget, eventData]);
 
     const headerString = useMemo(() => {
-      const subjects = join(meeting.subjects);
+      const subjects = join(meeting.subjects.map((s) => s.name));
       const student = meeting.people.find((p) => p.roles.includes('tutee'));
       const volunteer = meeting.people.find((p) => p.roles.includes('tutor'));
       if (student?.id === user.id) {