Merge pull request #13 from canopas/deploy-website-using-s3

Implement SSR for website

admin/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@react-email/render": "^0.0.14",
     "@supabase/ssr": "latest",
     "@supabase/supabase-js": "latest",
     "aws-sdk": "^2.1583.0",

admin/pages/forgot-password/index.tsx

@@ -62,6 +62,14 @@ const ForgotPasswordPage = () => {
         .setNotBefore(iat)
         .sign(new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_SECRET));
 
+      const { data: _, error: authError } =
+        await supabase.auth.signInWithPassword({
+          email: process.env.NEXT_PUBLIC_SUPABASE_USER!,
+          password: process.env.NEXT_PUBLIC_SUPABASE_USER_PWD!,
+        });
+
+      if (authError) throw authError;
+
       const { error } = await supabase.from("admins").upsert({
         id: user.id,
         email: user.email,
@@ -73,7 +81,7 @@ const ForgotPasswordPage = () => {
 
       await sendEmail({
         to: email,
-        subject: "Bite Space - Reset Password Link",
+        subject: "Reset Password Link",
         message: render(
           ForgotPasswordEmail(
             process.env.NEXT_PUBLIC_ADMIN_BASE_URL + "/reset-password/" + token

admin/service/mailService.ts

@@ -10,7 +10,7 @@ const ses = new AWS.SES({ apiVersion: "latest" });
 
 export async function sendEmail({ to, subject, message }: any) {
   const params = {
-    Source: process.env.NEXT_PUBLIC_MAIL_SENDER!,
+    Source: "BiteSpace " + process.env.NEXT_PUBLIC_MAIL_SENDER!,
     Destination: { ToAddresses: [to] },
     Message: {
       Subject: { Data: subject },

website/components/FoodCategory/index.tsx

@@ -16,41 +16,41 @@ import "swiper/css/navigation";
 import CategorySwiperSkeleton from "../SkeletonPlaceholders/CategorySwiper";
 import { useAppDispatch, useAppSelector } from "@/store/store";
 import { setCategoriesState } from "@/store/home/slice";
+import { getFoodCategories } from "@/store/category/slice";
 
-const FoodCategory = () => {
+const FoodCategory = ({ categories }: { categories: any }) => {
   const dispatch = useAppDispatch();
-  const foodDataState = useAppSelector((state) => state.home.categories);
+  const categoriesState = useAppSelector((state) => state.home.categories);
 
-  const [isFoodLoading, setIsFoodLoading] = useState(true);
-  const [foodData, setFoodData] = useState<any | null>([]);
+  const [isCategoriesLoading, setIsCategoriesLoading] = useState(
+    categories ? false : true
+  );
+  const [categoriesData, setCategoriesData] = useState<any | null>(categories);
 
   useEffect(() => {
     const fetchCategories = async () => {
       try {
-        const { data, error } = await supabase
-          .from("categories")
-          .select("*")
-          .eq("restaurant_id", 0)
-          .order("id", { ascending: true });
-
+        const { data, error } = await getFoodCategories();
         if (error) throw error;
 
         dispatch(setCategoriesState(data));
-        setFoodData(data);
+        setCategoriesData(data);
       } catch (error) {
         console.error("Error fetching data:", error);
       } finally {
-        setIsFoodLoading(false);
+        setIsCategoriesLoading(false);
       }
     };
 
-    if (foodDataState.length == 0) {
-      fetchCategories();
-    } else {
-      setFoodData(foodDataState);
-      setIsFoodLoading(false);
+    if (!categories) {
+      if (categoriesState.length == 0) {
+        fetchCategories();
+      } else {
+        setCategoriesData(categoriesState);
+        setIsCategoriesLoading(false);
+      }
     }
-  }, [dispatch, foodDataState, foodDataState.length]);
+  }, [dispatch, categories, categoriesState, categoriesState.length]);
 
   return (
     <>
@@ -62,7 +62,7 @@ const FoodCategory = () => {
             customClass="mx-auto text-center mb-12 xl:mb-28 mt-20"
           />
 
-          {isFoodLoading ? (
+          {isCategoriesLoading ? (
             <CategorySwiperSkeleton />
           ) : (
             <>
@@ -74,7 +74,7 @@ const FoodCategory = () => {
                 navigation
                 className="food-category-swiper !hidden h-[27rem] lg:!block"
               >
-                {foodData.map((item: any, index: any) => (
+                {categoriesData.map((item: any, index: any) => (
                   <SwiperSlide key={"lg-category-index-" + index}>
                     <Link
                       href={
@@ -110,7 +110,7 @@ const FoodCategory = () => {
                 navigation
                 className="food-category-swiper !hidden h-[27rem] md:!block lg:!hidden"
               >
-                {foodData.map((item: any, index: any) => (
+                {categoriesData.map((item: any, index: any) => (
                   <SwiperSlide key={"md-category-index-" + index}>
                     <Link
                       href={
@@ -146,7 +146,7 @@ const FoodCategory = () => {
                 navigation
                 className="food-category-swiper !hidden h-[27rem] sm:!block md:!hidden"
               >
-                {foodData.map((item: any, index: any) => (
+                {categoriesData.map((item: any, index: any) => (
                   <SwiperSlide key={"sm-category-index-" + index}>
                     <Link
                       href={
@@ -182,7 +182,7 @@ const FoodCategory = () => {
                 navigation
                 className="food-category-swiper h-[27rem] sm:!hidden"
               >
-                {foodData.map((item: any, index: any) => (
+                {categoriesData.map((item: any, index: any) => (
                   <SwiperSlide key={"xs-category-index-" + index}>
                     <Link
                       href={

website/components/ItemCard/index.tsx

@@ -9,61 +9,36 @@ import supabase from "@/utils/supabase";
 import { InView } from "react-intersection-observer";
 import { useAppDispatch, useAppSelector } from "@/store/store";
 import { setFoodItemsState } from "@/store/home/slice";
+import { getItemCardData } from "@/store/category/slice";
 
-const ItemCard = () => {
+const ItemCard = ({ items }: { items: any }) => {
   const dispatch = useAppDispatch();
   const isPageReset = useAppSelector((state) => state.app.isPageReset);
-  const itemDataState = useAppSelector((state) => state.home.foodItems);
-  const [itemData, setMostBrowsedItemData] = useState<any | null>([]);
+  const itemsState = useAppSelector((state) => state.home.foodItems);
+
+  const [itemsData, setMostBrowsedItemData] = useState<any | null>(items);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        // Fetch menu IDs associated with public restaurants
-        const { data: menusData, error: menuError } = await supabase
-          .from("menus")
-          .select("id, restaurants(id)")
-          .eq("restaurants.is_public", true)
-          .not("restaurants", "is", null);
-
-        if (menuError) throw menuError;
-
-        // Extract menu IDs
-        const menuIds = menusData.map((menu) => menu.id);
-
-        // Fetch dishes associated with the obtained menu IDs
-        const { data: dishesData, error: dishesError } = await supabase
-          .from("dishes")
-          .select("*, menus(id, restaurants(id, name, address))")
-          .in("menu_id", menuIds)
-          .order("id", { ascending: true })
-          .limit(9);
+        const { data, error } = await getItemCardData();
+        if (error) return error;
 
-        if (dishesError) throw dishesError;
-
-        const restaurant = await Promise.all(
-          dishesData.map(async (dish) => {
-            return {
-              ...dish,
-              image: dish.images ? dish.images[0] : "",
-              rating: 4.2,
-            };
-          })
-        );
-
-        dispatch(setFoodItemsState(restaurant));
-        setMostBrowsedItemData(restaurant);
+        dispatch(setFoodItemsState(data));
+        setMostBrowsedItemData(data);
       } catch (error) {
         console.error("Error fetching data:", error);
       }
     };
 
-    if (itemDataState.length == 0) {
-      fetchData();
-    } else {
-      setMostBrowsedItemData(itemDataState);
+    if (!items) {
+      if (itemsState.length == 0) {
+        fetchData();
+      } else {
+        setMostBrowsedItemData(itemsState);
+      }
     }
-  }, [dispatch, itemDataState, itemDataState.length]);
+  }, [dispatch, items, itemsState, itemsState.length]);
 
   return (
     <section className="bg-primary bg-opacity-10 py-16 md:py-20 lg:py-28">
@@ -73,9 +48,9 @@ const ItemCard = () => {
           paragraph="Connect Locally: Must-Visit Places in Your Neighborhood. In our vibrant community, explore top-rated local experiences."
           customClass="mb-12 xl:mb-28"
         />
-        {itemData ? (
+        {itemsData ? (
           <div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 md:gap-x-6 lg:gap-x-8 xl:grid-cols-3">
-            {itemData.map((item: any, index: any) => (
+            {itemsData.map((item: any, index: any) => (
               <div key={"item-card-" + index}>
                 <InView
                   triggerOnce

website/components/YouMayLike/index.tsx

@@ -15,23 +15,20 @@ import "swiper/css";
 import "swiper/css/effect-fade";
 import { useAppDispatch, useAppSelector } from "@/store/store";
 import { setRestaurantsState } from "@/store/home/slice";
+import { getYouMayLikeData } from "@/store/category/slice";
 
-const YouMayLike = () => {
+const YouMayLike = ({ restaurants }: { restaurants: any }) => {
   const dispatch = useAppDispatch();
   const isPageReset = useAppSelector((state) => state.app.isPageReset);
   const restaurantsState = useAppSelector((state) => state.home.restaurants);
-  const [restaurants, setRestaurantsData] = useState<any | null>([]);
+  const [restaurantsData, setRestaurantsData] = useState<any | null>(
+    restaurants
+  );
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const { data, error } = await supabase
-          .from("restaurants")
-          .select("*")
-          .eq("is_public", true)
-          .order("id", { ascending: true })
-          .limit(4);
-
+        const { data, error } = await getYouMayLikeData();
         if (error) return error;
 
         dispatch(setRestaurantsState(data));
@@ -41,12 +38,14 @@ const YouMayLike = () => {
       }
     };
 
-    if (restaurantsState.length == 0) {
-      fetchData();
-    } else {
-      setRestaurantsData(restaurantsState);
+    if (!restaurants) {
+      if (restaurantsState.length == 0) {
+        fetchData();
+      } else {
+        setRestaurantsData(restaurantsState);
+      }
     }
-  }, [dispatch, restaurantsState, restaurantsState.length]);
+  }, [dispatch, restaurants, restaurantsState, restaurantsState.length]);
 
   return (
     <>
@@ -58,13 +57,13 @@ const YouMayLike = () => {
             customClass="mb-12 xl:mb-28 mt-20"
           />
 
-          {restaurants ? (
+          {restaurantsData ? (
             <div
               className={`grid grid-cols-1 gap-4 xs:gap-10 lg:grid-cols-2 ${
                 !isPageReset ? "animated-fade-y" : ""
               }`}
             >
-              {restaurants.map((item: any, index: any) => (
+              {restaurantsData.map((item: any, index: any) => (
                 <Link
                   key={"may-like-" + index}
                   href={
@@ -76,6 +75,7 @@ const YouMayLike = () => {
                     btoa(item.id.toString())
                   }
                   className="relative h-full cursor-pointer"
+                  aria-label={`View details about ${item.name}`}
                 >
                   <Swiper
                     modules={[Autoplay, EffectFade]}
@@ -92,7 +92,7 @@ const YouMayLike = () => {
                           height={100}
                           width={100}
                           className="h-full w-full object-cover"
-                          alt="item-image"
+                          alt={`Image of ${item.name}`}
                           loading="lazy"
                         />
                       </SwiperSlide>

website/next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // reactStrictMode: true,
+  reactStrictMode: true,
   images: {
     unoptimized: true,
     domains: ["rftxzccfellupeepddjl.supabase.co"],