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) => (
- ))}
-
- ) : (
-
-
-
- )}
+ ))
+ ) : (
+
+
+
+ )}
+
);
};
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}
+
))}
-
-
- {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}
+
>
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[];