timetable-app

MyClassForm.tsx (2118B)

---

 import {
 	FormControl,
 	InputLabel,
 	Select,
 	MenuItem,
 	Box,
 	Stack,
 } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import { useCallback } from 'react';
 
 import useMyClass from 'client/hooks/useMyClass';
 import { GRADE_CLASSES } from 'common/constant';
 import { zodGradeClass } from 'common/utils/zod';
 
 import type { SelectChangeEvent } from '@mui/material';
 
 export default function MyClassForm() {
 	const { enqueueSnackbar } = useSnackbar();
 	const [cookieValue, setCookieValue, removeCookieValue] = useMyClass();
 
 	const handleClassChange = useCallback(
 		(e: SelectChangeEvent) => {
 			const value = e.target.value;
 			const validation = zodGradeClass.safeParse(value);
 
 			if (validation.success) {
 				setCookieValue(validation.data);
 				enqueueSnackbar({
 					message: `${validation.data} を所属クラスとして設定しました。\nホーム画面からの起動時に ${validation.data} の時間割を表示します。`,
 					variant: 'success',
 					autoHideDuration: 5000,
 				});
 			} else if (value === 'unset' || value === '') {
 				removeCookieValue();
 				enqueueSnackbar({
 					message:
 						'所属クラスの設定を削除しました。\nホーム画面からの起動時はトップページを表示します。',
 					variant: 'success',
 					autoHideDuration: 5000,
 				});
 			} else {
 				enqueueSnackbar({
 					message: 'エラーが発生しました。',
 					variant: 'error',
 					autoHideDuration: 5000,
 				});
 			}
 		},
 		[enqueueSnackbar, removeCookieValue, setCookieValue],
 	);
 
 	return (
 		<Stack direction='row' spacing={2} alignItems='center'>
 			<Box width='10rem'>
 				<FormControl fullWidth>
 					<InputLabel id='class-selection'>所属クラス</InputLabel>
 					<Select
 						labelId='class-selection'
 						label='所属クラス'
 						value={cookieValue ?? ''}
 						onChange={handleClassChange}
 					>
 						<MenuItem value='unset'>設定しない</MenuItem>
 						{GRADE_CLASSES.map((g_c) => (
 							<MenuItem value={g_c} key={g_c}>
 								{g_c}
 							</MenuItem>
 						))}
 					</Select>
 				</FormControl>
 			</Box>
 		</Stack>
 	);
 }