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

working on modal

Browse Source
This commit is contained in:
nospeedlimitindonesia
2024-07-29 23:55:39 +00:00
parent 93df0458e6
commit 1bef19f624
7 changed files with 197 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/App.js
View File

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