Close when timeup

client/src/Components/AddProductModal/index.tsx

@@ -0,0 +1,194 @@
+/* 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 './style.css';
+import { useSnack } from '../../context/useSnack';
+
+const Transition = React.forwardRef((
+  props: TransitionProps & {
+    children: React.ReactElement<any, any>;
+  },
+  ref: React.Ref<unknown>,
+) => <Slide direction="up" ref={ref} {...props} />);
+
+const AddProductModal : any = (
+  { open, setOpen } : { open: boolean, setOpen: Function },
+) : any => {
+  const { showSnack } = useSnack();
+  const [product, setProduct] = useState<any>({
+    name: '',
+    category_id: '',
+    auc_amount: '',
+    auc_inc_amount: '',
+    end_date: '',
+    image: '',
+    is_used: false,
+    description: '',
+  });
+
+  const [categories, setCategories] = useState([]);
+
+  const categoriesList = categories.map((category: any) => (
+    <MenuItem value={category.id} key={category.id}>{category.name}</MenuItem>
+  ));
+
+  const addProduct = async () : Promise<any> => {
+    try {
+      await axios.post('/api/products', {
+        ...product,
+      });
+
+      showSnack('product added succesfully !', 'success');
+      setOpen(false);
+      setProduct({});
+    } catch (err) {
+      showSnack('Some thing went wrong', 'error');
+    }
+  };
+
+  const getCategories = async () : Promise<any> => {
+    try {
+      const res = await axios.get('/api/categories');
+      setCategories(res.data.categoriesData);
+    } catch (err) {
+      showSnack('Some Thing Went Wrong', 'error');
+    }
+  };
+
+  useEffect(() => {
+    const source = axios.CancelToken.source();
+
+    getCategories();
+
+    return () => {
+      source.cancel();
+    };
+  }, []);
+
+  return (
+    <Dialog
+      open={open}
+      TransitionComponent={Transition}
+      keepMounted
+      onClose={() => setOpen(false)}
+      aria-describedby="alert-dialog-slide-description"
+    >
+      <DialogTitle>Add New Product</DialogTitle>
+      <DialogContent>
+        <div className="add-product-container">
+          <div className="add-product-form-input">
+            <TextField
+              label="Name"
+              size="medium"
+              type="text"
+              value={product.name}
+              onChange={(e) => setProduct({ ...product, name: e.target.value })}
+              InputLabelProps={{
+                shrink: true,
+              }}
+              fullWidth
+            />
+          </div>
+          <div className="add-product-form-input ">
+            <InputLabel style={{ marginBottom: '0.25rem' }} id="product-category">Category</InputLabel>
+            <Select
+              labelId="product-category"
+              fullWidth
+              label="Hello world"
+              onChange={(e) => setProduct({ ...product, category_id: e.target.value })}
+            >
+              {categoriesList}
+            </Select>
+          </div>
+          <div className="add-product-form-input">
+            <TextField
+              label="Start Price"
+              size="medium"
+              type="number"
+              value={product.auc_amount}
+              onChange={(e) => setProduct({ ...product, auc_amount: e.target.value })}
+              InputLabelProps={{
+                shrink: true,
+              }}
+              fullWidth
+            />
+          </div>
+          <div className="add-product-form-input">
+            <TextField
+              label="Increment Amount"
+              size="medium"
+              value={product.auc_inc_amount}
+              type="number"
+              onChange={(e) => setProduct({ ...product, auc_inc_amount: e.target.value })}
+              InputLabelProps={{
+                shrink: true,
+              }}
+              fullWidth
+            />
+          </div>
+
+          <div className="add-product-form-input">
+            <TextField
+              label="End Date"
+              type="datetime-local"
+              value={product.end_date}
+              fullWidth
+              onChange={(e) => setProduct({ ...product, end_date: e.target.value })}
+              InputLabelProps={{
+                shrink: true,
+              }}
+            />
+          </div>
+          <div className="add-product-form-input">
+            <TextField
+              label="image"
+              size="medium"
+              value={product.image}
+              type="text"
+              onChange={(e) => setProduct({ ...product, image: e.target.value })}
+              InputLabelProps={{
+                shrink: true,
+              }}
+              fullWidth
+            />
+          </div>
+          <div className="add-product-form-input">
+            <FormControlLabel
+              control={(
+                <Checkbox
+                  onChange={(e) => setProduct({ ...product, is_used: e.target.checked })}
+                  inputProps={{ 'aria-label': 'controlled' }}
+                />
+              )}
+              label="Is Used"
+            />
+          </div>
+          <div className="add-product-form-input">
+            <TextareaAutosize
+              maxRows={7}
+              minRows={5}
+              value={product.description}
+              aria-label="maximum height"
+              placeholder="Description"
+              style={{ width: '100%', padding: '0.5rem' }}
+              onChange={(e) => setProduct({ ...product, description: e.target.value })}
+            />
+          </div>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => setOpen(false)}>Cancel</Button>
+        <Button onClick={() => addProduct()}>Save</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default AddProductModal;

client/src/Components/AddProductModal/style.css

@@ -0,0 +1,12 @@
+.add-product-container{
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 30rem;
+}
+
+.add-product-form-input{
+    margin-bottom: 1rem;
+}

client/src/Components/Common/ProductCard/index.tsx

@@ -16,7 +16,6 @@ interface ProductCardProps{
     image: string,
     description : string,
     title: string,
-    // href: string,
     price: number,
     closed: boolean,
     endTime: Date,

client/src/pages/ProductDetails/index.tsx

@@ -7,17 +7,22 @@ import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import HardwareIcon from '@mui/icons-material/Hardware';
+import { io } from 'socket.io-client';
 import HistoryProduct from '../../Components/HistoryProduct';
 import Timer from '../../Components/Common/Timer';
 import NavBar from '../../Components/Common/NavBar';
 import { useSnack } from '../../context/useSnack';
 import './Style.css';
 import BtnSocket from '../socket.io';
 import Footer from '../../Components/Common/Footer';
+import { useTimer } from '../../context/useTimer';
 
 const ProductDetails : React.FC = () => {
   const [priceBids, setPriceBids] = useState<number>(50);
 
+  const tomorow = new Date(Date.now());
+  tomorow.setDate(tomorow.getDate() + 1);
+
   const { id } = useParams();
   const { showSnack } = useSnack();
   const [data, setData] = useState(
@@ -26,7 +31,7 @@ const ProductDetails : React.FC = () => {
       name: '',
       auc_start_amount: '',
       auc_inc_amount: '',
-      end_date: null,
+      end_date: tomorow,
       description: '',
       is_open: true,
       is_used: false,
@@ -38,7 +43,17 @@ const ProductDetails : React.FC = () => {
     },
   );
 
+  const socket = io('https://tech-bids.herokuapp.com', { withCredentials: true });
+
+  const { isTimeUp } = useTimer(new Date(data.end_date));
+
+  if (isTimeUp) {
+    socket.emit('closeBid', id);
+  }
+
   useEffect(() => {
+    socket.emit('joinRoom', id);
+
     const source = axios.CancelToken.source();
 
     const getProduct = async (): Promise<any> => {
@@ -52,6 +67,7 @@ const ProductDetails : React.FC = () => {
         showSnack(error, 'error');
       }
     };
+
     getProduct();
 
     return () => {

client/src/pages/UserEnteredBids/index.tsx

@@ -1,16 +1,42 @@
+/* eslint-disable camelcase */
 import React, { useState, useEffect } from 'react';
 import {
   Typography,
 } from '@mui/material';
 import axios from 'axios';
 import { useSnack } from '../../context/useSnack';
 import NavBar from '../../Components/Common/NavBar';
+import Footer from '../../Components/Common/Footer';
+import ProductCard from '../../Components/Common/ProductCard';
+
+interface itemProp {
+  image: string,
+  description: string,
+  name: string,
+  auc_amount: number,
+  is_open: Boolean,
+  end_date: Date,
+  id: number
+}
 
 const UserWinBids : React.FC = () => {
-  const [enteredBids, setEnteredBids] = useState(null);
+  const [enteredBids, setEnteredBids] = useState([]);
   const { showSnack } = useSnack();
   console.log(enteredBids);
 
+  const productList = enteredBids && enteredBids.map((product: itemProp) => (
+    <ProductCard
+      key={product.id}
+      image={product.image}
+      description={product.description}
+      title={product.name}
+      price={product.auc_amount}
+      closed={!product.is_open}
+      endTime={new Date(product.end_date)}
+      id={product.id}
+    />
+  ));
+
   useEffect(() => {
     const source = axios.CancelToken.source();
     const getEnteredBids = async (): Promise<void> => {
@@ -32,7 +58,24 @@ const UserWinBids : React.FC = () => {
   return (
     <>
       <NavBar />
-      <Typography>Entered Bids</Typography>
+      <div style={{ width: '1000px', margin: '9rem auto' }}>
+        <div style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '1rem',
+        }}
+        >
+          <Typography variant="h4">Entered Bids</Typography>
+        </div>
+        <div style={{
+          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap',
+        }}
+        >
+          {productList}
+        </div>
+      </div>
+      <Footer />
     </>
   );
 };