Back

Version 70

8/25/2024
/**
* This dad joke app fetches jokes from the icanhazdadjoke API, stores them locally using the browser's Storage API,
* and provides an interface to view jokes, their explanations, and navigate through the joke list.
* It uses React for the UI, the Fetch API for retrieving jokes, and Val Town's OpenAI proxy for generating explanations.
* The design uses a muted purple color palette with a modern look and feel.
*/

/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";

interface Joke {
id: string;
joke: string;
explanation: string;
}

function App() {
const [jokes, setJokes] = useState<Joke[]>([]);
const [currentJokeIndex, setCurrentJokeIndex] = useState(-1);
const [showExplanation, setShowExplanation] = useState(false);
const [copyConfirmation, setCopyConfirmation] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
loadJokes();
}, []);

useEffect(() => {
localStorage.setItem('dadJokes', JSON.stringify(jokes));
console.log("Jokes updated:", jokes);
}, [jokes]);

useEffect(() => {
console.log("Current joke index:", currentJokeIndex);
gr8gatsby-hungrywhiteleopon.web.val.run
Updated: August 27, 2024