Merge pull request #106 from rafia-codes/fix-api

fix-api

Author: Kanavpreet-Singh

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

@@ -8,12 +8,23 @@ export const RandomQuote = () => {
 
   const generateQuote = () => {
     setQuote(null);
-    axios({
-      method: "GET",
-      url: "https://api.qutable.io/random",
-    })
-      .then((res) => setQuote(res.data))
-      .catch((error) => setError(error));
+    setError(null);
+
+    const url = "https://stoic-quotes.com/api/quote";
+    const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(
+      url + `?t=${Date.now()}`
+    )}`;
+
+    axios
+      .get(proxyUrl)
+      .then((res) => {
+        // Parse the contents returned by the proxy
+        const data = JSON.parse(res.data.contents);
+        setQuote({ q: data.text, a: data.author });
+      })
+      .catch((err) => {
+        setError(err);
+      });
   };
 
   useEffect(() => {
@@ -22,26 +33,26 @@ export const RandomQuote = () => {
 
   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 Quote Generator</h1>
+      <div className="description">
+        Get a random quote to inspire your day 💡
       </div>
+
       {quote && (
         <div className="rquote-content">
-          <div className="rquote-quote">{quote.content}</div>
-          <div className="rquote-author">- {quote.author}</div>
-        </div>
-      )}
-      {error && (
-        <div className="rquote-content error">
-          {error.message}
+          <div className="rquote-quote">“{quote.q}”</div>
+          <div className="rquote-author">— {quote.a || "Unknown"}</div>
         </div>
       )}
+
+      {error && <div className="rquote-content error">{error.message}</div>}
+
       {!quote && !error && (
         <div className="spinner-wrapper">
           <div className="spinner"></div>
         </div>
       )}
+
       <button className="rquote-button" onClick={generateQuote}>
         Generate Quote
       </button>