From e4eb4ce80055ef34687baa56fe3657a9c9d79f7c Mon Sep 17 00:00:00 2001
From: Rahul Aggarwal <rahulaggarwal@Rahuls-MacBook-Air.local>
Date: Tue, 8 Oct 2024 12:31:41 +0530
Subject: [PATCH 1/2]  Revert changes and add random anime quote

---
 package.json                             |  1 +
 src/data/content.js                      |  8 +++
 src/pages/activities/RandomAnimeQuote.js | 66 ++++++++++++++++++++++++
 3 files changed, 75 insertions(+)
 create mode 100644 src/pages/activities/RandomAnimeQuote.js

diff --git a/package.json b/package.json
index a801772..e1a2a83 100644
--- a/package.json
+++ b/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",
diff --git a/src/data/content.js b/src/data/content.js
index 656e973..320471a 100644
--- a/src/data/content.js
+++ b/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",
diff --git a/src/pages/activities/RandomAnimeQuote.js b/src/pages/activities/RandomAnimeQuote.js
new file mode 100644
index 0000000..8d9bcab
--- /dev/null
+++ b/src/pages/activities/RandomAnimeQuote.js
@@ -0,0 +1,66 @@
+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"
+      );
+      console.log(res.data.data);
+      //   const res = {
+      //     status: "success",
+      //     data: {
+      //       content: "Whenever I counted on someone, I ended up getting hurt.",
+      //       anime: {
+      //         id: 2,
+      //         name: "Hanasaku Iroha",
+      //       },
+      //       character: {
+      //         id: 5,
+      //         name: "Ohana Matsumae",
+      //       },
+      //     },
+      //   };
+      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>
+  );
+};

From 19834ae20357b0349d8926c440b826412482706c Mon Sep 17 00:00:00 2001
From: Rahul Aggarwal <rahulaggarwal@Rahuls-MacBook-Air.local>
Date: Tue, 8 Oct 2024 21:10:37 +0530
Subject: [PATCH 2/2] remove commented code

---
 src/pages/activities/RandomAnimeQuote.js | 26 +++++++-----------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/pages/activities/RandomAnimeQuote.js b/src/pages/activities/RandomAnimeQuote.js
index 8d9bcab..07a036a 100644
--- a/src/pages/activities/RandomAnimeQuote.js
+++ b/src/pages/activities/RandomAnimeQuote.js
@@ -9,24 +9,7 @@ export const RandomAnimeQuote = () => {
   const generateQuote = async () => {
     try {
       setQuote(null);
-      const res = await axios.get(
-        "/api/v1/quotes/random"
-      );
-      console.log(res.data.data);
-      //   const res = {
-      //     status: "success",
-      //     data: {
-      //       content: "Whenever I counted on someone, I ended up getting hurt.",
-      //       anime: {
-      //         id: 2,
-      //         name: "Hanasaku Iroha",
-      //       },
-      //       character: {
-      //         id: 5,
-      //         name: "Ohana Matsumae",
-      //       },
-      //     },
-      //   };
+      const res = await axios.get("/api/v1/quotes/random");
       setQuote(res.data.data);
     } catch (error) {
       console.log(error);
@@ -52,7 +35,12 @@ export const RandomAnimeQuote = () => {
           </div>
         </div>
       )}
-      {error && <div className="rquote-content error">Too many requests have been sent to the API. Please try again after an hour.</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>