Merge pull request #88 from PL-FE-SEP23-JANUSZ3X/UI-search-functionality

Added better sequelize clause, modified layout to display searched pr…
PL-FE-SEP23-JANUSZ3X · Feb 22, 2024 · f5c3486 · f5c3486
2 parents 8ce2ce9 + ab77892
commit f5c3486
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 30 deletions.
diff --git 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
@@ -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/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'] = [];