From ee5a1518ea9101dd28158cc70cba3c4157fce8ac Mon Sep 17 00:00:00 2001 From: Abdallah Date: Tue, 7 Dec 2021 22:27:29 +0200 Subject: [PATCH 1/8] add product dialog --- client/package-lock.json | 66 +- client/src/App.tsx | 5 +- client/src/pages/Profile/index.tsx | 214 ++ client/src/pages/Profile/style.css | 12 + package-lock.json | 3479 ++++++++++++++-------------- 5 files changed, 2083 insertions(+), 1693 deletions(-) create mode 100644 client/src/pages/Profile/index.tsx create mode 100644 client/src/pages/Profile/style.css diff --git a/client/package-lock.json b/client/package-lock.json index 61bd756..9d697bf 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -17,7 +17,7 @@ "@testing-library/user-event": "^12.8.3", "@types/jest": "^26.0.24", "@types/node": "^12.20.37", - "@types/react": "^17.0.36", + "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", "axios": "^0.24.0", "date-fns": "^2.27.0", @@ -34,6 +34,7 @@ }, "devDependencies": { "@types/fg-loadcss": "^3.1.1", + "@types/react-router-dom": "^5.3.2", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "eslint": "^7.32.0", @@ -3435,6 +3436,12 @@ "@types/node": "*" } }, + "node_modules/@types/history": { + "version": "4.7.9", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz", + "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==", + "dev": true + }, "node_modules/@types/html-minifier-terser": { "version": "5.1.2", "license": "MIT" @@ -3502,8 +3509,9 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "17.0.36", - "license": "MIT", + "version": "17.0.37", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz", + "integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -3524,6 +3532,27 @@ "@types/react": "*" } }, + "node_modules/@types/react-router": { + "version": "5.1.17", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.17.tgz", + "integrity": "sha512-RNSXOyb3VyRs/EOGmjBhhGKTbnN6fHWvy5FNLzWfOWOGjgVUKqJZXfpKzLmgoU8h6Hj8mpALj/mbXQASOb92wQ==", + "dev": true, + "dependencies": { + "@types/history": "*", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.2.tgz", + "integrity": "sha512-ELEYRUie2czuJzaZ5+ziIp9Hhw+juEw8b7C11YNA4QdLCVbQ3qLi2l4aq8XnlqM7V31LZX8dxUuFUCrzHm6sqQ==", + "dev": true, + "dependencies": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.4", "license": "MIT", @@ -22188,6 +22217,12 @@ "@types/node": "*" } }, + "@types/history": { + "version": "4.7.9", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz", + "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==", + "dev": true + }, "@types/html-minifier-terser": { "version": "5.1.2" }, @@ -22241,7 +22276,9 @@ "version": "1.5.5" }, "@types/react": { - "version": "17.0.36", + "version": "17.0.37", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz", + "integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -22260,6 +22297,27 @@ "@types/react": "*" } }, + "@types/react-router": { + "version": "5.1.17", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.17.tgz", + "integrity": "sha512-RNSXOyb3VyRs/EOGmjBhhGKTbnN6fHWvy5FNLzWfOWOGjgVUKqJZXfpKzLmgoU8h6Hj8mpALj/mbXQASOb92wQ==", + "dev": true, + "requires": { + "@types/history": "*", + "@types/react": "*" + } + }, + "@types/react-router-dom": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.2.tgz", + "integrity": "sha512-ELEYRUie2czuJzaZ5+ziIp9Hhw+juEw8b7C11YNA4QdLCVbQ3qLi2l4aq8XnlqM7V31LZX8dxUuFUCrzHm6sqQ==", + "dev": true, + "requires": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, "@types/react-transition-group": { "version": "4.4.4", "requires": { diff --git a/client/src/App.tsx b/client/src/App.tsx index 7634e20..77080aa 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -8,10 +8,11 @@ import Header from './Components/Header'; import theme from './theme'; import NavBar from './Components/Common/NavBar'; import SignIn from './pages/SignIn'; -import HistoryProduct from './Components/HistoryProduct'; +// import HistoryProduct from './Components/HistoryProduct'; import SignUp from './pages/SignUp'; import BtnSocket from './pages/socket.io'; import Bids from './pages/Bids'; +import Profile from './pages/Profile'; const App : React.FC = () => (
@@ -43,7 +44,7 @@ const App : React.FC = () => ( } /> NOT FOUND
} /> } /> - + } /> diff --git a/client/src/pages/Profile/index.tsx b/client/src/pages/Profile/index.tsx new file mode 100644 index 0000000..aaeff5c --- /dev/null +++ b/client/src/pages/Profile/index.tsx @@ -0,0 +1,214 @@ +/* eslint-disable react/jsx-props-no-spreading */ +import React, { useEffect, useState } from 'react'; +import { + Button, Checkbox, Dialog, + DialogActions, DialogContent, + DialogTitle, FormControlLabel, Select, MenuItem, + Slide, TextField, TextareaAutosize, InputLabel, +} from '@mui/material'; +import axios from 'axios'; +import { TransitionProps } from '@mui/material/transitions'; +import Footer from '../../Components/Common/Footer'; +import NavBar from '../../Components/Common/NavBar'; +import './style.css'; +import { useSnack } from '../../context/useSnack'; + +const Transition = React.forwardRef(( + props: TransitionProps & { + children: React.ReactElement; + }, + ref: React.Ref, +) => ); + +const Profile : React.FC = () => { + const [open, setOpen] = useState(false); + + const [product, setProduct] = useState({ + name: '', + category_id: '', + auc_amount: '', + auc_inc_amount: '', + end_date: '', + image: '', + is_used: false, + description: '', + }); + + const [categories, setCategories] = useState([]); + const { showSnak } = useSnack(); + + const categoriesList = categories.map((category: any) => ( + {category.name} + )); + + const addProduct = async () : Promise => { + try { + await axios.post('/api/products', { + ...product, + }); + + showSnak('product added succesfully !', 'success'); + setOpen(false); + setProduct({}); + } catch (err) { + showSnak('Some thing went wrong', 'error'); + } + }; + + const getCategories = async () : Promise => { + try { + const res = await axios.get('/api/categories'); + setCategories(res.data.categoriesData); + } catch (err) { + showSnak('Some Thing Went Wrong', 'error'); + } + }; + + useEffect(() => { + const source = axios.CancelToken.source(); + + getCategories(); + + return () => { + source.cancel(); + }; + }, []); + + return ( + <> + setOpen(false)} + aria-describedby="alert-dialog-slide-description" + > + Add New Product + +
+
+ setProduct({ ...product, name: e.target.value })} + InputLabelProps={{ + shrink: true, + }} + fullWidth + /> +
+
+ Category + +
+
+ setProduct({ ...product, auc_amount: e.target.value })} + InputLabelProps={{ + shrink: true, + }} + fullWidth + /> +
+
+ setProduct({ ...product, auc_inc_amount: e.target.value })} + InputLabelProps={{ + shrink: true, + }} + fullWidth + /> +
+ +
+ setProduct({ ...product, end_date: e.target.value })} + InputLabelProps={{ + shrink: true, + }} + /> +
+
+ setProduct({ ...product, image: e.target.value })} + InputLabelProps={{ + shrink: true, + }} + fullWidth + /> +
+
+ setProduct({ ...product, is_used: e.target.checked })} + inputProps={{ 'aria-label': 'controlled' }} + /> + )} + label="Is Used" + /> +
+
+ setProduct({ ...product, description: e.target.value })} + /> +
+
+
+ + + + +
+ + +
+
+ My Products + +
+
+