Marcosbit93 · NicholasInchauspe2 · Mar 7, 2023 · Mar 8, 2023 · Mar 8, 2023 · Mar 8, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,20 +6,26 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.11",
+    "@mui/lab": "^5.0.0-alpha.122",
     "@mui/material": "^5.11.12",
+    "@mui/x-data-grid": "^6.0.1",
     "@reduxjs/toolkit": "^1.9.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.3.0",
     "axios": "^1.3.4",
     "firebase": "^9.17.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.0",
+    "react-redux": "^8.0.5",
     "react-router": "^6.8.2",
     "react-router-dom": "^6.8.2",
-    "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
+    "react-tagsinput": "^3.20.0",
     "redux": "^4.2.1",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -10,34 +10,11 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -36,3 +36,86 @@
     transform: rotate(360deg);
   }
 }
+
+.profileButton {
+  text-decoration: none;
+  color: #6e44ff;
+}
+
+.userProfileImage {
+ margin: 5rem 0 auto;
+ text-align: center;
+}
+
+
+.userProfileImg{
+  height: 300px;
+  width: 300px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-bottom: 3rem;
+}
+
+.btn {
+  margin: 2rem auto 0.7rem;
+  border-radius: 8px;
+  width: 20%;
+  height: 2rem;
+  border: 1px solid black;
+  background-color: #6e44ff;
+  color: white;
+  font-size: 18px;
+}
+
+.userProfileInfo {
+  margin: 0 auto 2rem;
+  padding-bottom: 2.5rem;
+  text-align: center;
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgb(196, 196, 196);
+  border-radius: 5px;
+}
+
+.userProfileSecurity {
+  margin: 0 auto 2rem;
+  text-align: center;
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgb(196, 196, 196);
+  padding-bottom: 1rem;
+  border-radius: 5px;
+}
+
+.inputForm{
+  width: 35%;
+  height: 2rem;
+  margin: 0.5rem auto;
+  border-radius: 5px;
+  border: 1px solid rgb(196, 196, 196);
+}
+
+.container{
+  width: 70%;
+  margin: 4rem auto;
+  padding-bottom: 3rem;
+  border-radius: 6px;
+}
+
+.newProductContainer{
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+  align-items: flex-end;
+  justify-content:flex-end;
+  width: 65%;
+}
+
+.productsContainer{
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  flex-direction: column;
+  margin: 0 auto;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,16 +1,46 @@
-import './App.css';
-import Auth from '../src/components/Auth'
-import { Route, Routes } from 'react-router';
-import { Navbar } from './components/Navbar';
+import "./App.css";
+import { Route, Routes } from "react-router";
+import { Navbar } from "./components/Navbar";
+import { LoginM } from "./components/Auth/LoginM";
+import { SignupM } from "./components/Auth/SignupM";
+import Profile from "./components/Profile";
+import Footer from "./components/Footer";
+import { Home } from "./components/Home";
+import { Toaster } from "react-hot-toast";
+import Checkout from "./components/Checkout/Checkout";
+import ErrorPage from "./components/ErrorPage";
+import DetailsCard from "./commons/DetailsCard";
+import AdminViewUser from "./components/Admin/AdminViewUser";
+import { HomeAdmin } from "./components/Admin/HomeAdmin";
+import AdminViewProduct from "./components/Admin/AdminViewProduct";
+import AdminViewArtist from "./components/Admin/AdminViewArtist";
+import AdminShoppingHistory from "./components/AdminShoppingHistory.";
 
 function App() {
   return (
-    <div>
-      <Navbar/>
+    <>
+      <div>
+        <Toaster />
+      </div>
+      <Navbar />
       <Routes>
-        <Route path='/auth' element={<Auth/>}/> 
-      </Routes>  
-    </div>
+        <Route path="/" element={<Home />} />
+        <Route path="/profile" element={<Profile />} />
+        <Route path="/login" element={<LoginM />} />
+        <Route path="/product/:id" element={<DetailsCard />} />
+        <Route path="/signup" element={<SignupM />} />
+        <Route path="/checkout" element={<Checkout />} />
+        <Route path="/admin" element={<HomeAdmin />} />
+        <Route path="/admin/product" element={<AdminViewProduct />} />
+        <Route path="/admin/user" element={<AdminViewUser />} />
+        <Route path="/admin/user/history/:id" element={<AdminShoppingHistory />} />
+        <Route path="/admin/artist" element={<AdminViewArtist />} />
+
+
+        <Route path="*" element={<ErrorPage />} />
+      </Routes>
+      <Footer />
+    </>
   );
 }
 

diff --git a/src/commons/AddButton.jsx b/src/commons/AddButton.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Fab from "@mui/material/Fab";
+import AddIcon from "@mui/icons-material/Add";
+
+export default function AddButton({ openModal }) {
+  return (
+    <Box>
+      <Fab color="primary" aria-label="add" >
+        <AddIcon
+          onClick={() => {
+            openModal();
+          }}
+        />
+      </Fab>
+    </Box>
+  );
+}
diff --git a/src/commons/DetailsCard.jsx b/src/commons/DetailsCard.jsx
@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import axios from "axios";
+import ProductReview from "./ProductReview";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Divider from "@mui/material/Divider";
+import Rating from "@mui/material/Rating";
+import Button from "@mui/material/Button";
+import AddShoppingCartOutlinedIcon from "@mui/icons-material/AddShoppingCartOutlined";
+import ArrowBackIosNewOutlinedIcon from "@mui/icons-material/ArrowBackIosNewOutlined";
+import { useDispatch, useSelector } from "react-redux";
+import { setCart } from "../state/cart";
+
+const DetailsCard = () => {
+  const [detail, setDetail] = useState({});
+  const cart = useSelector((state) => state.cart);
+  const location = useLocation();
+  const dispatch = useDispatch();
+  const userId = localStorage.getItem("id");
+  const starRound = useSelector((state) => state.review.reviewRound);
+
+  const handleAddCart = () => {
+    dispatch(setCart({ product: detail, quantity: 1 }));
+  };
+
+  const handleOnClick = () => {
+    window.history.back();
+  };
+
+  // refreso de pagina
+  useEffect(() => {
+    axios
+      .get(
+        `http://localhost:3001/api/product/${location.pathname.split("/")[2]}`
+      )
+      .then((detail) => {
+        setDetail(detail.data);
+      })
+      .catch((err) => console.error(err));
+  }, []);
+
+  useEffect(() => {
+    axios
+      .post(`http://localhost:3001/api/cart/${userId}/update/${detail.id}`, {
+        products: cart,
+      })
+      .catch((err) => console.error(err));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cart]);
+
+  return (
+    <>
+
+
+      <Button variant="text" onClick={handleOnClick} sx={{ px: 10 }}>
+        <ArrowBackIosNewOutlinedIcon color="black" /> GO BACK
+      </Button>
+      <div style={{ display: "flex" }}>
+        <CardMedia
+          component="img"
+          height="100%"
+          image={detail?.photo_url}
+          alt="print"
+          sx={{ boxShadow: 10, width: 600, margin: 10 }}
+        />
+        <CardContent>
+          <Divider
+            orientation="vertical"
+            textAlign="center"
+            sx={{ width: [100, 200, 300], mx: 20 }}
+          >
+            <React.Fragment>
+              <Typography component="legend"></Typography>
+              {!starRound  ? (
+                <Typography variant="subtitle1" color="text.secondary">No reviews yet</Typography>
+              ) : (
+                <Rating
+                  name="read-only"
+                  value={starRound}
+                  precision={0.5}
+                  readOnly
+                />
+              )}{" "}
+            </React.Fragment>
+            <Typography gutterBottom variant="h5" component="div">
+              {detail?.name}
+            </Typography>
+            <Typography variant="h5" color="text.secondary">
+              {detail?.artist?.title}
+            </Typography>
+            <Typography variant="subtitle1" color="text.secondary">
+              ${detail?.price}
+            </Typography>
+            <Typography variant="subtitle1" color="text.secondary">
+              {detail?.category}
+            </Typography>
+            <Typography variant="subtitle1" color="text.secondary">
+              {detail?.description}
+            </Typography>
+            <IconButton aria-label="add to favorites">
+              <AddShoppingCartOutlinedIcon onClick={handleAddCart} />
+            </IconButton>
+          </Divider>
+        </CardContent>
+      </div>
+      <div>
+        <ProductReview />
+      </div>
+    </>
+  );
+};
+
+export default DetailsCard;
diff --git a/src/commons/EditRemoveButtons.jsx b/src/commons/EditRemoveButtons.jsx
@@ -0,0 +1,49 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Fab from "@mui/material/Fab";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import axios from "axios";
+import { useDispatch } from "react-redux";
+import { setBooleano } from "../state/adminProduct";
+
+export default function EditRemoveButtons({ item, openModal }) {
+  const dispatch = useDispatch();
+
+  // funcion para destruir el item en el back
+  function handleClick() {
+    const userId = localStorage.getItem("id");
+    if (item.price) {
+      return axios
+        .delete(`http://localhost:3001/api/product/${userId}/${item.id}`)
+        .then((res) => {
+          dispatch(setBooleano());
+        });
+    } else if (item.uid) {
+      return axios
+        .delete(`http://localhost:3001/api/user/${userId}/delete/${item.id}`)
+        .then((res) => {
+          dispatch(setBooleano());
+        });
+    } else if (item.title) {
+      return axios
+        .delete(`http://localhost:3001/api/artist/${userId}/delete/${item.id}`)
+        .then((res) => {
+          dispatch(setBooleano());
+        });
+    }
+  }
+
+  return (
+    <Box sx={{ "& > :not(style)": { m: 1 }, margin: "auto auto auto 0" }}>
+      <Fab color="secondary" aria-label="edit">
+        <EditIcon onClick={() => openModal()} />
+      </Fab>
+      {!item.uid && (
+        <Fab color="error">
+          <DeleteIcon onClick={handleClick} />
+        </Fab>
+      )}
+    </Box>
+  );
+}