deployment

client/package.json

@@ -1,17 +1,13 @@
 {
   "name": "client",
   "version": "0.1.0",
-  "private": true,
   "proxy": "http://localhost:8000",
+  "private": true,
   "dependencies": {
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.2.0",
     "@mui/material": "^5.2.0",
-    "@testing-library/jest-dom": "^5.15.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
     "@types/node": "^12.20.37",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
@@ -26,6 +22,14 @@
     "react-scripts": "4.0.3",
     "socket.io-client": "^4.4.0",
     "typescript": "^4.5.2",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "eslint-config-airbnb": "^19.0.1",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

client/src/App.tsx

@@ -3,15 +3,10 @@ import './App.css';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { ThemeProvider } from '@mui/material/styles';
 import { ProvideAuth } from './context/useAuth';
-import ProductDetails from './pages/ProductDetails';
 import theme from './theme';
-import SignIn from './pages/SignIn';
-import SignUp from './pages/SignUp';
-import Bids from './pages/Bids';
-import Home from './pages/Home';
-import UserWinBids from './pages/UserWinBids';
-import UserProducts from './pages/UserProducts';
-import UserEnteredBids from './pages/UserEnteredBids';
+import {
+  Home, Bids, ProductDetails, SignIn, SignUp, UserWinBids, UserProducts, UserEnteredBids,
+} from './pages';
 
 const App : React.FC = () => (
   <div>

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

@@ -64,7 +64,6 @@ const ProductCard : any = ({
       )}
       <CardMedia
         component="img"
-        height="140"
         image={image}
         alt="product"
       />

client/src/Components/Header/index.tsx

@@ -100,7 +100,7 @@ const Header: FC = () => {
                 <div
                   className="img-content"
                 >
-                  <Typography variant="h6" color="white">
+                  <Typography variant="h5" color="white">
                     {item.name}
                   </Typography>
                   <Typography color="white">
@@ -112,7 +112,7 @@ const Header: FC = () => {
             ))}
           </ImageList>
         )
-        : <Skeleton variant="rectangular" className="img-container" width="43%" height="50vh" />}
+        : <Skeleton variant="rectangular" className="img-container" width="60%" height="50vh" />}
     </div>
   );
 };

client/src/Components/Header/style.css

@@ -1,4 +1,3 @@
-
 .cards-container{
     display: flex;
     width: 75%;
@@ -13,7 +12,6 @@
     width: unset !important;
     margin: 2px 15px !important;
     font-size: 2.1rem;
-
 }
 .content-container .MuiTypography-h5 {
     font-weight: bold;
@@ -28,10 +26,10 @@
     border: 1.3px solid white !important;
     border-radius: 50px !important;
     padding: 4px 10px !important;
-    font-size: .55rem !important;
+    font-size: .66rem !important;
 }
 .img-container {
-    width: 43%;
+    width: 60%;
     margin: 5vh auto;
 }
 .img-content{
@@ -40,10 +38,10 @@
     top: 25%;
     left: 7%;
 }
-.img-container .MuiTypography-h6{
+.img-container .MuiTypography-h5{
     font-weight: bold;
 }
 .img-container .MuiTypography-body1{
-    font-size: .7rem;
+    font-size: .9rem;
     margin: -5px 0 13px
 }

client/src/pages/Bids/index.tsx

@@ -89,7 +89,7 @@ const Bids : React.FC = () => {
           <BidsStatusCheckBox setPage={setPage} status={status} setStatus={setStatus} />
         </div>
         <div className="side-container">
-          <div className="card-container">
+          <div className="product-card-container">
             {isLoading && Array.from(new Array(3)).map(() => <Skeleton variant="rectangular" width="30%" height={300} />)}
             {
               !isLoading && (products.length ? products.map((item:itemProp) => (
@@ -109,7 +109,14 @@ const Bids : React.FC = () => {
             }
           </div>
           {count > 6
-            ? <Pagination count={Math.ceil(count / 6)} page={page} onChange={handleChange} />
+            ? (
+              <Pagination
+                count={Math.ceil(count / 6)}
+                page={page}
+                onChange={handleChange}
+                sx={{ margin: 'auto' }}
+              />
+            )
             : null}
 
         </div>

client/src/pages/Bids/style.css

@@ -36,7 +36,7 @@
 .filter-container .MuiListItemButton-root{
   margin-left: 20px
 }
-.card-container{
+.product-card-container{
   width: 100%;
   display: flex;
   justify-content: space-between;

client/src/pages/ProductDetails/Style.css

@@ -48,8 +48,7 @@
     font-size: .8rem !important;
     margin: 20p 0 5px !important;
 }
-.open-btn
-{
+.open-btn {
     font-size: 14;
     border: 1px solid #000000 !important;
     border-radius: '25px';
@@ -70,4 +69,12 @@
 .card-product .css-1t6e9jv-MuiCardActions-root{
     font-size: 1rem;
     padding: 0 !important;
+}
+.card-product .css-l1pfs6 {
+    margin: 0 0 10px !important;
+    width: 80% !important;
+}
+.bid-action-btn .MuiButton-root{
+    margin: 20px 0 10px !important;
+    padding: 6px 10px !important;
 }

client/src/pages/ProductDetails/index.tsx

@@ -87,7 +87,7 @@ const ProductDetails : React.FC = () => {
                       className="open-btn"
                       size="small"
                     >
-                      {data.is_open ? 'open' : 'close'}
+                      {data.is_open ? 'open' : 'closed'}
                     </Button>
                   </div>
                   <Typography variant="subtitle2">
@@ -100,11 +100,11 @@ const ProductDetails : React.FC = () => {
                   <Typography sx={{ width: '85%', margin: '5px 0' }}>
                     {data.end_date && <Timer futureDate={new Date(data.end_date)} />}
                   </Typography>
-                  <Typography className="date">
+                  <Typography variant="subtitle2" className="date">
                     {`Auction ends: ${data.end_date}`}
                   </Typography>
                   { data?.is_open && (
-                  <CardActions>
+                  <CardActions className="bid-action-btn">
                     <BtnSocket priceBids={priceBids} setPriceBids={setPriceBids}>
                       Bid for +
                       {data.auc_inc_amount}

client/src/pages/index.tsx

@@ -0,0 +1,12 @@
+import Home from './Home';
+import Bids from './Bids';
+import ProductDetails from './ProductDetails';
+import SignIn from './SignIn';
+import SignUp from './SignUp';
+import UserEnteredBids from './UserEnteredBids';
+import UserProducts from './UserProducts';
+import UserWinBids from './UserWinBids';
+
+export {
+  Home, Bids, ProductDetails, SignIn, SignUp, UserEnteredBids, UserProducts, UserWinBids,
+};

client/src/pages/socket.io/index.tsx

@@ -7,7 +7,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/useAuth';
 import { useSnack } from '../../context/useSnack';
 
-const socket = io('http://localhost:7000');
+const socket = io('https://tech-bids.herokuapp.com', { withCredentials: true });
 
 interface Props {
   children: any,