SetMyClassFab.tsx (1595B)
1 import { useDisclosure } from '@mantine/hooks'; 2 import SchoolIcon from '@mui/icons-material/School'; 3 import { Fab, Zoom } from '@mui/material'; 4 import { useAtomValue } from 'jotai'; 5 import { useSnackbar } from 'notistack'; 6 // TODO: mantine hooks で置き換え（usehooks-ts撲滅） 7 import { useTimeout } from 'usehooks-ts'; 8 9 import useIsPwa from 'client/hooks/useIsPwa'; 10 import useMyClass from 'client/hooks/useMyClass'; 11 12 import { gradeClassAtom } from '../atoms'; 13 14 export default function SetMyClassFab() { 15 const { enqueueSnackbar } = useSnackbar(); 16 const [visible, handlers] = useDisclosure(false); 17 const isPwa = useIsPwa(); 18 19 const [defaultGradeClass, setDefaultGradeClass] = useMyClass(); 20 const thisGradeClass = useAtomValue(gradeClassAtom); 21 22 const handleClick = () => { 23 handlers.close(); 24 if (thisGradeClass) { 25 setDefaultGradeClass(thisGradeClass); 26 enqueueSnackbar({ 27 message: `${thisGradeClass} を所属クラスとして設定しました。\nホーム画面からの起動時に ${thisGradeClass} の時間割を表示します。\n所属クラスは「設定」ページから変更できます。`, 28 autoHideDuration: 10000, 29 variant: 'success', 30 }); 31 } 32 }; 33 34 useTimeout(handlers.open, 3000); 35 36 return ( 37 <Zoom in={visible && isPwa && defaultGradeClass === null}> 38 <Fab 39 onClick={handleClick} 40 color='primary' 41 variant='extended' 42 size='medium' 43 sx={{ 44 position: 'absolute', 45 left: 0, 46 bottom: 0, 47 width: 'fit-content', 48 }} 49 > 50 <SchoolIcon sx={{ mr: 1 }} /> 51 所属クラスに設定 52 </Fab> 53 </Zoom> 54 ); 55 }