remake app ohome setup /notworking

src/components/modals/groceries/ModalAddProduct.js

@@ -0,0 +1,90 @@
+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>
+    )
+}