feat: read in description (#20)

package.json

@@ -22,13 +22,15 @@
     "@nanostores/react": "0.7.1",
     "@supabase/supabase-js": "2.39.3",
     "@types/react": "^18.2.48",
+    "@types/react-cookies": "0.1.3",
     "@types/react-dom": "^18.2.18",
     "astro": "^4.2.6",
     "clsx": "2.0.0",
     "framer-motion": "10.16.16",
     "html-to-image": "1.11.11",
     "nanostores": "0.9.5",
     "react": "^18.2.0",
+    "react-cookie": "7.0.2",
     "react-dom": "^18.2.0",
     "sharp": "^0.33.2",
     "tailwind-merge": "2.2.0",

src/components/register-page/Hero.tsx

@@ -1,23 +1,88 @@
 import BarImage from "@/assets/images/bar.jpg";
+import PageImage from "@/assets/images/scene14.gif";
+import parser from "@/utils/parser";
+import { useCallback, useMemo } from "react";
+import { useCookies } from "react-cookie";
+
+interface HeroProps {
+  accessToken: string | undefined;
+  cocktail: string | undefined;
+}
+
+const Hero = ({ accessToken, cocktail }: HeroProps): JSX.Element => {
+  const cocktailInfo = useMemo(() => {
+    return parser(cocktail);
+  }, [cocktail]);
+
+  const removeCookie = useCookies(["cocktail"])[2];
+
+  const handleReset = useCallback(async () => {
+    localStorage.removeItem("scores");
+    removeCookie("cocktail", { path: "/" });
+
+    window.location.href = "/story/scene1";
+  }, []);
 
-const Hero = (): JSX.Element => {
   return (
     <div className="flex w-full flex-grow flex-col items-center justify-center space-y-12">
-      <div className="flex aspect-square w-full overflow-hidden rounded-lg object-cover">
+      <div className="relative flex aspect-square w-full overflow-hidden rounded-lg object-cover">
         <img
-          src={BarImage.src}
+          src={cocktail ? PageImage.src : BarImage.src}
           alt="Bar Image"
           className="h-full w-full object-cover"
         />
+        {cocktail && (
+          <div
+            className={`absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center gap-y-2`}
+          >
+            <div>
+              <img
+                src={cocktailInfo.image}
+                className="h-48 w-48 object-contain object-center"
+                alt={cocktailInfo.name}
+              />
+            </div>
+            <h3 className="text-center text-xl font-semibold text-white">
+              {cocktailInfo.name}
+            </h3>
+          </div>
+        )}
       </div>
       <div className="w-full space-y-4">
-        <button className="flex h-fit w-full flex-wrap items-center justify-center gap-6 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button">
-          เริ่มต้นการทำแบบทดสอบ
-        </button>
+        {cocktail && (
+          <button
+            onClick={handleReset}
+            type="button"
+            className="flex h-fit w-full flex-wrap items-center justify-center gap-6 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button outline-none"
+          >
+            ทำแบบทดสอบอีกครั้ง
+          </button>
+        )}
+
+        {!cocktail && accessToken && (
+          <a href="/story/scene1">
+            <button
+              type="button"
+              className="flex h-fit w-full flex-wrap items-center justify-center gap-6 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button outline-none"
+            >
+              เริ่มต้นการทำแบบทดสอบ
+            </button>
+          </a>
+        )}
 
-        <button className="flex h-fit w-full flex-wrap items-center justify-center gap-2 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button">
-          <i className="icon-[devicon--google] h-5 w-5"></i>Register with google
-        </button>
+        {!cocktail && !accessToken && (
+          <form action="/api/auth/signin" method="post" data-astro-reload>
+            <button
+              value="google"
+              name="provider"
+              type="submit"
+              className="flex h-fit w-full flex-wrap items-center justify-center gap-2 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button outline-none"
+            >
+              <i className="icon-[devicon--google] h-5 w-5"></i>Login with
+              google
+            </button>
+          </form>
+        )}
       </div>
     </div>
   );

src/components/story/Calculation.tsx

@@ -1,19 +1,20 @@
+import scores from "@/store/score";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
-
-import scores from "@/store/score";
+import { useCookies } from "react-cookie";
 
 const Calculation = () => {
   const $scores = useStore(scores);
+  const setCookie = useCookies(["cocktail"])[1];
 
   useEffect(() => {
     const url: Record<number, string> = {
-      0: "/cocktail/sangria",
-      1: "/cocktail/cosmopolitan",
-      2: "/cocktail/pinacolada",
-      3: "/cocktail/ginandtonic",
-      4: "/cocktail/bluelagoon",
-      5: "/cocktail/lavenderlemonade",
+      0: "sangria",
+      1: "cosmopolitan",
+      2: "pinacolada",
+      3: "ginandtonic",
+      4: "bluelagoon",
+      5: "lavenderlemonade",
     };
     const scoreMap: { [key: string]: number } = $scores;
     const fullscore = [40, 52, 45.5, 49, 49.5, 42.5];
@@ -23,7 +24,10 @@ const Calculation = () => {
     }
     const maxScore = Math.max(...product);
     const maxKey = product.indexOf(maxScore);
-    if (window) window.location.href = url[maxKey];
+    setCookie("cocktail", url[maxKey].toString(), {
+      path: "/",
+    });
+    if (window) window.location.href = "/cocktail/" + url[maxKey];
   }, []);
 };
 

src/lib/supabase.ts

@@ -6,9 +6,6 @@ export const supabase = createClient(
   {
     auth: {
       flowType: "pkce",
-      // autoRefreshToken: false,
-      // detectSessionInUrl: false,
-      // persistSession: true,
     },
   }
 );

src/middleware/index.ts

@@ -1,8 +1,20 @@
 import { defineMiddleware } from "astro:middleware";
 
-export const onRequest = defineMiddleware((context, next) => {
-  // TODO: Implement auth routes logic
-  console.log("Middleware works!");
+export const onRequest = defineMiddleware(
+  ({ cookies, request, redirect }, next) => {
+    const token = cookies.get("sb-access-token")?.value;
+    const cocktail = cookies.get("cocktail")?.value;
 
-  return next();
-});
+    if (
+      (request.url.includes("/story") || request.url.includes("/cocktail")) &&
+      !token
+    ) {
+      return redirect("/");
+    }
+
+    if (request.url.includes("/story") && cocktail) {
+      return redirect("/cocktail/" + cocktail);
+    }
+    return next();
+  }
+);