Merge pull request #87 from Rahulagg13/feat/add-random-anime-quote

Feat: Add Random Anime Quote

package.json

@@ -2,6 +2,7 @@
   "name": "acm-fun",
   "version": "0.1.0",
   "private": true,
+  "proxy": "https://animechan.io",
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

src/data/content.js

@@ -8,6 +8,7 @@ import {SearchWord} from "../pages/activities/getDefinition";
 import {Jitter}  from "../pages/games/Jitter";
 import {RandomMeme} from "../pages/activities/RandomMemes";
 import { RandomJoke } from "../pages/activities/RandomJoke";
+import { RandomAnimeQuote } from "../pages/activities/RandomAnimeQuote";
 import meme from "../assets/activities/meme.jpg"
 import numberblocs from "../assets/numberblocks.png"
 import wordleicon from "../assets/games/Wordle/wordlejpg.png"
@@ -22,6 +23,13 @@ export const activities = [
         urlTerm: "random-quotes",
         element: <RandomQuote />
     },
+    {
+        title: "Random Anime Quotes",
+        description: "Get random anime quotes",
+        icon: "https://64.media.tumblr.com/7b526ba246f48e294ebc87fe2cbd8e1b/1a4bdb8275a18adc-c7/s250x400/94d6c7e70601111ba79b8801cd939694d0000018.jpg", // Add the path to the anime icon image
+        urlTerm: "random-anime-quotes",
+        element: <RandomAnimeQuote />, // Assuming you have a RandomQuote component for anime quotes
+    },
     {
         title: "Random memes",
         description: "Get random meme",

src/pages/activities/RandomAnimeQuote.js

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+import "../../styles/pages/activities/RandomQuote.css";
+
+export const RandomAnimeQuote = () => {
+  const [quote, setQuote] = useState(null);
+  const [error, setError] = useState(null);
+
+  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);
+    }
+  };
+
+  useEffect(() => {
+    generateQuote();
+  }, []);
+
+  return (
+    <div className="rquote-root">
+      <h1 className="header">Random Anime Quote Generator</h1>
+      <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-author">
+            - {quote.character.name} ({quote.anime.name})
+          </div>
+        </div>
+      )}
+      {error && (
+        <div className="rquote-content error">
+          Too many requests have been sent to the API. Please try again after an
+          hour.
+        </div>
+      )}
+      {!quote && !error && (
+        <div className="spinner-wrapper">
+          <div className="spinner"></div>
+        </div>
+      )}
+      <button className="rquote-button" onClick={() => generateQuote()}>
+        Generate Quote
+      </button>
+    </div>
+  );
+};