import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
type Mood = string;
type Feedback = "Liked" | "Disliked" | "Not Watched";
interface Movie {
title: string;
description: string;
}
interface RecommendationHistory {
movie: string;
feedback: Feedback;
}
function App() {
const [moods, setMoods] = useState<Mood[]>([
"Happy",
"Sad",
"Excited",
"Relaxed",
"Anxious",
]);
const [selectedMood, setSelectedMood] = useState<Mood | null>(null);
const [recommendation, setRecommendation] = useState<Movie | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [history, setHistory] = useState<RecommendationHistory[]>([]);
const handleMoodSelect = async (mood: Mood) => {
setSelectedMood(mood);
setLoading(true);
setError(null);
try {
const response = await fetch("/recommend", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ mood, history }),
});
if (!response.ok) {
throw new Error("Failed to get recommendation");
}
const data = await response.json();
setRecommendation(data);
} catch (err) {
setError("Failed to get recommendation. Please try again.");
} finally {
setLoading(false);
}
};
const handleFeedback = (feedback: Feedback) => {
if (recommendation) {
setHistory([...history, { movie: recommendation.title, feedback }]);
setRecommendation(null);
setSelectedMood(null);
}
};
const handleMoreMoods = async () => {
setLoading(true);
setError(null);
try {
const response = await fetch("/more-moods", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ currentMoods: moods }),
});
if (!response.ok) {
throw new Error("Failed to get more moods");
}
const data = await response.json();
setMoods(data.moods);
} catch (err) {
setError("Failed to get more moods. Please try again.");
} finally {
setLoading(false);