90 lines
3.7 KiB
JavaScript
90 lines
3.7 KiB
JavaScript
import React, { useState } from 'react'
|
|
//components
|
|
import Dropdown from '../../Dropdown'
|
|
|
|
//styles
|
|
import {
|
|
StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, InputSmall, Button, IconWrong, IconCheck
|
|
} from '../styles/modal'
|
|
import {
|
|
StyledImage, IconProduct, IconTag, IconDollar, IconLink
|
|
} from './styles/addProduct'
|
|
//redux
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { productAdded } from '../../../redux/slices/groceryList/productsSlice';
|
|
|
|
export const ModalAddProduct = (props) => {
|
|
const dispatch = useDispatch()
|
|
const tags = useSelector(state => state.tags.entities)
|
|
const [productName, setProductName] = useState('');
|
|
const [tag, setTag] = useState('');
|
|
const [price, setPrice] = useState('');
|
|
const [image, setImage] = useState('');
|
|
|
|
const [focused, setFocused] = React.useState(false)
|
|
// const handleKeyDown = (event) => {
|
|
// if (event.key === 'Enter' && productName !== '') {
|
|
// setProductName('')
|
|
// dispatch(addNewProduct({ productName, tag: 'Vegetables & fruit', price: 5, image: 'https://media-cdn.tripadvisor.com/media/photo-s/15/2d/23/07/domino-s-pizza.jpg' }))
|
|
// }
|
|
// }
|
|
const handleSubmit = () => {
|
|
if (props.visible && productName) {
|
|
dispatch(productAdded({ productName, tag: tags.find(t => t.tagName === tag) ? tag : "uncategorized", price, image }));
|
|
setProductName('');
|
|
setTag('');
|
|
setPrice('');
|
|
setImage('');
|
|
props.closeModal();
|
|
}
|
|
else {
|
|
alert('You should give a valid product name');
|
|
}
|
|
}
|
|
return (
|
|
<StyledModal show={props.visible} centered={true} onHide={props.closeModal} animation={false}>
|
|
<ModalHeader>Add product</ModalHeader>
|
|
<WrapperInput>
|
|
<IconProduct />
|
|
<InputSmall type="text"
|
|
value={productName}
|
|
onChange={(text) => setProductName(text.target.value)}
|
|
// onKeyDown={(event) => handleKeyDown(event)}
|
|
placeholder="Product name" />
|
|
{productName ? <IconCheck /> : <IconWrong />}
|
|
</WrapperInput>
|
|
<WrapperInput>
|
|
<IconTag />
|
|
<InputSmall onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
|
|
type="text"
|
|
value={tag}
|
|
onChange={(text) => setTag(text.target.value)}
|
|
placeholder="Tag" />
|
|
{tag ? <IconCheck /> : <IconWrong />}
|
|
</WrapperInput>
|
|
{focused && <WrapperDropdown>
|
|
<Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
|
|
</WrapperDropdown>}
|
|
<WrapperInput>
|
|
<IconDollar />
|
|
<InputSmall type="number"
|
|
value={price}
|
|
onChange={(text) => setPrice(text.target.value)}
|
|
placeholder="Price" />
|
|
</WrapperInput>
|
|
<WrapperInput>
|
|
<IconLink />
|
|
<InputSmall type="text"
|
|
value={image}
|
|
onChange={(text) => setImage(text.target.value)}
|
|
placeholder="Image link" />
|
|
</WrapperInput>
|
|
{image && <StyledImage src={image} alt={'No link...'} />}
|
|
<WrapperButtons>
|
|
<Button onClick={props.closeModal}>Close</Button>
|
|
<VerticalSeperator />
|
|
<Button onClick={() => handleSubmit()}>Add </Button>
|
|
</WrapperButtons>
|
|
</StyledModal>
|
|
)
|
|
} |