83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import { IonButton, useIonRouter } from '@ionic/react';
|
|
import './Lesson.css';
|
|
import { useEffect, useState } from 'react';
|
|
import { LoadingScreen } from '../../components/LoadingScreen';
|
|
import { COLOR_TEXT } from '../../constants';
|
|
import { useMyIonStore } from '../../contexts/MyIonStore';
|
|
import { listLessonCategories } from '../../public_data/listLessonCategories';
|
|
import { getLessonConnectivesLink } from './getLessonConnectivesLink';
|
|
import { getLessonVocabularyLink } from './getLessonWordLink';
|
|
|
|
let lessonLinkProxy = [getLessonVocabularyLink, getLessonConnectivesLink];
|
|
|
|
interface ContainerProps {
|
|
test_active_lesson_idx: number;
|
|
}
|
|
|
|
const LessonContainer: React.FC<ContainerProps> = ({ test_active_lesson_idx = 1 }) => {
|
|
const router = useIonRouter();
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const { lesson_contents, setLessonContent } = useMyIonStore();
|
|
const [active_lesson_idx, setActiveLessonIdx] = useState<number>(0);
|
|
const [selected_content, setSelectedContent] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
listLessonCategories().then((cats: any) => {
|
|
console.log({ cats });
|
|
setLessonContent(cats);
|
|
setActiveLessonIdx(test_active_lesson_idx);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (loading) return;
|
|
console.log('active_category changed', active_lesson_idx);
|
|
let selected_category = lesson_contents[test_active_lesson_idx];
|
|
setSelectedContent(selected_category['content']);
|
|
}, [active_lesson_idx, loading, test_active_lesson_idx]);
|
|
|
|
if (loading) return <LoadingScreen />;
|
|
|
|
return (
|
|
<>
|
|
<div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' }}>
|
|
{selected_content.map((content: any, cat_idx: number) => (
|
|
<IonButton
|
|
key={cat_idx}
|
|
style={{ width: '45vw', height: '45vw' }}
|
|
fill="clear"
|
|
// href={lessonLinkProxy[test_active_lesson_idx](test_active_lesson_idx.toString(), cat_idx.toString(), '0')}
|
|
onClick={() => {
|
|
router.push(
|
|
lessonLinkProxy[test_active_lesson_idx](test_active_lesson_idx.toString(), cat_idx.toString(), '0'),
|
|
undefined,
|
|
'replace',
|
|
);
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
<div
|
|
key={cat_idx}
|
|
style={{
|
|
width: '100px',
|
|
height: '100px',
|
|
backgroundImage: `url(${content.cat_image})`,
|
|
backgroundPosition: 'center',
|
|
backgroundSize: 'cover',
|
|
borderRadius: '0.5rem',
|
|
margin: '.5rem',
|
|
}}
|
|
></div>
|
|
<span style={{ color: COLOR_TEXT }}>{content.cat_name}</span>
|
|
</div>
|
|
</IonButton>
|
|
))}
|
|
</div>
|
|
{/* <EndOfList /> */}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LessonContainer;
|