final

package.json

@@ -3,15 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@mapbox/mapbox-gl-directions": "^4.0.3",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "@mapbox/mapbox-gl-directions": "^4.0.3",
+    "axios": "^0.24.0",
+    "cors": "^2.8.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-map-gl": "^6.1.17",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
+    "rupiah-format": "^1.0.0",
+    "socket.io-client": "^4.4.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.1.2"
   },

src/App.js

@@ -1,14 +1,20 @@
 //style
 import { GlobalStyles } from './GlobalStyles';
 import RouterSetup from './components/RouterSetup';
-
-
+import { UserContextProvider } from './Context/userContext';
+import {API} from './config/api';
+if (localStorage?.token) {
+  API.defaults.headers.common['Authorization'] = `Bearer ${localStorage.token}`
+} else {
+  delete API.defaults.headers.common['Authorization']
+}
 function App() {
+
   return (
-    <>
-    <RouterSetup/>
-    <GlobalStyles/>
-    </>
+    <UserContextProvider>
+      <RouterSetup/>
+      <GlobalStyles/>
+    </UserContextProvider>
   );
 }
 

src/Context/userContext.js

@@ -0,0 +1,38 @@
+import { createContext, useReducer ,useEffect} from 'react'
+
+export const UserContext = createContext(null);
+
+const initialState = {
+    isLogin: false,
+    user:{}
+}
+
+const reducer = (state, action) => {
+    const { status, payload } = action;
+
+    switch (status) {
+        case 'login':
+            localStorage.setItem('token', payload.token)
+            return {
+                isLogin: true,
+                user: payload
+            }
+        case 'logout':
+            localStorage.removeItem('token')
+            return {
+                isLogin: false,
+                user: {}
+            }
+        default:
+            throw new Error();
+    }    
+}
+
+export const UserContextProvider = ({ children}) => {
+    const [state, dispatch] = useReducer(reducer, initialState)
+    return (
+        < UserContext.Provider value={{ state, dispatch }} >
+            {children}       
+        </UserContext.Provider>
+    )
+}

src/components/AddProduct/AddProduct.styled.js

@@ -17,20 +17,23 @@ export const Wrapper = styled.div`
         padding-left: 10px;
     }
     .first {
-        width :927px;
+        max-width :927px;
+        width:100%;
         height:50px;
     }
     .second {
         font-family: 'Montserrat', sans-serif;
-        width: 213px;
+        max-width: 213px;
+        width:100%;
         height: 50px;
         border-radius: 5px;
         border: 2px solid #766C6C;
         background: rgba(210, 210, 210, 0.25);
     }
     .third {
-        width: 1157px;
+        max-width: 1157px;
         height: 50px;
+        width:100%;
     }
     label{
         display:flex;
@@ -51,7 +54,8 @@ export const WrapperMain = styled.div`
         background: #433434;
         border-radius: 5px;
         border:0;
-        width: 260px;
+        max-width: 260px;
+        width:100%;
         height: 40px;
         font-family: 'Montserrat', sans-serif;
         font-weight: bold;
@@ -71,6 +75,7 @@ export const Flex = styled.div`
     display:flex;
     ${props => props.btwn ? `
     justify-content:space-between;
+    gap:1rem;
     `: null}
     margin-bottom: 27px;
 `

src/components/AddProduct/index.js

@@ -1,11 +1,61 @@
-import { React } from 'react';
+import { React ,useContext ,useState} from 'react';
+import { API , handleError} from '../../config/api'
+import {UserContext} from '../../Context/userContext'
 
 import Header from '../Header';
 import Clip from '../../img/clip.svg'
 import { Wrapper ,WrapperMain ,Flex} from './AddProduct.styled'
 
 const AddProduct = () => {
-
+    const { state } = useContext(UserContext)
+    // const { user } = state
+    const [form, setForm] = useState({
+        title: '',
+        image: '',
+        price: ''
+    })
+    let [pre , setPre] = useState(Clip)
+    const handleChange = (e) => {
+        setForm({
+            ...form,
+            [e.target.name]: e.target.type === "file" ? e.target.files : e.target.value,
+        });
+        if (e.target.type === "file") {
+            try {
+                setPre(URL.createObjectURL(e.target.files[0]));
+            } catch (e) {
+                setPre(Clip)
+            }
+        }
+    }
+    const handleSubmit = async (e) => {
+        try {
+            e.preventDefault();
+            const config = {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            }
+            const formData = new FormData();
+            formData.set('title', form.title)
+            if (form.image) {
+                formData.set("image", form?.image[0], form?.image[0]?.name);
+            }
+            formData.set('price', form.price)
+            await API.post('/add/product', formData ,config)
+            setForm({
+                title: '',
+                image: '',
+                price: ''
+            })
+            setPre(Clip)
+        } catch (err) {
+            handleError(err)
+        }
+    }
+
+
+
     return (
         <>
             <Header noTroll/>
@@ -14,23 +64,27 @@ const AddProduct = () => {
                     <Flex btwn>
                         <input
                             type="text"
-                            name="Title"
+                            name="title"
                             placeholder="Title"
                             className="first"
+                            onChange={handleChange}
+                            value= {form.title}
                             />
                         <label className="second" htmlFor='imgFile'>Attach Image
-                            <img src={Clip}/>
-                            <input type="file" name='img' id= "imgFile" hidden/>
+                            <img src={pre}/>
+                        <input type="file" name='image' id="imgFile" onChange={handleChange}hidden/>
                         </label>
                     </Flex>
                     <input
                         className="third"
                         type="text"
                         name="price"
                         placeholder="Price"
-                        ></input>
+                        onChange={handleChange}
+                        value= {form.price}
+                        />
                 <WrapperMain>
-                    <button>Save</button>
+                    <button onClick={handleSubmit}>Save</button>
                 </WrapperMain>
             </Wrapper>
         </>

src/components/AddResto/AddResto.styled..js

@@ -0,0 +1,78 @@
+import styled from "styled-components";
+
+
+export const Wrappper = styled.div`
+       width:84.8%;
+    margin:0 auto;
+    margin-top: 73px;
+    h1 {
+        padding-left: 25px;
+        font-size: 36px;
+    }
+    input{
+        font-family: 'Montserrat', sans-serif;
+        border-radius: 5px;
+        border: 2px solid #766C6C;
+        background: rgba(210, 210, 210, 0.25);
+        padding-left: 10px;
+        max-width:100%;
+        margin-bottom: 27px;
+    }
+    .first {
+        max-width : 927px;
+        width:100%;
+        height:50px;
+    }
+    .firsts {
+        max-width : 903px;
+        width:100%;
+        height:50px;
+    }
+    .second {
+        font-family: 'Montserrat', sans-serif;
+        max-width: 213px;
+        width:100%;
+        height: 50px;
+        border-radius: 5px;
+        border: 2px solid #766C6C;
+        background: rgba(210, 210, 210, 0.25);
+    }
+    .secondbtn {
+        padding:0px 40px;
+        font-weight: bold;
+        border:none;
+        color:white;
+        font-size: 14px;
+        line-height: 19px;
+        font-family: 'Montserrat', sans-serif;
+        display:flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 222px;
+        height: 50px;
+        background: #433434;
+        border-radius: 5px;
+    }
+    .third {
+        width: 1157px;
+        height: 50px;
+    }
+    label{
+        display:flex;
+        justify-content: space-between;
+        align-items: center;
+        padding:10px;
+        img{
+            height:30px;
+        }
+    }
+`
+
+export const Flexx = styled.div` 
+    display:flex;
+    ${props => props.btwn ? `
+    justify-content:space-between;
+    gap:1rem;
+    `: null}
+    /* margin-bottom: 27px; */
+`