in the middle, working for login and logout test,

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

@@ -1,41 +1,35 @@
 import {
-  IonAvatar,
-  IonBackButton,
   IonButton,
-  IonButtons,
-  IonCardTitle,
   IonCol,
   IonContent,
   IonFooter,
   IonGrid,
   IonHeader,
-  IonIcon,
-  IonImg,
-  IonInput,
-  IonLabel,
   IonPage,
   IonRow,
   IonText,
-  IonToolbar,
   useIonRouter,
 } from '@ionic/react';
 import styles from './style.module.scss';
-import _ from 'lodash';
-import { Router, useParams } from 'react-router';
+import { 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';
+import { DBUserMeta } from '../../../db/UserMetas/type';
 import { LoadingScreen } from '../../../components/LoadingScreen';
+import { getStudentAvatar } from '../../../lib/getStudentAvatar';
+import { authClient } from '../../../lib/auth/custom/client';
+import { useUser } from '../../../hooks/use-user';
 
 function StudentInfo(): React.JSX.Element {
   const router = useIonRouter();
   const { id } = useParams<{ id: string }>();
   const { t } = useTranslation();
 
-  const [studentMeta, setStudentMeta] = useState<UserMeta>();
+  const [studentMeta, setStudentMeta] = useState<DBUserMeta>();
+  const test = useUser();
 
   const [showLoading, setShowLoading] = useState<boolean>(true);
   const [showError, setShowError] = useState<{ show: boolean; message: string }>({ show: false, message: '' });
@@ -51,7 +45,7 @@ function StudentInfo(): React.JSX.Element {
   async function handleFetchUserMeta() {
     try {
       const result = await getUserMetaById(id);
-      const tempStudentMeta = result as unknown as UserMeta;
+      const tempStudentMeta = result as unknown as DBUserMeta;
 
       setStudentMeta(tempStudentMeta);
       setShowLoading(false);
@@ -61,11 +55,21 @@ function StudentInfo(): React.JSX.Element {
     }
   }
 
+  async function handleLogoutOnClick() {
+    try {
+      await authClient.signOut();
+      router.push(Paths.AuthLogin);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   useEffect(() => {
     void handleFetchUserMeta();
   }, []);
 
   if (showLoading) return <LoadingScreen />;
+  if (!studentMeta) return <LoadingScreen />;
   if (showError.show) return <>{showError.message}</>;
 
   return (
@@ -78,7 +82,7 @@ function StudentInfo(): React.JSX.Element {
             <IonCol size={'3'}>
               <div
                 style={{
-                  backgroundImage: `url("https://docs-demo.ionic.io/assets/madison.jpg")`,
+                  backgroundImage: getStudentAvatar(studentMeta),
                   backgroundSize: 'cover',
                   backgroundPosition: 'center',
                   backgroundRepeat: 'no-repeat',
@@ -129,7 +133,11 @@ function StudentInfo(): React.JSX.Element {
           </IonRow>
           {/*  */}
           <IonRow className="ion-justify-content-center">
-            <IonButton onClick={handleBackOnClick}>Back</IonButton>
+            <IonButton onClick={handleBackOnClick}>{t('back')}</IonButton>
+          </IonRow>
+
+          <IonRow className="ion-justify-content-center">
+            <IonButton onClick={handleLogoutOnClick}>{t('logout')}</IonButton>
           </IonRow>
         </IonGrid>
       </IonContent>