init commit,

2025-04-26 10:08:01 +08:00
parent 7d70b5826b
commit d0ea7e5452
473 changed files with 29989 additions and 0 deletions
--- a/002_source/ionic_mobile/src/pages/Lesson/LessonContainer.tsx
+++ b/002_source/ionic_mobile/src/pages/Lesson/LessonContainer.tsx
@@ -0,0 +1,82 @@
+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;