timetable-app

Lesson.tsx (3518B)

---

 import { useDisclosure } from '@mantine/hooks';
 import CommentIcon from '@mui/icons-material/CommentOutlined';
 import { Button } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
 import { useAtomValue } from 'jotai';
 
 import useMySubject from 'client/hooks/useMySubject';
 
 import { gradeClassAtom } from '../../atoms';
 import useNote from '../../hooks/useNote';
 import useSpecialChange from '../../hooks/useSpecialChange';
 
 import BasisChip from './BasisChip';
 import DetailDialog from './DetailDialog';
 
 import type { Basis } from '../../types';
 import type { Course, DayPeriodJa, GradeClass, SchoolTime } from 'common/types';
 
 const ListItem = styled('li')(({ theme }) => ({
 	marginBottom: theme.spacing(1),
 	'&:last-child': { marginBottom: 0 },
 }));
 
 const PeriodSpan = styled('span')({
 	display: 'inline-block',
 	width: '1em',
 });
 const LessonSpan = styled('span')({
 	display: 'inline-block',
 	whiteSpace: 'nowrap',
 	flexGrow: 1,
 	overflowX: 'hidden',
 	textOverflow: 'ellipsis',
 });
 
 type LessonNameWithMySubjectProps = {
 	subjects: readonly string[];
 	gradeClass: GradeClass;
 	dayPeriod: DayPeriodJa;
 };
 
 function LessonNameWithMySubject({
 	gradeClass,
 	dayPeriod,
 	subjects,
 }: LessonNameWithMySubjectProps) {
 	const [mySubject] = useMySubject({ gradeClass, dayPeriod });
 	return <>{mySubject ?? subjects.join('/')}</>;
 }
 
 type Props = {
 	date: Date;
 	period: SchoolTime;
 	courses: Course[];
 	basis: Basis | null;
 };
 
 // TODO: refactor
 export default function Lesson({ date, period, courses, basis }: Props) {
 	const gradeClass = useAtomValue(gradeClassAtom);
 	const [open, handlers] = useDisclosure(false);
 
 	const shortNames = courses.map((c) => c.shortName);
 
 	const [specialChangeSubject] = useSpecialChange({
 		gradeClass,
 		date,
 		period,
 	});
 	const [note] = useNote({ gradeClass, date, period });
 
 	return (
 		<ListItem>
 			<Button
 				sx={(theme) => ({
 					[theme.breakpoints.up('xs')]: { fontSize: 24, px: 1 },
 					[theme.breakpoints.up('sm')]: { fontSize: 28, px: 2 },
 					padding: 0,
 					textAlign: 'left',
 					fontWeight: 'unset',
 					color: 'unset',
 					[theme.getColorSchemeSelector('light')]: {
 						backgroundColor: courses.length
 							? alpha(theme.palette.primary.light, 0.15)
 							: 'inherit',
 					},
 					[theme.getColorSchemeSelector('dark')]: {
 						backgroundColor: courses.length
 							? alpha(theme.palette.primary.dark, 0.4)
 							: 'inherit',
 					},
 					width: '100%',
 					textTransform: 'none',
 					flexDirection: 'row',
 					alignItems: 'center',
 					gap: 1,
 					overflow: 'clip',
 				})}
 				variant='text'
 				onClick={handlers.open}
 			>
 				<PeriodSpan>{period}.</PeriodSpan>
 				<LessonSpan>
 					{(() => {
 						if (specialChangeSubject) {
 							return specialChangeSubject;
 						} else if (gradeClass && basis?.type === 'dayPeriod') {
 							return (
 								<LessonNameWithMySubject
 									dayPeriod={basis.dayPeriod}
 									gradeClass={gradeClass}
 									subjects={shortNames}
 								/>
 							);
 						} else {
 							return shortNames.join('/');
 						}
 					})()}
 				</LessonSpan>
 
 				{note !== '' && <CommentIcon fontSize='small' />}
 
 				{specialChangeSubject ? (
 					<BasisChip data={{ type: 'temporary' }} date={date} period={period} />
 				) : (
 					basis && <BasisChip data={basis} date={date} period={period} />
 				)}
 			</Button>
 
 			<DetailDialog
 				open={open}
 				handleClose={handlers.close}
 				date={date}
 				period={period}
 				courses={courses}
 				basis={basis}
 			/>
 		</ListItem>
 	);
 }