From 31d73143ff140fde68a7552c656cac9e431fd5bc Mon Sep 17 00:00:00 2001
From: iamtrazy <iamtrazy@proton.me>
Date: Wed, 4 Dec 2024 01:27:26 +0530
Subject: [PATCH] fix: UI enhancements

---
 src/components/User/Discount/index.tsx  | 124 ++++++++++++------------
 src/components/User/FoodCombo/index.tsx |  27 +++++-
 2 files changed, 85 insertions(+), 66 deletions(-)

diff --git a/src/components/User/Discount/index.tsx b/src/components/User/Discount/index.tsx
index 16967a1..ab2e33a 100644
--- a/src/components/User/Discount/index.tsx
+++ b/src/components/User/Discount/index.tsx
@@ -1,25 +1,38 @@
-import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import TextButton from './TextButton';
-import { useDiscount } from '@/api/useDiscount';
-import { Discount } from '@/types/discount';
+import { useQuery } from '@tanstack/react-query';
+import { useFoods } from '@/api/useFoodItem';
+import { useCombos } from '@/api/useFoodCombo';
+import { Food } from '@/types/food';
+import { FoodCombo } from '@/types/combo';
+import Item from '../AllMenuItems/ItemList';
 
 function index() {
-  const { getAllDiscounts } = useDiscount();
-  const [discount, setDiscount] = useState<Discount[]>([]);
+  const { getAllFoods } = useFoods();
+  const { getAllCombos } = useCombos();
 
-  const fetchDiscount = async () => {
-    try {
-      const data = await getAllDiscounts();
-      setDiscount(data);
-    } catch (error: any) {
-      console.error(error);
-    }
-  };
+  const foodQuery = useQuery({
+    queryKey: ['foods'],
+    queryFn: getAllFoods,
+  });
 
-  useEffect(() => {
-    fetchDiscount();
-  }, []);
+  const comboQuery = useQuery({
+    queryKey: ['combos'],
+    queryFn: getAllCombos,
+  });
+
+  if (foodQuery.isLoading || comboQuery.isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (foodQuery.isError || comboQuery.isError) {
+    return <div>Error loading items</div>;
+  }
+
+  const foods: Food[] = foodQuery.data.filter(
+    (food: Food) => food.discountStatus,
+  );
+  const combos: FoodCombo[] = comboQuery.data.filter(
+    (combo: FoodCombo) => combo.discountStatus,
+  );
 
   return (
     <div>
@@ -27,53 +40,38 @@ function index() {
         <b>Promotions</b>
       </div>
       <div className="mt-2 mx-auto max-w-screen-xl px-4 2xl:px-0">
-        Enjoy great savings with exclusive deals and offers available on your favorite items.
+        Enjoy great savings with exclusive deals and offers available on your
+        favorite items.
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 mx-auto max-w-screen-xl mt-10">
-        {discount.map((item: any) => {
-          return (
-            <Link
-              to={`/menuItems/${item[0].menuItemType === "Food Item" ? "viewfooditem" : "viewfoodcombo"}/${item[0].menuItemId}`}
-              className="hover:scale-105 transition-transform duration-300 hover:cursor-pointer"
-            >
-              <div
-                className="dark:border rounded-2xl border-foodbg bg-foodbg backdrop-blur-md xl:w-[500px] lg:w-[450px] h-[280px] p-2 py-2 mx-[10%] mb-10 overflow-hidden"
-                style={{
-                  boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.12)',
-                  backgroundColor: 'rgba(255, 255, 255, 0.01)',
-                }}
-              >
-                {item[0].limited === 1 && (
-                  <div className="absolute p-2 w-[120px] h-2 rotate-[135deg] bg-gradient-to-r from-red-600 to-red-800 translate-x-[-35px] translate-y-[20px]">
-                    <p className="rotate-180 text-xs translate-y-[-7.5px] translate-x-[-15px] text-white">
-                      LIMITED TIME
-                    </p>
-                  </div>
-                )}
-
-                <div className="h-50 bg-green rounded-xl">
-                  <img src={item[0].image} alt="" className="w-[100%]" />
-                </div>
-
-                <div className="flex justify-between px-3 mt-2">
-                  <div className="">
-                    <p>
-                      <b className="dark:text-white text-foodbg text-xl">
-                        {item[0].name}
-                      </b>
-                    </p>
-                    <p>{item[0].branch}</p>
-                  </div>
-
-                  <div className="pt-[7px] pb-[3px]">
-                    <TextButton value="Buy Now" />
-                  </div>
-                </div>
-              </div>
-            </Link>
-          );
-        })}
+      <div className="mx-auto max-w-screen-xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-5 mt-10">
+        {foods.map((food: Food) => (
+          <Item
+            key={food.id}
+            id={food.id}
+            name={food.name}
+            rating={food.rating}
+            price={food.price}
+            image={food.image}
+            categories={food.categories}
+            discountStatus={food.discountStatus}
+            available={food.available}
+            type={'fooditem'}
+          />
+        ))}
+        {combos.map((combo: FoodCombo) => (
+          <Item
+            key={combo.id}
+            id={combo.id}
+            name={combo.name}
+            rating={combo.rating}
+            price={combo.price}
+            image={combo.image}
+            discountStatus={combo.discountStatus}
+            available={combo.available}
+            type={'foodcombo'}
+          />
+        ))}
       </div>
     </div>
   );
diff --git a/src/components/User/FoodCombo/index.tsx b/src/components/User/FoodCombo/index.tsx
index 54318d5..ed12d98 100644
--- a/src/components/User/FoodCombo/index.tsx
+++ b/src/components/User/FoodCombo/index.tsx
@@ -36,6 +36,7 @@ function FoodComboForm({ id }: Props) {
   const [combo, setFoodCombo] = useState<FoodCombo>();
   const [price, setPrice] = useState<number>(1);
   const [additionalPrices, setAdditionalPrices] = useState<number>(0);
+  const [currentRating, setCurrentRating] = useState<number>(4);
 
   const {
     handleSubmit,
@@ -115,6 +116,11 @@ function FoodComboForm({ id }: Props) {
     setAdditionalPrices((prev) => prev + priceDelta);
   };
 
+  const handleStarClick = (starIndex: number) => {
+    setCurrentRating(starIndex + 1);
+    showSwal();
+  };
+
   if (!combo) {
     return <div>Loading...</div>;
   }
@@ -123,8 +129,17 @@ function FoodComboForm({ id }: Props) {
 
   return (
     <div className="flex items-center h-110vh lg:h-[calc(100vh-120px)]">
+      <Button
+        className="bg-gradient-to-r from-orange-600 to-orange-400 text-white 
+        shadow-lg rounded-full min-w-[50px] h-[50px] absolute left-[8%] top-[120px] z-10 
+        hover:opacity-90 transition-all text-2xl flex items-center justify-center p-0"
+        onClick={() => navigate(-1)}
+      >
+        &#8249;
+      </Button>
+
       <div
-        className="ml-[10%] flex flex-col lg:flex-row flex-grow items-center justify-between px-4 py-4 rounded-2xl border border-combobg bg-combobg backdrop-blur-md h-[calc(100vh - 20px)]"
+        className="ml-[10%] flex flex-col lg:flex-row flex-grow items-center justify-between px-4 py-4 rounded-2xl border border-foodbg bg-foodbg backdrop-blur-md h-[calc(100vh - 20px)]"
         style={{
           marginLeft: '10%',
           marginRight: '10%',
@@ -143,9 +158,15 @@ function FoodComboForm({ id }: Props) {
           <div className="text-4xl font-bold text-white">{combo.name}</div>
           <div className="pt-3">{combo.description}</div>
 
-          <div className="flex items-center pt-3">
+          <div className="flex items-center pt-3 gap-2">
             {Array.from({ length: 5 }).map((_, i) => (
-              <Star key={`star-${i}`} highlight={i !== 4} />
+              <div
+                key={`star-${i}`}
+                className="cursor-pointer transform scale-150 hover:scale-[1.6] transition-transform"
+                onClick={() => handleStarClick(i)}
+              >
+                <Star highlight={i <= currentRating - 1} />
+              </div>
             ))}
           </div>