PR Comments

* Pr review comments

package.json

@@ -12,7 +12,7 @@
     "serve:watch": "nodemon -r dotenv/config --exec babel-node server/bin/www.js --watch \"./server\" dotenv_config_path=./.env.development",
     "node": "DEBUG=* node ./dist/bin/www.js",
     "test": "concurrently \"npm run test:ui\" \"npm run test:server\"",
-    "test:ui": "jest --env=jsdom --config=jestUIConfig.js views/",
+    "test:ui": "DEBUG_PRINT_LIMIT=300000 jest --env=jsdom --config=jestUIConfig.js views/",
     "test:server": "jest server/",
     "bootstrap": "cdk bootstrap",
     "deploy": "cdk deploy"

server/controllers/usersController/index.js

@@ -4,7 +4,6 @@ const UsersController = {
   edit: async (req, res) => {
     try {
       const { appDb } = req.app.locals
-      console.dir({ request: req.body }, { depth: null })
       const { uid } = req.params
       const {
         company,

views/api/http.js

@@ -49,18 +49,6 @@ const patch = async (path, params) => {
   return handleApiResponse(response)
 }
 
-const multipartPatch = async (path, formData) => {
-  const response = await fetch(path, {
-    headers: {
-      'Content-Type': 'multipart/form-data',
-    },
-    method: 'PATCH',
-    body: formData,
-  })
-
-  return handleApiResponse(response)
-}
-
 const post = async (path, params) => {
   const response = await fetch(path, {
     ...BASE_REQUEST_OPTIONS,
@@ -74,7 +62,6 @@ const post = async (path, params) => {
 const http = {
   delete: del,
   get,
-  multipartPatch,
   patch,
   post,
 }

views/forms/TextInputTopLabel/TextInputTopLabel.test.jsx

@@ -6,6 +6,9 @@ jest.mock('react-hook-form', () => ({
   ...jest.requireActual('react-hook-form'),
   useController: jest.fn().mockReturnValue({
     field: { value: 'testValue', onChange: jest.fn() },
+    formState: {
+      errors: { ['text-field']: { message: 'This field is required' } },
+    },
   }),
 }))
 
@@ -21,15 +24,7 @@ describe('TextInputTopLabel', () => {
   })
 
   test('renders TextInputTopLabel component with error message', () => {
-    const mockErrors = { message: 'This field is required' }
-
-    render(
-      <TextInputTopLabel
-        label="text-field-label"
-        name="text-field"
-        errors={mockErrors}
-      />
-    )
+    render(<TextInputTopLabel label="text-field-label" name="text-field" />)
 
     const inputElement = screen.getByRole('textbox', {
       name: 'text-field-label',

views/forms/TextInputTopLabel/index.jsx

@@ -2,16 +2,28 @@ import React from 'react'
 import { OutlinedInput, InputLabel } from '@mui/material/'
 import { useController } from 'react-hook-form'
 
+import { lineHeight, fontSize } from '../../../constants'
+
 const TextInputTopLabel = (props) => {
-  const { errors } = props
-  const { field } = useController(props)
+  const {
+    field,
+    formState: { errors },
+  } = useController(props)
 
   return (
     <>
       <InputLabel
+        {...props?.inputLabel}
         aria-label={props.label}
         shrink
-        {...props.inputLabel}
+        sx={{
+          color: 'text.primary',
+          fontWeight: 500,
+          lineHeight: lineHeight[21],
+          fontSize: fontSize[18],
+          ...props.inputLabel?.sx,
+        }}
+        required={props.required}
         htmlFor={props.name}
       >
         {props.label}
@@ -21,21 +33,21 @@ const TextInputTopLabel = (props) => {
         aria-invalid={!!errors ? 'true' : 'false'}
         id={props.name}
         fullWidth={props.fullWidth}
-        error={!!errors}
+        error={!!errors[props.name]}
         inputProps={{ ...props.inputProps }}
         margin={props.margin || 'none'}
         required={props.required}
         type={props.type}
         sx={props.sx}
         size={props.size}
       />
-      {!!errors?.message && (
+      {!!errors[props.name] && (
         <InputLabel
           aria-label={`${props.name}-error`}
           error
-          {...props.errorStyleProps}
+          sx={{ mb: '20px', mt: '-20px' }}
         >
-          {errors.message}
+          {errors[props.name].message}
         </InputLabel>
       )}
     </>

views/forms/UserProfileForm/UserProfileForm.test.jsx

@@ -11,8 +11,7 @@ describe('User Profile Form', () => {
       display_name: '',
       mail: '',
       title: '',
-      icon: '',
-      iconFileName: '',
+      iconFile: pngFile,
     },
     onCancel: () => {},
     onSubmit: () => {},
@@ -35,7 +34,6 @@ describe('User Profile Form', () => {
     const props = {
       ...defaultProps,
       onSubmit,
-      errors: { mail: { message: 'mail must be a valid email' } },
     }
 
     renderForm(props)
@@ -51,26 +49,25 @@ describe('User Profile Form', () => {
           display_name: 'My Full Name',
           mail: 'myEmail@example.test',
           title: 'My Title',
-          icon: '',
-          iconFileName: '',
           iconFile: pngFile,
         },
         expect.anything()
       )
     )
   })
 
-  test('does not submit the form with invalid data', async () => {
+  test('displays errors and does not submit the form with invalid data', async () => {
     const user = userEvent.setup()
-    const onSubmit = jest.fn((e) => e.preventDefault())
+    const onSubmit = jest.fn()
     const props = { ...defaultProps, onSubmit }
 
     renderForm(props)
     await user.type(elements.emailField(), 'not-an-email')
     await user.click(elements.submitBtn())
 
-    await waitFor(() => {
-      expect(onSubmit).not.toHaveBeenCalled()
-    })
+    await waitFor(() =>
+      expect(screen.getByText('mail must be a valid email')).toBeInTheDocument()
+    )
+    expect(onSubmit).not.toHaveBeenCalled()
   })
 })

views/forms/UserProfileForm/UserProfileFormFields.jsx

@@ -1,80 +1,46 @@
 import React from 'react'
 import TextInputTopLabel from '../TextInputTopLabel'
 
-import {
-  borderRadius,
-  lineHeight,
-  fontSize,
-  EMAIL_REGEX,
-} from '../../../constants'
+import { borderRadius } from '../../../constants'
 
 import './UserProfileFormFields.css'
 
-const UserProfileFormFields = ({ errors, control }) => {
+const UserProfileFormFields = ({ control }) => {
   return (
     <div className="UserProfileFormInputs_box">
       <TextInputTopLabel
         control={control}
-        inputLabel={{
-          sx: {
-            color: 'text.primary',
-            fontWeight: 500,
-            lineHeight: lineHeight[21],
-            fontSize: fontSize[18],
-          },
-        }}
         sx={{
           mb: '20px',
         }}
-        errors={errors.display_name}
         label="Full name"
         name="display_name"
         inputProps={{ sx: { borderRadius: borderRadius[8] } }}
         size="small"
         required
         fullWidth
-        errorStyleProps={{ sx: { mb: '20px', mt: '-20px' } }}
       />
       <TextInputTopLabel
         control={control}
-        inputLabel={{
-          sx: {
-            color: 'text.primary',
-            fontWeight: 500,
-            lineHeight: lineHeight[21],
-            fontSize: fontSize[18],
-          },
-        }}
         sx={{
           mb: '20px',
         }}
-        errors={errors.title}
         label="Title and institution (optional)"
         name="title"
+        inputProps={{ sx: { borderRadius: borderRadius[8] } }}
         size="small"
         fullWidth
-        errorStyleProps={{ sx: { mb: '20px', mt: '-20px' } }}
       />
       <TextInputTopLabel
         control={control}
-        inputLabel={{
-          sx: {
-            color: 'text.primary',
-            fontWeight: 500,
-            lineHeight: lineHeight[21],
-            fontSize: fontSize[18],
-          },
-        }}
+        inputProps={{ sx: { borderRadius: borderRadius[8] } }}
         sx={{
           mb: '20px',
         }}
-        errors={errors.mail}
         label="Email"
-        pattern={EMAIL_REGEX}
         name="mail"
         size="small"
         fullWidth
-        errorStyleProps={{ sx: { mb: '20px', mt: '-20px' } }}
       />
     </div>
   )

views/forms/UserProfileForm/index.jsx

@@ -19,15 +19,10 @@ const schema = yup.object({
 })
 
 const UserProfileForm = ({ initialValues, onSubmit }) => {
-  const {
-    handleSubmit,
-    control,
-    formState: { errors },
-    watch,
-    setValue,
-  } = useForm({
+  const { handleSubmit, control, watch, setValue } = useForm({
     defaultValues: initialValues,
     resolver: yupResolver(schema),
+    mode: 'onChange',
   })
   const fileInput = useRef()
   const iconFile = watch('iconFile')
@@ -62,7 +57,7 @@ const UserProfileForm = ({ initialValues, onSubmit }) => {
           }}
           iconSrc={iconSrc}
         />
-        <UserProfileFormFields errors={errors} control={control} />
+        <UserProfileFormFields control={control} />
         <div>
           <Button
             variant="contained"

views/layouts/MainLayout/MainLayout.css

@@ -2,7 +2,6 @@
   display: flex;
 }
 .MainLayoutOutlet {
-  display: 'flex';
-  flex-grow: 1;
-  flex-direction: column;
+  flex: 1;
+  flex-shrink: 0;
 }

views/layouts/MainLayout/index.jsx

@@ -52,7 +52,7 @@ const MainLayout = () => {
   return (
     <div className="MainLayout_container">
       <Sidebar sidebarOpen={true} user={user} onLogout={handleLogout} />
-      <div className="MainLayoutOutlet">
+      <main className="MainLayoutOutlet">
         <Outlet
           context={{
             configurations,
@@ -65,7 +65,7 @@ const MainLayout = () => {
             users,
           }}
         />
-      </div>
+      </main>
     </div>
   )
 }

views/pages/AccountPage/index.jsx

@@ -71,7 +71,6 @@ const AccountPage = () => {
           display_name,
           mail,
           title,
-          iconFileName: iconFileName || '',
         }}
         onSubmit={onSubmit}
       />