danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

online cart with Optimistic state

Browse Source
This commit is contained in:
hamid zarghami
2025-12-01 15:01:18 +03:30
parent dd18870b85
commit bf043512e9
4 changed files with 125 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/listview/MenuItem.tsx
+4 -26
View File
@@ -7,17 +7,13 @@ import MinusIcon from "@/components/icons/MinusIcon";
import { useCart } from "@/app/[name]/(Dialogs)/cart/hook/useCart";
import { motion } from "framer-motion";
import type { Food } from "@/app/[name]/(Main)/types/Types";
import { Refresh } from "iconsax-react";
import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
interface MenuItemProps {
food: Food;
}
const MenuItem = ({ food }: MenuItemProps) => {
const { isSuccess } = useGetProfile();
const { items, addToCart, removeFromCart, isItemLoading } = useCart();
const isLoading = isItemLoading(food.id);
const { items, addToCart, removeFromCart } = useCart();
const quantity = useMemo(() => {
const item = items?.[food.id];
@@ -89,26 +85,10 @@ const MenuItem = ({ food }: MenuItemProps) => {
whileTap={{ scale: 1.05 }}
className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
>
{isSuccess && isLoading && (
<motion.div
className="absolute inset-0 bg-background/80 flex items-center justify-center z-10"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<motion.div
animate={{ rotateZ: [0, 360] }}
transition={{ duration: 1.2, repeat: Infinity, ease: 'linear' }}
>
<Refresh className="text-foreground" size={20} />
</motion.div>
</motion.div>
)}
{quantity <= 0 ? (
<button
onClick={handleAddToCart}
disabled={isSuccess && isLoading}
className="inline-flex w-full justify-center items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
className="inline-flex w-full justify-center items-center gap-2"
>
<PlusIcon />
<div className="text-sm2 pt-0.5 font-normal text-foreground">
@@ -119,8 +99,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
<>
<button
onClick={handleAddToCart}
disabled={isSuccess && isLoading}
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
>
<PlusIcon className="text-foreground" />
</button>
@@ -135,8 +114,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
</motion.div>
<button
onClick={handleRemoveFromCart}
disabled={isSuccess && isLoading}
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
>
<MinusIcon className="text-foreground" />
</button>