Merge pull request #168 from CodeSpace-Academy/main

bringing over changes from old repo

Author: ElzabeEls

Public/ArejengLogo.png

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

Public/apple-touch-icon.png

@@ -0,0 +1,59 @@
+import clientPromise from "../../../lib/mongodb";
+
+/**
+ * API route handler for fetching all unique categories from the recipes collection.
+ * File location: app/api/categories/route.js
+ *
+ * @async
+ * @function
+ * @returns {Promise<void>} Sends a JSON response containing all unique categories or an error message.
+ */
+export async function GET() {
+  try {
+    // Connect to MongoDB
+    const client = await clientPromise;
+    const db = client.db("devdb");
+
+    // Fetch all unique categories
+    const categories = await db.collection("recipes").distinct("category");
+
+    // Log the results for debugging
+    console.log('\n=== Categories Fetch Results ===');
+    console.log('Total categories found:', categories.length);
+    console.log('Categories:', categories);
+
+    // Return successful response
+    return new Response(
+      JSON.stringify({ 
+        success: true,
+        categories,
+        total: categories.length 
+      }), 
+      { 
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+
+  } catch (error) {
+    // Log any errors
+    console.error('Failed to fetch categories:', error);
+
+    // Return error response
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: "Failed to fetch categories",
+        details: process.env.NODE_ENV === 'development' ? error.message : undefined
+      }), 
+      { 
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+  }
+}

Public/favicon-48x48.png

@@ -1,39 +1,30 @@
 import clientPromise from "../../../lib/mongodb";
 
 /**
- * API route handler for fetching paginated recipes from the 'recipes' collection in MongoDB.
+ * API route handler for fetching all recipes from the 'recipes' collection in MongoDB.
  *
  * @async
  * @function
- * @param {Object} req - The request object containing query parameters for pagination.
- * @returns {Promise<void>} Sends a JSON response containing the paginated recipes or an error message.
+ * @param {Object} _req - The request object (not used in this case).
+ * @param {Object} res - The response object used to send back the result.
+ * @returns {Promise<void>} Sends a JSON response containing the fetched recipes or an error message.
  */
-export async function GET(req) {
+ export  async function GET (req) {
   try {
     // Await the MongoDB client connection
     const client = await clientPromise;
-    const db = client.db("devdb"); // Connect to the 'devdb' database
+    const db = client.db('devdb'); // Connect to the 'devdb' database
 
-    // Parse the 'page' and 'limit' query parameters from the URL, with defaults
-    const url = new URL(req.url);
-    const page = parseInt(url.searchParams.get("page") || "1", 10); 
-    const limit = parseInt(url.searchParams.get("limit") || "20", 10); 
-
-    // Calculate the number of documents to skip for pagination
-    const skip = (page - 1) * limit;
-
-    // Fetch the paginated recipes from the collection
-    const recipes = await db.collection("recipes")
-      .find({})
-      .skip(skip)
-      .limit(limit)
-      .toArray();
+    // Fetch all documents from the 'recipes' collection and convert them to an array
+    const recipes = await db.collection('recipes').find({}).limit(100).toArray();
 
     // Send a 200 (OK) response with the fetched recipes in JSON format
-    return new Response(JSON.stringify({ recipes }), { status: 200 });
+    return new Response(JSON.stringify({ recipes}), { status: 200 });
   } catch (e) {
-    
-  
-    return new Response(JSON.stringify({ error: "Failed to fetch data" }), { status: 500 });
+    // Log the error to the console for debugging
+    console.error(e);
+
+    // Send a 500 (Internal Server Error) response with an error message
+    return new Response(JSON.stringify({error: 'Failed to fetch data'}), { status: 500 });
   }
-}
+};

Public/favicon.ico

@@ -0,0 +1,64 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+
+const Recipes = () => {
+  const [recipes, setRecipes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Fetch recipes from the API
+  useEffect(() => {
+    const fetchRecipes = async () => {
+        try {
+          console.log("Fetching recipes...");
+          const response = await fetch('/api/recipes');
+          
+          if (!response.ok) {
+            throw new Error('Network response was not ok');
+          }
+      
+          const data = await response.json();
+          console.log("Fetched recipes:", data);
+          setRecipes(data);
+        } catch (error) {
+          console.error("Error fetching recipes:", error.message);
+          setError(error.message);
+        } finally {
+          setLoading(false);
+        }
+      };
+      
+
+    fetchRecipes();
+  }, []);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  if (recipes.length === 0) {
+    return <div>No recipes found.</div>;
+  }
+
+  return (
+    <div>
+      <h1>Recipes</h1>
+      <ul>
+        {recipes.map((recipe) => (
+          <li key={recipe._id}>
+            <h2>{recipe.title}</h2>
+            <p>{recipe.description}</p>
+            {/* Add more fields from your recipe object as needed */}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Recipes;

Public/favicon.svg

@@ -1,18 +1,9 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 
-/**
- * @typedef {Object} SpinningGearProps
- * @property {string} [className] - Additional CSS classes for the SVG.
- */
-
-/**
- * Renders a spinning gear SVG animation.
- * @function
- * @returns {JSX.Element} The SpinningGear component.
- */
+// Component for the spinning gear animation
 const SpinningGear = () => (
   <motion.svg
     xmlns="http://www.w3.org/2000/svg"
@@ -32,22 +23,8 @@ const SpinningGear = () => (
   </motion.svg>
 );
 
-/**
- * @typedef {Object} ErrorProps
- * @property {Error} error - The error object.
- * @property {Function} reset - Function to reset the error state.
- */
-
-/**
- * Renders an error page with animation and a reset button.
- * @function
- * @param {ErrorProps} props - The component props.
- * @returns {JSX.Element} The Error component.
- */
+// Component for handling and displaying errors
 export default function Error({ error, reset }) {
-  /**
-   * Logs the error to the console when the component mounts or the error changes.
-   */
   useEffect(() => {
     console.error(error);
   }, [error]);
@@ -77,15 +54,15 @@ export default function Error({ error, reset }) {
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.4, duration: 0.5 }}
           >
-            Something went wrong!
+            Something went wrong while retrieving recipes!
           </motion.p>
           <motion.p
             className="mt-4 mb-8 text-teal-700"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 0.6, duration: 0.5 }}
           >
-            Don&apost            t worry, try refreshing or return to the homepage.
+            Don’t worry, try refreshing or return to the homepage.
           </motion.p>
           <motion.div
             className="flex justify-center space-x-4"
@@ -107,3 +84,45 @@ export default function Error({ error, reset }) {
     </section>
   );
 }
+
+// New component to fetch recipe data
+export function RecipeFetcher() {
+  const [recipes, setRecipes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchRecipes = async () => {
+      try {
+        const response = await fetch("API_URL_HERE"); // Replace with your API URL
+        if (!response.ok) {
+          throw new Error("Failed to fetch recipes");
+        }
+        const data = await response.json();
+        setRecipes(data);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRecipes();
+  }, []);
+
+  if (loading) {
+    return <SpinningGear />;
+  }
+
+  if (error) {
+    return <Error error={error} reset={() => setError(null)} />;
+  }
+
+  return (
+    <div>
+      {recipes.map(recipe => (
+        <div key={recipe.id}>{recipe.name}</div> // Customize as per your recipe structure
+      ))}
+    </div>
+  );
+}

Public/site.webmanifest

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { cn } from "../../../lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }