From 1bef19f624ea9ef53f652b374e72d0257fcf19ca Mon Sep 17 00:00:00 2001 From: nospeedlimitindonesia Date: Mon, 29 Jul 2024 23:55:39 +0000 Subject: [PATCH] working on modal --- src/App.js | 156 ++++++++++++++----------------- src/components/Footer.js | 12 ++- src/components/Header.js | 9 +- src/components/Modal.js | 25 +++-- src/components/Modal.module.css | 63 ++++++------- src/helpers/navigationHelpers.js | 70 +++++++++++--- src/pages/CafePage.js | 8 +- 7 files changed, 197 insertions(+), 146 deletions(-) diff --git a/src/App.js b/src/App.js index 95b9273..5a37375 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,4 @@ -// App.js - +import React, { useState, useEffect } from "react"; import "./App.css"; import "./components/Loading.css"; import { @@ -7,8 +6,8 @@ import { Route, Routes, useNavigate, + useLocation, } from "react-router-dom"; -import React, { useState, useEffect } from "react"; import socket from "./services/socketService"; import Dashboard from "./pages/Dashboard"; @@ -24,7 +23,6 @@ import GuestSide from "./pages/GuestSide"; import { getItemTypesWithItems } from "./helpers/itemHelper.js"; import { - // checkToken, getConnectedGuestSides, removeConnectedGuestSides, } from "./helpers/userHelpers.js"; @@ -33,44 +31,45 @@ import { removeLocalStorage, } from "./helpers/localStorageHelpers"; import { calculateTotals } from "./helpers/cartHelpers"; +import Modal from "./components/Modal"; // Import your modal component function App() { + const location = useLocation(); const navigate = useNavigate(); const [user, setUser] = useState([]); const [guestSideOfClerk, setGuestSideOfClerk] = useState(null); const [guestSides, setGuestSides] = useState([]); const [shopId, setShopId] = useState(""); + const [tableId, setTableId] = useState(""); const [totalItemsCount, setTotalItemsCount] = useState(0); const [deviceType, setDeviceType] = useState(""); const [shopItems, setShopItems] = useState([]); + const [isModalOpen, setIsModalOpen] = useState(false); + const [modalContent, setModalContent] = useState(null); useEffect(() => { - // Function to calculate totals from localStorage const calculateTotalsFromLocalStorage = () => { const { totalCount } = calculateTotals(shopId); setTotalItemsCount(totalCount); }; - // Initial calculation on component mount calculateTotalsFromLocalStorage(); - // Function to handle localStorage change event const handleStorageChange = () => { calculateTotalsFromLocalStorage(); }; - // Subscribe to custom localStorage change event window.addEventListener("localStorageUpdated", handleStorageChange); return () => { - // Clean up: Remove event listener on component unmount window.removeEventListener("localStorageUpdated", handleStorageChange); }; }, [shopId]); - // Function to handle setting parameters from CafePage - const handleSetParam = (param) => { - setShopId(param); + const handleSetParam = ({ shopId, tableId }) => { + console.log(shopId, tableId); + setShopId(shopId); + setTableId(tableId); }; useEffect(() => { @@ -78,25 +77,18 @@ function App() { console.log("gettingItems"); try { const { response, data } = await getItemTypesWithItems(shopId); - console.log(data); if (response.status === 200) { setShopItems(data); - console.log(data); - // setLoading(false); - // socket.emit("join-room", { token: getLocalStorage("auth"), shopId }); - socket.on("transaction_created", () => { console.log("transaction created"); }); - } else { - // setScreenMessage("Kafe tidak tersedia"); } } catch (error) { console.error("Error fetching shop items:", error); } } - if (shopId != "") fetchData(); + if (shopId !== "") fetchData(); }, [shopId]); const rmConnectedGuestSides = async (gueseSideSessionId) => { @@ -104,23 +96,6 @@ function App() { setGuestSides(sessionLeft.guestSideList); }; - // useEffect(() => { - // const validateToken = async () => { - // const checkedtoken = await checkToken(socket.id); - // if (checkedtoken.ok) { - // setUser(checkedtoken.user.user); - // if (checkedtoken.user.user.cafeId == shopId) { - // const connectedGuestSides = await getConnectedGuestSides(); - // setGuestSides(connectedGuestSides.sessionDatas); - // setDeviceType("clerk"); - // } else { - // setDeviceType("guestDevice"); - // } - // } - // }; - // validateToken(); - // }, [navigate, socket, shopId]); - useEffect(() => { if (socket == null) return; @@ -129,7 +104,6 @@ function App() { token: getLocalStorage("authGuestSide"), }); } else { - console.log("emitting"); socket.emit("checkUserToken", { token: getLocalStorage("auth"), shopId, @@ -138,17 +112,16 @@ function App() { socket.on("transaction_created", async (data) => { console.log("transaction notification"); + setModal("new_transaction"); }); socket.on("checkUserTokenRes", async (data) => { if (data.status !== 200) { removeLocalStorage("auth"); setDeviceType("guestDevice"); - console.log("guestDevice"); } else { - console.log("auth success"); setUser(data.data.user); - if (data.data.user.cafeId == shopId) { + if (data.data.user.cafeId === shopId) { const connectedGuestSides = await getConnectedGuestSides(); setGuestSides(connectedGuestSides.sessionDatas); setDeviceType("clerk"); @@ -162,9 +135,7 @@ function App() { if (data.status !== 200) { removeLocalStorage("authGuestSide"); navigate("/guest-side"); - console.log("isntguestside"); } else { - console.log("isguestside"); setGuestSideOfClerk({ clerkId: data.sessionData.clerkId, clerkUsername: data.sessionData.clerkUsername, @@ -177,47 +148,66 @@ function App() { navigate("/guest-side"); }); - // Clean up on component unmount return () => { socket.off("signout-guest-session"); }; }, [socket, shopId]); + const handleModalFromURL = () => { + const queryParams = new URLSearchParams(location.search); + const modal = queryParams.get("modal"); + if (modal) setModal(modal); + }; + + useEffect(() => { + handleModalFromURL(); + }, [shopId]); + + // Function to open the modal + const setModal = (content) => { + setIsModalOpen(true); + setModalContent(content); + document.body.style.overflow = "hidden"; + navigate(`?modal=` + content, { replace: true }); + }; + + // Function to close the modal + const closeModal = () => { + setIsModalOpen(false); + document.body.style.overflow = "auto"; + + const queryParams = new URLSearchParams(location.search); + + // Remove the 'modal' parameter + queryParams.delete("modal"); + + // Update the URL without the 'modal' parameter + navigate({ search: queryParams.toString() }, { replace: true }); + }; + return (
+ } /> + } /> - - - } - /> - - - - } - /> - rmConnectedGuestSides(e)} + user={user} + guestSides={guestSides} + guestSideOfClerk={guestSideOfClerk} + removeConnectedGuestSides={rmConnectedGuestSides} + setModal={setModal} // Pass the function to open modal />
@@ -225,19 +215,20 @@ function App() { } /> rmConnectedGuestSides(e)} + guestSides={guestSides} + guestSideOfClerk={guestSideOfClerk} + removeConnectedGuestSides={rmConnectedGuestSides} />
@@ -245,7 +236,7 @@ function App() { } />
@@ -262,37 +254,29 @@ function App() { } />
} /> - - - - } - /> - - - - } + element={} /> + } />
+ + {modalContent} +
); } diff --git a/src/components/Footer.js b/src/components/Footer.js index 8a0be91..5bd628a 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -2,8 +2,16 @@ 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, selectedPage }) { - const { goToShop, goToSearch, goToCart } = useNavigationHelpers(shopId); +export default function Footer({ + shopId, + tableId, + cartItemsLength, + selectedPage, +}) { + const { goToShop, goToSearch, goToCart } = useNavigationHelpers( + shopId, + tableId, + ); return (
diff --git a/src/components/Header.js b/src/components/Header.js index e3cfff9..0db9335 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,5 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; import styled, { keyframes } from "styled-components"; +import { useLocation } from "react-router-dom"; import { useNavigationHelpers } from "../helpers/navigationHelpers"; const HeaderBar = styled.div` @@ -225,6 +226,7 @@ const Header = ({ const [animate, setAnimate] = useState(""); const rectangleRef = useRef(null); const [guestSideOf, setGuestSideOf] = useState(null); + const location = useLocation(); const handleImageClick = () => { if (showRectangle) { @@ -251,7 +253,10 @@ const Header = ({ }; useEffect(() => { - if (showRectangle) { + const queryParams = new URLSearchParams(location.search); + const hasModalParam = queryParams.has("modal"); + + if (showRectangle && !hasModalParam) { document.addEventListener("mousedown", handleClickOutside); window.addEventListener("scroll", handleScroll); } else { @@ -263,7 +268,7 @@ const Header = ({ document.removeEventListener("mousedown", handleClickOutside); window.removeEventListener("scroll", handleScroll); }; - }, [showRectangle]); + }, [showRectangle, location.search]); useEffect(() => { setGuestSideOf(guestSideOfClerk); diff --git a/src/components/Modal.js b/src/components/Modal.js index 47faac3..f9b8229 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -1,15 +1,28 @@ -// src/components/Modal.js -import React from 'react'; -import styles from './Modal.module.css'; +import React from "react"; +import styles from "./Modal.module.css"; const Modal = ({ isOpen, onClose, children }) => { if (!isOpen) return null; + // Function to handle clicks on the overlay + const handleOverlayClick = (event) => { + // Close the modal only if the overlay is clicked + onClose(); + }; + + // Function to handle clicks on the modal content + const handleContentClick = (event) => { + // Prevent click event from propagating to the overlay + event.stopPropagation(); + }; + return ( -
-
+
+
{children} - +
); diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css index a1b292a..22eb746 100644 --- a/src/components/Modal.module.css +++ b/src/components/Modal.module.css @@ -1,34 +1,33 @@ /* src/components/Modal.module.css */ .modalOverlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; - } - - .modalContent { - background: white; - padding: 20px; - border-radius: 5px; - width: 500px; - max-width: 100%; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - position: relative; - } - - .closeButton { - margin-top: 20px; - background: #f44336; - color: white; - border: none; - padding: 10px; - cursor: pointer; - border-radius: 5px; - } - \ No newline at end of file + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modalContent { + background: white; + padding: 20px; + border-radius: 5px; + width: 80%; + height: 80%; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + position: relative; +} + +.closeButton { + margin-top: 20px; + background: #f44336; + color: white; + border: none; + padding: 10px; + cursor: pointer; + border-radius: 5px; +} diff --git a/src/helpers/navigationHelpers.js b/src/helpers/navigationHelpers.js index 8228cbd..d4b095b 100644 --- a/src/helpers/navigationHelpers.js +++ b/src/helpers/navigationHelpers.js @@ -2,41 +2,83 @@ import { useNavigate } from "react-router-dom"; /** * Custom hook to provide navigation functions. - * @param {string} params - The shop ID for constructing URLs. + * @param {string} shopId - The shop ID for constructing URLs. * @returns {Object} - Navigation functions. */ -export const useNavigationHelpers = (params) => { +export const useNavigationHelpers = (shopId, tableId) => { const navigate = useNavigate(); const goToLogin = () => { - if (params) navigate(`/login?next=${params}`); - else navigate(`/login`); + // Construct the base URL + let url = "/login"; + + // Append query parameters conditionally + const queryParams = new URLSearchParams(); + if (shopId) queryParams.append("next", shopId); + if (tableId) queryParams.append("table", tableId); + + // Set the URL with query parameters + if (queryParams.toString()) { + url += `?${queryParams.toString()}`; + } + + // Perform the navigation + navigate(url); }; const goToShop = () => { - navigate(`/${params}/`); + // Construct the base URL for the shop + let url = `/${shopId}`; + + // Append the tableId if it's provided + if (tableId) { + url += `/${tableId}`; + } + + // Perform the navigation + navigate(url); }; const goToSearch = () => { - navigate(`/${params}/search`); + let url = `/${shopId}`; + if (tableId) { + url += `/${tableId}`; + } + url += "/search"; + navigate(url); }; const goToCart = () => { - navigate(`/${params}/cart`); + let url = `/${shopId}`; + if (tableId) { + url += `/${tableId}`; + } + url += "/cart"; + navigate(url); }; const goToInvoice = (orderType, tableNumber, email) => { - if (orderType === "serve" && tableNumber) { - navigate( - `/${params}/invoice?orderType=${orderType}&tableNumber=${tableNumber}&email=${email}`, - ); - } else { - navigate(`/${params}/invoice?orderType=${orderType}&email=${email}`); + let url = `/${shopId}`; + if (tableId) { + url += `/${tableId}`; } + url += `/invoice?orderType=${orderType}`; + if (tableNumber) { + url += `&tableNumber=${tableNumber}`; + } + if (email) { + url += `&email=${email}`; + } + navigate(url); }; const goToGuestSideLogin = () => { - navigate(`/${params}/guest-side-login`); + let url = `/${shopId}`; + if (tableId) { + url += `/${tableId}`; + } + url += "/guest-side-login"; + navigate(url); }; const goToAdminCafes = () => { diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js index de66eda..d67e5ea 100644 --- a/src/pages/CafePage.js +++ b/src/pages/CafePage.js @@ -27,11 +27,12 @@ function CafePage({ guestSides, guestSideOfClerk, removeConnectedGuestSides, + setModal, }) { const [searchParams] = useSearchParams(); const token = searchParams.get("token"); - const { shopId } = useParams(); - sendParam(shopId); + const { shopId, tableId } = useParams(); + sendParam({ shopId, tableId }); const navigate = useNavigate(); const [loading, setLoading] = useState(true); @@ -43,7 +44,6 @@ function CafePage({ useEffect(() => { if (user.cafeId != null && user.cafeId != shopId) { navigate("/" + user.cafeId); - sendParam(user.cafeId); } if (user.password == "unsetunsetunset") setIsModalOpen(true); }, [user]); @@ -94,7 +94,7 @@ function CafePage({
setIsModalOpen(true)} + isEdit={() => setModal("edit")} isLogout={handleLogout} shopId={shopId} user={user}