Skip to content

Commit

Permalink
Refactor some UI of restaurant page
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-dharti-r
cp-dharti-r committed May 23, 2024
1 parent 3f55d64 commit 56f1e74
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 92 deletions.
5 changes: 0 additions & 5 deletions admin/pages/dishes/add/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ const AddDishPage = () => {
try {
const mySchema = z.object({
name: z.string().min(3),
description: z.string().min(3),
menu_id: z.number().positive({ message: "Select menu from list" }),
tags: z.array(z.string().min(2)).min(1),
price: z.number().positive(),
Expand Down Expand Up @@ -150,7 +149,6 @@ const AddDishPage = () => {

const response = mySchema.safeParse({
name: name,
description: description,
menu_id: menuId,
tags: tags,
price: price,
Expand Down Expand Up @@ -317,9 +315,6 @@ const AddDishPage = () => {
onChange={(e) => setDescription(e.target.value)}
></textarea>
</div>
<div className="mt-1 text-xs text-meta-1">
{errors.find((error) => error.for === "description")?.message}
</div>
</div>
<div className="mb-4.5 flex flex-col gap-6 xl:flex-row">
<div className="w-full xl:w-1/2">
Expand Down
7 changes: 1 addition & 6 deletions admin/pages/dishes/edit/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const EditDishPage = () => {
const [isVideoChecked, setIsVideoChecked] = useState<boolean>(false);

const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [description, setDescription] = useState<string>("");
const [menuId, setMenuOption] = useState<number>(0);
const [categoryId, setCategoryOption] = useState<number | null>(null);
const [tags, setTags] = useState<string[]>([]);
Expand Down Expand Up @@ -72,7 +72,6 @@ const EditDishPage = () => {

const mySchema = z.object({
name: z.string().min(3),
description: z.string().min(3),
menu_id: z.number().positive({ message: "Select menu from list" }),
tags: z.array(z.string().min(2)).min(1),
price: z.number().positive(),
Expand Down Expand Up @@ -220,7 +219,6 @@ const EditDishPage = () => {

const response = mySchema.safeParse({
name: name,
description: description,
menu_id: menuId,
tags: tags,
price: price,
Expand Down Expand Up @@ -410,9 +408,6 @@ const EditDishPage = () => {
defaultValue={description}
></textarea>
</div>
<div className="mt-1 text-xs text-meta-1">
{errors.find((error) => error.for === "description")?.message}
</div>
</div>
<div className="mb-4.5 flex flex-col gap-6 xl:flex-row">
<div className="w-full xl:w-1/2">
Expand Down
4 changes: 2 additions & 2 deletions admin/pages/menus/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ const MenusPage = () => {
const [menusCount, setMenusCount] = useState(0);

const [currentPage, setCurrentPage] = useState(1);
const pageSize = 5;
const pageSize = 10;

const fetchMenus = async (page: number) => {
try {
const user = await getCookiesValue("login-info");
const { data, error } = await supabase
.from("menus")
.select("id, restaurant_id, name")
.order('id', { ascending: false })
.order("id", { ascending: false })
.range((page - 1) * pageSize, pageSize * page - 1)
.eq("restaurant_id", user.split("/")[2])
.neq("restaurant_id", 0);
Expand Down
12 changes: 9 additions & 3 deletions website/components/Reel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,18 @@ const Reels = ({ dishesData, isDishesLoading }: ReelProps) => {
) : (
<SwiperComponent images={data.images}></SwiperComponent>
)}
<div className="absolute bottom-0 z-[1] flex h-full w-full flex-col gap-3 bg-gradient-to-t from-black/80 via-transparent to-black/60 p-5 pb-10 text-white">
<div className="flex h-full items-end justify-between gap-5 border-b border-white/10 pb-2 text-xl font-bold">
<div className="absolute bottom-0 z-[1] flex h-full w-full flex-col gap-2 bg-gradient-to-t from-black/80 via-transparent to-black/60 p-5 pb-5 text-white">
<div className="flex h-full items-end justify-between gap-5 text-xl font-bold">
<p className="min-w-2/5">{data.name}</p>
<p className="text-lg text-white/70">₹{data.price}</p>
</div>
<p className="text-sm">{data.description}</p>
{data.description && data.description != "" ? (
<p className="border-t border-white/10 text-sm pt-2">
{data.description}
</p>
) : (
""
)}
</div>
</div>
))}
Expand Down
2 changes: 1 addition & 1 deletion website/components/YouMayLike/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const YouMayLike = ({ restaurants }: { restaurants: any }) => {
loop={true}
autoplay={true}
effect="fade"
className="sm:h-[25rem]"
className="sm:h-[25rem] h-[19rem]"
>
{item.images.map((data: any, index: any) => (
<SwiperSlide key={"restaurant-image-swiper-" + index}>
Expand Down
157 changes: 82 additions & 75 deletions website/pages/restaurants/[restaurant]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const RestaurantMenu = ({
);
setIsDishesLoading(false);
} else {
restaurantData();
fetchRestaurantData();
fetchCategoriesData();
fetchDishes();
}
Expand Down Expand Up @@ -292,16 +292,16 @@ const RestaurantMenu = ({
</div>
</div>
</div>
{categoriesData ? (
<div className="container">
<p className="my-6 text-3xl font-bold">Categories</p>
{isCategoriesLoading ? (
<div className="grid grid-cols-2 lg:grid-cols-3 gap-5 h-full w-full">
<div className="h-48 lg:h-52 xl:h-72 bg-gray-200 dark:bg-gray-900 animate-pulse"></div>
<div className="bg-gray-200 dark:bg-gray-900 animate-pulse"></div>
<div className="hidden lg:block bg-gray-200 dark:bg-gray-900 animate-pulse"></div>
</div>
) : (
<div className="container">
{isCategoriesLoading ? (
<div className="grid grid-cols-2 lg:grid-cols-3 gap-5 h-full w-full">
<div className="h-48 lg:h-52 xl:h-72 bg-gray-200 dark:bg-gray-900 animate-pulse"></div>
<div className="bg-gray-200 dark:bg-gray-900 animate-pulse"></div>
<div className="hidden lg:block bg-gray-200 dark:bg-gray-900 animate-pulse"></div>
</div>
) : categoriesData && categoriesData.length > 0 ? (
<>
<p className="my-6 text-3xl font-bold">Categories</p>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-5 h-full w-full">
{categoriesData.map((item: any, index: any) => (
<Link
Expand Down Expand Up @@ -338,44 +338,44 @@ const RestaurantMenu = ({
</Link>
))}
</div>
)}
</div>
) : (
""
)}
{menusData ? (
<div className="container">
{menusData.map((item: any, index: any) =>
item.dishes.length > 0 ? (
<div
key={"desktop-menu-" + index}
id={"desktop-menu-" + item.id}
>
<InView triggerOnce>
{({ inView, ref, entry }) => (
<div
ref={ref}
className={`mt-20 flex w-full flex-col gap-5 ${
inView
? !isPageReset
? "animated-fade-y"
</>
) : (
""
)}
</div>
<div className="container">
{isDishesLoading ? (
<div className="grid h-full w-full grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{Array.from({ length: 4 }).map((_, index) => (
<MenuDishSkeleton
key={"menu-dish-skeleton-" + index}
classes="h-[30rem]"
/>
))}
</div>
) : menusData && menusData.length > 0 ? (
<>
{menusData.map((item: any, index: any) =>
item.dishes.length > 0 ? (
<div
key={"desktop-menu-" + index}
id={"desktop-menu-" + item.id}
>
<InView triggerOnce>
{({ inView, ref, entry }) => (
<div
ref={ref}
className={`mt-20 flex w-full flex-col gap-5 ${
inView
? !isPageReset
? "animated-fade-y"
: ""
: ""
: ""
}`}
>
<p className="border-b border-black border-opacity-10 pb-2 text-3xl font-bold dark:border-white dark:border-opacity-30">
{item.name}
</p>
{isDishesLoading ? (
<div className="grid h-full w-full grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{Array.from({ length: 4 }).map((_, index) => (
<MenuDishSkeleton
key={"menu-dish-skeleton-" + index}
classes="h-[30rem]"
/>
))}
</div>
) : (
}`}
>
<p className="border-b border-black border-opacity-10 pb-2 text-3xl font-bold dark:border-white dark:border-opacity-30">
{item.name}
</p>
<div className="grid h-full w-full grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{item.dishes.map((data: any) => (
<div
Expand Down Expand Up @@ -437,26 +437,26 @@ const RestaurantMenu = ({
</div>
))}
</div>
)}
</div>
)}
</InView>
</div>
) : (
""
)
)}
</div>
) : (
""
)}
</div>
)}
</InView>
</div>
) : (
""
)
)}
</>
) : (
""
)}
</div>
</div>
</section>
<section className="sm:hidden">
<div className="scrollbar-hidden mb-20 animated-fade">
<div className="scrollbar-hidden animated-fade">
<div
ref={resizableRestaurantDivRef}
className={`relative capitalize mb-16 ${
className={`relative capitalize ${
!isPageReset ? "smooth-resize" : ""
}`}
style={{
Expand Down Expand Up @@ -531,13 +531,15 @@ const RestaurantMenu = ({
</div>
</div>
</div>
<div className="scrollbar-hidden mx-3 mb-24">
<p className="my-6 text-center text-3xl font-bold">
Categories
</p>
{isCategoriesLoading ? (
{isCategoriesLoading ? (
<div className="scrollbar-hidden mx-3 mb-20">
<div className="h-52 w-full bg-gray-200 dark:bg-gray-900 animate-pulse"></div>
) : categoriesData ? (
</div>
) : categoriesData && categoriesData.length > 0 ? (
<div className="scrollbar-hidden mx-3 mt-16">
<p className="my-6 text-center text-3xl font-bold">
Categories
</p>
<div className="flex flex-col gap-5 h-full w-full">
{categoriesData.map((item: any, index: any) => (
<Link
Expand Down Expand Up @@ -572,12 +574,17 @@ const RestaurantMenu = ({
</Link>
))}
</div>
) : (
""
)}
</div>
{menusData ? (
<div className="scrollbar-hidden mx-3">
</div>
) : (
""
)}
{isDishesLoading ? (
<div className="mb-20 px-3 grid grid-cols-2 gap-3 h-full w-full">
<div className="h-48 w-full bg-gray-200 dark:bg-gray-900 animate-pulse rounded-xl"></div>
<div className="h-48 w-full bg-gray-200 dark:bg-gray-900 animate-pulse rounded-xl"></div>
</div>
) : menusData && menusData.length > 0 ? (
<div className="scrollbar-hidden mx-3 mt-16 mb-20">
<div className="text-center mb-5 border-b dark:border-white dark:border-opacity-30 border-black border-opacity-10 pb-2">
<p className="text-3xl font-bold mb-3">Menus</p>
<p className="text-gray-500 dark:text-gray-400 text-sm">
Expand Down

0 comments on commit 56f1e74

Please sign in to comment.