From bd79aa8cf0ea1ce78162dcaf73b523fbd38edcbd Mon Sep 17 00:00:00 2001 From: cp-dharti-r Date: Tue, 4 Jun 2024 17:15:08 +0530 Subject: [PATCH] Refactor UI to fix some design --- admin/pages/settings/index.tsx | 137 +++++++++++++++++- website/components/BottomSheet/index.tsx | 2 +- website/components/Reel/index.tsx | 113 ++++++++------- .../SkeletonPlaceholders/CategorySwiper.tsx | 8 +- .../SkeletonPlaceholders/MenuDish.tsx | 8 +- website/components/YouMayLike/index.tsx | 11 +- website/pages/category/restaurant.tsx | 58 ++++---- .../[restaurant]/categories/[category].tsx | 1 - .../pages/restaurants/[restaurant]/index.tsx | 29 +++- .../restaurants/[restaurant]/menus/[menu].tsx | 2 +- website/store/category/slice.ts | 6 +- website/types/category-by-id.ts | 5 + 12 files changed, 279 insertions(+), 101 deletions(-) diff --git a/admin/pages/settings/index.tsx b/admin/pages/settings/index.tsx index c90485f..2f6a0cd 100644 --- a/admin/pages/settings/index.tsx +++ b/admin/pages/settings/index.tsx @@ -56,6 +56,11 @@ const Settings = () => { const [name, setName] = useState(""); const [description, setDescription] = useState(""); const [address, setAddress] = useState(""); + const [localArea, setLocalArea] = useState(""); + const [city, setCity] = useState(""); + const [state, setState] = useState(""); + const [postalCode, setPostalCode] = useState(0); + const [country, setCountry] = useState("India"); const [phone, setPhone] = useState(""); const [tags, setTags] = useState([]); const [images, setImages] = useState([]); @@ -97,7 +102,7 @@ const Settings = () => { const { data, error } = await supabase .from("restaurants") .select( - "id, name, description, address, phone, images, tags, week_days, start_time, end_time, is_public" + "id, name, description, address, local_area, city, state, postal_code, country, phone, images, tags, week_days, start_time, end_time, is_public" ) .eq("id", user.split("/")[2]) .single(); @@ -108,12 +113,18 @@ const Settings = () => { setName(data.name); setDescription(data.description); setAddress(data.address); + setLocalArea(data.local_area); + setCity(data.city); + setState(data.state); + setPostalCode(data.postal_code); + setCountry(data.country); setPhone(data.phone); setTags(data.tags); setWeekDays(data.week_days); setStartTime(data.start_time); setEndTime(data.end_time); setIsPublic(data.is_public); + isSetImages ? await manageAccountImages(data.images) : ""; } catch (error) { console.error("Error while fetching data: ", error); @@ -222,6 +233,11 @@ const Settings = () => { name: z.string().min(3), phone: z.number().positive().min(10), address: z.string().min(10), + local_area: z.string().min(3), + city: z.string().min(3), + state: z.string().min(3), + postal_code: z.number().positive().min(5), + country: z.string().min(3), tags: z .array(z.string().min(3)) .min(1, { message: "Tags is required" }), @@ -237,6 +253,11 @@ const Settings = () => { name: name, phone: parseInt(phone), address: address, + local_area: localArea, + city: city, + state: state, + postal_code: postalCode, + country: country, tags: tags, description: description, // week_days: weekDays, @@ -261,6 +282,11 @@ const Settings = () => { name: name, description: description, address: address, + local_area: localArea, + city: city, + state: state, + postal_code: postalCode, + country: country, tags: tags.map((tag) => tag.toLowerCase()), phone: parseInt(phone), // week_days: weekDays, @@ -603,6 +629,115 @@ const Settings = () => { +
+
+ +
+ setLocalArea(e.target.value)} + value={localArea} + /> +
+
+ { + errors.find((error) => error.for === "localArea") + ?.message + } +
+
+ +
+ + setCity(e.target.value as any)} + value={city} + /> +
+ {errors.find((error) => error.for === "city")?.message} +
+
+
+ +
+
+ +
+ setState(e.target.value)} + value={state} + /> +
+
+ {errors.find((error) => error.for === "state")?.message} +
+
+ +
+ + setPostalCode(parseInt(e.target.value))} + value={postalCode} + /> +
+ { + errors.find((error) => error.for === "postalCode") + ?.message + } +
+
+
+ +
+ +
+ setCountry(e.target.value)} + value={country} + /> +
+
+ {errors.find((error) => error.for === "country")?.message} +
+
+
); diff --git a/website/components/Reel/index.tsx b/website/components/Reel/index.tsx index 76fedf9..7a78cfe 100644 --- a/website/components/Reel/index.tsx +++ b/website/components/Reel/index.tsx @@ -13,16 +13,28 @@ import "swiper/css/effect-fade"; interface ReelProps { dishesData: any; - isDishesLoading: boolean; } -const Reels = ({ dishesData, isDishesLoading }: ReelProps) => { +const Reels = ({ dishesData }: ReelProps) => { const dispatch = useAppDispatch(); const screenHeight = useAppSelector((state) => state.app.screenHeight); + const [isLoading, setIsLoading] = useState(true); const carouselRef = useRef(null); const [numDivsToRender, setNumDivsToRender] = useState(2); // Initial number of dish to render + useEffect(() => { + setIsLoading(true); + + if (carouselRef.current) { + carouselRef.current.scrollTop = 0; + + setTimeout(() => { + setIsLoading(false); + }, 500); + } + }, [dishesData]); + useEffect(() => { if (screenHeight == 0) { dispatch(setScreenHeightState(window.innerHeight)); @@ -71,19 +83,16 @@ const Reels = ({ dishesData, isDishesLoading }: ReelProps) => { return (
- {isDishesLoading ? ( -
- -
- ) : dishesData.length > 0 ? ( -
- {dishesData.slice(0, numDivsToRender).map((data: any, index: any) => ( + {isLoading ? : ""} +
+ {dishesData.length > 0 ? ( + dishesData.slice(0, numDivsToRender).map((data: any, index: any) => (
{ height: screenHeight != 0 ? screenHeight + "px" : "100vh", }} > - {data.video ? ( - + {!isLoading ? ( +
+ {data.video ? ( + + ) : ( + + )} +
+
+

{data.name}

+

₹{data.price}

+
+

+ {data.description} +

+
+
) : ( - + "" )} -
-
-

{data.name}

-

₹{data.price}

-
-

- {data.description} -

-
- ))} -
- ) : ( -
- -
- )} + )) + ) : ( +
+ +
+ )} +
); }; diff --git a/website/components/SkeletonPlaceholders/CategorySwiper.tsx b/website/components/SkeletonPlaceholders/CategorySwiper.tsx index 646dcc1..070c16b 100644 --- a/website/components/SkeletonPlaceholders/CategorySwiper.tsx +++ b/website/components/SkeletonPlaceholders/CategorySwiper.tsx @@ -4,16 +4,16 @@ const CategorySwiperSkeleton = ({ classes }: any) => { className={`${classes} h-60 animate-pulse grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4`} >
-
+
-
+
-
+
-
+
); diff --git a/website/components/SkeletonPlaceholders/MenuDish.tsx b/website/components/SkeletonPlaceholders/MenuDish.tsx index eee87c9..565d26e 100644 --- a/website/components/SkeletonPlaceholders/MenuDish.tsx +++ b/website/components/SkeletonPlaceholders/MenuDish.tsx @@ -1,13 +1,13 @@ const MenuDishSkeleton = ({ classes }: any) => { return (
-

-

-

+

+

+

diff --git a/website/components/YouMayLike/index.tsx b/website/components/YouMayLike/index.tsx index 634a81b..267492d 100644 --- a/website/components/YouMayLike/index.tsx +++ b/website/components/YouMayLike/index.tsx @@ -9,7 +9,6 @@ import { Autoplay, EffectFade } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; import SectionTitle from "../Common/SectionTitle"; -import supabase from "@/utils/supabase"; import "swiper/css"; import "swiper/css/effect-fade"; @@ -104,7 +103,15 @@ const YouMayLike = ({ restaurants }: { restaurants: any }) => { {item.name}

- {item.address} + {item.address + + ", " + + item.local_area + + ", " + + item.city + + ", " + + item.state + + ", " + + item.postal_code}

diff --git a/website/pages/category/restaurant.tsx b/website/pages/category/restaurant.tsx index 1f0e1da..c780290 100644 --- a/website/pages/category/restaurant.tsx +++ b/website/pages/category/restaurant.tsx @@ -22,7 +22,6 @@ const Restaurant = ({ isRestaurantsLoading: boolean; restaurantsData: RestaurantData[]; }) => { - const isPageReset = useAppSelector((state) => state.app.isPageReset); const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); const [currentItemsName, setCurrentItemsName] = useState(""); const [currentItems, setCurrentItems] = useState([]); @@ -50,20 +49,42 @@ const Restaurant = ({ ); }, [dispatch]); - return ( + return ( <> {restaurantsData && restaurantsData.length > 0 ? (
-

Restaurants to explore

{restaurantsData.map((item, index) => (
+ +

+ {item.name} +

+

+ + {item.address + ", "} + + {item.local_area + ", "} + {item.city + ", "} + {item.state + ", "} + {item.postal_code} +

+ {item.menu.map((data, index) => (
@@ -113,34 +134,13 @@ const Restaurant = ({ width={100} />
-
-

- {data.name} -

-
+

+ {data.name} +

))} - -

- {item.name} -

-

{item.address}

-
))}
diff --git a/website/pages/restaurants/[restaurant]/categories/[category].tsx b/website/pages/restaurants/[restaurant]/categories/[category].tsx index a9307a8..429fe27 100644 --- a/website/pages/restaurants/[restaurant]/categories/[category].tsx +++ b/website/pages/restaurants/[restaurant]/categories/[category].tsx @@ -216,7 +216,6 @@ const RestaurantCategory = ({ diff --git a/website/pages/restaurants/[restaurant]/index.tsx b/website/pages/restaurants/[restaurant]/index.tsx index 7de6be2..c05578b 100644 --- a/website/pages/restaurants/[restaurant]/index.tsx +++ b/website/pages/restaurants/[restaurant]/index.tsx @@ -65,7 +65,6 @@ const RestaurantMenu = ({ menuSections: any[]; } | null>(menus); - console.log("Menu data:", menusData); useEffect(() => { dispatch(setScreenHeightState(window.innerHeight)); @@ -136,7 +135,7 @@ const RestaurantMenu = ({ const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); const [currentItemsName, setCurrentItemsName] = useState(""); const [currentItems, setCurrentItems] = useState([]); - + const openBottomSheet = (name: string, items: any) => { setCurrentItemsName(name); setCurrentItems(items); @@ -144,7 +143,7 @@ const RestaurantMenu = ({ }; const closeBottomSheet = () => setIsBottomSheetOpen(false); - + return ( <> {restaurantData ? ( @@ -196,7 +195,17 @@ const RestaurantMenu = ({ > -

{restaurantData.address}

+

+ {restaurantData.address + + ", " + + restaurantData.local_area + + ", " + + restaurantData.city + + ", " + + restaurantData.state + + ", " + + restaurantData.postal_code} +

-

{restaurantData.address}

+

+ {restaurantData.address + + ", " + + restaurantData.local_area + + ", " + + restaurantData.city + + ", " + + restaurantData.state + + ", " + + restaurantData.postal_code} +

{ |

{menuName} dishes

- +
diff --git a/website/store/category/slice.ts b/website/store/category/slice.ts index 51f287b..ca1a568 100644 --- a/website/store/category/slice.ts +++ b/website/store/category/slice.ts @@ -117,7 +117,7 @@ export const getCategoriesData = async (suffix: any) => { menuDatas.map(async (menu: any) => { const { data: restaurantData, error: restaurantError } = await supabase .from("restaurants") - .select("id, name, address") + .select("id, name, address, local_area, city, state, postal_code, country") .eq("id", menu.restaurant_id) .eq("is_public", true) .single(); @@ -178,9 +178,7 @@ function mergeById(array: any[]): MergedRestaurant[] { array.forEach((item) => { if (!mergedData[item.id]) { mergedData[item.id] = { - address: item.address, - id: item.id, - name: item.name, + ...item, menu: [{ ...item.menu, dishes: [...item.dishes] }], }; } else { diff --git a/website/types/category-by-id.ts b/website/types/category-by-id.ts index db872a3..8631811 100644 --- a/website/types/category-by-id.ts +++ b/website/types/category-by-id.ts @@ -10,6 +10,11 @@ export type RestaurantData = { id: number; name: string; address: string; + local_area: string; + city: string; + state: string; + postal_code: number; + country: string; rating: number; reviews: number; menu: CategoryData[];