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

ok

Browse Source
This commit is contained in:
zadit
2024-12-04 21:40:36 +07:00
parent 529a7e505c
commit 198d0b3053
9 changed files with 517 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/App.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import "./App.css";
import "./components/Loading.css";
import {
@@ -26,6 +26,9 @@ import GuestSide from "./pages/GuestSide";
import { getItemTypesWithItems } from "./helpers/itemHelper.js";
import { getTableByCode } from "./helpers/tableHelper.js";
import {
getTransactionsFromCafe,
} from "./helpers/transactionHelpers";
import {
getConnectedGuestSides,
getClerks,
@@ -57,8 +60,21 @@ function App() {
const [shopItems, setShopItems] = useState([]);
const [isModalOpen, setIsModalOpen] = useState(false);
const [modalContent, setModalContent] = useState(null);
const transactionList = useRef(null);
const [queue, setQueue] = useState([]);
const validTransactionStates = [
'new_transaction',
'transaction_canceled',
'transaction_pending',
'transaction_confirmed',
'payment_claimed',
'transaction_success',
'transaction_end',
'transaction_failed',
];
useEffect(() => {
const calculateTotalsFromLocalStorage = () => {
const { totalCount } = calculateTotals(shopId);
@@ -193,30 +209,16 @@ function App() {
setModal("transaction_canceled", data);
});
//for clerk
socket.on("transaction_created", async (data) => {
console.log("transaction notification");
setModal("new_transaction", data);
let permission = Notification.permission;
if (permission != "granted") return;
navigator.serviceWorker.ready.then((registration) => {
registration.showNotification("New Transaction", {
body: `A new transaction was created: ${data.transactionDetails}`, // Customize as needed
icon: "icon.png", // Optional icon
});
});
});
const checkNotifications = () => {
let permission = Notification.permission;
// Check current permission
if (permission !== "granted") {
setModal("req_notification");
}
};
socket.on("checkUserTokenRes", async (data) => {
if (data.status !== 200) {
removeLocalStorage("auth");
@@ -266,15 +268,85 @@ function App() {
});
socket.on("updateQueue", (response) => {
setQueue(response); // Only set the queue if it's a valid non-empty array
console.log("Updated Queue:", response); // Log the valid queue
setQueue(response); // Only set the queue if it's a valid non-empty array
console.log("Updated Queue:", response); // Log the valid queue
});
return () => {
socket.off("signout-guest-session");
};
}, [socket, shopId]);
useEffect(() => {
// This will ensure that searchParams and transaction_info get updated on each render
socket.on("transaction_created", async (data) => {
console.log("transaction notification");
console.log(modalContent);
let response;
response = await getTransactionsFromCafe(shopId, 0, true);
console.log(data);
transactionList.current = response;
// Get current URL's search parameters inside the socket event handler
const searchParams = new URLSearchParams(location.search);
let transaction_info = searchParams.get("transactionId") || ''; // Get transactionId or set it to empty string
console.log(transaction_info); // Log the updated transaction_info
// If transaction_info is an empty string, set the modal
if (transaction_info === '') {
setModal("new_transaction", data);
}
// Show browser notification
let permission = Notification.permission;
if (permission !== "granted") return;
navigator.serviceWorker.ready.then((registration) => {
registration.showNotification("New Transaction", {
body: `A new transaction was created: ${data.transactionDetails}`,
icon: "icon.png", // Optional icon
});
});
});
// Clean up the socket event listener on unmount or when dependencies change
return () => {
socket.off("transaction_created");
};
}, [socket, shopId, location]); // Ensure location is in the dependencies to respond to changes in the URL
function handleMoveToTransaction(direction, from) {
console.log(direction);
console.log(from);
// Find the current index based on the 'from' transactionId
const currentIndex = transactionList.current.findIndex(item => item.transactionId == from);
// Determine the new transactionId based on the direction
let newTransactionId;
if (direction === 'next') {
// If we're not at the last transaction, get the next transactionId
newTransactionId = currentIndex < transactionList.current.length - 1
? transactionList.current[currentIndex + 1].transactionId
: from; // If already at the end, stay on the current transactionId
} else if (direction === 'previous') {
// If we're not at the first transaction, get the previous transactionId
newTransactionId = currentIndex > 0
? transactionList.current[currentIndex - 1].transactionId
: from; // If already at the beginning, stay on the current transactionId
}
// Log the new transactionId
console.log('New Transaction ID:', newTransactionId);
// Update the URL with the new transactionId using navigate
navigate(`?transactionId=${newTransactionId}`, { replace: true });
// Optionally, update state or perform further actions based on the new transactionId
// Example:
// setModalContent({ cafeId: shopId, transactionId: newTransactionId });
}
const handleModalFromURL = () => {
const queryParams = new URLSearchParams(location.search);
@@ -307,7 +379,7 @@ function App() {
document.body.style.overflow = "hidden";
setIsModalOpen(true);
setModalContent(content);
setModalContent(content)
};
// Function to close the modal
@@ -318,6 +390,7 @@ function App() {
closeTheseContent.includes(modalContent))
) {
setIsModalOpen(false);
setModalContent(null);
document.body.style.overflow = "auto";
const queryParams = new URLSearchParams(location.search);
@@ -334,15 +407,15 @@ function App() {
// useEffect(() => {
// const askNotificationPermission = async () => {
// let permission = Notification.permission;
// // Check current permission
// if (permission === "default") {
// setModal("req_notification");
// // Request permission and wait for the result
// permission = await Notification.requestPermission();
// }
// // Handle permission results
// if (permission === "granted") {
// await resetNotificationSubscription();
@@ -352,22 +425,22 @@ function App() {
// console.error("Notification permission denied.");
// }
// };
// const handleTransactionConfirmed = async (data) => {
// console.log("transaction notification", data);
// await askNotificationPermission();
// setModal("transaction_success", data);
// };
// // Add socket listener for transaction confirmations
// socket.on("transaction_success", handleTransactionConfirmed);
// // Cleanup the socket listener on component unmount
// return () => {
// socket.off("transaction_success", handleTransactionConfirmed);
// };
// }, [user]);
useEffect(() => {
const startPermissionPolling = async () => {
const checkInterval = 5000; // Check every 5 seconds
@@ -386,7 +459,7 @@ function App() {
startPermissionPolling();
}, []);
useEffect(() => {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js")
@@ -398,7 +471,7 @@ function App() {
});
}
}, []);
return (
<div className="App">
<header className="App-header" id="header">
@@ -448,7 +521,7 @@ function App() {
guestSideOfClerk={guestSideOfClerk}
removeConnectedGuestSides={rmConnectedGuestSides}
setModal={setModal} // Pass the function to open modal
loading={shop.name==null}
loading={shop.name == null}
queue={queue}
/>
<Footer
@@ -551,6 +624,8 @@ function App() {
shop={shop}
isOpen={isModalOpen}
modalContent={modalContent}
handleMoveToTransaction={handleMoveToTransaction}
welcomePageConfig={shop.welcomePageConfig}
onClose={closeModal}
setModal={setModal}
/>