Merge branch 'dev' of https://github.com/Glider6014/kanapka-ai into dev

Glider6014 · Nov 25, 2024 · e04ceeb · e04ceeb
2 parents 51bdc37 + d95e434
commit e04ceeb
Show file tree

Hide file tree

Showing 15 changed files with 119 additions and 67 deletions.
diff --git a/.env.example b/.env.example
@@ -2,4 +2,7 @@
 MONGODB_URI=
 
 # OpenAI API key
-OPENAI_API_KEY=
+OPENAI_API_KEY=
+
+# NextAuth.js config
+NEXTAUTH_SECRET=
diff --git a/app/api/recipes/generate/route.ts b/app/api/recipes/generate/route.ts
@@ -1,12 +1,16 @@
 import { NextRequest, NextResponse } from "next/server";
-import Recipe from "@/models/Recipe";
-import { getServerSession } from "next-auth";
-import authOptions from "@/lib/nextauth";
+import { getServerSessionAuth } from "@/lib/nextauth";
 import { generateRecipes } from "@/lib/langchain/generateRecipes";
 import connectDB from "@/lib/connectToDatabase";
 import { extractIngredients } from "@/lib/langchain/extractIngredients";
 
-export async function POST(req: NextRequest) {
+export async function POST(req: NextRequest, res: NextResponse) {
+  const session = await getServerSessionAuth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
   const body = await req.json().catch(() => null);
 
   if (!body) {
@@ -38,7 +42,7 @@ export async function POST(req: NextRequest) {
     const recipes = await generateRecipes(ingredients, count);
 
     recipes.forEach((recipe) => {
-      recipe.createdBy = "673d93b45e6334f13eadbd4f";
+      recipe.createdBy = session.user.id;
     });
 
     await connectDB();

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,23 +1,20 @@
-"use client";
 import { Navbar } from "@/components/Navbar";
-import SearchPanel from "@/components/SearchPanel";
-import { RecipesList } from "@/components/RecipesList";
-import { useState } from "react";
-import { RecipeType } from "@/models/Recipe";
+import ListIngredientsAndListRecipesSection from "@/components/sections/ListIngredientsAndListRecipesSection";
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import authOptions from "@/lib/nextauth";
+
+export default async function Home() {
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    redirect("/user/signin");
+  }
 
-export default function Home() {
-  const [recipes, setRecipes] = useState<RecipeType[]>([]);
   return (
-    <>
-      <div className="container mx-auto p-4">
-        <Navbar />
-        <div className="flex flex-col md:flex-row gap-4">
-          <SearchPanel setRecipes={setRecipes} />
-          <div className="w-full md:w-3/5 mt-4 md:mt-0">
-            <RecipesList recipes={recipes} />
-          </div>
-        </div>
-      </div>
-    </>
+    <div className="container mx-auto p-4">
+      <Navbar />
+      <ListIngredientsAndListRecipesSection />
+    </div>
   );
 }
diff --git a/app/recipes/[id]/page.tsx b/app/recipes/[id]/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Navbar } from "@/components/Navbar";
 import { Badge } from "@/components/ui/badge";
 import {
   Table,
@@ -11,6 +12,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Logo } from "@/components/Logo";
 
 export default function RecipePage({ params }: { params: { id: string } }) {
   const [recipe, setRecipe] = useState<any>(null);
@@ -54,13 +56,17 @@ export default function RecipePage({ params }: { params: { id: string } }) {
   if (!recipe) {
     return (
       <div className="container mx-auto py-8 flex justify-center">
-        <p>Recipe not found</p>
+        <div className="text-center pt-10">
+          <Logo className="text-5xl md:text-9xl" />
+          <p className="mt-4 text-2xl font-bold text-black">Recipe not found</p>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto py-8">
+    <div className="container mx-auto pt-3 pb-5">
+      <Navbar />
       <Card>
         <CardHeader>
           <CardTitle className="text-3xl font-bold">{recipe.name}</CardTitle>

diff --git a/app/recipes/page.tsx b/app/recipes/page.tsx
@@ -1,6 +1,7 @@
 import { RecipesList } from "@/components/RecipesList";
 import connectDB from "@/lib/connectToDatabase";
 import Recipe, { RecipeType } from "@/models/Recipe";
+import { Navbar } from "@/components/Navbar";
 
 type RecipesPageProps = {
   recipes: RecipeType[];
@@ -13,8 +14,11 @@ const RecipesPage = async () => {
     .lean();
 
   return (
-    <div>
-      <h2 className="text-2xl font-bold mb-4">Recipes List</h2>
+    <div className="p-3">
+      <Navbar />
+      <h2 className="text-2xl font-bold mb-4 text-center bg-gray-300 p-5 text-gray-700">
+        Recipes List
+      </h2>
       <RecipesList recipes={JSON.parse(JSON.stringify(recipes))} />
     </div>
   );

diff --git a/app/user/signin/page.tsx b/app/user/signin/page.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import { useState } from "react";
 import { signIn } from "next-auth/react";
 import { Button } from "@/components/ui/button";
@@ -51,6 +50,18 @@ export default function Home() {
 
     if (result?.error) {
       console.error(result.error);
+
+      form.setError("email", {
+        type: "manual",
+        message: "Invalid email or password",
+      });
+
+      form.setError("password", {
+        type: "manual",
+        message: "Invalid email or password",
+      });
+
+      return;
     }
 
     router.push("/");
@@ -62,7 +73,7 @@ export default function Home() {
       <div className="flex w-full max-w-6xl items-center justify-between flex-col md:flex-row">
         {/* Title and description section */}
         <div className="w-full md:w-1/2 pr-8 mb-8 md:mb-0">
-          <Logo mobileFontSize="text-4xl" desktopFontSize="text-6xl" />
+          <Logo className="text-4xl md:text-6xl" />
           <p className="text-xl mt-4 text-gray-600 leading-relaxed hidden md:block">
             Welcome to Kanapka AI - your intelligent assistant. Sign in, to
             start using our unique features.

diff --git a/app/user/signup/page.tsx b/app/user/signup/page.tsx
@@ -18,6 +18,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Logo } from "@/components/Logo";
+import { signIn } from "next-auth/react";
 
 //Form validation scheme
 const formSchema = z
@@ -88,8 +89,11 @@ export default function Home() {
         console.error("Signup error:", data.message);
       }
 
-      router.push("/");
-      router.refresh();
+      await signIn("credentials", {
+        email: values.email,
+        password: values.password,
+        callbackUrl: "/",
+      });
     } catch (error) {
       console.error("An unexpected error occurred:", error);
     }
@@ -100,7 +104,7 @@ export default function Home() {
       <div className="flex flex-col w-full max-w-6xl items-center justify-center">
         {/* Title - Kanapka AI */}
         <div className="mb-8">
-          <Logo mobileFontSize="text-4xl" desktopFontSize="text-6xl" />
+          <Logo className="text-4xl md:text-6xl" />
         </div>
 
         {/* Form */}

diff --git a/app/user/status/page.tsx b/app/user/status/page.tsx
@@ -18,7 +18,7 @@ export default function Home() {
   return (
     <main className="min-h-screen p-8">
       <div className="flex justify-center mb-6">
-        <Logo mobileFontSize="text-4xl" desktopFontSize="text-6xl" />
+        <Logo className="text-4xl md:text-6xl" />
       </div>
       <div className="max-w-2xl mx-auto space-y-6">
         {/* Session Status */}

diff --git a/components/InputIngredient.tsx b/components/InputIngredient.tsx
@@ -20,11 +20,11 @@ const InputIngredient = forwardRef<HTMLInputElement, InputIngredientProps>(
     };
 
     return (
-      <div className="flex items-center gap-2 mb-4">
+      <div className="flex items-center gap-2 mb-4 w-full">
         <Input
           type="text"
           placeholder="Enter ingredient..."
-          className="w-11/12"
+          className="w-full"
           value={value}
           onChange={onChange}
           onKeyPress={handleKeyPress}
@@ -41,7 +41,7 @@ const InputIngredient = forwardRef<HTMLInputElement, InputIngredientProps>(
         />
         <Button
           variant="destructive"
-          className="p-2 rounded-md h-10 w-10"
+          className="p-2 rounded-md h-9 w-11"
           onClick={onRemove}
         >
           <Trash2 size={24} />

diff --git a/components/Logo.tsx b/components/Logo.tsx
@@ -1,16 +1,12 @@
 interface LogoProps {
-  mobileFontSize: string;
-  desktopFontSize: string;
+  className: string;
 }
 
-export const Logo: React.FC<LogoProps> = ({
-  mobileFontSize,
-  desktopFontSize,
-}) => {
+export const Logo: React.FC<LogoProps> = ({ className }) => {
   return (
     <a
       href="/"
-      className={`font-bold bg-gradient-to-r from-purple-700 to-orange-500 bg-clip-text text-transparent ${mobileFontSize} md:${desktopFontSize}`}
+      className={`font-bold bg-gradient-to-r from-purple-700 to-orange-500 bg-clip-text text-transparent ${className}`}
     >
       Kanapka AI
     </a>

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Navbar as DropdownMenu } from "@/components/ui/dropdown-menu";
 import {
   NavigationMenu,
@@ -15,7 +16,7 @@ export const Navbar = () => {
   return (
     <nav className="mb-4 mt-1 flex flex-col md:flex-row items-center justify-between gap-4">
       <div className="flex justify-between w-full md:w-auto">
-        <Logo mobileFontSize="text-2xl" desktopFontSize="text-3xl" />
+        <Logo className="text-4xl md:text-5xl" />
         <div className="md:hidden">
           <DropdownMenu />
         </div>

diff --git a/components/RecipesList.tsx b/components/RecipesList.tsx
@@ -35,14 +35,16 @@ export const RecipesList: FC<RecipesListProps> = ({ recipes }) => {
   }
 
   return (
-    <div className="mt-8">
+    <div className="mt-8 transform -translate-y-[30px]">
       <Table>
         <TableHeader>
-          <TableRow>
+          <TableRow className="bg-gray-100 hover:bg-gray-100">
             <TableHead className="w-16">FAVORITE</TableHead>
             <TableHead>RECIPE NAME</TableHead>
             <TableHead>DIFFICULTY</TableHead>
-            <TableHead>TOTAL PREPARATION TIME</TableHead>
+            <TableHead className="md:max-w-16">
+              TOTAL PREPARATION TIME
+            </TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>

diff --git a/components/sections/ListIngredientsAndListRecipesSection.tsx b/components/sections/ListIngredientsAndListRecipesSection.tsx
@@ -0,0 +1,18 @@
+"use client";
+import SearchPanel from "@/components/SearchPanel";
+import { RecipesList } from "@/components/RecipesList";
+import { RecipeType } from "@/models/Recipe";
+import { useState } from "react";
+
+export default function ListIngredientsAndListRecipesSection() {
+  const [recipes, setRecipes] = useState<RecipeType[]>([]);
+
+  return (
+    <div className="flex flex-col md:flex-row gap-4">
+      <SearchPanel setRecipes={setRecipes} />
+      <div className="w-full md:w-3/5 mt-4 md:mt-0">
+        <RecipesList recipes={recipes} />
+      </div>
+    </div>
+  );
+}