Profil page (#155)

* Add profile detail page

* Adjust to new BE

* Add pages for Matik and Malynar

src/components/PageLayout/Authentication/Authentication.tsx

@@ -37,6 +37,7 @@ export const Authentication: FC = () => {
   } else {
     return (
       <div className={styles.authenticationDisplayButtons}>
+        <Link href={`/${seminar}/profil`}>Profil</Link>
         <span onClick={() => logout()}>Odhlásiť</span>
       </div>
     )

src/components/Profile/ProfileDetail.module.scss

@@ -0,0 +1,6 @@
+.label {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-style: italic;
+  padding-right: .5rem;
+}

src/components/Profile/ProfileDetail.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  label: string
+}
+
+export type ClassNames = keyof Styles
+
+declare const styles: Styles
+
+export default styles

src/components/Profile/ProfileDetail.tsx

@@ -0,0 +1,46 @@
+import {Stack, Typography} from '@mui/material'
+import {useQuery} from '@tanstack/react-query'
+import axios from 'axios'
+import {FC} from 'react'
+
+import {Profile} from '@/types/api/personal'
+import {AuthContainer} from '@/utils/AuthContainer'
+
+import styles from './ProfileDetail.module.scss'
+
+type ProfileLineInput = {
+  label: string
+  value?: string
+}
+
+const ProfileLine: FC<ProfileLineInput> = ({label, value}) => {
+  return (
+    // font-size: 30px podla designu
+    <Typography sx={{fontSize: '1.875rem'}}>
+      <span className={styles.label}>{label}</span>
+      {value}
+    </Typography>
+  )
+}
+
+export const ProfileDetail: FC = () => {
+  const {isAuthed} = AuthContainer.useContainer()
+
+  const {data} = useQuery({
+    queryKey: ['personal', 'profiles', 'myprofile'],
+    queryFn: () => axios.get<Profile>(`/api/personal/profiles/myprofile`),
+    enabled: isAuthed,
+  })
+  const profile = data?.data
+
+  return (
+    <Stack spacing={2}>
+      <ProfileLine label={'meno'} value={profile?.first_name + ' ' + profile?.last_name} />
+      <ProfileLine label={'e-mail'} value={profile?.email} />
+      <ProfileLine label={'škola'} value={profile?.school.verbose_name} />
+      <ProfileLine label={'ročník'} value={profile?.grade_name} />
+      <ProfileLine label={'tel. č.'} value={profile?.phone || '-'} />
+      <ProfileLine label={'tel. č. na rodiča'} value={profile?.parent_phone || '-'} />
+    </Stack>
+  )
+}

src/pages/malynar/profil/index.tsx

@@ -0,0 +1,9 @@
+import {NextPage} from 'next'
+
+import Page from '../../strom/profil/index'
+
+const Vysledky: NextPage = () => {
+  return <Page />
+}
+
+export default Vysledky

src/pages/matik/profil/index.tsx

@@ -0,0 +1,9 @@
+import {NextPage} from 'next'
+
+import Page from '../../strom/profil/index'
+
+const Vysledky: NextPage = () => {
+  return <Page />
+}
+
+export default Vysledky

src/pages/strom/profil/index.tsx

@@ -0,0 +1,12 @@
+import {NextPage} from 'next'
+
+import {PageLayout} from '@/components/PageLayout/PageLayout'
+import {ProfileDetail} from '@/components/Profile/ProfileDetail'
+
+const Profil: NextPage = () => (
+  <PageLayout contentWidth={2} title="Profil">
+    <ProfileDetail />
+  </PageLayout>
+)
+
+export default Profil

src/types/api/personal.ts

@@ -63,12 +63,14 @@ export interface Profile {
   id: number
   first_name: string
   last_name: string
+  email: string
   nickname: string | null
   school: SchoolProfile
   phone: string | null
   parent_phone: string | null
   gdpr: boolean
   grade: number
+  grade_name: string
   is_student: boolean
   has_school: boolean
   school_id: number