kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

works like a charm

Browse Source
This commit is contained in:
nospeedlimitindonesia
2024-07-27 19:15:59 +00:00
parent 4f43b46e5f
commit 01facb5c25
7 changed files with 238 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/App.js
View File

@@ -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}
/>
</>
}
/>

70
src/components/Footer.js
View File

@@ -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>
);
}

90
src/components/SearchInput.js
View File

@@ -1,14 +1,14 @@
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;
`;
// Styled component for the container of input and icon
const SearchContainer = styled.div`
position: relative;
display: flex;
@@ -17,7 +17,6 @@ const SearchContainer = styled.div`
margin: 0px 10px;
`;
// Styled component for the input field
const Searchinput = styled.input`
flex-grow: 1;
border: none;
@@ -26,15 +25,16 @@ const Searchinput = styled.input`
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 */
border: 1px solid #ccc;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
&:focus {
background-color: lightgray; /* Change background color when focused */
background-color: lightgray;
}
`;
// Styled component for the search icon
const SearchIcon = styled.svg`
position: absolute;
left: 10px;
@@ -44,27 +44,69 @@ const SearchIcon = styled.svg`
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);
export default function SearchInput() {
const [currentTime, setCurrentTime] = useState(0);
// 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]);
const handleChange = (event) => {
setSongName(event.target.value);
};
// 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 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"
<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>

2
src/config.js
View File

@@ -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;

5
src/helpers/navigationHelpers.js
View File

@@ -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,

2
src/pages/CafePage.js
View File

@@ -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>

58
src/pages/SearchResult.js Normal file
View File

@@ -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;