diff --git a/components/Organizer/JudgingTab/JudgingTab.tsx b/components/Organizer/JudgingTab/JudgingTab.tsx index 787597f1..59f7740e 100644 --- a/components/Organizer/JudgingTab/JudgingTab.tsx +++ b/components/Organizer/JudgingTab/JudgingTab.tsx @@ -2,6 +2,7 @@ import { Skeleton } from 'antd'; import { TeamData, ScoreData, UserData } from '../../../types/database'; import { useCustomSWR, RequestType } from '../../../utils/request-utils'; import AllScores from './allScores'; +import styles from '../../../styles/Organizer.module.css'; const JudgingTab = () => { // Teams data @@ -30,7 +31,7 @@ const JudgingTab = () => { const dataNull = !teamsData || !scoresData || !judgeData; return ( - <> +
{error ? (
Failed to load data.
) : dataNull ? ( @@ -38,7 +39,7 @@ const JudgingTab = () => { ) : ( )} - +
); }; diff --git a/components/Organizer/ManageUsersTab/ManageUsersTab.tsx b/components/Organizer/ManageUsersTab/ManageUsersTab.tsx index 6ffca30e..853f1cad 100644 --- a/components/Organizer/ManageUsersTab/ManageUsersTab.tsx +++ b/components/Organizer/ManageUsersTab/ManageUsersTab.tsx @@ -2,11 +2,32 @@ import { Empty, Skeleton } from 'antd'; import { useSWRConfig } from 'swr'; import { useCustomSWR, RequestType } from '../../../utils/request-utils'; import ManageRoleForm, { ManageFormFields } from './manageRoleForm'; -import { handleManageFormSubmit } from '../../../utils/organizer-utils'; +import { ScopedMutator } from 'swr/dist/types'; +import { handleSubmitSuccess, handleSubmitFailure } from '../../../lib/helpers'; const ManageUsersTab = () => { const { mutate } = useSWRConfig(); + /** + * Handles submission of the Manage Form with the specified role data. + * @param {ManageFormFields} roleData - The form data for the role being managed. + * @param {ScopedMutator} mutate - The scoped mutator function to update the query cache. + */ + const handleManageFormSubmit = async (roleData: ManageFormFields, mutate: ScopedMutator) => { + const res = await fetch(`/api/manage-role`, { + method: 'PATCH', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ formData: roleData }), + }); + + if (res.ok) { + mutate('/api/manage-role'); + handleSubmitSuccess(); + } else handleSubmitFailure(await res.text()); + }; + // User data const { data: userData, error } = useCustomSWR({ url: '/api/manage-role', diff --git a/components/Organizer/ManageUsersTab/manageRoleForm.tsx b/components/Organizer/ManageUsersTab/manageRoleForm.tsx index 57444b97..d989f123 100644 --- a/components/Organizer/ManageUsersTab/manageRoleForm.tsx +++ b/components/Organizer/ManageUsersTab/manageRoleForm.tsx @@ -1,6 +1,8 @@ import { Form, Button, Select, Row, Col, message } from 'antd'; import Text from 'antd/lib/typography/Text'; -import { useState } from 'react'; +import { useContext, useState } from 'react'; +import { ThemeContext, getAccentColor, getThemedClass } from '../../../theme/themeProvider'; +import styles from '../../../styles/ManageUsersTab.module.css'; const { Option } = Select; @@ -16,13 +18,14 @@ export interface ManageFormProps { onSubmit: (value: ManageFormFields) => Promise; } -export default function ManageRoleForm(props: ManageFormProps) { - const { onSubmit } = props; +export default function ManageRoleForm({ onSubmit, formData }: ManageFormProps) { const layout = { labelCol: { span: 16 }, labelAlign: 'left', }; + const { accentColor, baseTheme } = useContext(ThemeContext); + const [modified, setModified] = useState([]); // TODO: probably add search @@ -30,27 +33,29 @@ export default function ManageRoleForm(props: ManageFormProps) { return (
- {props.formData.map(config => ( + {formData.map(config => ( - {config.name} -
- {config.email} - +
+ + {config.name} + +
+ {config.email} +
+
} colon={false} key={config._id} initialValue={config.userType}>