From f1d29887ef2054cbd64c40b816d5975821614d10 Mon Sep 17 00:00:00 2001
From: its-kritika <myyear2002@gmail.com>
Date: Mon, 27 May 2024 07:56:35 +0530
Subject: [PATCH] Added Verse of Day Functionality

I have created this commit so that I can squash all commits into a single commit. Resolves issue #165
---
 package-lock.json            | 35 +++++++++++--
 package.json                 |  1 +
 src/components/VerseofDay.js | 98 ++++++++++++++++++++++++++++++++++++
 src/pages/Home.js            |  2 +
 4 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 src/components/VerseofDay.js

diff --git a/package-lock.json b/package-lock.json
index f920614..98dd618 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "aos": "^2.3.4",
+        "axios": "^1.7.2",
         "bootstrap": "^5.3.2",
         "react": "^18.2.0",
         "react-audio-play": "^1.0.2",
@@ -5403,6 +5404,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -8463,9 +8487,9 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -14575,6 +14599,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/package.json b/package.json
index 913d0a3..1ca32a9 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "aos": "^2.3.4",
+    "axios": "^1.7.2",
     "bootstrap": "^5.3.2",
     "react": "^18.2.0",
     "react-audio-play": "^1.0.2",
diff --git a/src/components/VerseofDay.js b/src/components/VerseofDay.js
new file mode 100644
index 0000000..b87efe4
--- /dev/null
+++ b/src/components/VerseofDay.js
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const VerseOfTheDay = () => {
+  const [verse, setVerse] = useState(null);
+
+  useEffect(() => {
+    const fetchShlok = async () => {
+      try {
+        const chapter = Math.floor(Math.random() * 18) + 1; // Assuming 18 chapters
+        const shlok = Math.floor(Math.random() * 40) + 1; // Generating a random shlok number
+        const response = await axios.get(`https://vedicvani-backend.onrender.com/api/chapter/${chapter}/shlok/${shlok}`);
+        return response.data.purohit;
+      } catch (error) {
+        console.error('Error fetching shlok:', error);
+        return null;
+      }
+    };
+
+    const saveShlok = (shlok) => {
+      localStorage.setItem('verseOfTheDay', JSON.stringify({
+        shlok,
+        timestamp: new Date().getTime()
+      }));
+    };
+
+    const getStoredShlok = () => {
+      const stored = localStorage.getItem('verseOfTheDay');
+      if (stored) {
+        return JSON.parse(stored);
+      }
+      return null;
+    };
+
+    const updateVerseOfTheDay = async () => {
+      const shlok = await fetchShlok();
+      if (shlok) {
+        saveShlok(shlok);
+        setVerse(shlok);
+      }
+    };
+
+    const checkAndUpdateVerse = async () => {
+        const storedShlok = getStoredShlok();
+        const now = new Date();
+        const nextUpdate = new Date(now);
+        nextUpdate.setHours(0, 0, 0, 0); // Set to 12:00 AM today
+        if (now > nextUpdate) {
+          nextUpdate.setDate(nextUpdate.getDate() + 1) // Move to 12:00 AM next day if past 12:00 AM today
+        }
+  
+        if (storedShlok) {
+          const storedTimestamp = new Date(storedShlok.timestamp);
+          if (now < nextUpdate && now - storedTimestamp < 24 * 60 * 60 * 1000) {
+            // If current time is before the next update and less than 24 hours have passed
+            setVerse(storedShlok.shlok)
+            return;
+          }
+        }
+        await updateVerseOfTheDay()
+      };
+  
+      //Calculating Time Until Next Update
+      const now = new Date();
+      const nextUpdate = new Date(now);
+      nextUpdate.setHours(0, 0, 0, 0); 
+      if (now > nextUpdate) {
+        nextUpdate.setDate(nextUpdate.getDate() + 1)
+      }
+      const timeUntilNextUpdate = nextUpdate - now;
+  
+      // Set a timeout to update the verse at 12:00 AM
+      const updateTimeout = setTimeout(() => {
+        updateVerseOfTheDay();
+        // Set an interval to update the verse every 24 hours after the first update at 12:00 AM
+        setInterval(updateVerseOfTheDay, 24 * 60 * 60 * 1000);
+      }, timeUntilNextUpdate);
+  
+      // Initial check and update
+      checkAndUpdateVerse();
+  
+      // Cleanup the timeout on component unmount
+      return () => clearTimeout(updateTimeout);
+    }, [])
+
+  if (!verse) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div className="w-full md:w-1/2 lg:w-1/3 shadow border-3 p-4 my-4">
+      <h2>Verse of the Day</h2>
+      <p>{verse.et}</p>
+    </div>
+  );
+};
+
+export default VerseOfTheDay
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 91652c4..f19d10f 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -6,6 +6,7 @@ import './home.css';
 import { AudioPlayer } from 'react-audio-play'
 import song from '../components/krishnaflute.mp3'
 import AOS from 'aos';
+import VerseOfTheDay from "../components/VerseofDay";
 
 
 function Home() {
@@ -117,6 +118,7 @@ function Home() {
           </Link>
         </div>
       </div>
+      <VerseOfTheDay/>
     </section>
   );
 }