feat: modal for making user login

ajesuscode · Oct 12, 2023 · dfc9907 · dfc9907
1 parent 33f215c
commit dfc9907
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 13 deletions.
diff --git a/src/app/(surfspots)/spots/[spot_id]/page.tsx b/src/app/(surfspots)/spots/[spot_id]/page.tsx
@@ -1,6 +1,9 @@
 import { HourlySurfData } from "@/app/constants/types";
 import NotFound from "@/app/not-found";
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import {
+    User,
+    createServerComponentClient,
+} from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
 import type { Database } from "@/app/lib/database.types";
 import Link from "next/link";
@@ -12,6 +15,12 @@ import { getCurrentPintxoConditions } from "@/app/utils/surfUtils";
 import { DateTime } from "luxon";
 import SpotConditionsWeek from "@/app/components/SpotConditionsWeek";
 
+async function getUser(): Promise<User | null> {
+    const supabase = createServerComponentClient<Database>({ cookies });
+    const { data: user } = await supabase.auth.getUser();
+    return user ? user.user : null;
+}
+
 async function getSpotInfo(id: string) {
     const supabase = createServerComponentClient<Database>({ cookies });
 
@@ -42,6 +51,7 @@ export default async function SpotPage({
     params: { spot_id: string };
 }) {
     const id = params.spot_id;
+    const user = await getUser();
     const spot = await getSpotInfo(id);
     const favorite = await isSpotFavorite(id);
     const isFavorite = !!favorite;
@@ -73,6 +83,7 @@ export default async function SpotPage({
                             <AddToFavoriteBtn
                                 spotId={id}
                                 isFavorite={isFavorite}
+                                user={user}
                             />
                         </div>
                         <div className="flex flex-row gap-6 justify-start  items-center ml-2 lg:m-0 overflow-y-auto mt-4">

diff --git a/src/app/api/favorite/route.ts b/src/app/api/favorite/route.ts
@@ -23,9 +23,6 @@ export async function POST(req: NextRequest, res: NextResponse) {
                 .from("fav_spots")
                 .delete()
                 .eq("spot_id", favorite.spot_id);
-            console.log(
-                "DELETEDDDDDDDD //////////////////////////////////////////////////////////////"
-            );
             return NextResponse.json({ error, status: "200" });
         } else {
             const { data, error } = await supabase
@@ -37,8 +34,6 @@ export async function POST(req: NextRequest, res: NextResponse) {
                 })
                 .select()
                 .single();
-            console.log("Spot added", data);
-            console.log("EROOORRRR", error);
             return NextResponse.json({ data, error });
         }
     } catch (error) {

diff --git a/src/app/components/AddToFavoriteBtn.tsx b/src/app/components/AddToFavoriteBtn.tsx
@@ -1,19 +1,29 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import { AddFavoriteIcon, RemoveFavoriteIcon } from "./icons/icons";
+import { User } from "@supabase/supabase-js";
 
 interface AddFavoriteBtnProps {
     spotId: string;
     isFavorite: boolean;
+    user: User | null;
 }
 
 export default function AddToFavoriteBtn({
     spotId,
     isFavorite,
+    user,
 }: AddFavoriteBtnProps) {
+    const [showModal, setShowModal] = useState(false);
     const router = useRouter();
     const handleAddFavoriteSpot = async () => {
+        console.log(user);
+        if (!user) {
+            console.log(user);
+            setShowModal(true);
+            return;
+        }
         const res = await fetch("/api/favorite", {
             method: "POST",
             headers: {
@@ -22,7 +32,6 @@ export default function AddToFavoriteBtn({
             body: JSON.stringify(spotId),
         });
         const json = await res.json();
-        console.log(res);
         if (json.error) {
             console.log(json.error);
         }
@@ -31,12 +40,41 @@ export default function AddToFavoriteBtn({
         }
     };
     return (
-        <div onClick={handleAddFavoriteSpot}>
-            {!isFavorite ? (
-                <AddFavoriteIcon size={20} color={"text-dark"} />
-            ) : (
-                <RemoveFavoriteIcon size={20} color={"text-dark"} />
+        <div>
+            {showModal && (
+                <div className="fixed inset-0 flex items-center justify-center z-50">
+                    <div className="relative bg-secondary p-8 rounded-lg shadow-lg w-2/3">
+                        <button
+                            className="absolute top-2 right-2 text-dark font-bold"
+                            onClick={() => setShowModal(false)}
+                        >
+                            &times;
+                        </button>
+                        <h2 className="text-2xl mb-4 font-body font-bold text-dark">
+                            Login Required
+                        </h2>
+                        <p className="text-gray-700">
+                            Dear friend! You need to be logged in to add
+                            favorites.
+                        </p>
+                        <div className="mt-4 flex justify-center">
+                            <button
+                                className="bg-red-400 text-dark px-4 py-2 rounded"
+                                onClick={() => router.push("/login")}
+                            >
+                                Go to Login
+                            </button>
+                        </div>
+                    </div>
+                </div>
             )}
+            <div onClick={handleAddFavoriteSpot} className="cursor-pointer">
+                {!isFavorite ? (
+                    <AddFavoriteIcon size={20} color={"text-dark"} />
+                ) : (
+                    <RemoveFavoriteIcon size={20} color={"text-dark"} />
+                )}
+            </div>
         </div>
     );
 }