// src/CafePage.js
import React, { useState, useEffect } from "react";
import {
useParams,
useSearchParams,
useNavigate,
useLocation,
} from "react-router-dom";
import "../App.css";
import SearchInput from "../components/SearchInput";
import ItemTypeLister from "../components/ItemTypeLister";
import { MusicPlayer } from "../components/MusicPlayer";
import ItemLister from "../components/ItemLister";
import AccountUpdateModal from "../components/AccountUpdateModal";
import Header from "../components/Header";
import { ThreeDots } from "react-loader-spinner";
import { getItemTypesWithItems } from "../helpers/itemHelper.js";
import {
getLocalStorage,
updateLocalStorage,
} from "../helpers/localStorageHelpers";
import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
function CafePage({
table,
sendParam,
shopName,
shopOwnerId,
shopItems,
shopClerks,
socket,
user,
guestSides,
guestSideOfClerk,
removeConnectedGuestSides,
setModal,
}) {
const location = useLocation();
const [searchParams] = useSearchParams();
const token = searchParams.get("token");
const { shopId, tableCode } = useParams();
sendParam({ shopId, tableCode });
const navigate = useNavigate();
const [loading, setLoading] = useState(true);
const [screenMessage, setScreenMessage] = useState("");
const [isSpotifyNeedLogin, setNeedSpotifyLogin] = useState(true);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isEditMode, setIsEditMode] = useState(false);
const [filterId, setFilterId] = useState(0);
useEffect(() => {
if (user.cafeId != null && user.cafeId !== shopId) {
// Preserve existing query parameters
const currentParams = new URLSearchParams(location.search).toString();
// Navigate to the new cafeId while keeping existing params
navigate(`/${user.cafeId}?${currentParams}`, { replace: true });
}
}, [user, shopId]);
useEffect(() => {
if (token) {
updateLocalStorage("auth", token);
}
}, [token]);
const handleModalClose = () => {
setIsModalOpen(false);
};
const handleLogout = () => {
updateLocalStorage("auth", "");
unsubscribeUser();
navigate(0);
};
useEffect(() => {
setLoading(false);
}, [shopItems]);
useEffect(() => {
async function fetchData() {
socket.on("joined-room", (response) => {
const { isSpotifyNeedLogin } = response;
setNeedSpotifyLogin(isSpotifyNeedLogin);
});
}
if (socket) fetchData();
}, [socket]);
if (loading)
return (
);
else
return (
setIsEditMode(e)}
isEditMode={isEditMode}
/>
setFilterId(e)}
filterId={filterId}
/>
{filterId === 0 ? (
<>
Music Req.
) : (
)}
{shopItems
.filter(
(itemType) => filterId == 0 || itemType.itemTypeId === filterId
)
.map((itemType) => (
))}
{user.username && (
)}
);
}
export default CafePage;