fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean code

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-01-17 20:03:50 +03:00
parent 5cb681c4a8
commit 3fe0c68526
11 changed files with 5 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/LoyaltyCard/LoyaltyCard.tsx
View File

@@ -1,8 +1,6 @@
import { Card, Col, Image, Row } from "antd"; import { Card, Col, Image, Row } from "antd";
import PresentIcon from "components/Icons/cart/PresentIcon";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { ACCESS_TOKEN } from "utils/constants"; import { ACCESS_TOKEN } from "utils/constants";
import { colors } from "ThemeConstants.ts"; import { colors } from "ThemeConstants.ts";
import ProText from "../ProText"; import ProText from "../ProText";
@@ -12,7 +10,7 @@ import { useAppSelector } from "redux/hooks";
const LoyaltyCard = () => { const LoyaltyCard = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { subdomain } = useParams(); const { subdomain } = useParams();
const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain); const { restaurant } = useAppSelector((state) => state.order);
const { isRTL } = useAppSelector((state) => state.locale); const { isRTL } = useAppSelector((state) => state.locale);
const token = localStorage.getItem(ACCESS_TOKEN); const token = localStorage.getItem(ACCESS_TOKEN);
const loyaltyStamps = restaurant?.loyalty_stamps ?? 0; const loyaltyStamps = restaurant?.loyalty_stamps ?? 0;

47
src/components/privateRoute/PrivateRoute.tsx
View File

@@ -1,47 +0,0 @@
import { Loader } from "components/Loader/Loader";
import { Navigate, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
export const PrivateRoute = ({
children,
}: // permission,
{
children: JSX.Element;
permission?: string;
}) => {
const { token, loading } = useAppSelector((state) => state.auth);
const { subdomain } = useParams();
// const { data: user, isLoading: loadingUser } = useGetSignedUserInfoQuery();
// useEffect(() => {
// if (user) dispatch(setUser(user));
// }, [dispatch, user]);
if (loading) {
return <Loader />;
}
// let newPermissions: any[] = [];
// // aggregate the rules from multi
// user?.roles?.forEach(
// (r) => (newPermissions = [...newPermissions, ...r.permissions])
// );
// const userHasRequiredPermission = permission
// ? !!newPermissions.find((p) => p.name === permission)
// : true;
console.log(token);
if (!token) {
return <Navigate to={`/${subdomain}/login`} />;
}
// if (token && !userHasRequiredPermission) {
// return <AccessDenied />; // build your won access denied page (sth like 404)
// }
return children;
};

39
src/hooks/useDetectBarcode.ts
View File

@@ -1,39 +0,0 @@
import { useEffect, useState } from "react";
export function useDetectBarcode() {
const [barcode, setBarcode] = useState<string>("");
const [lastBarcode, setLastBarcode] = useState<string>("");
useEffect(() => {
let interval: any;
const handleKeydown = (evt: any) => {
if (interval) clearInterval(interval);
if (evt.code === "Enter") {
if (barcode) handleBarcode(barcode);
setBarcode("");
return;
}
if (evt.key !== "Shift") setBarcode((prev) => prev + evt.key);
interval = setInterval(() => setBarcode(""), 20);
};
// Adding the event listener when the component mounts
document.addEventListener("keydown", handleKeydown);
// Cleanup the event listener when the component unmounts
return () => {
document.removeEventListener("keydown", handleKeydown);
if (interval) clearInterval(interval);
};
}, [barcode]);
const handleBarcode = (scannedBarcode: string) => {
setLastBarcode(scannedBarcode);
};
return lastBarcode;
}

52
src/hooks/useSwipeUp.ts
View File

@@ -1,52 +0,0 @@
import { useRef, useState, useCallback } from "react";
type Props = { isEnabled: boolean; swipeAction: () => void };
export default function useSwipeUp({ isEnabled, swipeAction }: Props) {
// Swipe detection
const startYRef = useRef(0);
const [isSwiping, setIsSwiping] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
// Touch event handlers for swipe detection
const handleTouchStart = useCallback(
(e: React.TouchEvent) => {
if (!isEnabled) return;
startYRef.current = e.touches[0].clientY;
setIsSwiping(true);
},
[isEnabled],
);
/*
const handleTouchMove = useCallback(
(e: React.TouchEvent) => {
if (!isSwiping) return;
},
[isSwiping],
);
*/
const handleTouchEnd = useCallback(
(e: React.TouchEvent) => {
if (!isSwiping || !isEnabled) return;
const endY = e.changedTouches[0].clientY;
const deltaY = startYRef.current - endY;
const threshold = 70; // Threshold to detect a swipe up
if (deltaY > threshold) {
// Swipe up detected
swipeAction();
}
setIsSwiping(false);
},
[isSwiping, isEnabled],
);
return {
containerRef,
handleTouchStart,
handleTouchEnd,
};
}

7
src/hooks/useTranslations.tsx
View File

@@ -1,7 +0,0 @@
import { useAppSelector } from "redux/hooks";
export function useTranslations() {
const { isRTL } = useAppSelector((state) => state.locale);
const nameProp = isRTL ? "arabic_name" : "name";
return [nameProp] as const ;
}

13
src/layouts/app/FooterNav.tsx
View File

@@ -1,13 +0,0 @@
import { Layout } from 'antd';
const { Footer } = Layout;
type FooterNavProps = React.HTMLAttributes<HTMLDivElement>;
const FooterNav = ({ ...others }: FooterNavProps) => {
return (
<Footer {...others}>AntD Dashboard © 2023 Created by Design Sparx</Footer>
);
};
export default FooterNav;

70
src/layouts/app/useSidebarItems.tsx
View File

@@ -1,70 +0,0 @@
import { BugFilled } from "@ant-design/icons";
import { MenuProps } from "antd";
import { PATHS } from "utils/constants";
// import WarehouseIcon from "components/Icons/WarehouseIcon";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
export default function useSidebarItems() {
type MenuItem = Required<MenuProps>["items"][number] & {
permission: string;
children?: MenuItem[];
};
const { t } = useTranslation();
// const [isAuth] = useAuth();
const getItem = (
label: React.ReactNode,
key: React.Key,
permission?: string,
icon?: React.ReactNode,
children?: MenuItem[],
type?: "group"
): MenuItem => {
return {
key,
icon,
children,
label,
type,
permission,
} as MenuItem;
};
// Recursive function to filter items based on permissions
const getGrantedItems = (items: any[]): MenuItem[] => {
return items
.filter(() => true)// Filter out items without permission
.map((item: any) => {
if (item.children) {
// Recursively filter children
return {
...item,
children: getGrantedItems(item.children),
};
}
return item;
});
};
const items: MenuProps["items"] = [
getItem(
t("menu"),
PATHS.menu,
undefined,
<div style={{ marginTop: 10 }}>
<Link style={{}} to={PATHS.menu}>
<BugFilled className="icon-container pos-icon" />
</Link>
</div>
),
];
// if we have a menu with empty children after applying "getGrantedItems"
// we going to remove it
const grantedItems = getGrantedItems(items).filter(
(i) => (i.children && i.children.length !== 0) || !i.children
);
return grantedItems;
}

1
src/pages/cart/components/CartMobileTabletLayout.tsx
View File

@@ -33,7 +33,6 @@ export default function CartMobileTabletLayout({
const { items, orderType } = useAppSelector(selectCart); const { items, orderType } = useAppSelector(selectCart);
const { isRTL } = useAppSelector((state) => state.locale); const { isRTL } = useAppSelector((state) => state.locale);
const { subdomain } = useParams(); const { subdomain } = useParams();
const { pickup_type } = useAppSelector((state) => state.order.restaurant);
const { isMobile, isTablet } = useBreakPoint(); const { isMobile, isTablet } = useBreakPoint();
const getResponsiveClass = () => (isTablet ? "tablet" : "mobile"); const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
const navigate = useNavigate(); const navigate = useNavigate();

2
src/pages/menu/page.tsx
View File

@@ -206,7 +206,7 @@ function MenuPage() {
border: "none", border: "none",
}} }}
onClick={() => { onClick={() => {
if (table) callWaiter({ if (table) callWaiter({
table_id: table, table_id: table,
call_reason: "call_waiter", call_reason: "call_waiter",
}).unwrap().then(() => { }).unwrap().then(() => {

3
src/pages/restaurant/page.tsx
View File

@@ -10,16 +10,13 @@ import styles from "./restaurant.module.css";
import RestaurantServices from "./RestaurantServices"; import RestaurantServices from "./RestaurantServices";
// Import the Client Component for localStorage handling // Import the Client Component for localStorage handling
import Ads1 from "components/Ads/Ads1";
import { OrderDetailsBottomSheet } from "components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.tsx"; import { OrderDetailsBottomSheet } from "components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.tsx";
import { Loader } from "components/Loader/Loader"; import { Loader } from "components/Loader/Loader";
import { import {
CART_STORAGE_KEYS, CART_STORAGE_KEYS,
updateOrderType, updateOrderType,
} from "features/order/orderSlice.ts"; } from "features/order/orderSlice.ts";
import useBreakPoint from "hooks/useBreakPoint";
import { useRestaurant } from "hooks/useRestaurant"; import { useRestaurant } from "hooks/useRestaurant";
import useSwipeUp from "hooks/useSwipeUp";
import { OrderType } from "pages/checkout/hooks/types.ts"; import { OrderType } from "pages/checkout/hooks/types.ts";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

21
src/routes/routes.tsx
View File

@@ -1,6 +1,5 @@
import { Grid } from "antd"; import { Grid } from "antd";
import { Loader } from "components/Loader/Loader"; import { Loader } from "components/Loader/Loader";
import { PrivateRoute } from "components/privateRoute/PrivateRoute";
import { PublicRoute } from "components/publicRoute/PublicRoute"; import { PublicRoute } from "components/publicRoute/PublicRoute";
import { AppLayout } from "layouts"; import { AppLayout } from "layouts";
import HeaderMenuDrawer from "layouts/app/HeaderMenuDrawer"; import HeaderMenuDrawer from "layouts/app/HeaderMenuDrawer";
@@ -9,7 +8,7 @@ import CardDetailsPage from "pages/CardDetails/CardDetails";
import CartPage from "pages/cart/page"; import CartPage from "pages/cart/page";
import CheckoutPage from "pages/checkout/page"; import CheckoutPage from "pages/checkout/page";
import EGiftCardsPage from "pages/EGiftCards/EGiftCards"; import EGiftCardsPage from "pages/EGiftCards/EGiftCards";
import { Error400Page, ErrorPage } from "pages/errors"; import { ErrorPage } from "pages/errors";
import LoginPage from "pages/login/page"; import LoginPage from "pages/login/page";
import MenuPage from "pages/menu/page"; import MenuPage from "pages/menu/page";
import OrderDetails from "pages/order/components/OrderDetails"; import OrderDetails from "pages/order/components/OrderDetails";
@@ -123,9 +122,9 @@ export const router = createHashRouter([
element: ( element: (
<PageWrapper <PageWrapper
children={ children={
<PrivateRoute> <PublicRoute>
<OrdersPage /> <OrdersPage />
</PrivateRoute> </PublicRoute>
} }
/> />
), ),
@@ -195,20 +194,6 @@ export const router = createHashRouter([
}, },
], ],
}, },
{
path: "errors",
errorElement: <ErrorPage />,
children: [
{
path: "400",
element: (
<PrivateRoute>
<Error400Page />
</PrivateRoute>
),
},
],
},
]); ]);
export default router; export default router;