+
- )) || {recipe.title}
+Ready in {recipe.readyInMinutes || 30} min · Serves {recipe.servings || 2}
No ingredients available.
} -
+
- ) : details ? (
- <>
- {activeTab === 'instructions' && (
- Hi {user.name.split(' ')[0]}, what are we cooking today?
+
+ setQuery(e.target.value)}
+ className="w-full rounded-xl px-4 py-3 text-slate-800"
+ placeholder="Search healthy meals, desserts, vegan bowls..."
+ />
+
+
- {details.analyzedInstructions?.[0]?.steps?.map((step, i) => (
-
- )}
-
- {activeTab === 'ingredients' && (
-
-
- )) ||
- {step.number}
-
- {step.step}
-No instructions available.
} -
- {details.extendedIngredients?.map((ing, i) => (
-
- );
-};
-
-// ==================== FEATURED SECTION ====================
-const FeaturedSection = ({ recipes, onSelect, loading }) => (
-
-
- {ing.original}
+
+ {searchError &&
- {searchError}
} + {loadingSearch ?Loading recipes…
: ( +
+ {searchResults.map((recipe) => (
+
+ 
+
- )}
-
- {activeTab === 'nutrition' && details.nutrition && (
-
-
+
-
- {details.nutrition.nutrients?.slice(0, 8).map((nutrient, i) => (
-
+ )}
+
+ )}
+
+ {activeView === 'planner' && (
+
-
- ))}
+
+ ))}
+ {nutrient.name}
-- {Math.round(nutrient.amount)}{nutrient.unit} -
-Meal planner
+ + +
+ {mealPlans.length === 0 ?
- No meals yet. Start planning your week.
: mealPlans.map((item) => ( +
+
- )}
-
- ) : (
-
+
+
{item.day} · {item.mealType}: {item.title}
+{item.calories} kcal
Failed to load details.
- )} -
-
-);
-
-// ==================== SEARCH RESULTS ====================
-const SearchResults = ({ recipes, query, onSelect, loading }) => (
-
-
-
-
-
- {loading ? (
-
-
- Discover our handpicked recipes for you
-
- {[...Array(6)].map((_, i) => (
-
- ) : recipes.length > 0 ? (
-
-
-
- ))}
-
-
-
-
-
- {recipes.map(r => onSelect(r)} />)}
-
- ) : (
-
-
- )}
- No featured recipes available.
-
-
-);
-
-// ==================== OTHER VIEWS ====================
-const PantryView = () => {
- const [items, setItems] = useState(['chicken', 'rice', 'tomato', 'onion', 'garlic']);
- const [input, setInput] = useState('');
+
-
-
- - Search Results for "{query}" -
-Found {recipes.length} recipes
-
- {loading ? (
-
-
- {[...Array(8)].map((_, i) => (
-
- ) : recipes.length > 0 ? (
-
-
-
- ))}
-
-
-
+ ))}
-
- {recipes.map(r => onSelect(r)} />)}
-
- ) : (
-
-
- )}
-
-
- No recipes found
-Try different keywords or browse our featured recipes
-Pantry tracker
+ - return ( -
-
- );
-};
-
-const PlannerView = () => {
- const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-
- return (
-
-
-
-
-
-
- Track the ingredients you have at home
- -
- setInput(e.target.value)}
- onKeyPress={(e) => e.key === 'Enter' && addItem()}
- placeholder="Add ingredient..."
- className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl outline-none focus:border-green-500 transition-colors"
- />
-
-
-
-
- {items.map(item => (
-
- {item}
-
-
- ))}
-
-
- {items.length === 0 && (
- No ingredients added yet
- )} -
-
- );
-};
-
-const NutritionView = () => {
- const data = { goal: 2000, consumed: 1450 };
- const pct = (data.consumed / data.goal) * 100;
+
-
-
-
-
-
- Plan your meals for the week ahead
- -
- {days.map(day => (
-
-
-
- ))}
- {day}
-
- No meals planned
+ {pantry.length === 0 ? Your pantry is empty.
: pantry.map((item) => ( +
+
+ ))}
{item.name} ({item.quantity})
+ +
-
);
-};
+}
-// ==================== MAIN APP ====================
export default function App() {
- const [sidebarOpen, setSidebarOpen] = useState(false);
- const [activeView, setActiveView] = useState('home');
- const [featured, setFeatured] = useState([]);
- const [searchResults, setSearchResults] = useState([]);
- const [searchQuery, setSearchQuery] = useState('');
- const [selectedRecipe, setSelectedRecipe] = useState(null);
- const [loadingFeatured, setLoadingFeatured] = useState(true);
- const [loadingSearch, setLoadingSearch] = useState(false);
+ const [token, setToken] = useState(() => localStorage.getItem('surchef-token'));
const [user, setUser] = useState(null);
+ const [booting, setBooting] = useState(() => Boolean(token));
useEffect(() => {
- // Check for logged-in user
- const currentUser = localStorage.getItem('currentUser');
- if (currentUser) {
- setUser(JSON.parse(currentUser));
- } else {
- // Redirect to login if not authenticated
- window.location.href = 'login.html';
+ if (!token) {
+ return;
}
- const load = async () => {
- const recipes = await api.getFeatured();
- setFeatured(recipes);
- setLoadingFeatured(false);
- };
- load();
- }, []);
-
- const handleSearch = async (query) => {
- setSearchQuery(query);
- setLoadingSearch(true);
- const results = await api.searchRecipes(query);
- setSearchResults(results);
- setLoadingSearch(false);
- };
+ request('/me', {}, token)
+ .then((data) => setUser(data))
+ .catch(() => {
+ localStorage.removeItem('surchef-token');
+ setToken(null);
+ })
+ .finally(() => setBooting(false));
+ }, [token]);
const handleLogout = () => {
- localStorage.removeItem('currentUser');
- window.location.href = 'login.html';
+ localStorage.removeItem('surchef-token');
+ setToken(null);
+ setUser(null);
};
- return (
-
-
-
-
+
+ )}
+
+
+
-
- Monitor your daily calorie intake
- -
-
-
-
-
-
-
- {data.consumed}
-calories consumed
-
-
- {data.goal - data.consumed}
-remaining
-
-
-
-
- 0
- {data.goal} cal goal
-
-
-
+ {activeView === 'nutrition' && (
+ ⚠️ Demo Data
-Backend integration required for live tracking
-Nutrition insights
+Daily target: 2200 kcal
+
+
+
+ Planned weekly calories: {calories} kcal
+Derived from your saved meal plans. Keep balancing protein, fiber and hydration for better outcomes.
+
-
-
-
- setSidebarOpen(false)}
- activeView={activeView}
- setActiveView={setActiveView}
- user={user}
- onLogout={handleLogout}
- />
-
- {activeView === 'home' && (
- <>
- { setUser(nextUser); setToken(nextToken); }} />;
+ }
- {selectedRecipe && (
- setSelectedRecipe(null)} />
- )}
-
- );
+ return
-
-
-
-
-
-
- {user && (
-
-
- - SurChef -
-
-
- )}
-
-
- {user.username}
-{user.role}
-
- {user.username[0].toUpperCase()}
-
- Loading SurChef…
;
+ }
- {activeView === 'pantry' &&