Create profile screen desktop layout

src/app/AuthenticatedApp.js

@@ -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>

src/screens/Profile/View.js

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

src/screens/Profile/index.js

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

src/screens/Profile/styles.js

@@ -0,0 +1,11 @@
+// ========== Desktop  ==========
+const desktop = {};
+
+// ========== Mobile ==========
+const mobile = {};
+
+// ========== Unset ==========
+const unset = {};
+
+const styles = { desktop, mobile, unset };
+export default styles;

src/screens/Register/View.js

@@ -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}>
+                {COURSES.map(course => (
-                  Bacharelado em Sistemas de Informação
+                  <MenuItem key={course.value} value={course.value}>
-                </MenuItem>
+                    {course.name}
-                <MenuItem value={1}>
+                  </MenuItem>
-                  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>
                 ))}

src/screens/Register/index.js

@@ -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}
     />
   );
 }

src/services/mocks.js

@@ -535,7 +535,7 @@ const user = {
   avatar: 'https://i.pravatar.cc/300?img=61',
   course: 0,
   termsAgreed: true,
-  year: 0,
+  year: 2018,
 };
 
 const authFailure = {

src/utils/constants.js

@@ -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 };