Skip to content

Commit

Permalink
Add profile detail page
Browse files Browse the repository at this point in the history
  • Loading branch information
Matushl committed Nov 10, 2023
1 parent d4b53be commit 6fa2040
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
6 changes: 6 additions & 0 deletions src/components/Profile/ProfileDetail.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.label {
font-weight: bold;
text-transform: uppercase;
font-style: italic;
padding-right: .5rem;
}
9 changes: 9 additions & 0 deletions src/components/Profile/ProfileDetail.module.scss.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export type Styles = {
label: string
}

export type ClassNames = keyof Styles

declare const styles: Styles

export default styles
48 changes: 48 additions & 0 deletions src/components/Profile/ProfileDetail.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
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} />
{/* TODO: pockat na BE kym to posle v datach */}
<ProfileLine label={'e-mail'} value={'TODO'} />
<ProfileLine label={'škola'} value={profile?.school.verbose_name} />
{/* TODO: pockat na BE kym to posle v datach */}
<ProfileLine label={'ročník'} value={`${profile?.grade}`} />
<ProfileLine label={'tel. č.'} value={profile?.phone || '-'} />
<ProfileLine label={'tel. č. na rodiča'} value={profile?.parent_phone || '-'} />
</Stack>
)
}
12 changes: 12 additions & 0 deletions src/pages/strom/profil/index.tsx
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit 6fa2040

Please sign in to comment.