From 5439a3eda5302d26c5038ad1de13bc6c5e8dfcdf Mon Sep 17 00:00:00 2001
From: Timi2424 <tymonbieganski@wp.pl>
Date: Thu, 22 Feb 2024 14:06:59 +0100
Subject: [PATCH 1/2] Added better sequelize clause, modified layout to display
 searched products

---
 my-app/package.json                           |  1 +
 .../components/searchDrawer/SearchDrawer.tsx  | 84 +++++++++++++------
 my-app/src/utils/fetchHelper.ts               |  2 +-
 server/src/service/products.service.ts        | 12 ++-
 4 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/my-app/package.json b/my-app/package.json
index 2bb3651f..efad0b89 100644
--- a/my-app/package.json
+++ b/my-app/package.json
@@ -7,6 +7,7 @@
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.11.11",
+    "@mui/joy": "^5.0.0-beta.28",
     "@mui/material": "5.15.7",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "13.4.0",
diff --git a/my-app/src/components/searchDrawer/SearchDrawer.tsx b/my-app/src/components/searchDrawer/SearchDrawer.tsx
index 2a7203af..1b2767cc 100644
--- a/my-app/src/components/searchDrawer/SearchDrawer.tsx
+++ b/my-app/src/components/searchDrawer/SearchDrawer.tsx
@@ -1,21 +1,39 @@
-import { Box, Drawer, IconButton, Input, Typography } from "@mui/material";
+import { Box, CardMedia, Drawer, IconButton, Input, Typography } from "@mui/material";
 import SearchIcon from '@mui/icons-material/Search';
 import EastIcon from '@mui/icons-material/East';
 import CloseIcon from '@mui/icons-material/Close';
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { getQueryProducts } from "../../utils/fetchHelper";
+import { Product } from '../../types/Product';
 
 const SearchDrawer = () => {
     const [isDraweOpen, setIsDrawerOpen] = useState<boolean>(false);
     const [searchKeys, setSearchKeys] = useState('');
+    const [searchedData, setSearchedData] = useState<Product[]>([]);
+    const [loader, setLoader] = useState<boolean>(false)
 
+    
+    useEffect(() => {
+      const getproducts = async () => {
+        try {
+          setLoader(true)
+          const response = await getQueryProducts(searchKeys)
+          setSearchedData(response)
+        } catch (error) {
+          console.error('Error fetching data:', error);
+        } finally {
+          setLoader(false)
+        }
+      }
+  
+      getproducts();
+    }, [searchKeys]);
+  
     const handleSearchInput: React.ChangeEventHandler<HTMLInputElement>= (event) => {
       setSearchKeys(event.target.value)
-      setTimeout(() => {
-        getQueryProducts(searchKeys);
-      }, 1000);
     }
+
     
     const linkBoxStyle = {
       display: "block",
@@ -29,7 +47,7 @@ const SearchDrawer = () => {
     }
 
     const searchContainerStyle = {
-      minHeight: "400px",
+      minHeight: "100px",
       display: "flex",
       alignContent: "center",
       justifyContent: "center",
@@ -94,15 +112,6 @@ const SearchDrawer = () => {
 
     return (
       <>
-        <input
-              type="text"
-              id="search-query"
-              className="input"
-              placeholder="Type search word"
-              value={searchKeys}
-              onChange={handleSearchInput}
-        />
-
         <IconButton 
           onClick={toggleDrawer(true)}
           disableRipple
@@ -138,35 +147,56 @@ const SearchDrawer = () => {
                 <Box
                   sx={inputStyle}
                   >
-                  <Input autoFocus fullWidth></Input>
+                  <Input 
+                    fullWidth
+                    id="search-query"
+                    placeholder="Search"
+                    value={searchKeys}
+                    onChange={handleSearchInput}
+                  />
                 </Box>
                 
               </Box>
               </Box>
-              
               <Box display="grid">
+              {searchedData.map(product =>
                 <Box
+                  key={product.id}
                   style={linkBoxStyle}
                   onMouseEnter={handleMouseEnter} 
                   onMouseLeave={handleMouseLeave}
                   onClick={toggleDrawer(false)}
+                  
                 >
+                  
                   <Link 
                     style={linkStyle}
-                    to={`/phones/apple-iphone-8-64gb-gold`}
+                    to={`/phones/${product.itemId}`}
                     onClick={toggleDrawer(false)}
                   >
-                    <IconButton disableRipple>
-                      <EastIcon sx={eastIconStyle}/>
-                    </IconButton>
-                      <Typography color="primary.main" display="inline"
-                      sx={{backgroundColor: "none"}}>
-                      Apple iPhone 8 64GB Gold
-                      </Typography>
+                    <Box sx={{display:"flex", alignItems:"center", gap:"10px"}}>
+                      <IconButton disableRipple>
+                        <EastIcon sx={eastIconStyle}/>
+                      </IconButton>
+                      <CardMedia
+                          component="img"
+                          sx={{
+                            objectFit: 'contain',
+                            width:{sm:'50px'},
+                            justifyContent: 'center',
+                            height:{sm:'50px'},
+                          }}
+                          src={product.image}
+                        />
+                        <Typography 
+                          color="primary.main" display="inline"
+                          sx={{backgroundColor: "none", justifyContent:"center", alignItems:"center"}}>
+                              {product.name}
+                        </Typography>
+                    </Box>       
                   </Link>
                 </Box>
-
-
+              )}
               </Box>
             </Box>
           </Box>
diff --git a/my-app/src/utils/fetchHelper.ts b/my-app/src/utils/fetchHelper.ts
index 42ac4d78..6fd0d4e9 100644
--- a/my-app/src/utils/fetchHelper.ts
+++ b/my-app/src/utils/fetchHelper.ts
@@ -33,7 +33,7 @@ export const getSortedProducts = async (
 }
 
 export const getQueryProducts = async (query: string) => {
-  const response = await axios.get(`https://phone-catalog-f9j4.onrender.com/products/search/${query}`);
+  const response = await axios.get(`http://localhost:5001/products/search/${query}`);
   return response.data;
 };
 
diff --git a/server/src/service/products.service.ts b/server/src/service/products.service.ts
index 4bc2e61b..83f2efa7 100644
--- a/server/src/service/products.service.ts
+++ b/server/src/service/products.service.ts
@@ -1,6 +1,7 @@
-import { FindOptions, Op } from 'sequelize';
+import { FindOptions, Op, col, fn } from 'sequelize';
 import Product from '../model/product.model';
 import SortType from '../types/sortType';
+import sequelize from 'sequelize/lib/sequelize';
 
 const getAllProducts= async() => {
 
@@ -16,8 +17,13 @@ const getProductByID= async(itemId: string) => {
 };
 
 const getProductsByQuery= async(query: string) => {
-    return Product.findAll({where : {name : {[Op.like]: `%${query}%`}}});
-};
+    return Product.findAll({
+        limit: 5,
+        where: {
+            name: sequelize.where(sequelize.fn('LOWER', sequelize.col('name')), 'LIKE', '%' + query.toLocaleLowerCase() + '%')
+        }
+    })
+}
 
 const sortProducts = async (categoryType: string, sortType: string, startIndex: number, limitIndex: number) => {
     let orderOptions:  FindOptions<Product>['order'] = [];

From ab778920f5e9271a1fe55a3a3aabe3091a4834b3 Mon Sep 17 00:00:00 2001
From: Timi2424 <tymonbieganski@wp.pl>
Date: Thu, 22 Feb 2024 14:09:21 +0100
Subject: [PATCH 2/2] fixed axios get path

---
 my-app/src/utils/fetchHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/my-app/src/utils/fetchHelper.ts b/my-app/src/utils/fetchHelper.ts
index 6fd0d4e9..42ac4d78 100644
--- a/my-app/src/utils/fetchHelper.ts
+++ b/my-app/src/utils/fetchHelper.ts
@@ -33,7 +33,7 @@ export const getSortedProducts = async (
 }
 
 export const getQueryProducts = async (query: string) => {
-  const response = await axios.get(`http://localhost:5001/products/search/${query}`);
+  const response = await axios.get(`https://phone-catalog-f9j4.onrender.com/products/search/${query}`);
   return response.data;
 };