Adde alerts in add form, that will indicate which fields was not added or has ivalid value

frontend/src/containers/AddForm/AddForm.tsx

 import { shallowEqual } from "react-redux"
-import { Button, TextField } from '@mui/material';
+import { Alert, Collapse, IconButton, TextField } from '@mui/material';
 import { AppDispatch, AppState, useAppDispatch } from "../../store/store"
 import { useSelector } from "react-redux"
 import Preloader from "../../components/UI/Preloader/Preloader"
-import { ChangeEvent, FormEvent, useEffect, useState } from "react"
+import { ChangeEvent, FormEvent, useState } from "react"
 import IPhotoDto from "../../interfaces/IPhotoDto"
 import { addPhoto } from "../../store/photos/photos.slice"
+import Box from '@mui/material/Box';
+import CloseIcon from '@mui/icons-material/Close';
+
 import styles from './AddForm.module.css'
 
 const AddForm: React.FunctionComponent = (): React.ReactElement => {
 
     const {loadingPhotos} = useSelector((state: AppState) => state.photos, shallowEqual)
 
-    const [buttonDisabled, setButtonDisabled] = useState<boolean>(true) 
-
     const [fileName, setFileName] = useState<string>('')
 
     const [photoDto, setPhotoDto] = useState<IPhotoDto>({
@@ -21,6 +22,10 @@ const AddForm: React.FunctionComponent = (): React.ReactElement => {
         photo: undefined
     })
 
+    const [titleError, setTitleError] = useState<boolean>(false);
+
+    const [photoError, setPhotoError] = useState<boolean>(false);
+
     const dispatch: AppDispatch = useAppDispatch()
 
     const inputHandler = (e: ChangeEvent<HTMLInputElement>): void => {
@@ -37,16 +42,17 @@ const AddForm: React.FunctionComponent = (): React.ReactElement => {
         setFileName(e.target.files && e.target.files[0] ? e.target.files[0].name : '')
     }
 
-    const checkButton = () => {
-        if(photoDto.title.trim() === '' || !photoDto.photo){
-            setButtonDisabled(true)
-        } else{
-            setButtonDisabled(false)
-        }
-    }
-
     const submitHandler = (e: FormEvent): void => {
         e.preventDefault()
+        if (photoDto.title.trim() === ''){
+            setTitleError(true)
+        }
+        if (!photoDto.photo){
+            setPhotoError(true)
+        }
+        if (photoDto.title.trim() === '' || !photoDto.photo){
+            return
+        }
         const formData = new FormData()
         Object.keys(photoDto).forEach((key: string) => {
             //@ts-ignore
@@ -59,10 +65,6 @@ const AddForm: React.FunctionComponent = (): React.ReactElement => {
         })
         setFileName('')
     }
-
-    useEffect(() => {
-        checkButton()
-    },[photoDto])
     
     return(
         <div
@@ -75,6 +77,28 @@ const AddForm: React.FunctionComponent = (): React.ReactElement => {
                 onSubmit={submitHandler}
                 style={{margin: '10px', padding: '20px', background: '#e0e0e0', borderRadius: '5px', display: 'flex', flexDirection: 'column'}}
             >
+            <Box sx={{ width: '100%' }}>
+            <Collapse in={titleError}>
+                <Alert
+                action={
+                    <IconButton
+                    aria-label="close"
+                    color="inherit"
+                    size="small"
+                    onClick={() => {
+                        setTitleError(false);
+                    }}
+                    >
+                    <CloseIcon fontSize="inherit" />
+                    </IconButton>
+                }
+                sx={{ mb: 2 }}
+                severity="error"
+                >
+                Title should exist!
+                </Alert>
+            </Collapse>
+            </Box>
             <TextField 
                 id="outlined-basic" 
                 label="Photo title" 
@@ -85,6 +109,28 @@ const AddForm: React.FunctionComponent = (): React.ReactElement => {
                 onChange={inputHandler}
                 autoComplete='off'
             />
+            <Box sx={{ width: '100%' }}>
+            <Collapse in={photoError}>
+                <Alert
+                action={
+                    <IconButton
+                    aria-label="close"
+                    color="inherit"
+                    size="small"
+                    onClick={() => {
+                        setPhotoError(false);
+                    }}
+                    >
+                    <CloseIcon fontSize="inherit" />
+                    </IconButton>
+                }
+                sx={{ mb: 2 }}
+                severity="error"
+                >
+                Photo should exist!
+                </Alert>
+            </Collapse>
+            </Box>
             <label style={{height: 'auto', margin: '10px', maxWidth: '30%', display: 'flex', flexDirection: 'column'}}>
                 <input
                     style={{display: "none"}}
@@ -99,9 +145,7 @@ const AddForm: React.FunctionComponent = (): React.ReactElement => {
                 </h1>
                 <span className={styles.filename}>{fileName}</span>
             </label>
-            <button 
-                disabled={buttonDisabled}   
-            className={styles.add_btn}>SEND</button>
+            <button className={styles.add_btn}>SEND</button>
             </form>
         </div>
     )