working on modal

2024-07-29 23:55:39 +00:00
parent 93df0458e6
commit 1bef19f624
7 changed files with 197 additions and 146 deletions
--- 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 (
    <div className="App">
      <header className="App-header">
        <Routes>
+          <Route path="/" element={<Dashboard user={user} />} />
+          <Route path="/login" element={<LoginPage />} />
          <Route
-            path="/"
-            element={
-              <>
-                <Dashboard user={user} />
-              </>
-            }
-          />
-          <Route
-            path="/login"
-            element={
-              <>
-                <LoginPage />
-              </>
-            }
-          />
-          <Route
-            path="/:shopId"
+            path="/:shopId/:tableId?"
            element={
              <>
                <CafePage
                  sendParam={handleSetParam}
                  shopItems={shopItems}
                  socket={socket}
-                  user={user} // if logged
-                  guestSides={guestSides} // if being clerk
-                  guestSideOfClerk={guestSideOfClerk} // if being guest side
-                  removeConnectedGuestSides={(e) => rmConnectedGuestSides(e)}
+                  user={user}
+                  guestSides={guestSides}
+                  guestSideOfClerk={guestSideOfClerk}
+                  removeConnectedGuestSides={rmConnectedGuestSides}
+                  setModal={setModal} // Pass the function to open modal
                />
                <Footer
                  shopId={shopId}
+                  tableId={tableId}
                  cartItemsLength={totalItemsCount}
                  selectedPage={0}
                />
@@ -225,19 +215,20 @@ function App() {
            }
          />
          <Route
-            path="/:shopId/search"
+            path="/:shopId/:tableId?/search"
            element={
              <>
                <SearchResult
                  sendParam={handleSetParam}
-                  user={user} // if logged
+                  user={user}
                  shopItems={shopItems}
-                  guestSides={guestSides} // if being clerk
-                  guestSideOfClerk={guestSideOfClerk} // if being guest side
-                  removeConnectedGuestSides={(e) => rmConnectedGuestSides(e)}
+                  guestSides={guestSides}
+                  guestSideOfClerk={guestSideOfClerk}
+                  removeConnectedGuestSides={rmConnectedGuestSides}
                />
                <Footer
                  shopId={shopId}
+                  tableId={tableId}
                  cartItemsLength={totalItemsCount}
                  selectedPage={1}
                />
@@ -245,7 +236,7 @@ function App() {
            }
          />
          <Route
-            path="/:shopId/cart"
+            path="/:shopId/:tableId?/cart"
            element={
              <>
                <Cart
@@ -255,6 +246,7 @@ function App() {
                />
                <Footer
                  shopId={shopId}
+                  tableId={tableId}
                  cartItemsLength={totalItemsCount}
                  selectedPage={2}
                />
@@ -262,37 +254,29 @@ function App() {
            }
          />
          <Route
-            path="/:shopId/invoice"
+            path="/:shopId/:tableId?invoice"
            element={
              <>
                <Invoice sendParam={handleSetParam} deviceType={deviceType} />
                <Footer
                  shopId={shopId}
+                  tableId={tableId}
                  cartItemsLength={totalItemsCount}
                  selectedPage={2}
                />
              </>
            }
          />
-
          <Route
            path="/:shopId/guest-side-login"
-            element={
-              <>
-                <GuestSideLogin shopId={shopId} socket={socket} />
-              </>
-            }
-          />
-          <Route
-            path="/guest-side"
-            element={
-              <>
-                <GuestSide socket={socket} />
-              </>
-            }
+            element={<GuestSideLogin shopId={shopId} socket={socket} />}
          />
+          <Route path="/guest-side" element={<GuestSide socket={socket} />} />
        </Routes>
      </header>
+      <Modal isOpen={isModalOpen} onClose={closeModal}>
+        {modalContent}
+      </Modal>
    </div>
  );
 }
--- 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 (
    <div className={styles.item}>
--- 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);
--- 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 (
-    <div className={styles.modalOverlay}>
-      <div className={styles.modalContent}>
+    <div onClick={handleOverlayClick} className={styles.modalOverlay}>
+      <div className={styles.modalContent} onClick={handleContentClick}>
        {children}
-        <button onClick={onClose} className={styles.closeButton}>Close</button>
+        <button onClick={onClose} className={styles.closeButton}>
+          Close
+        </button>
      </div>
    </div>
  );
--- 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;
-  }
+  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;
-  }
+.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;
+}
--- 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 = () => {
--- 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({
          <Header
            HeaderText={"Menu"}
            showProfile={true}
-            isEdit={() => setIsModalOpen(true)}
+            isEdit={() => setModal("edit")}
            isLogout={handleLogout}
            shopId={shopId}
            user={user}