fix-api

Author: rafia-codes

src/pages/activities/RandomAnimeQuote.js

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import axios from "axios";
 import "../../styles/pages/activities/RandomQuote.css";
 
 export const RandomAnimeQuote = () => {
@@ -9,11 +8,21 @@ export const RandomAnimeQuote = () => {
   const generateQuote = async () => {
     try {
       setQuote(null);
-      const res = await axios.get("/api/v1/quotes/random");
-      setQuote(res.data.data);
-    } catch (error) {
-      console.log(error);
-      setError(error);
+      setError(null);
+
+      const response = await fetch("https://animotto-api.onrender.com/api/quotes/random");
+      if (!response.ok) throw new Error("Network response was not ok");
+
+      const data = await response.json();
+
+      setQuote({
+        quote: data.quote,
+        character: data.character,
+        anime: data.anime.name || data.anime.altName || "Unknown"
+      });
+    } catch (err) {
+      console.error(err);
+      setError(err);
     }
   };
 
@@ -27,26 +36,29 @@ export const RandomAnimeQuote = () => {
       <div className="description">
         Generate any random anime quote to get some inspiration!
       </div>
+
       {quote && (
         <div className="rquote-content">
-          <div className="rquote-quote">{quote.content}</div>
+          <div className="rquote-quote">{quote.quote}</div>
           <div className="rquote-author">
-            - {quote.character.name} ({quote.anime.name})
+            - {quote.character} ({quote.anime})
           </div>
         </div>
       )}
+
       {error && (
         <div className="rquote-content error">
-          Too many requests have been sent to the API. Please try again after an
-          hour.
+          Error fetching quote. Please try again later.
         </div>
       )}
+
       {!quote && !error && (
         <div className="spinner-wrapper">
           <div className="spinner"></div>
         </div>
       )}
-      <button className="rquote-button" onClick={() => generateQuote()}>
+
+      <button className="rquote-button" onClick={generateQuote}>
         Generate Quote
       </button>
     </div>

src/pages/activities/RandomQuote.js

@@ -1,49 +1,51 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
-import "../../styles/pages/activities/RandomQuote.css";
+import "../../styles/pages/activities/RandomQuote.css"; // Reuse your styles
 
 export const RandomQuote = () => {
-  const [quote, setQuote] = useState(null);
+  const [joke, setJoke] = useState(null);
   const [error, setError] = useState(null);
 
-  const generateQuote = () => {
-    setQuote(null);
-    axios({
-      method: "GET",
-      url: "https://api.qutable.io/random",
-    })
-      .then((res) => setQuote(res.data))
-      .catch((error) => setError(error));
+  const generateJoke = () => {
+    setJoke(null);
+    setError(null);
+
+    axios
+      .get("https://official-joke-api.appspot.com/random_joke")
+      .then((res) => setJoke(res.data))
+      .catch((err) => setError(err));
   };
 
   useEffect(() => {
-    generateQuote();
+    generateJoke();
   }, []);
 
   return (
     <div className="rquote-root">
-      <h1 class="header">Random Quote Generator</h1>
-      <div class="description">
-        Generate any random quote to get some inspiration!
+      <h1 className="header">Random Joke Generator</h1>
+      <div className="description">
+        Get a random joke to brighten your day 😄
       </div>
-      {quote && (
+
+      {joke && (
         <div className="rquote-content">
-          <div className="rquote-quote">{quote.content}</div>
-          <div className="rquote-author">- {quote.author}</div>
+          <div className="rquote-quote">{joke.setup}</div>
+          <div className="rquote-author">{joke.punchline}</div>
         </div>
       )}
+
       {error && (
-        <div className="rquote-content error">
-          {error.message}
-        </div>
+        <div className="rquote-content error">{error.message}</div>
       )}
-      {!quote && !error && (
+
+      {!joke && !error && (
         <div className="spinner-wrapper">
           <div className="spinner"></div>
         </div>
       )}
-      <button className="rquote-button" onClick={generateQuote}>
-        Generate Quote
+
+      <button className="rquote-button" onClick={generateJoke}>
+        Generate Joke
       </button>
     </div>
   );