fix: manager login and menu management (#38)
Release package / release (push) Failing after 7m21s
Release package / release (push) Failing after 7m21s
Co-authored-by: TakahashiNg <83152264+TakahashiNguyen@users.noreply.github.com> Reviewed-on: #38
This commit was merged in pull request #38.
This commit is contained in:
+134
-101
@@ -1,149 +1,182 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode, createContext, useContext, useState } from "react";
|
||||
import { gql } from "@apollo/client";
|
||||
import { useMutation, useQuery } from "@apollo/client/react";
|
||||
import {
|
||||
ReactNode,
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import { MENU_CATEGORIES, MOCK_COMBOS, MOCK_PRODUCTS } from "./constants";
|
||||
import type { Combo, ComboItem, MenuCategory, Product } from "./types";
|
||||
import { eateryClient } from "./apollo-clients";
|
||||
import {
|
||||
type MenuItemEntity,
|
||||
type addMenuItemMutation,
|
||||
type allEateriesQuery,
|
||||
deleteMenuItemMutation,
|
||||
updateMenuItemMutation,
|
||||
} from "./types";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export type ManagerTab = "products" | "combos" | "categories" | "menu-items";
|
||||
export type ManagerTab = "products";
|
||||
|
||||
interface ManagerContextType {
|
||||
// Data
|
||||
products: Product[];
|
||||
combos: Combo[];
|
||||
categories: MenuCategory[];
|
||||
products: MenuItemEntity[];
|
||||
|
||||
// Active tab
|
||||
activeTab: ManagerTab;
|
||||
setActiveTab: (tab: ManagerTab) => void;
|
||||
|
||||
// Product actions
|
||||
addProduct: (product: Omit<Product, "id">) => void;
|
||||
updateProduct: (product: Product) => void;
|
||||
deleteProduct: (id: number) => void;
|
||||
toggleProductAvailability: (id: number) => void;
|
||||
|
||||
// Combo actions
|
||||
addCombo: (combo: Omit<Combo, "id">) => void;
|
||||
updateCombo: (combo: Combo) => void;
|
||||
deleteCombo: (id: number) => void;
|
||||
toggleComboAvailability: (id: number) => void;
|
||||
|
||||
// Category actions
|
||||
addCategory: (category: Omit<MenuCategory, "id">) => void;
|
||||
updateCategory: (category: MenuCategory) => void;
|
||||
deleteCategory: (id: string) => void;
|
||||
// MenuItemEntity actions
|
||||
addProduct: (product: MenuItemEntity) => void;
|
||||
updateProduct: (product: MenuItemEntity) => void;
|
||||
deleteProduct: (id: string) => void;
|
||||
toggleProductAvailability: (product: MenuItemEntity) => void;
|
||||
}
|
||||
|
||||
// ─── Context ──────────────────────────────────────────────────────────────────
|
||||
|
||||
const ManagerContext = createContext<ManagerContextType | undefined>(undefined);
|
||||
|
||||
// ___ Graphql __________________________________________________________________
|
||||
|
||||
const GET_EATERY_MENU = gql`
|
||||
query GetEateryMenu {
|
||||
allEateries {
|
||||
id
|
||||
menuItems {
|
||||
id
|
||||
name
|
||||
available
|
||||
description
|
||||
price
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ADD_MENU_ITEM = gql`
|
||||
mutation addMenuItem($menuItem: AddMenuItemInput!) {
|
||||
addMenuItem(menuItem: $menuItem) {
|
||||
id
|
||||
name
|
||||
available
|
||||
description
|
||||
price
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const UPDATE_MENU_ITEM = gql`
|
||||
mutation updateMenuItem($menuItem: UpdateMenuItemInput!) {
|
||||
updateMenuItem(menuItem: $menuItem) {
|
||||
id
|
||||
name
|
||||
available
|
||||
description
|
||||
price
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const DELETE_MENU_ITEM = gql`
|
||||
mutation deleteMenuItem($input: String!) {
|
||||
deleteMenuItem(menuItemId: $input)
|
||||
}
|
||||
`;
|
||||
|
||||
// ─── Provider ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export function ManagerProvider({ children }: { children: ReactNode }) {
|
||||
const [products, setProducts] = useState<Product[]>(MOCK_PRODUCTS);
|
||||
const [combos, setCombos] = useState<Combo[]>(MOCK_COMBOS);
|
||||
// Filter out the "all" pseudo-category — managers manage real categories only
|
||||
const [categories, setCategories] = useState<MenuCategory[]>(
|
||||
MENU_CATEGORIES.filter((c) => c.id !== "all"),
|
||||
);
|
||||
const [products, setProducts] = useState<MenuItemEntity[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<ManagerTab>("products");
|
||||
|
||||
// ── Product actions ──────────────────────────────────────────────────────
|
||||
const { data } = useQuery<allEateriesQuery>(GET_EATERY_MENU, {
|
||||
client: eateryClient,
|
||||
fetchPolicy: "network-only",
|
||||
});
|
||||
|
||||
const addProduct = (product: Omit<Product, "id">) => {
|
||||
const newProduct: Product = {
|
||||
...product,
|
||||
id: Date.now(),
|
||||
};
|
||||
setProducts((prev) => [...prev, newProduct]);
|
||||
const [mutateAddMenuItem] = useMutation<addMenuItemMutation>(ADD_MENU_ITEM, {
|
||||
client: eateryClient,
|
||||
});
|
||||
|
||||
const [mutateUpdateMenuItem] = useMutation<updateMenuItemMutation>(
|
||||
UPDATE_MENU_ITEM,
|
||||
{ client: eateryClient },
|
||||
);
|
||||
|
||||
const [mutateDeleteMenuItem] = useMutation<deleteMenuItemMutation>(
|
||||
DELETE_MENU_ITEM,
|
||||
{ client: eateryClient },
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.allEateries?.[0]) {
|
||||
setProducts(data.allEateries[0].menuItems);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
// ── MenuItemEntity actions ──────────────────────────────────────────────────────
|
||||
|
||||
const addProduct = async (product: MenuItemEntity) => {
|
||||
const { data } = await mutateAddMenuItem({
|
||||
variables: {
|
||||
menuItem: product,
|
||||
},
|
||||
});
|
||||
|
||||
if (data) setProducts((prev) => [...prev, data.addMenuItem]);
|
||||
};
|
||||
|
||||
const updateProduct = (product: Product) => {
|
||||
setProducts((prev) => prev.map((p) => (p.id === product.id ? product : p)));
|
||||
const updateProduct = async (product: MenuItemEntity) => {
|
||||
const { data } = await mutateUpdateMenuItem({
|
||||
variables: {
|
||||
menuItem: product,
|
||||
},
|
||||
});
|
||||
|
||||
if (data)
|
||||
setProducts((prev) =>
|
||||
prev.map((p) => (p.id === product.id ? data.updateMenuItem : p)),
|
||||
);
|
||||
};
|
||||
|
||||
const deleteProduct = (id: number) => {
|
||||
setProducts((prev) => prev.filter((p) => p.id !== id));
|
||||
const deleteProduct = async (id: string) => {
|
||||
const { data } = await mutateDeleteMenuItem({ variables: { input: id } });
|
||||
|
||||
if (data)
|
||||
setProducts((prev) =>
|
||||
prev.filter((p) => !(p.id == id && data.deleteMenuItem)),
|
||||
);
|
||||
};
|
||||
|
||||
const toggleProductAvailability = (id: number) => {
|
||||
setProducts((prev) =>
|
||||
prev.map((p) =>
|
||||
p.id === id ? { ...p, available: !(p.available ?? true) } : p,
|
||||
),
|
||||
);
|
||||
};
|
||||
const toggleProductAvailability = async (product: MenuItemEntity) => {
|
||||
const { data } = await mutateUpdateMenuItem({
|
||||
variables: {
|
||||
menuItem: { ...product, available: !product.available },
|
||||
},
|
||||
});
|
||||
|
||||
// ── Combo actions ────────────────────────────────────────────────────────
|
||||
|
||||
const addCombo = (combo: Omit<Combo, "id">) => {
|
||||
const newCombo: Combo = { ...combo, id: Date.now() };
|
||||
setCombos((prev) => [...prev, newCombo]);
|
||||
};
|
||||
|
||||
const updateCombo = (combo: Combo) => {
|
||||
setCombos((prev) => prev.map((c) => (c.id === combo.id ? combo : c)));
|
||||
};
|
||||
|
||||
const deleteCombo = (id: number) => {
|
||||
setCombos((prev) => prev.filter((c) => c.id !== id));
|
||||
};
|
||||
|
||||
const toggleComboAvailability = (id: number) => {
|
||||
setCombos((prev) =>
|
||||
prev.map((c) => (c.id === id ? { ...c, available: !c.available } : c)),
|
||||
);
|
||||
};
|
||||
|
||||
// ── Category actions ─────────────────────────────────────────────────────
|
||||
|
||||
const addCategory = (category: Omit<MenuCategory, "id">) => {
|
||||
const slug = category.name
|
||||
.toLowerCase()
|
||||
.normalize("NFD")
|
||||
.replace(/[\u0300-\u036f]/g, "")
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/(^-|-$)/g, "");
|
||||
const newCategory: MenuCategory = {
|
||||
...category,
|
||||
id: `${slug}-${Date.now()}`,
|
||||
};
|
||||
setCategories((prev) => [...prev, newCategory]);
|
||||
};
|
||||
|
||||
const updateCategory = (category: MenuCategory) => {
|
||||
setCategories((prev) =>
|
||||
prev.map((c) => (c.id === category.id ? category : c)),
|
||||
);
|
||||
};
|
||||
|
||||
const deleteCategory = (id: string) => {
|
||||
setCategories((prev) => prev.filter((c) => c.id !== id));
|
||||
if (data)
|
||||
setProducts((prev) =>
|
||||
prev.map((p) => (p.id === product.id ? data.updateMenuItem : p)),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<ManagerContext.Provider
|
||||
value={{
|
||||
products,
|
||||
combos,
|
||||
categories,
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
addProduct,
|
||||
updateProduct,
|
||||
deleteProduct,
|
||||
toggleProductAvailability,
|
||||
addCombo,
|
||||
updateCombo,
|
||||
deleteCombo,
|
||||
toggleComboAvailability,
|
||||
addCategory,
|
||||
updateCategory,
|
||||
deleteCategory,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user