From 654b15671aa9995823c28cf188f2cd32ae868d22 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Mon, 7 Oct 2024 04:07:58 +0530
Subject: [PATCH] updated

---
 src/App.js                                    |   2 +
 .../CompletedPaperDashboard.jsx               | 130 +++++++++++++
 src/Editor/Editor.jsx                         | 180 +++++++++---------
 3 files changed, 222 insertions(+), 90 deletions(-)
 create mode 100644 src/CompletedPaperDashboard/CompletedPaperDashboard.jsx

diff --git a/src/App.js b/src/App.js
index ac78c9a..d0ff7e6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,6 +18,7 @@ import Error404 from './error/error404';
 import EditQuestion from './edit_question/EditQuestion';
 import Profile from './Profile/profile';
 import Body from './Body/Body';
+import CompletedPaperDashboard from './CompletedPaperDashboard/CompletedPaperDashboard';
 
 
 
@@ -80,6 +81,7 @@ const App = () => {
           <Route path="/ready_questions/:paperId" element={<ReadyQuestionPaperDashboard />} />
           <Route path='/profile' element={<Profile/>}/>
           <Route path="/preview/:questionId" element={<Body/>}/>
+          <Route path="/completed_papers" element={<CompletedPaperDashboard />}/>
         </>
       )}
 
diff --git a/src/CompletedPaperDashboard/CompletedPaperDashboard.jsx b/src/CompletedPaperDashboard/CompletedPaperDashboard.jsx
new file mode 100644
index 0000000..21c3320
--- /dev/null
+++ b/src/CompletedPaperDashboard/CompletedPaperDashboard.jsx
@@ -0,0 +1,130 @@
+
+import React, { useState, useEffect } from "react";
+import "../papers/papers.css"; 
+// import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import Nothing from "../Assets/nothing.svg";
+import Navbar from "../Navbar/Navbar";
+import Skeleton from "../Skeleton/Skeleton";
+// import AlertModal from "../AlertModal/AlertModal";
+
+const CompletedPaperDashboard = () => {
+//   const navigate = useNavigate();
+  const [completedPapers, setCompletedPapers] = useState([]);
+//   const [hoveredItem, setHoveredItem] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const teacherId = localStorage.getItem("teacherId");
+//   const [reload, setReload] = useState(false);
+//   const [modalMessage, setModalMessage] = useState("");
+//   const [isError, setIsError] = useState(false);
+//   const [modalIsOpen, setModalIsOpen] = useState(false);
+
+const getFormattedDateTime = (date, time) => {
+    if (!date || !time) {
+      return "Invalid Date or Time"; // Or handle it however you want
+    }
+
+    const [hours, minutes] = time.split(":").map(Number);
+    const dateTime = new Date(date);
+    dateTime.setHours(hours, minutes);
+    
+    return dateTime.toLocaleString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true,
+    });
+  };
+
+  useEffect(() => {
+    const fetchCompletedPapers = async () => {
+      try {
+        const response = await axios.post(
+          `http://localhost:5000/paper/getCompletedPapersByTeacherId`,
+          { teacherId }
+        );
+        setCompletedPapers(response.data);
+      } catch (error) {
+        console.error("Error fetching completed papers:", error);
+      } finally {
+        setTimeout(() => {
+          setLoading(false);
+        }, 1000);
+      }
+    };
+
+    fetchCompletedPapers();
+  }, [teacherId]);
+
+//   const handleCardClick = (paperId) => {
+//     navigate(`/completed_questions/${paperId}`);
+//   };
+
+  return (
+    <>
+      <Navbar />
+      <div className="exam-list-container">
+        {loading ? (
+          <Skeleton exams={completedPapers} />
+        ) : completedPapers.length > 0 ? (
+          <>
+            <div className="header">
+              <h2>Completed Papers:</h2>
+            </div>
+            <center>
+              <p className="readyDasboardwarning">
+                The papers displayed here are completed and have been processed. You can view the details of each paper by clicking on them.
+              </p>
+            </center>
+            <div className="exam-table">
+              {completedPapers.map((paper, index) => (
+                <div
+                  className="papers_table"
+                  key={index}
+                //   onClick={() => handleCardClick(paper._id)}
+                //   onMouseEnter={() => setHoveredItem(paper._id)}
+                //   onMouseLeave={() => setHoveredItem(null)}
+                >
+                  {/* Since delete and move features are removed, no buttons are shown */}
+                  <div className="scheduled">
+                    Completed on: {getFormattedDateTime(paper.endTime, paper.time)}
+                  </div>
+                  <div className="table-data">
+                    <div className="classhead">
+                      {paper.className} {paper.semester}
+                    </div>
+                    <div className="subname">
+                      {paper.subject} ({paper.subjectCode})
+                    </div>
+                    <div>
+                      Duration: {paper.duration.hours} hours {paper.duration.minutes} mins
+                    </div>
+                    <div>Marks: {paper.marks}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        ) : (
+          <div className="no-questions-container">
+            <center>
+              <img alt="Nothing" src={Nothing} className="nothing" />
+              <h2>No Completed Papers Found</h2>
+            </center>
+          </div>
+        )}
+      </div>
+      {/* <AlertModal
+        isOpen={modalIsOpen}
+        onClose={() => setModalIsOpen(false)}
+        message={modalMessage}
+        iserror={isError}
+      /> */}
+    </>
+  );
+};
+
+export default CompletedPaperDashboard;
diff --git a/src/Editor/Editor.jsx b/src/Editor/Editor.jsx
index 61ea481..abce13b 100644
--- a/src/Editor/Editor.jsx
+++ b/src/Editor/Editor.jsx
@@ -1,90 +1,90 @@
-import React, { useRef, useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import "./Editor.css";
-import { Editor as Ed } from "@monaco-editor/react";
-import { FaCode} from "react-icons/fa";
-import Modal from "react-modal"; // Import Modal component
-
-Modal.setAppElement("#root"); // Set the root element for accessibility
-
-const Editor = ({ question }) => {
-  const editorContainerRef = useRef(null);
-  const editorRef = useRef(null);
-  const [input, setInput] = useState("");
-  const [isModalOpen, setIsModalOpen] = useState(false); // State for modal visibility
-
-  const handleEditorDidMount = (editor) => {
-    editorRef.current = editor;
-    editor.layout();
-  };
-
-  useEffect(() => {
-    const observer = new ResizeObserver(() => {
-      if (editorRef.current) {
-        editorRef.current.layout();
-      }
-    });
-
-    if (editorContainerRef.current) {
-      observer.observe(editorContainerRef.current);
-    }
-
-    return () => {
-      if (editorContainerRef.current) {
-        observer.unobserve(editorContainerRef.current);
-      }
-      observer.disconnect();
-    };
-  }, []);
-
-  return (
-    <div className="compiler-editor">
-      <div className="editor-header">
-        <div className="editor-code">
-          <FaCode />
-          <div>Code</div>
-        </div>
-      </div>
-      <div className="editor-editor" ref={editorContainerRef}>
-        <Ed
-          theme="vs-dark"
-          defaultLanguage={question?.compilerReq}
-          defaultValue="// Write Code Here"
-          className="editor-monaco"
-          onMount={handleEditorDidMount}
-        />
-      </div>
-
-      {/* Modal for input prompt */}
-      <Modal
-        isOpen={isModalOpen}
-        onRequestClose={() => setIsModalOpen(false)}
-        contentLabel="Input Modal"
-        className="modal"
-        overlayClassName="modal-overlay"
-      >
-        <div className="modal-content">
-          <h2>Input Required</h2>
-          <label>Enter Input:</label>
-          <input
-            type="text"
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-          />
-          <button>Submit</button>
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-Editor.propTypes = {
-  question: PropTypes.shape({
-    compilerReq: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    image: PropTypes.string,
-  }),
-  onOutput: PropTypes.func.isRequired,
-};
-
-export default Editor;
+import React, { useRef, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import "./Editor.css";
+import { Editor as Ed } from "@monaco-editor/react";
+import { FaCode} from "react-icons/fa";
+import Modal from "react-modal"; // Import Modal component
+
+Modal.setAppElement("#root"); // Set the root element for accessibility
+
+const Editor = ({ question }) => {
+  const editorContainerRef = useRef(null);
+  const editorRef = useRef(null);
+  const [input, setInput] = useState("");
+  const [isModalOpen, setIsModalOpen] = useState(false); // State for modal visibility
+
+  const handleEditorDidMount = (editor) => {
+    editorRef.current = editor;
+    editor.layout();
+  };
+
+  useEffect(() => {
+    const observer = new ResizeObserver(() => {
+      if (editorRef.current) {
+        editorRef.current.layout();
+      }
+    });
+
+    if (editorContainerRef.current) {
+      observer.observe(editorContainerRef.current);
+    }
+
+    return () => {
+      if (editorContainerRef.current) {
+        observer.unobserve(editorContainerRef.current);
+      }
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div className="compiler-editor">
+      <div className="editor-header">
+        <div className="editor-code">
+          <FaCode />
+          <div>Code</div>
+        </div>
+      </div>
+      <div className="editor-editor" ref={editorContainerRef}>
+        <Ed
+          theme="vs-dark"
+          defaultLanguage={question?.compilerReq}
+          defaultValue="// Write Code Here"
+          className="editor-monaco"
+          onMount={handleEditorDidMount}
+        />
+      </div>
+
+      {/* Modal for input prompt */}
+      <Modal
+        isOpen={isModalOpen}
+        onRequestClose={() => setIsModalOpen(false)}
+        contentLabel="Input Modal"
+        className="modal"
+        overlayClassName="modal-overlay"
+      >
+        <div className="modal-content">
+          <h2>Input Required</h2>
+          <label>Enter Input:</label>
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+          />
+          <button>Submit</button>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+Editor.propTypes = {
+  question: PropTypes.shape({
+    compilerReq: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    image: PropTypes.string,
+  }),
+  onOutput: PropTypes.func.isRequired,
+};
+
+export default Editor;