From 886a314df78ca59eefc320a8027442ad8e22d666 Mon Sep 17 00:00:00 2001
From: louiscklaw <louiscklaw@users.noreply.github.com>
Date: Wed, 14 May 2025 16:18:04 +0800
Subject: [PATCH] update settings pages in the middle,

---
 002_source/ionic_mobile/TODO.md               |   1 +
 002_source/ionic_mobile/src/Paths.tsx         |   1 +
 002_source/ionic_mobile/src/RouteConfig.tsx   |   2 +-
 .../ionic_mobile/src/db/UserMetas/GetById.tsx |   5 +-
 .../src/pages/auth/AuthorizedTest/index.tsx   |  18 +++
 .../src/pages/auth/StudentInfo/index.tsx      | 106 ++++++++++++++++--
 6 files changed, 121 insertions(+), 12 deletions(-)

diff --git a/002_source/ionic_mobile/TODO.md b/002_source/ionic_mobile/TODO.md
index 703cd4c..267e430 100644
--- a/002_source/ionic_mobile/TODO.md
+++ b/002_source/ionic_mobile/TODO.md
@@ -1,3 +1,4 @@
 # TODO
 
 - [ ] add login mechanism
+- [ ] add task server handle callback tasks
diff --git a/002_source/ionic_mobile/src/Paths.tsx b/002_source/ionic_mobile/src/Paths.tsx
index e11d0fa..b7afa67 100644
--- a/002_source/ionic_mobile/src/Paths.tsx
+++ b/002_source/ionic_mobile/src/Paths.tsx
@@ -8,6 +8,7 @@ const Paths = {
   StudentInfo: `/auth/student_info/:id`,
   GetStudentInfoLink: (id: string) => `/auth/student_info/${id}`,
   //
+  Setting: `/setting`,
 };
 
 export { Paths };
diff --git a/002_source/ionic_mobile/src/RouteConfig.tsx b/002_source/ionic_mobile/src/RouteConfig.tsx
index c119655..2ac334c 100644
--- a/002_source/ionic_mobile/src/RouteConfig.tsx
+++ b/002_source/ionic_mobile/src/RouteConfig.tsx
@@ -202,7 +202,7 @@ function RouteConfig() {
       <Route path="/tab3">
         <Tab3 />
       </Route>
-      <Route path="/setting">
+      <Route path={Paths.Setting}>
         <Setting />
       </Route>
       <Route path="/page/:name" exact={true}>
diff --git a/002_source/ionic_mobile/src/db/UserMetas/GetById.tsx b/002_source/ionic_mobile/src/db/UserMetas/GetById.tsx
index bbcd5af..e7ea16e 100644
--- a/002_source/ionic_mobile/src/db/UserMetas/GetById.tsx
+++ b/002_source/ionic_mobile/src/db/UserMetas/GetById.tsx
@@ -4,5 +4,8 @@ import { COL_USER_METAS } from '../../constants';
 import { pb } from '../../lib/pb';
 
 export async function getUserMetaById(id: string): Promise<RecordModel> {
-  return pb.collection(COL_USER_METAS).getOne(id);
+  return pb.collection(COL_USER_METAS).getOne(id, {
+    expand: 'billingAddress',
+    requestKey: null,
+  });
 }
diff --git a/002_source/ionic_mobile/src/pages/auth/AuthorizedTest/index.tsx b/002_source/ionic_mobile/src/pages/auth/AuthorizedTest/index.tsx
index f837eac..09ed025 100644
--- a/002_source/ionic_mobile/src/pages/auth/AuthorizedTest/index.tsx
+++ b/002_source/ionic_mobile/src/pages/auth/AuthorizedTest/index.tsx
@@ -22,12 +22,25 @@ import _ from 'lodash';
 import { Router, useParams } from 'react-router';
 import { Wave } from '../../../components/Wave';
 import { Paths } from '../../../Paths';
+import { useTransition } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useUser } from '../../../hooks/use-user';
 
 function AuthorizedTest(): React.JSX.Element {
   const router = useIonRouter();
+  const { t } = useTranslation();
+  const { user } = useUser();
+
   function handleBackToLogin() {
     router.push(Paths.AuthLogin);
   }
+
+  function handleViewStudentInfoOnClick() {
+    if (user?.id) {
+      router.push(Paths.GetStudentInfoLink(user.id));
+    }
+  }
+
   return (
     <IonPage className={styles.loginPage}>
       <IonHeader>{/*  */}</IonHeader>
@@ -36,6 +49,11 @@ function AuthorizedTest(): React.JSX.Element {
         <IonGrid className="ion-padding">
           <IonCol>
             <IonRow>Authorized page test</IonRow>
+            {/*  */}
+            <IonRow>
+              <IonButton onClick={handleViewStudentInfoOnClick}>{t('view-student-info')}</IonButton>
+            </IonRow>
+            {/*  */}
             <IonRow>
               <IonButton onClick={handleBackToLogin}>Back to login</IonButton>
             </IonRow>
diff --git a/002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx b/002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx
index c44edc8..26b4a91 100644
--- a/002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx
+++ b/002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx
@@ -1,4 +1,5 @@
 import {
+  IonAvatar,
   IonBackButton,
   IonButton,
   IonButtons,
@@ -9,6 +10,7 @@ import {
   IonGrid,
   IonHeader,
   IonIcon,
+  IonImg,
   IonInput,
   IonLabel,
   IonPage,
@@ -22,28 +24,112 @@ import _ from 'lodash';
 import { Router, useParams } from 'react-router';
 import { Wave } from '../../../components/Wave';
 import { Paths } from '../../../Paths';
+import { useEffect, useState } from 'react';
+import { getUserMetaById } from '../../../db/UserMetas/GetById';
+import { useTranslation } from 'react-i18next';
+import { UserMeta } from '../../../db/UserMetas/type';
 
 function StudentInfo(): React.JSX.Element {
   const router = useIonRouter();
-  const { id } = useParams();
+  const { id } = useParams<{ id: string }>();
+  const { t } = useTranslation();
+
+  const [studentMeta, setStudentMeta] = useState<UserMeta>();
+
+  const [showLoading, setShowLoading] = useState<boolean>(true);
+  const [showError, setShowError] = useState<{ show: boolean; message: string }>({ show: false, message: '' });
+
   function handleBackToLogin() {
     router.push(Paths.AuthLogin);
   }
+
+  function handleBackOnClick() {
+    router.push(Paths.Setting);
+  }
+
+  async function handleFetchUserMeta() {
+    try {
+      const result = await getUserMetaById(id);
+      const tempStudentMeta = result as unknown as UserMeta;
+
+      setStudentMeta(tempStudentMeta);
+      setShowLoading(false);
+    } catch (error) {
+      setShowError({ show: true, message: JSON.stringify({ error }, null, 2) });
+      setShowLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void handleFetchUserMeta();
+  }, []);
+
+  if (showLoading) return <>loading</>;
+  if (showError.show) return <>{showError.message}</>;
+
   return (
     <IonPage className={styles.loginPage}>
       <IonHeader>{/*  */}</IonHeader>
       {/*  */}
       <IonContent fullscreen>
         <IonGrid className="ion-padding">
-          <IonCol>
-            <IonRow>
-              <IonText>Student Info test</IonText>
-              <IonText>{JSON.stringify({ id })}</IonText>
-            </IonRow>
-            <IonRow>
-              <IonButton onClick={handleBackToLogin}>Back to login</IonButton>
-            </IonRow>
-          </IonCol>
+          <IonRow className="ion-justify-content-center">
+            <IonCol size={'3'}>
+              <div
+                style={{
+                  backgroundImage: `url("https://docs-demo.ionic.io/assets/madison.jpg")`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                  //
+                  width: '25vw',
+                  height: '25vw',
+                  //
+                  borderRadius: 'calc( 25vw / 2 )',
+                }}
+              ></div>
+            </IonCol>
+          </IonRow>
+          {/*  */}
+          <IonRow
+            className="ion-justify-content-between"
+            style={{
+              marginTop: '1rem',
+              marginBottom: '1rem',
+              //
+            }}
+          >
+            <IonText>{t('student-name')}</IonText>
+            <IonText>{studentMeta.name}</IonText>
+          </IonRow>
+          {/*  */}
+          <IonRow
+            className="ion-justify-content-between"
+            style={{
+              marginTop: '1rem',
+              marginBottom: '1rem',
+              //
+            }}
+          >
+            <IonText>{t('student-email')}</IonText>
+            <IonText>{studentMeta.email}</IonText>
+          </IonRow>
+          {/*  */}
+          <IonRow
+            className="ion-justify-content-between"
+            style={{
+              marginTop: '1rem',
+              marginBottom: '1rem',
+              //
+            }}
+          >
+            <IonText>{t('student-phone')}</IonText>
+            <IonText>{studentMeta.phone}</IonText>
+          </IonRow>
+          {/*  */}
+          <IonRow className="ion-justify-content-center">
+            <IonButton onClick={handleBackOnClick}>Back</IonButton>
+          </IonRow>
         </IonGrid>
       </IonContent>
       {/*  */}