timetable-app

index.tsx (2631B)

---

 import { useDidUpdate } from '@mantine/hooks';
 import { Box, Stack } from '@mui/material';
 import { Provider, createStore } from 'jotai';
 import { useEffect, useMemo, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import { classAtom, gradeAtom } from './atoms';
 import DatePicker from './components/DatePicker';
 import JumpToTodayFab from './components/JumpToTodayFab';
 import Lessons from './components/Lessons';
 import SetMyClassFab from './components/SetMyClassFab';
 import useIndexAndDate from './hooks/useIndexAndDate';
 
 import type { DayTimetable } from './types';
 import type { Class, Grade } from 'common/types';
 import type SwiperClass from 'swiper';
 
 import 'swiper/css';
 
 const store = createStore();
 
 type Props = {
 	calendar: [string, DayTimetable][];
 	grade: Grade;
 	class: Class;
 };
 
 // TODO: jotai atom でデータ受け渡し
 export default function DailyView(props: Props) {
 	const dateStrings = useMemo(
 		() => props.calendar.map(([date]) => date),
 		[props.calendar],
 	);
 	const [swiper, setSwiper] = useState<SwiperClass>();
 
 	const { dates, index, setDate, setIndex } = useIndexAndDate(dateStrings);
 
 	const [initialIndex] = useState(index);
 
 	const handleSlideChange = (swiper: SwiperClass) =>
 		setIndex(swiper.activeIndex);
 
 	// index が変わると swiper をスライド
 	useDidUpdate(() => {
 		if (swiper?.activeIndex !== index) {
 			swiper?.slideTo(index);
 		}
 	}, [index]);
 
 	// 学年、クラスの情報を提供
 	useEffect(() => {
 		store.set(gradeAtom, props.grade);
 		store.set(classAtom, props.class);
 	}, [props.class, props.grade]);
 
 	return (
 		<Provider store={store}>
 			<Stack direction='column' width={1} minHeight={1} spacing={1} py={2}>
 				<DatePicker
 					dates={dates}
 					index={index}
 					setDate={setDate}
 					setIndex={setIndex}
 				/>
 
 				<Box flexGrow={1}>
 					{index < 0 ? (
 						<Box sx={{ p: 2 }}>時間割がありません</Box>
 					) : (
 						<Swiper
 							centeredSlides={true}
 							spaceBetween={30}
 							initialSlide={initialIndex}
 							onSwiper={setSwiper}
 							onSlideChange={handleSlideChange}
 						>
 							{props.calendar.map(([d, lessons]) => (
 								<SwiperSlide key={d}>
 									<Lessons timetable={lessons} />
 								</SwiperSlide>
 							))}
 						</Swiper>
 					)}
 				</Box>
 
 				<Box
 					sx={{
 						position: 'sticky',
 						bottom: 16,
 						marginLeft: '16px',
 						marginRight: '16px',
 						zIndex: 100,
 					}}
 				>
 					<JumpToTodayFab
 						dateStrings={dateStrings}
 						index={index}
 						setIndex={setIndex}
 					/>
 					<SetMyClassFab />
 				</Box>
 			</Stack>
 		</Provider>
 	);
 }