timetable-app

MySubjectForm.tsx (2621B)

---

 import {
 	Box,
 	FormControl,
 	Grid,
 	InputLabel,
 	MenuItem,
 	Select,
 	Stack,
 	TextField,
 } from '@mui/material';
 import { useCallback, useState } from 'react';
 
 import useMyClass from 'client/hooks/useMyClass';
 import useMySubject from 'client/hooks/useMySubject';
 import { trpc } from 'client/utils/trpc';
 import { DAY_PERIOD_JA, GRADE_CLASSES } from 'common/constant';
 
 import type { SelectChangeEvent } from '@mui/material';
 import type { DayPeriodJa, GradeClass } from 'common/types';
 
 type SubjectInputFieldProps = {
 	gradeClass: GradeClass;
 	dayPeriod: DayPeriodJa;
 	defaultSubject: string;
 };
 
 function SubjectInputField({
 	gradeClass,
 	dayPeriod,
 	defaultSubject,
 }: SubjectInputFieldProps) {
 	const [subject, setSubject, removeSubject] = useMySubject({
 		gradeClass,
 		dayPeriod,
 	});
 	const handleChange = (value: string) => {
 		if (value === '') {
 			removeSubject();
 		} else {
 			setSubject(value);
 		}
 	};
 
 	return (
 		<TextField
 			label={dayPeriod}
 			value={subject ?? ''}
 			helperText={defaultSubject}
 			onChange={(e) => handleChange(e.target.value)}
 			variant='standard'
 		/>
 	);
 }
 
 type SubjectInputGridProps = {
 	gradeClass: GradeClass;
 };
 
 function SubjectInputGrid({ gradeClass }: SubjectInputGridProps) {
 	const { data } = trpc.classStandard.byGradeClass.useQuery({ gradeClass });
 
 	return (
 		<Grid container spacing={2} my={0.5}>
 			{DAY_PERIOD_JA.map((dayPeriod) => (
 				<Grid width={150} key={dayPeriod}>
 					<SubjectInputField
 						gradeClass={gradeClass}
 						dayPeriod={dayPeriod}
 						defaultSubject={
 							data?.standardTimetable[dayPeriod]
 								?.map((c) => c.shortName)
 								.join('/') ?? ''
 						}
 					/>
 				</Grid>
 			))}
 		</Grid>
 	);
 }
 
 export default function MySubjectForm() {
 	const [myGradeClass] = useMyClass();
 
 	const [selectedClass, setClass] = useState<GradeClass | ''>(
 		myGradeClass ?? '',
 	);
 	const handleClassChange = useCallback(
 		(e: SelectChangeEvent<GradeClass | ''>) =>
 			setClass(e.target.value as GradeClass | ''),
 		[setClass],
 	);
 
 	return (
 		<Stack>
 			<Box width='10rem'>
 				<FormControl fullWidth size='small'>
 					<InputLabel id='class-selection'>クラス</InputLabel>
 					<Select<GradeClass | ''>
 						labelId='class-selection'
 						label='クラス'
 						required
 						value={selectedClass}
 						onChange={handleClassChange}
 					>
 						{GRADE_CLASSES.map((g_c) => (
 							<MenuItem value={g_c} key={g_c}>
 								{g_c}
 							</MenuItem>
 						))}
 					</Select>
 				</FormControl>
 			</Box>
 
 			{selectedClass !== '' && (
 				<SubjectInputGrid gradeClass={selectedClass} key={selectedClass} />
 			)}
 		</Stack>
 	);
 }