add Analyse

frontend/src/pages/Home.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { fetchRecipes, fetchCategories } from '../api';
+import { fetchRecipes, fetchCategories, fetchAuthors } from '../api';
 import RecipeCard from '../components/RecipeCard';
 
 const ALL_CATEGORIES = ['Alle', 'Frühstück', 'Hauptgericht', 'Dessert', 'Snack', 'Getränk', 'Sonstiges'];
@@ -7,19 +7,25 @@ const ALL_CATEGORIES = ['Alle', 'Frühstück', 'Hauptgericht', 'Dessert', 'Snack
 export default function Home() {
   const [recipes, setRecipes] = useState([]);
   const [categories, setCategories] = useState([]);
+  const [authors, setAuthors] = useState([]);
   const [search, setSearch] = useState('');
   const [selectedCategory, setSelectedCategory] = useState('Alle');
+  const [selectedAuthor, setSelectedAuthor] = useState('');
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     loadRecipes();
+  }, [search, selectedCategory, selectedAuthor]);
+
+  useEffect(() => {
     loadCategories();
-  }, [search, selectedCategory]);
+    loadAuthors();
+  }, []);
 
   const loadRecipes = async () => {
     setLoading(true);
     try {
-      const data = await fetchRecipes(search, selectedCategory);
+      const data = await fetchRecipes(search, selectedCategory, selectedAuthor || undefined);
       setRecipes(data);
     } catch (e) {
       console.error('Fehler beim Laden:', e);
@@ -36,6 +42,15 @@ export default function Home() {
     }
   };
 
+  const loadAuthors = async () => {
+    try {
+      const data = await fetchAuthors();
+      setAuthors(data);
+    } catch (e) {
+      console.error('Fehler beim Laden der Autoren:', e);
+    }
+  };
+
   const getCategoryCount = (cat) => {
     if (cat === 'Alle') return categories.reduce((sum, c) => sum + c.count, 0);
     const found = categories.find(c => c.category === cat);
@@ -54,7 +69,7 @@ export default function Home() {
         />
       </div>
 
-      <div className="flex flex-wrap gap-2 mb-6">
+      <div className="flex flex-wrap gap-2 mb-4">
         {ALL_CATEGORIES.map(cat => (
           <button
             key={cat}
@@ -70,13 +85,29 @@ export default function Home() {
         ))}
       </div>
 
+      {authors.length > 0 && (
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Erstellt von</label>
+          <select
+            value={selectedAuthor}
+            onChange={e => setSelectedAuthor(e.target.value)}
+            className="px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Alle User</option>
+            {authors.map(a => (
+              <option key={a.id} value={a.id}>{a.username}</option>
+            ))}
+          </select>
+        </div>
+      )}
+
       {loading ? (
         <div className="text-center py-12 text-gray-400">Laden...</div>
       ) : recipes.length === 0 ? (
         <div className="text-center py-12">
           <p className="text-gray-400 text-lg mb-2">Keine Rezepte gefunden</p>
           <p className="text-gray-400 text-sm">
-            Füge dein erstes Rezept über TikTok-Links hinzu!
+            Füge dein erstes Rezept über TikTok- oder Instagram-Links hinzu!
           </p>
         </div>
       ) : (