``update Refactor navigation URLs by replacing hardcoded LESSON_LINK with Paths.LESSON_LINK across App, RouteConfig, and multiple components; remove redundant LESSON_LINK from constants``

002_source/ionic_mobile/src/App.tsx

@@ -1,4 +1,4 @@
-import { DEBUG, DEBUG_LINK, LESSON_LINK, QUIZ_MAIN_MENU_LINK, RECORD_LINK, SETTING_LINK } from './constants';
+import { DEBUG, DEBUG_LINK, QUIZ_MAIN_MENU_LINK, RECORD_LINK, SETTING_LINK } from './constants';
 /* Core CSS required for Ionic components to work properly */
 
 import '@ionic/react/css/core.css';
@@ -48,6 +48,7 @@ import ContextMeta from './contexts';
 import { useAppStateContext } from './contexts/AppState';
 import { useMyIonQuizContext } from './contexts/MyIonQuiz';
 import { RouteConfig } from './RouteConfig';
+import { Paths } from './Paths';
 
 let active_color = 'tomato';
 let inactive_color = 'gray';
@@ -99,8 +100,8 @@ const TabButtons: React.FC = () => {
       <IonTabBar slot="bottom">
         <IonTabButton
           tab="lesson"
-          onClick={() => goSwitchPage(LESSON_LINK)}
+          onClick={() => goSwitchPage(Paths.LESSON_LINK)}
-          style={{ color: tab_active == LESSON_LINK ? active_color : inactive_color }}
+          style={{ color: tab_active == Paths.LESSON_LINK ? active_color : inactive_color }}
         >
           <IonIcon aria-hidden="true" icon={bookOutline} size="large" />
         </IonTabButton>

002_source/ionic_mobile/src/Paths.tsx

@@ -1,4 +1,6 @@
 const Paths = {
+  LESSON_LINK: '/lesson',
+  //
   AuthHome: `/auth/home`,
   AuthLogin: `/auth/login`,
   AuthSignUp: `/auth/signup`,

002_source/ionic_mobile/src/RouteConfig.tsx

@@ -3,7 +3,6 @@ import {
   CONNECTIVE_REVISION_LINK,
   DEBUG_LINK,
   FAVORITE_LINK,
-  LESSON_LINK,
   LESSON_WORD_PAGE_LINK,
   LISTENING_PRACTICE_LINK,
   MATCHING_FRENZY_LINK,
@@ -70,11 +69,11 @@ function RouteConfig() {
         <MyAchievementPage />
       </Route>
       {/*  */}
-      <Route exact path={`${LESSON_LINK}/a/:act_category`}>
+      <Route exact path={`${Paths.LESSON_LINK}/a/:act_category`}>
         <Lesson />
       </Route>
       {/*  */}
-      <Route exact path={LESSON_LINK}>
+      <Route exact path={Paths.LESSON_LINK}>
         <Lesson />
       </Route>
       {/*  */}
@@ -184,17 +183,29 @@ function RouteConfig() {
       </Route>
 
       {/* protected page */}
-      <AuthGuard>
+      <Route exact path="/">
-        <Route exact path={Paths.StudentInfo}>
+        <Redirect to={Paths.LESSON_LINK} />
+      </Route>
+
+      <Route exact path={DEBUG_LINK}>
+        <DebugPage />
+      </Route>
+
+      <Route exact path={Paths.StudentInfo}>
+        <AuthGuard>
           <StudentInfo />
-        </Route>
+        </AuthGuard>
-        <Route exact path={Paths.StudentMenu}>
+      </Route>
+      <Route exact path={Paths.StudentMenu}>
+        <AuthGuard>
           <StudentMenu />
-        </Route>
+        </AuthGuard>
-        <Route exact path={Paths.AuthorizedTest}>
+      </Route>
+      <Route exact path={Paths.AuthorizedTest}>
+        <AuthGuard>
           <AuthorizedTest />
-        </Route>
+        </AuthGuard>
-      </AuthGuard>
+      </Route>
 
       {/* TODO: remove below */}
       <Route exact path="/tab1">
@@ -212,12 +223,6 @@ function RouteConfig() {
       <Route path="/page/:name" exact={true}>
         <Page />
       </Route>
-      <Route exact path={DEBUG_LINK}>
-        <DebugPage />
-      </Route>
-      <Route exact path="/">
-        <Redirect to={LESSON_LINK} />
-      </Route>
     </>
   );
 }

002_source/ionic_mobile/src/components/SettingContainer/index.tsx

@@ -1,6 +1,6 @@
 import { IonButton, IonIcon, useIonRouter } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
-import { LESSON_LINK, VERSIONS } from '../../constants';
+import { VERSIONS } from '../../constants';
 import SettingSvg from './image.svg';
 import { Paths } from '../../Paths';
 import { pb } from '../../lib/pb';
@@ -52,7 +52,7 @@ const SettingContainer: React.FC<ContainerProps> = ({ name }) => {
       <IonButton onClick={handleUserProfileClick}>User Profile</IonButton>
       <IonButton
         onClick={() => {
-          router.push(LESSON_LINK, undefined, 'replace');
+          router.push(Paths.LESSON_LINK, undefined, 'replace');
         }}
         style={{ marginTop: '1rem' }}
       >

002_source/ionic_mobile/src/constants.tsx

@@ -25,7 +25,8 @@ const MATCHING_FRENZY_LINK = '/matching_frenzy';
 const FAVORITE_LINK = '/fav';
 const LESSON_WORD_PAGE_LINK = '/lesson_word_page';
 const CONNECTIVE_REVISION_LINK = '/connective_revision';
-const LESSON_LINK = '/lesson';
+// TODO: remove me
+// const LESSON_LINK_mdel = '/lesson';
 const QUIZ_MAIN_MENU_LINK = '/quizzes_main_menu';
 const RECORD_LINK = '/record';
 const SETTING_LINK = '/setting';
@@ -119,7 +120,6 @@ export {
   //
   HELLOWORLD,
   HELLOWORLD_MP3,
-  LESSON_LINK,
   LESSON_WORD_PAGE_LINK,
   LISTENING_PRACTICE_LINK,
   LISTENING_PRACTICE_TIME_SPENT,

002_source/ionic_mobile/src/contexts/AppState.tsx

@@ -1,14 +1,14 @@
 import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import RemoveFavoritePrompt from '../components/RemoveFavoritePrompt';
-import { LESSON_LINK } from '../constants';
+import { Paths } from '../Paths';
 
 const AppStateContext = createContext<AppStateContextProps | undefined>(undefined);
 
 export const AppStateProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const [my_context, setMyContext] = useState<string>('initial value');
-  const [tab_active, setTabActive] = useState<string>(LESSON_LINK);
+  const [tab_active, setTabActive] = useState<string>(Paths.LESSON_LINK);
   const [show_confirm_user_exit, useShowConfirmUserExit] = useState<boolean>(false);
-  const [url_push_after_user_confirm, setURLPushAfterUserConfirm] = useState<string>(LESSON_LINK);
+  const [url_push_after_user_confirm, setURLPushAfterUserConfirm] = useState<string>(Paths.LESSON_LINK);
 
   const [matching_frenzy_in_progress, setMatchingFrenzyInProgress] = useState<boolean>(false);
   const [connective_revision_in_progress, setConnectiveRevisionInProgress] = useState<boolean>(false);

002_source/ionic_mobile/src/hooks/useListAllLessonTypes.tsx

@@ -5,26 +5,10 @@ import { LessonsType } from '../types/LessonsTypes';
 const useListAllLessonTypes = () => {
   const { user, pb } = usePocketBase();
   return useQuery({
-    queryKey: [
+    queryKey: ['useListAllLessonTypes', 'feeds', 'all', user?.id || ''],
-      'useListAllLessonTypes',
-      'feeds',
-      'all',
-      user?.id || '',
-      //
-    ],
     staleTime: 60 * 1000,
-    queryFn: async ({
+    queryFn: async ({ queryKey }: { queryKey: ['useListAllLessonTypes', 'feeds', 'all', string | null] }) => {
-      queryKey,
+      // console.log('calling useListAllLessonTypes');
-    }: {
-      queryKey: [
-        'useListAllLessonTypes',
-        'feeds',
-        'all',
-        string | null,
-        //
-      ];
-    }) => {
-      console.log('calling useListAllLessonTypes');
       return await pb.collection('LessonsTypes').getFullList<LessonsType>({
         // TODO: sort by field -> pos
         sort: 'id',

002_source/ionic_mobile/src/pages/Lesson/ConnectivesPage/index.tsx

@@ -16,9 +16,7 @@ import Markdown from 'react-markdown';
 import { useParams } from 'react-router';
 import { useGlobalAudioPlayer } from 'react-use-audio-player';
 import remarkGfm from 'remark-gfm';
-import { LoadingScreen } from '../../../components/LoadingScreen';
 import RemoveFavoritePrompt from '../../../components/RemoveFavoritePrompt';
-import { LESSON_LINK } from '../../../constants';
 import { useMyIonFavorite } from '../../../contexts/MyIonFavorite';
 import ILesson from '../../../interfaces/ILesson';
 import { listLessonContent } from '../../../public_data/listLessonContent';

002_source/ionic_mobile/src/pages/Lesson/WordPage/index.tsx

@@ -15,7 +15,7 @@ import { useParams } from 'react-router';
 import { useGlobalAudioPlayer } from 'react-use-audio-player';
 import remarkGfm from 'remark-gfm';
 import { LoadingScreen } from '../../../components/LoadingScreen';
-import { LESSON_LINK, POCKETBASE_URL } from '../../../constants';
+import { POCKETBASE_URL } from '../../../constants';
 import { useMyIonFavorite } from '../../../contexts/MyIonFavorite';
 //
 import ILesson from '../../../interfaces/ILesson';
@@ -25,6 +25,7 @@ import { getFavLessonVocabularyLink, getLessonVocabularyLinkString } from '../..
 import { AudioControls } from './AudioControls';
 import useGetVocabularyRoute from '../../../hooks/useGetVocabularyRoute';
 import { Vocabulary } from '../../../types/Vocabularies';
+import { Paths } from '../../../Paths';
 
 const WordPage: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(true);
@@ -109,7 +110,7 @@ const WordPage: React.FC = () => {
               fill="clear"
               color={'dark'}
               onClick={() => {
-                router.push(`${LESSON_LINK}/a/Vocabulary`);
+                router.push(`${Paths.LESSON_LINK}/a/Vocabulary`);
               }}
             >
               <IonIcon size="large" icon={arrowBackCircleOutline} />

002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx

@@ -14,7 +14,7 @@ import styles from './style.module.scss';
 import { useParams } from 'react-router';
 import { Wave } from '../../../components/Wave';
 import { Paths } from '../../../Paths';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { getUserMetaById } from '../../../db/UserMetas/GetById';
 import { useTranslation } from 'react-i18next';
 import { DBUserMeta } from '../../../db/UserMetas/type';
@@ -151,4 +151,4 @@ function StudentInfo(): React.JSX.Element {
   );
 }
 
-export default StudentInfo;
+export default React.memo(StudentInfo);