From e115cd2d1b6adcc33a7002feb0441bef9c49b925 Mon Sep 17 00:00:00 2001
From: anmolgupta2015 <anmolgupta9872148833@gmail.com>
Date: Fri, 24 Jan 2025 12:27:14 +0530
Subject: [PATCH] Added timer functionality to solve Issue #120

---
 eduaid_web/package-lock.json                 |  2 +-
 eduaid_web/src/App.js                        |  3 +-
 eduaid_web/src/pages/{ => Output}/Output.jsx |  8 +-
 eduaid_web/src/pages/Output/timer.jsx        | 80 ++++++++++++++++++++
 4 files changed, 88 insertions(+), 5 deletions(-)
 rename eduaid_web/src/pages/{ => Output}/Output.jsx (98%)
 create mode 100644 eduaid_web/src/pages/Output/timer.jsx

diff --git a/eduaid_web/package-lock.json b/eduaid_web/package-lock.json
index 265257cf..af456197 100644
--- a/eduaid_web/package-lock.json
+++ b/eduaid_web/package-lock.json
@@ -18345,4 +18345,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/eduaid_web/src/App.js b/eduaid_web/src/App.js
index 611cb2a8..c82683b2 100644
--- a/eduaid_web/src/App.js
+++ b/eduaid_web/src/App.js
@@ -3,10 +3,11 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Home from "./pages/Home";
 import Question_Type from "./pages/Question_Type";
 import Text_Input from "./pages/Text_Input";
-import Output from "./pages/Output";
+import Output from "./pages/Output/Output";
 import Previous from "./pages/Previous";
 import NotFound from "./pages/PageNotFound";
 
+
 function App() {
   return (
     <BrowserRouter>
diff --git a/eduaid_web/src/pages/Output.jsx b/eduaid_web/src/pages/Output/Output.jsx
similarity index 98%
rename from eduaid_web/src/pages/Output.jsx
rename to eduaid_web/src/pages/Output/Output.jsx
index 28d91cd4..130db3c9 100644
--- a/eduaid_web/src/pages/Output.jsx
+++ b/eduaid_web/src/pages/Output/Output.jsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { PDFDocument, rgb } from "pdf-lib";
-import "../index.css";
-import logo from "../assets/aossie_logo.png";
-import logoPNG from "../assets/aossie_logo_transparent.png";
+import "../../index.css"; 
+import logo from "../../assets/aossie_logo.png"; 
+import logoPNG from "../../assets/aossie_logo_transparent.png"; 
+import TimerComponent from "./timer"; 
 
 
 const Output = () => {
@@ -360,6 +361,7 @@ const Output = () => {
               </div>
             </div>
           </a>
+          <TimerComponent/>
           <div className="font-bold text-xl text-white mt-3 mx-2">
             Generated Questions
           </div>
diff --git a/eduaid_web/src/pages/Output/timer.jsx b/eduaid_web/src/pages/Output/timer.jsx
new file mode 100644
index 00000000..5aa3c4dd
--- /dev/null
+++ b/eduaid_web/src/pages/Output/timer.jsx
@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import { FaPlay, FaPause, FaClock } from "react-icons/fa";
+
+const TimerComponent = () => {
+  const [timeLimit, setTimeLimit] = useState(120); // Default time limit
+  const [timeLeft, setTimeLeft] = useState(120); // Current time left
+  const [isRunning, setIsRunning] = useState(false); // To track if the timer is running
+
+  // Update timer when isRunning or timeLeft changes
+  useEffect(() => {
+    if (!isRunning || timeLeft <= 0) return;
+
+    const timer = setTimeout(() => {
+      setTimeLeft((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [isRunning, timeLeft]);
+
+  // Format the time
+  const quizTimer = () => {
+    if (timeLeft < 0) {
+      return "0 : 00";
+    }
+    const minutes = Math.floor(timeLeft / 60);
+    const seconds = timeLeft % 60;
+    return `${minutes} : ${seconds < 10 ? "0" : ""}${seconds}`;
+  };
+
+  // Handle setting the time limit
+  const handleSetTimeLimit = () => {
+    const newTimeLimit = parseInt(prompt("Enter time limit in seconds:", timeLimit));
+    if (!isNaN(newTimeLimit) && newTimeLimit > 0) {
+      setTimeLimit(newTimeLimit);
+      setTimeLeft(newTimeLimit);
+      setIsRunning(false); // Reset timer state
+    } else {
+      alert("Please enter a valid positive number!");
+    }
+  };
+
+  // Handle Start/Pause functionality
+  const toggleTimer = () => {
+    if (timeLeft <= 0) {
+      alert("Set a valid time limit or reset the timer.");
+      return;
+    }
+    setIsRunning((prev) => !prev);
+  };
+
+  return (
+    <div className="p-6 bg-gray-800 text-white rounded-lg w-72 mx-auto shadow-lg">
+      <h1 className="text-2xl font-bold text-center flex items-center justify-center gap-2">
+        <FaClock className="text-yellow-400" /> Time Left: {quizTimer()}
+      </h1>
+
+      <div className="mt-4 text-center flex justify-center items-center gap-2">
+        <button
+          onClick={toggleTimer}
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full flex items-center justify-center"
+          title={isRunning ? "Pause Timer" : "Start Timer"}
+        >
+          {isRunning ? <FaPause /> : <FaPlay />}
+        </button>
+
+        <button
+          onClick={handleSetTimeLimit}
+          className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full"
+          title="Set Timer"
+        >
+          Set
+        </button>
+      </div>
+
+    
+    </div>
+  );
+};
+
+export default TimerComponent;