+ {/* Shop Icon */}
+
-
-
- {cartItemsLength != '0' &&
-
- {cartItemsLength}
-
- }
-
);
}
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 (
-
-
-
-
-
-
-
-
- );
+ // 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 (
+
+
+
+
+
+
+
+
+ );
}
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}
/>
-
+
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 (
+
+
+
+
+
+
+ {/*
*/}
+
+ {/*
+
+ {shopItems.map((itemType) => (
+
+ ))} */}
+
+
+ );
+}
+
+export default SearchResult;