Commit 5e15b7bd authored by Цой Данил's avatar Цой Данил 💬

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

parent e6a97ad8
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
......@@ -60,10 +66,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>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment