Create profile screen desktop layout
This commit is contained in:
parent
0c35fb24e9
commit
a51ee45af3
8 changed files with 248 additions and 16 deletions
|
|
@ -13,6 +13,7 @@ import Classroom from '../screens/Classroom';
|
|||
import Assignment from '../screens/Assignment';
|
||||
|
||||
import { avatarMenuOptions, menuOptions } from './data';
|
||||
import Profile from '../screens/Profile';
|
||||
|
||||
function AuthenticatedApp() {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -46,6 +47,7 @@ function AuthenticatedApp() {
|
|||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/info" element={<Information />} />
|
||||
<Route path="/calendar" element={<Calendar />} />
|
||||
<Route path="/profile" element={<Profile />} />
|
||||
<Route path="/class">
|
||||
<Route path=":id" element={<Classroom />} />
|
||||
</Route>
|
||||
|
|
|
|||
194
src/screens/Profile/View.js
Normal file
194
src/screens/Profile/View.js
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
} from '@mui/material';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import InputMask from '../../components/InputMask';
|
||||
|
||||
import { COURSES } from '../../utils/constants';
|
||||
import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
|
||||
|
||||
function View({ data, onChangeInput }) {
|
||||
const fullName = `${data.firstName} ${data.lastName}`;
|
||||
const currentYear = dayjs().year();
|
||||
|
||||
return (
|
||||
<Container disableGutters sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
// TODO: Check issue with screen heights too small
|
||||
height: '400px',
|
||||
padding: '30px',
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
alt={fullName}
|
||||
src={data.avatar}
|
||||
sx={{ width: 250, height: 250 }}
|
||||
/>
|
||||
<Stack sx={{ marginLeft: '30px' }}>
|
||||
<Typography sx={{ fontWeight: 'bold' }} variant="h3">
|
||||
{fullName}
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: '20px' }} variant="body1">
|
||||
Estudante de {COURSES.filter(c => c.value === data.course)[0].name}
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: '20px' }} variant="body1">
|
||||
Turma de {data.year}
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: '20px' }} variant="body1">
|
||||
<strong>RA: </strong> {data.ra}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: '100%', height: '800px' }}>
|
||||
<Stack
|
||||
gap={10}
|
||||
paddingTop="30px"
|
||||
flexWrap="wrap"
|
||||
flexDirection="row"
|
||||
justifyContent="space-around"
|
||||
component="form"
|
||||
>
|
||||
<TextField
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
label="Primeiro nome"
|
||||
variant="standard"
|
||||
type="text"
|
||||
sx={{ width: '45%' }}
|
||||
value={data.firstName}
|
||||
onChange={onChangeInput}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
label="Sobrenome"
|
||||
variant="standard"
|
||||
type="text"
|
||||
sx={{ width: '45%' }}
|
||||
value={data.lastName}
|
||||
onChange={onChangeInput}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="phone"
|
||||
name="phone"
|
||||
label="Telefone"
|
||||
variant="standard"
|
||||
type="phone"
|
||||
value={data.phone}
|
||||
onChange={onChangeInput}
|
||||
placeholder="(##) #####-####"
|
||||
sx={{ width: '45%' }}
|
||||
InputProps={{
|
||||
inputComponent: InputMask,
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="email"
|
||||
name="email"
|
||||
label="E-mail"
|
||||
variant="standard"
|
||||
type="email"
|
||||
value={data.email}
|
||||
onChange={onChangeInput}
|
||||
sx={{ width: '45%' }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="password"
|
||||
name="password"
|
||||
label="Senha"
|
||||
variant="standard"
|
||||
type="password"
|
||||
value={data.password}
|
||||
onChange={onChangeInput}
|
||||
sx={{ width: '45%' }}
|
||||
/>
|
||||
|
||||
<FormControl sx={{ textAlign: 'start', width: '45%' }} fullWidth>
|
||||
<InputLabel variant="standard" id="course">
|
||||
Curso
|
||||
</InputLabel>
|
||||
<Select
|
||||
variant="standard"
|
||||
labelId="course"
|
||||
id="course"
|
||||
name="course"
|
||||
value={data.course}
|
||||
label="Curso"
|
||||
onChange={onChangeInput}
|
||||
>
|
||||
{COURSES.map(course => (
|
||||
<MenuItem key={course.value} value={course.value}>
|
||||
{course.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl sx={{ textAlign: 'start', width: '45%' }} fullWidth>
|
||||
<InputLabel variant="standard" id="course">
|
||||
Ano da turma
|
||||
</InputLabel>
|
||||
<Select
|
||||
variant="standard"
|
||||
labelId="year"
|
||||
id="year"
|
||||
name="year"
|
||||
value={data.year}
|
||||
label="Ano da turma"
|
||||
onChange={onChangeInput}
|
||||
>
|
||||
{createArrayFrom1ToN(8).map(i => (
|
||||
<MenuItem key={i - 1} value={currentYear - (i - 1)}>
|
||||
{currentYear - (i - 1)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
id="ra"
|
||||
name="ra"
|
||||
label="RA (Registro Acadêmico)"
|
||||
variant="standard"
|
||||
type="text"
|
||||
value={data.ra}
|
||||
placeholder="00#####"
|
||||
disabled
|
||||
sx={{ width: '45%', cursor: 'no-drop' }}
|
||||
InputProps={{
|
||||
inputComponent: InputMask,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Button
|
||||
sx={{ width: '30%' }}
|
||||
onClick={() => console.log('clicked')}
|
||||
variant="contained"
|
||||
>
|
||||
Salvar alterações
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default View;
|
||||
19
src/screens/Profile/index.js
Normal file
19
src/screens/Profile/index.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { useState } from 'react';
|
||||
import { useUser } from '../../context/user';
|
||||
import View from './View';
|
||||
|
||||
function Profile() {
|
||||
const { state } = useUser();
|
||||
const [data, setData] = useState(state && state.user);
|
||||
|
||||
const onChangeInput = e => {
|
||||
const name = e.target.name;
|
||||
const value = e.target.value;
|
||||
|
||||
setData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
return <View data={data} onChangeInput={onChangeInput} />;
|
||||
}
|
||||
|
||||
export default Profile;
|
||||
11
src/screens/Profile/styles.js
Normal file
11
src/screens/Profile/styles.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// ========== Desktop ==========
|
||||
const desktop = {};
|
||||
|
||||
// ========== Mobile ==========
|
||||
const mobile = {};
|
||||
|
||||
// ========== Unset ==========
|
||||
const unset = {};
|
||||
|
||||
const styles = { desktop, mobile, unset };
|
||||
export default styles;
|
||||
|
|
@ -13,7 +13,6 @@ import {
|
|||
TextField,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import SnackbarIndicator from '../../components/SnackbarIndicator';
|
||||
import LoadingIndicator from '../../components/LoadingIndicator';
|
||||
|
|
@ -23,6 +22,7 @@ import logoImage from '../../assets/if-salas-logo.svg';
|
|||
|
||||
import styles from './styles';
|
||||
import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
|
||||
import { COURSES } from '../../utils/constants';
|
||||
|
||||
function View({
|
||||
isPending,
|
||||
|
|
@ -33,10 +33,10 @@ function View({
|
|||
onChangeInput,
|
||||
onChangeCheckbox,
|
||||
onTryRegister,
|
||||
currentYear,
|
||||
}) {
|
||||
const { container, paper, boxLogo, boxForm, logoContainer } =
|
||||
styles[layoutType];
|
||||
const currentYear = dayjs().year();
|
||||
|
||||
return (
|
||||
<Container sx={container} disableGutters>
|
||||
|
|
@ -90,17 +90,11 @@ function View({
|
|||
label="Curso"
|
||||
onChange={onChangeInput}
|
||||
>
|
||||
<MenuItem value={0}>
|
||||
Bacharelado em Sistemas de Informação
|
||||
{COURSES.map(course => (
|
||||
<MenuItem key={course.value} value={course.value}>
|
||||
{course.name}
|
||||
</MenuItem>
|
||||
<MenuItem value={1}>
|
||||
Tecnologia em Processos Gerenciais
|
||||
</MenuItem>
|
||||
<MenuItem value={2}>Tecnologia em Logística</MenuItem>
|
||||
<MenuItem value={3}>
|
||||
Engenharia de Controle e Automação
|
||||
</MenuItem>
|
||||
<MenuItem value={4}>Bacharelado em Administração</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl sx={{ textAlign: 'start' }} fullWidth>
|
||||
|
|
@ -117,7 +111,7 @@ function View({
|
|||
onChange={onChangeInput}
|
||||
>
|
||||
{createArrayFrom1ToN(8).map(i => (
|
||||
<MenuItem key={i - 1} value={i - 1}>
|
||||
<MenuItem key={i - 1} value={currentYear - (i - 1)}>
|
||||
{currentYear - (i - 1)}
|
||||
</MenuItem>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import dayjs from 'dayjs';
|
||||
import { useState } from 'react';
|
||||
import { useAuthState } from '../../context/auth';
|
||||
import { useDocumentTitle } from '../../hooks/useDocumentTitle';
|
||||
|
|
@ -7,6 +8,7 @@ import View from './View';
|
|||
|
||||
function Register() {
|
||||
useDocumentTitle('Criar conta');
|
||||
const currentYear = dayjs().year();
|
||||
const { register, isPending, isError, error } = useAuthState();
|
||||
const layoutType = useLayoutType();
|
||||
const [data, setData] = useState({
|
||||
|
|
@ -14,7 +16,7 @@ function Register() {
|
|||
lastName: '',
|
||||
ra: '',
|
||||
course: 0,
|
||||
year: 0,
|
||||
year: currentYear,
|
||||
phone: '',
|
||||
email: '',
|
||||
password: '',
|
||||
|
|
@ -49,6 +51,7 @@ function Register() {
|
|||
onChangeInput={onChangeInput}
|
||||
onChangeCheckbox={onChangeCheckbox}
|
||||
onTryRegister={onTryRegister}
|
||||
currentYear={currentYear}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -535,7 +535,7 @@ const user = {
|
|||
avatar: 'https://i.pravatar.cc/300?img=61',
|
||||
course: 0,
|
||||
termsAgreed: true,
|
||||
year: 0,
|
||||
year: 2018,
|
||||
};
|
||||
|
||||
const authFailure = {
|
||||
|
|
|
|||
9
src/utils/constants.js
Normal file
9
src/utils/constants.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
const COURSES = [
|
||||
{ name: 'Bacharelado em Sistemas de Informação', value: 0 },
|
||||
{ name: 'Tecnologia em Processos Gerenciais', value: 1 },
|
||||
{ name: 'Tecnologia em Logística', value: 2 },
|
||||
{ name: 'Engenharia de Controle e Automação', value: 3 },
|
||||
{ name: 'Bacharelado em Administração', value: 4 },
|
||||
];
|
||||
|
||||
export { COURSES };
|
||||
Loading…
Reference in a new issue