Valentin_Interfaz2

restapi/api.ts

@@ -38,6 +38,7 @@ api.post("/rocks/add", addRock);
 
 api.post("/rocks/delete", deleteRock);
 
+
 //Methods for product of the app
 api.get("/orders/userList/:userEmail", findOrdersByUserEmail);
 

restapi/controllers/RockController.ts

@@ -1,4 +1,5 @@
-import express, { Request, Response, Router } from 'express';
+import express, { json, Request, Response, Router } from 'express';
+import { stringify } from 'querystring';
 const Rock = require("../models/Rock");
 
 const mongoose = require("mongoose");
@@ -42,8 +43,52 @@ export const findRocksMetamorphic = async (req:Request, res:Response) => {
 };
 
 export const findByCritery = async (req:Request, res:Response) => {
-    let critery = req.body.critery;
-    const rocks = await Rock.find(critery)
+
+    let name=req.query.nameSubString;
+    name=name?.toString().trimEnd().trimStart()
+    let nameRegEx;
+    if(name!==undefined)
+        nameRegEx=new RegExp(name, "gi");
+    let critery = {
+        mohsHardness:
+        {
+            $gt:req.query.mohsMin,
+            $lt:req.query.mohsMax
+        },
+        density:
+        {
+            $gt:req.query.densityMin,
+            $lt:req.query.densityMax
+        },
+        price:
+        {
+            $gt:req.query.priceMin,
+            $lt:req.query.priceMax
+        },
+        name:
+        {
+            $regex:nameRegEx
+        },
+        type:
+        {
+            $regex:req.query.type
+        }
+    };
+    console.log(critery)
+    var rocks
+    try {
+        rocks = await Rock.find(critery)
+    } catch (error) {
+        console.log(error)
+        console.log("Values:"
+        +"\n\tmohsMin: "+req.query.mohsMin
+        +"\n\tmohsMax: "+req.query.mohsMax
+        +"\n\tdensityMin: "+req.query.densityMin
+        +"\n\tpriceMin: "+req.query.priceMin
+        +"\n\tpriceMax: "+req.query.priceMax
+        +"\n\tnameSubString: "+req.query.nameSubString)
+    }
+
     res.setHeader('Content-Type', 'application/json');
     res.status(200);
     res.send(rocks);

webapp/src/App.tsx

@@ -1,19 +1,14 @@
 
 //import { useQuery } from 'react-query';
-import Box from '@mui/material/Box';
 //import Link from '@mui/material/Link';
-import Grid from '@mui/material/Grid';
 
-import logo from './images/interfaz/logoRock.png';
-import Title from './components/titleUtil';
 
 
-import { createTheme, Drawer, List } from '@mui/material';
+import { Drawer } from '@mui/material';
 import { useState, useEffect } from 'react';
 import Welcome from './components/Welcome';
-import  {getRocas} from './api/api';
 import './css/App.css';
-import { Route, Routes, Navigate, BrowserRouter as Router, BrowserRouter } from "react-router-dom";
+import { Route, Routes, Navigate, BrowserRouter } from "react-router-dom";
 import {Rock} from './shared/shareddtypes';
 import Catalog from './components/Catalog';
 import { ThemeProvider } from '@emotion/react';
@@ -25,9 +20,6 @@ import { Container } from "@mui/material";
 
 import "./css/App.css"
 import ShoppingCart from "./components/ShoppingCart";
-import PaymentPage from "./components/payment/PaymentPage";
-import { ContentCopy } from "@mui/icons-material";
-import PaymentSummary from './components/payment/PaymentSummary';
 import PaymentProcess from './components/payment/PaymentPage';
 import OrderHistory from './components/Orders';
 
@@ -36,12 +28,6 @@ type Props = {
 };
 
 function App(): JSX.Element {
-  const [rocks, setRocks] = useState<Rock[]>([]);
-
-  const refreshRockList = async () => {
-    setRocks(await getRocas());
-  };
-
   // Shopping cart
   const [isNewCart, setNewCart] = useState(false);
   const [isCartOpen, setCartOpen] = useState(false);
@@ -98,20 +84,17 @@ function App(): JSX.Element {
     );
   };
 
-  useEffect(() => {
-    refreshRockList();
-  }, []);
   return (
     <ThemeProvider theme={theme}>
       <Container maxWidth="xl" className="principal">
         <NavBar openCart={() => setCartOpen(true)} />
         <BrowserRouter>
           <Routes>
-            <Route  path="/home" element={<Welcome handleAddToCart={handleAddToCart} />} />
+            <Route path="/home" element={<Welcome handleAddToCart={handleAddToCart} />} />
             <Route path="/" element={<Navigate replace to="/home" />} />
-            <Route path="/catalog" element={ <Catalog rocks={rocks} handleAddToCart={handleAddToCart} /> } />
+            <Route path="/catalog" element={ <Catalog handleAddToCart={handleAddToCart} /> } />
             <Route path="/orders" element={ <OrderHistory email={"[email protected]"}/> } />
-            <Route  path="/payment" element={ <PaymentProcess cartContent={cartContent} setNewCart={setNewCart} /> } />
+            <Route path="/payment" element={ <PaymentProcess cartContent={cartContent} setNewCart={setNewCart} /> } />
             <Route path="/login" element={<LogIn />} />
             <Route path="/register" element={<Register />} />
             <Route path="/logout" element ={<Welcome handleAddToCart={handleAddToCart} />}/>

webapp/src/api/api.ts

@@ -1,7 +1,8 @@
 import {User, Rock, Order} from '../shared/shareddtypes';
 
+const apiEndPoint =process.env.REACT_APP_API_URI || 'http://localhost:5000/api';
+
 export async function addUser(user:User):Promise<boolean>{
-    const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
     let response = await fetch(apiEndPoint+'/users/add', {
         method: 'POST',
         headers: {'Content-Type':'application/json'},
@@ -14,14 +15,12 @@ export async function addUser(user:User):Promise<boolean>{
 }
 
 export async function getUsers():Promise<User[]>{
-    const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
     let response = await fetch(apiEndPoint+'/users/list');
     //The objects returned by the api are directly convertible to User objects
     return response.json()
 }
 
 export async function getRocas():Promise<Rock[]>{
-  const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
   let response = await fetch(apiEndPoint+'/rocks/list');
   //The objects returned by the api are directly convertible to User objects
   return response.json()
@@ -36,26 +35,31 @@ export async function getRocksById(rockId:String):Promise<Rock[]>{
 
 
 export async function getRocksSedimentary():Promise<Rock[]>{
-  const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
   let response = await fetch(apiEndPoint+'/rocks/list/sedimentary');
   //The objects returned by the api are directly convertible to User objects
   return response.json()
 }
 export async function getRocksFiery():Promise<Rock[]>{
-  const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
   let response = await fetch(apiEndPoint+'/rocks/list/fiery');
   //The objects returned by the api are directly convertible to User objects
   return response.json()
 }
 export async function getRocksMetamorphic():Promise<Rock[]>{
-  const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
   let response = await fetch(apiEndPoint+'/rocks/list/metamorphic');
   //The objects returned by the api are directly convertible to User objects
   return response.json()
 }
-
+export async function getFilteredRocks(mohsMin:Number,mohsMax:Number,densityMin:Number,densityMax:Number,priceMin:Number,priceMax:Number,nameSubString:string,type:string):Promise<Rock[]> {
+  let response = await fetch(apiEndPoint+'/rocks/list/critery?mohsMin='+mohsMin+"&mohsMax="+mohsMax+"&densityMin="+densityMin+"&densityMax="+densityMax+"&priceMin="+priceMin+"&priceMax="+priceMax+"&nameSubString="+nameSubString+"&type="+type);
+  //The objects returned by the api are directly convertible to User objects
+  return response.json()
+}
+export async function getMaxAndMins() {
+  let response = await fetch(apiEndPoint+'/rocks/maxvalues');
+  //The objects returned by the api are directly convertible to User objects
+  return response.json()
+}
 export async function checkUser(email:String,password:String):Promise<boolean>{
-  const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
   let response = await fetch(apiEndPoint+'/users/login', {
       method: 'POST',
       headers: {'Content-Type':'application/json'},

webapp/src/components/Catalog.tsx

@@ -1,23 +1,139 @@
-import {Rock} from '../shared/shareddtypes';
-import List from '@mui/material/List';
-import Product from './Product';
-
+import { Rock } from "../shared/shareddtypes";
+import Product from "./Product";
+import {
+  Accordion,
+  AccordionSummary,
+  Grid,
+  Typography,
+} from "@mui/material";
+import { getFilteredRocks } from "../api/api";
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import React from "react";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Filter, { defaultCriteryForSearch } from "./Filter";
 type RockListProps = {
-  rocks: Rock[];
-  handleAddToCart(rock:Rock): void;
+  handleAddToCart(rock: Rock): void;
+  testRocks?: Rock[];
 };
+
+
+
+function useQuery() {
+  const { search } = useLocation();
+
+  return React.useMemo(() => new URLSearchParams(search), [search]);
+}
 //a
-function Catalogo(rocks: RockListProps): JSX.Element {
+function Catalog(rockListPros: RockListProps): JSX.Element {
+  let query = useQuery();
+
+  const [rocks, setRocks] = useState<Rock[]>([]);
+
+
+  //?densityMin=1&densityMax=3
+  const refreshRockList = async () => {
+    const mohsMinStr = query.get("mohsMin"),
+      mohsMaxStr = query.get("mohsMax"),
+      densityMinStr = query.get("densityMin"),
+      densityMaxStr = query.get("densityMax"),
+      priceMinStr = query.get("priceMin"),
+      priceMaxStr = query.get("pirceMax");
+    var nameSubstring = query.get("nameSubstring");
+    var typeSearched = query.get("type");
+
+    nameSubstring =
+      nameSubstring === null || nameSubstring === "undefined"
+        ? ""
+        : nameSubstring;
+
+    typeSearched =
+      typeSearched === null ||
+      typeSearched === "undefined" ||
+      typeSearched === "todas"
+        ? ""
+        : typeSearched;
+    let mohsMin: number,
+      mohsMax: number,
+      densityMin: number,
+      densityMax: number,
+      priceMin: number,
+      priceMax: number;
+
+    if (mohsMinStr !== undefined && mohsMinStr !== null)
+      mohsMin = parseFloat(mohsMinStr);
+    else mohsMin = defaultCriteryForSearch.mohsMin;
+
+    if (mohsMaxStr !== undefined && mohsMaxStr !== null)
+      mohsMax = parseFloat(mohsMaxStr);
+    else mohsMax = defaultCriteryForSearch.mohsMax;
+
+    if (densityMinStr !== undefined && densityMinStr !== null)
+      densityMin = parseFloat(densityMinStr);
+    else densityMin = defaultCriteryForSearch.densityMin;
+
+    if (densityMaxStr !== undefined && densityMaxStr !== null)
+      densityMax = parseFloat(densityMaxStr);
+    else densityMax = defaultCriteryForSearch.densityMax;
+
+    if (priceMinStr !== undefined && priceMinStr !== null)
+      priceMin = parseFloat(priceMinStr);
+    else priceMin = defaultCriteryForSearch.priceMin;
+
+    if (priceMaxStr !== undefined && priceMaxStr !== null)
+      priceMax = parseFloat(priceMaxStr);
+    else priceMax = defaultCriteryForSearch.priceMax;
+    if (rockListPros.testRocks === undefined)
+      setRocks(
+        await getFilteredRocks(
+          mohsMin,
+          mohsMax,
+          densityMin,
+          densityMax,
+          priceMin,
+          priceMax,
+          nameSubstring,
+          typeSearched
+        )
+      );
+    else setRocks(rockListPros.testRocks);
+  };
+
+
+
+  useEffect(() => {
+    refreshRockList();
+  }, []);
+  //TODO: El nameSubstring se come la ultima letra
+
   return (
     <>
-      <List id="catalog">
-      {rocks.rocks.map((rock,index)=>{
-        return <Product product={rock} buyable={true} handleAddToCart={rocks.handleAddToCart}/>
-      })}
-      </List>
-
+      <Accordion id="accordeonFilter">
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography>Filtrar</Typography>
+        </AccordionSummary>
+        <Filter refreshRockList={refreshRockList}/>
+      </Accordion>
+      <Grid container spacing={3} rowSpacing={7} padding={2}>
+        {rocks.map((rock, index) => {
+          return (
+            <Grid item xs={3} key={index}>
+            <Product
+              product={rock}
+
+              buyable={true}
+              handleAddToCart={rockListPros.handleAddToCart}
+            />
+            </Grid>
+          );
+        })}
+      </Grid>
     </>
   );
 }
 
-export default Catalogo;
+export default Catalog;