lettersoup-online/002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx

import {
  IonButton,
  IonCol,
  IonContent,
  IonFooter,
  IonGrid,
  IonHeader,
  IonPage,
  IonRow,
  IonText,
  useIonRouter,
} from '@ionic/react';
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 { getUserMetaById } from '../../../db/UserMetas/GetById';
import { useTranslation } from 'react-i18next';
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<DBUserMeta>();
  const test = useUser();

  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 DBUserMeta;

      setStudentMeta(tempStudentMeta);
      setShowLoading(false);
    } catch (error) {
      setShowError({ show: true, message: JSON.stringify({ error }, null, 2) });
      setShowLoading(false);
    }
  }

  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 (
    <IonPage className={styles.loginPage}>
      <IonHeader>{/*  */}</IonHeader>
      {/*  */}
      <IonContent fullscreen>
        <IonGrid className="ion-padding">
          <IonRow className="ion-justify-content-center">
            <IonCol size={'3'}>
              <div
                style={{
                  backgroundImage: getStudentAvatar(studentMeta),
                  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}>{t('back')}</IonButton>
          </IonRow>

          <IonRow className="ion-justify-content-center">
            <IonButton onClick={handleLogoutOnClick}>{t('logout')}</IonButton>
          </IonRow>
        </IonGrid>
      </IonContent>
      {/*  */}
      <IonFooter>
        <IonGrid className="ion-no-margin ion-no-padding">
          <Wave />
        </IonGrid>
      </IonFooter>
    </IonPage>
  );
}

export default StudentInfo;