From 01facb5c25fb981e527eafdb30c09cd9118e9976 Mon Sep 17 00:00:00 2001
From: nospeedlimitindonesia <nospeedlimitindonesia@gmail.com>
Date: Sat, 27 Jul 2024 19:15:59 +0000
Subject: [PATCH] works like a charm

---
 src/App.js                       |  37 +++++++-
 src/components/Footer.js         |  70 +++++++++------
 src/components/SearchInput.js    | 150 ++++++++++++++++++++-----------
 src/config.js                    |   2 +-
 src/helpers/navigationHelpers.js |   5 ++
 src/pages/CafePage.js            |   2 +-
 src/pages/SearchResult.js        |  58 ++++++++++++
 7 files changed, 238 insertions(+), 86 deletions(-)
 create mode 100644 src/pages/SearchResult.js

diff --git a/src/App.js b/src/App.js
index 1c5f0d3..ed0bbf3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,6 +14,7 @@ import socket from "./services/socketService";
 import Dashboard from "./pages/Dashboard";
 import LoginPage from "./pages/LoginPage";
 import CafePage from "./pages/CafePage";
+import SearchResult from "./pages/SearchResult";
 import Cart from "./pages/Cart";
 import Invoice from "./pages/Invoice";
 import Footer from "./components/Footer";
@@ -187,7 +188,29 @@ function App() {
                   guestSideOfClerk={guestSideOfClerk} // if being guest side
                   removeConnectedGuestSides={(e) => rmConnectedGuestSides(e)}
                 />
-                <Footer shopId={shopId} cartItemsLength={totalItemsCount} />
+                <Footer
+                  shopId={shopId}
+                  cartItemsLength={totalItemsCount}
+                  selectedPage={0}
+                />
+              </>
+            }
+          />
+          <Route
+            path="/:shopId/search"
+            element={
+              <>
+                <SearchResult
+                  user={user} // if logged
+                  guestSides={guestSides} // if being clerk
+                  guestSideOfClerk={guestSideOfClerk} // if being guest side
+                  removeConnectedGuestSides={(e) => rmConnectedGuestSides(e)}
+                />
+                <Footer
+                  shopId={shopId}
+                  cartItemsLength={totalItemsCount}
+                  selectedPage={1}
+                />
               </>
             }
           />
@@ -199,7 +222,11 @@ function App() {
                   sendParam={handleSetParam}
                   totalItemsCount={totalItemsCount}
                 />
-                <Footer shopId={shopId} cartItemsLength={totalItemsCount} />
+                <Footer
+                  shopId={shopId}
+                  cartItemsLength={totalItemsCount}
+                  selectedPage={2}
+                />
               </>
             }
           />
@@ -208,7 +235,11 @@ function App() {
             element={
               <>
                 <Invoice sendParam={handleSetParam} deviceType={deviceType} />
-                <Footer shopId={shopId} cartItemsLength={totalItemsCount} />
+                <Footer
+                  shopId={shopId}
+                  cartItemsLength={totalItemsCount}
+                  selectedPage={2}
+                />
               </>
             }
           />
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 39d0242..15058f3 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,43 +1,59 @@
-import React from 'react';
-import styles from './Footer.module.css'; // assuming you have a CSS module for Footer
-import { useNavigationHelpers } from '../helpers/navigationHelpers';
+import React from "react";
+import styles from "./Footer.module.css"; // assuming you have a CSS module for Footer
+import { useNavigationHelpers } from "../helpers/navigationHelpers";
 
-export default function Footer({ shopId, cartItemsLength}) {
-  const { goToShop, goToCart } = useNavigationHelpers(shopId);
+export default function Footer({ shopId, cartItemsLength, selectedPage }) {
+  const { goToShop, goToSearch, goToCart } = useNavigationHelpers(shopId);
 
   return (
     <div className={styles.item}>
-      <div className={styles['footer-rect']}>
-        {/* SVG elements */}
-        <div onClick={goToShop} className={styles['footer-icon']}>
-          <svg viewBox="0 0 34 34">
-            <path d="M14.0834 29.1667V18.9167H20.9167V29.1667H29.4584V15.5H34.5834L17.5001 0.125L0.416748 15.5H5.54175V29.1667H14.0834Z" fill="#8F8787" />
+      <div className={styles["footer-rect"]}>
+        {/* Shop Icon */}
+        <div onClick={goToShop} className={styles["footer-icon"]}>
+          <svg
+            viewBox="0 0 34 34"
+            style={{ fill: selectedPage === 0 ? "black" : "#8F8787" }}
+          >
+            <path d="M14.0834 29.1667V18.9167H20.9167V29.1667H29.4584V15.5H34.5834L17.5001 0.125L0.416748 15.5H5.54175V29.1667H14.0834Z" />
           </svg>
         </div>
-        <div className={styles['footer-icon']}>
-          <svg viewBox="0 0 34 34">
-            <path d="M20.8333 18.3333H19.5167L19.05 17.8833C20.6833 15.9833 21.6667 13.5167 21.6667 10.8333C21.6667 4.85 16.8167 0 10.8333 0C4.85 0 0 4.85 0 10.8333C0 16.8167 4.85 21.6667 10.8333 21.6667C13.5167 21.6667 15.9833 20.6833 17.8833 19.05L18.3333 19.5167V20.8333L26.6667 29.15L29.15 26.6667L20.8333 18.3333ZM10.8333 18.3333C6.68333 18.3333 3.33333 14.9833 3.33333 10.8333C3.33333 6.68333 6.68333 3.33333 10.8333 3.33333C14.9833 3.33333 18.3333 6.68333 18.3333 10.8333C18.3333 14.9833 14.9833 18.3333 10.8333 18.3333Z" fill="#8F8787" />
-          </svg>
-        </div>
-        <div onClick={goToCart} className={styles['footer-icon']}>
-          {cartItemsLength != '0' &&
-            <div class={styles["circle"]}>
-            {cartItemsLength}
-            </div>
-          }
 
-          <svg viewBox="0 0 34 34">
-            <path d="M9.79175 24.75C8.09591 24.75 6.72383 26.1375 6.72383 27.8333C6.72383 29.5292 8.09591 30.9167 9.79175 30.9167C11.4876 30.9167 12.8751 29.5292 12.8751 27.8333C12.8751 26.1375 11.4876 24.75 9.79175 24.75ZM0.541748 0.0833435V3.16668H3.62508L9.17508 14.8679L7.09383 18.645C6.84717 19.0767 6.70842 19.5854 6.70842 20.125C6.70842 21.8208 8.09591 23.2083 9.79175 23.2083H28.2917V20.125H10.4392C10.2234 20.125 10.0538 19.9554 10.0538 19.7396L10.1001 19.5546L11.4876 17.0417H22.973C24.1292 17.0417 25.1467 16.4096 25.6709 15.4538L31.1901 5.44834C31.3134 5.23251 31.3751 4.97043 31.3751 4.70834C31.3751 3.86043 30.6813 3.16668 29.8334 3.16668H7.03217L5.583 0.0833435H0.541748ZM25.2084 24.75C23.5126 24.75 22.1405 26.1375 22.1405 27.8333C22.1405 29.5292 23.5126 30.9167 25.2084 30.9167C26.9042 30.9167 28.2917 29.5292 28.2917 27.8333C28.2917 26.1375 26.9042 24.75 25.2084 24.75Z" fill="#8F8787" />
+        {/* Search Icon */}
+        <div onClick={goToSearch} className={styles["footer-icon"]}>
+          <svg
+            viewBox="0 0 34 34"
+            style={{ fill: selectedPage === 1 ? "black" : "#8F8787" }}
+          >
+            <path d="M20.8333 18.3333H19.5167L19.05 17.8833C20.6833 15.9833 21.6667 13.5167 21.6667 10.8333C21.6667 4.85 16.8167 0 10.8333 0C4.85 0 0 4.85 0 10.8333C0 16.8167 4.85 21.6667 10.8333 21.6667C13.5167 21.6667 15.9833 20.6833 17.8833 19.05L18.3333 19.5167V20.8333L26.6667 29.15L29.15 26.6667L20.8333 18.3333ZM10.8333 18.3333C6.68333 18.3333 3.33333 14.9833 3.33333 10.8333C3.33333 6.68333 6.68333 3.33333 10.8333 3.33333C14.9833 3.33333 18.3333 6.68333 18.3333 10.8333C18.3333 14.9833 14.9833 18.3333 10.8333 18.3333Z" />
           </svg>
         </div>
-        <div className={styles['footer-icon']}>
-          <svg viewBox="0 0 34 34">
-            <path d="M15.9842 0.166656C7.24421 0.166656 0.150879 7.25999 0.150879 16C0.150879 24.74 7.24421 31.8333 15.9842 31.8333C24.7242 31.8333 31.8175 24.74 31.8175 16C31.8175 7.25999 24.7242 0.166656 15.9842 0.166656ZM21.7 10.205C23.3942 10.205 24.7559 11.5667 24.7559 13.2608C24.7559 14.955 23.3942 16.3167 21.7 16.3167C20.0059 16.3167 18.6442 14.955 18.6442 13.2608C18.6284 11.5667 20.0059 10.205 21.7 10.205ZM12.2 7.70332C14.2584 7.70332 15.9367 9.38166 15.9367 11.44C15.9367 13.4983 14.2584 15.1767 12.2 15.1767C10.1417 15.1767 8.46338 13.4983 8.46338 11.44C8.46338 9.36582 10.1259 7.70332 12.2 7.70332ZM12.2 22.1592V28.0967C8.40005 26.9092 5.39171 23.98 4.06171 20.2433C5.72421 18.47 9.87255 17.5675 12.2 17.5675C13.0392 17.5675 14.1 17.6942 15.2084 17.9158C12.6117 19.2933 12.2 21.1142 12.2 22.1592ZM15.9842 28.6667C15.5567 28.6667 15.145 28.6508 14.7334 28.6033V22.1592C14.7334 19.9108 19.3884 18.7867 21.7 18.7867C23.3942 18.7867 26.3234 19.4042 27.78 20.6075C25.9275 25.31 21.3517 28.6667 15.9842 28.6667Z" fill="#8F8787" />
+
+        {/* Cart Icon */}
+        <div onClick={goToCart} className={styles["footer-icon"]}>
+          {cartItemsLength !== "0" && (
+            <div className={styles.circle}>{cartItemsLength}</div>
+          )}
+          <svg
+            viewBox="0 0 34 34"
+            style={{ fill: selectedPage === 2 ? "black" : "#8F8787" }}
+          >
+            <path d="M9.79175 24.75C8.09591 24.75 6.72383 26.1375 6.72383 27.8333C6.72383 29.5292 8.09591 30.9167 9.79175 30.9167C11.4876 30.9167 12.8751 29.5292 12.8751 27.8333C12.8751 26.1375 11.4876 24.75 9.79175 24.75ZM0.541748 0.0833435V3.16668H3.62508L9.17508 14.8679L7.09383 18.645C6.84717 19.0767 6.70842 19.5854 6.70842 20.125C6.70842 21.8208 8.09591 23.2083 9.79175 23.2083H28.2917V20.125H10.4392C10.2234 20.125 10.0538 19.9554 10.0538 19.7396L10.1001 19.5546L11.4876 17.0417H22.973C24.1292 17.0417 25.1467 16.4096 25.6709 15.4538L31.1901 5.44834C31.3134 5.23251 31.3751 4.97043 31.3751 4.70834C31.3751 3.86043 30.6813 3.16668 29.8334 3.16668H7.03217L5.583 0.0833435H0.541748ZM25.2084 24.75C23.5126 24.75 22.1405 26.1375 22.1405 27.8333C22.1405 29.5292 23.5126 30.9167 25.2084 30.9167C26.9042 30.9167 28.2917 29.5292 28.2917 27.8333C28.2917 26.1375 26.9042 24.75 25.2084 24.75Z" />
           </svg>
         </div>
+
+        {/* Profile Icon */}
+        <div className={styles["footer-icon"]}>
+          <svg
+            viewBox="0 0 34 34"
+            style={{ fill: selectedPage === 3 ? "black" : "#8F8787" }}
+          >
+            <path d="M15.9842 0.166656C7.24421 0.166656 0.150879 7.25999 0.150879 16C0.150879 24.74 7.24421 31.8333 15.9842 31.8333C24.7242 31.8333 31.8175 24.74 31.8175 16C31.8175 7.25999 24.7242 0.166656 15.9842 0.166656ZM21.7 10.205C23.3942 10.205 24.7559 11.5667 24.7559 13.2608C24.7559 14.955 23.3942 16.3167 21.7 16.3167C20.0059 16.3167 18.6442 14.955 18.6442 13.2608C18.6284 11.5667 20.0059 10.205 21.7 10.205ZM12.2 7.70332C14.2584 7.70332 15.9367 9.38166 15.9367 11.44C15.9367 13.4983 14.2584 15.1767 12.2 15.1767C10.1417 15.1767 8.46338 13.4983 8.46338 11.44C8.46338 9.36582 10.1259 7.70332 12.2 7.70332ZM12.2 22.1592V28.0967C8.40005 26.9092 5.39171 23.98 4.06171 20.2433C5.72421 18.47 9.87255 17.5675 12.2 17.5675C13.0392 17.5675 14.1 17.6942 15.2084 17.9158C12.6117 19.2933 12.2 21.1142 12.2 22.1592ZM15.9842 28.6667C15.5567 28.6667 15.145 28.6508 14.7334 28.6033V22.1592C14.7334 19.9108 19.3884 18.7867 21.7 18.7867C23.3942 18.7867 26.3234 19.4042 27.78 20.6075C25.9275 25.31 21.3517 28.6667 15.9842 28.6667Z" />
+          </svg>
+        </div>
+
         {/* Add more SVG elements as needed */}
       </div>
-      <div className={styles['footer-bottom']}></div>
+      <div className={styles["footer-bottom"]}></div>
     </div>
   );
 }
diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
index e701f35..a09098e 100644
--- a/src/components/SearchInput.js
+++ b/src/components/SearchInput.js
@@ -1,72 +1,114 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
+import React, { useState, useEffect, useRef } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import styled from "styled-components";
 
-// Styled component for the search box container
+// Styled components
 const SearchBox = styled.div`
-    display: flex;
-    align-items: center;
-    padding: 5px;
+  display: flex;
+  align-items: center;
+  padding: 5px;
 `;
 
-// Styled component for the container of input and icon
 const SearchContainer = styled.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    margin: 0px 10px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  margin: 0px 10px;
 `;
 
-// Styled component for the input field
 const Searchinput = styled.input`
-    flex-grow: 1;
-    border: none;
-    border-radius: 25px;
-    padding: 12px 40px;
-    font-size: 16px;
-    outline: none;
-    background-color: white;
-    border: 1px solid #ccc; /* Add border to the input field */
-    transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition effect */
+  flex-grow: 1;
+  border: none;
+  border-radius: 25px;
+  padding: 12px 40px;
+  font-size: 16px;
+  outline: none;
+  background-color: white;
+  border: 1px solid #ccc;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
 
-    &:focus {
-        background-color: lightgray; /* Change background color when focused */
-    }
+  &:focus {
+    background-color: lightgray;
+  }
 `;
 
-// Styled component for the search icon
 const SearchIcon = styled.svg`
-    position: absolute;
-    left: 10px;
-    fill: #888;
-    width: 20px;
-    height: 20px;
-    pointer-events: none;
+  position: absolute;
+  left: 10px;
+  fill: #888;
+  width: 20px;
+  height: 20px;
+  pointer-events: none;
 `;
 
-// Adjust icon hover state
-SearchContainer.hover = styled(SearchContainer)`
-    ${SearchIcon} {
-        fill: #555;
+export default function SearchInput({ shopId, autofocus }) {
+  const [songName, setSongName] = useState("");
+  const [debouncedSongName, setDebouncedSongName] = useState("");
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const inputRef = useRef(null);
+  const [siteLoaded, setSiteLoaded] = useState(false);
+
+  // Initialize the input field with the query parameter from the URL
+  useEffect(() => {
+    setTimeout(function () {
+      setSiteLoaded(true);
+    }, 5000);
+  }, []);
+
+  useEffect(() => {
+    const query = searchParams.get("query") || "";
+    if (autofocus) setSongName(query);
+    setSiteLoaded(true);
+  }, [searchParams]);
+
+  useEffect(() => {
+    if (siteLoaded) {
+      //Start the timer
+      if (autofocus)
+        navigate(`/${shopId}/search?query=${encodeURIComponent(songName)}`);
+      else if (songName != "")
+        navigate(`/${shopId}/search?query=${encodeURIComponent(songName)}`);
+
+      if (autofocus) {
+        if (songName == "") {
+          navigate(`/${shopId}`);
+        }
+      }
     }
-`;
+  }, [songName]);
 
-export default function SearchInput() {
-    const [currentTime, setCurrentTime] = useState(0);
+  const handleChange = (event) => {
+    setSongName(event.target.value);
+  };
 
-    return (
-        <SearchBox>
-            <SearchContainer>
-                <Searchinput type="text" placeholder="Search..." />
-                <SearchIcon
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        d="M20.8333 18.3333H19.5167L19.05 17.8833C20.6833 15.9833 21.6667 13.5167 21.6667 10.8333C21.6667 4.85 16.8167 0 10.8333 0C4.85 0 0 4.85 0 10.8333C0 16.8167 4.85 21.6667 10.8333 21.6667C13.5167 21.6667 15.9833 20.6833 17.8833 19.05L18.3333 19.5167V20.8333L26.6667 29.15L29.15 26.6667L20.8333 18.3333ZM10.8333 18.3333C6.68333 18.3333 3.33333 14.9833 3.33333 10.8333C3.33333 6.68333 6.68333 3.33333 10.8333 3.33333C14.9833 3.33333 18.3333 6.68333 18.3333 10.8333C18.3333 14.9833 14.9833 18.3333 10.8333 18.3333Z"
-                    />
-                </SearchIcon>
-            </SearchContainer>
-        </SearchBox>
-    );
+  // Navigate only when the debouncedSongName changes
+  useEffect(() => {}, [debouncedSongName, navigate]);
+
+  // Handle input change
+
+  // Focus input when component mounts
+  useEffect(() => {
+    if (autofocus) if (inputRef.current) inputRef.current.focus();
+  }, []);
+
+  return (
+    <SearchBox>
+      <SearchContainer>
+        <Searchinput
+          ref={inputRef}
+          type="text"
+          placeholder="Search..."
+          value={songName}
+          onChange={handleChange}
+        />
+        <SearchIcon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path d="M20.8333 18.3333H19.5167L19.05 17.8833C20.6833 15.9833 21.6667 13.5167 21.6667 10.8333C21.6667 4.85 16.8167 0 10.8333 0C4.85 0 0 4.85 0 10.8333C0 16.8167 4.85 21.6667 10.8333 21.6667C13.5167 21.6667 15.9833 20.6833 17.8833 19.05L18.3333 19.5167V20.8333L26.6667 29.15L29.15 26.6667L20.8333 18.3333ZM10.8333 18.3333C6.68333 18.3333 3.33333 14.9833 3.33333 10.8333C3.33333 6.68333 6.68333 3.33333 10.8333 3.33333C14.9833 3.33333 18.3333 6.68333 18.3333 10.8333C18.3333 14.9833 14.9833 18.3333 10.8333 18.3333Z" />
+        </SearchIcon>
+      </SearchContainer>
+    </SearchBox>
+  );
 }
diff --git a/src/config.js b/src/config.js
index 8b740ee..834407c 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = "https://sswsts-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://7ms8v2-5000.csb.app"; // Replace with your actual backend URL
 
 export default API_BASE_URL;
diff --git a/src/helpers/navigationHelpers.js b/src/helpers/navigationHelpers.js
index ac0436f..b23ae31 100644
--- a/src/helpers/navigationHelpers.js
+++ b/src/helpers/navigationHelpers.js
@@ -17,6 +17,10 @@ export const useNavigationHelpers = (params) => {
     navigate(`/${params}/`);
   };
 
+  const goToSearch = () => {
+    navigate(`/${params}/search`);
+  };
+
   const goToCart = () => {
     navigate(`/${params}/cart`);
   };
@@ -42,6 +46,7 @@ export const useNavigationHelpers = (params) => {
   return {
     goToLogin,
     goToShop,
+    goToSearch,
     goToCart,
     goToInvoice,
     goToGuestSideLogin,
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index 45a8fa9..7614342 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -119,7 +119,7 @@ function CafePage({
             removeConnectedGuestSides={removeConnectedGuestSides}
           />
           <div style={{ marginTop: "5px" }}></div>
-          <SearchInput />
+          <SearchInput shopId={shopId} />
           <div style={{ marginTop: "15px" }}></div>
           <ItemTypeLister user={user} shopId={shopId} itemTypes={shopItems} />
           <div style={{ marginTop: "-13px" }}></div>
diff --git a/src/pages/SearchResult.js b/src/pages/SearchResult.js
new file mode 100644
index 0000000..bc17114
--- /dev/null
+++ b/src/pages/SearchResult.js
@@ -0,0 +1,58 @@
+// src/CafePage.js
+
+import React, { useState, useEffect } from "react";
+import { useParams, useSearchParams, useNavigate } from "react-router-dom";
+
+import "../App.css";
+import SearchInput from "../components/SearchInput";
+import ItemLister from "../components/ItemLister";
+import Header from "../components/Header";
+
+import { ThreeDots } from "react-loader-spinner";
+
+import { getItemTypesWithItems } from "../helpers/itemHelper.js";
+import {
+  getLocalStorage,
+  updateLocalStorage,
+} from "../helpers/localStorageHelpers";
+
+function SearchResult({ user }) {
+  const [searchParams] = useSearchParams();
+  const { shopId } = useParams();
+
+  const handleLogout = () => {
+    updateLocalStorage("auth", "");
+  };
+
+  return (
+    <div className="App">
+      <body className="App-header">
+        <Header HeaderText={"Search"} shopId={shopId} user={user} />
+        <div style={{ marginTop: "5px" }}></div>
+        <SearchInput shopId={shopId} autofocus={true} />
+        <div style={{ marginTop: "15px" }}></div>
+        {/* <ItemTypeLister user={user} shopId={shopId} itemTypes={shopItems} /> */}
+        <div style={{ marginTop: "-13px" }}></div>
+        {/* <MusicPlayer
+          socket={socket}
+          shopId={shopId}
+          user={user}
+          isSpotifyNeedLogin={isSpotifyNeedLogin}
+        />
+        <div style={{ marginTop: "-15px" }}></div>
+        {shopItems.map((itemType) => (
+          <ItemLister
+            shopId={shopId}
+            user={user}
+            key={itemType.itemTypeId}
+            itemTypeId={itemType.itemTypeId}
+            typeName={itemType.name}
+            itemList={itemType.itemList}
+          />
+        ))} */}
+      </body>
+    </div>
+  );
+}
+
+export default SearchResult;