update settings pages in the middle,

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>
       {/*  */}