Completed Assignment

client/src/App.css

@@ -15,7 +15,6 @@ p , a {
 
 .flex-row {
   display: flex;
-  justify-content: center;
   align-items: center;
   flex-direction: row;
 }

client/src/Components/AllProblems/AllProblems.jsx

@@ -1,50 +1,70 @@
 import React, {useEffect, useState} from 'react'
-import { Link } from 'react-router-dom'
+import {Link} from 'react-router-dom'
 
 import "./AllProblems.css"
-import { backendUrl } from "../../constants.js";
+import {backendUrl} from "../../constants.js";
+import Loader from "../../Constants/Loader/Loader.jsx";
 
 const AllProblemsPage = () => {
-  const [problems, setProblems] = useState([]);
-
-  const init = async () => {
-    const response = await fetch(`${backendUrl}/problems`, {
-      method: "GET",
-    });
-
-    const json = await response.json();
-    setProblems(json.problems);
-  }
-
-  useEffect(() => {
-    init()
-  }, []);
-
-  return (
-    <div id="allproblems">
-      <table>
-        <tbody>
-
-          <tr>
-            <th>Title</th>
-            <th>Difficulty</th>
-            <th>Acceptance</th>
-          </tr>
-
-          {problems.map((prob,index) => (
-            <tr>
-              <Link to={`/problems/:${prob.problemId}`}>
-                <td>{prob.title}</td>
-              </Link>
-              <td className={`${prob.difficulty}`} >{prob.difficulty}</td>
-              <td className={`${prob.difficulty}`} >{prob.acceptance}</td>
-            </tr>
-          ))}
-
-        </tbody>
-      </table>
-    </div>
-  )
+    const [problems, setProblems] = useState([]);
+    const [problemsFetched, setProblemsFetched] = useState(false)
+
+    const init = async () => {
+        const response = await fetch(`${backendUrl}/problems`, {
+            method: "GET",
+        });
+
+        await response
+            .json()
+            .then((json) => {
+                setProblems(json.problems);
+                setProblemsFetched(true)
+            })
+            .catch((e) => {
+                console.log("error", e, response)
+            });
+
+    }
+
+    useEffect(() => {
+        init()
+        console.log("initial load", problems)
+    }, []);
+
+    function renderProblemTable() {
+        if (problemsFetched) {
+            return (
+                <tbody>
+                <tr>
+                    <th>Title</th>
+                    <th>Difficulty</th>
+                    <th>Acceptance</th>
+                </tr>
+
+                {problems.map((prob, index) => (
+                    <tr key={index}>
+                        <Link to={`/problems/:${prob.problemId}`}>
+                            <td>{prob.title}</td>
+                        </Link>
+                        <td className={`${prob.difficulty}`}>{prob.difficulty}</td>
+                        <td className={`${prob.difficulty}`}>{prob.acceptance}</td>
+                    </tr>
+                ))}
+
+                </tbody>
+            )
+        }
+
+        return (<Loader/>)
+    }
+
+    return (
+        <div id="allproblems">
+            <table>
+                {renderProblemTable()}
+            </table>
+        </div>
+    )
 }
 
 export default AllProblemsPage

client/src/Components/ProblemsPage/ProblemsPage.css

@@ -4,6 +4,32 @@
     align-items: flex-start;
 }
 
+.tab {
+    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.5em 0.5em 0 0;
+    margin: 0;
+    padding: 1.5em 1em;
+}
+
+.tab.inactive {
+    color: grey;
+    font-weight: lighter;
+}
+
+.tab.active {
+    border-bottom: 2px solid black;
+    color: black;
+    font-weight: bolder;
+}
+
+.submission.wrong.answer {
+    color: red;
+}
+
+.submission.accepted {
+    color: green;
+}
+
 .ques , .code {
     width: 50%;
     min-height: 65vh;

client/src/Components/ProblemsPage/ProblemsPage.jsx

@@ -1,86 +1,172 @@
 import React, {useEffect, useState} from 'react'
-import { useParams } from 'react-router-dom'
+import {useParams} from 'react-router-dom'
 
 import "./ProblemsPage.css"
 import {backendUrl} from "../../constants.js";
+import Loader from "../../Constants/Loader/Loader.jsx";
 
 
 const ProblemsPage = () => {
-  const [CodeSeg, setCodeSeg] = useState("") ;
-  const { pid } = useParams() ;
-  const cleanId = pid.substring(1) ;
-  const [problem, setProblem] = useState(null);
-  const [submission, setSubmission] = useState("");
+    const [CodeSeg, setCodeSeg] = useState("");
+    const {pid} = useParams();
+    const cleanId = pid.substring(1);
+    const [problem, setProblem] = useState(null);
+    const [submission, setSubmission] = useState("");
+    const [activeTab, setActiveTab] = useState("description");
+    const [submissions, setSubmissions] = useState([]);
+    const [isSubmissionsLoaded, setIsSubmissionsLoaded] = useState(false)
 
     const init = async () => {
-      const response = await fetch(`${backendUrl}/problem/` + cleanId, {
-        method: "GET",
-      });
+        const response = await fetch(`${backendUrl}/problem/` + cleanId, {
+            method: "GET",
+        });
 
-      const json = await response.json();
-      setProblem(json.problem);
+        const json = await response.json();
+        setProblem(json.problem);
     }
 
-  useEffect(() => {
-    init();
-  }, [])
-  // console.log(cleanId) ;
+    useEffect(() => {
+        init();
+    }, [])
 
+    useEffect(() => {
+        fetchProblemSubmissions()
+    }, [activeTab])
 
-  const handleKey = (event) => {
-    if (event.key == "Tab"){
-      event.preventDefault() ;
-      const { selectionStart , selectionEnd , value } = event.target ;
-      const val = value.substring(0,selectionStart) + "\t" + value.substring(selectionStart) ;
-      event.target.value = val;
-      event.target.selectionStart = event.target.selectionEnd = selectionStart+1;
+    const fetchProblemSubmissions = async () => {
+        const response = await fetch(`${backendUrl}/submissions/${cleanId}`, {
+            method: "GET",
+            headers: {
+                "authorization": localStorage.getItem("token")
+            }
+        });
+
+        await response.json()
+            .then(json => {
+                const submissions = json.submissions
+                submissions.forEach(s => {
+                    if (s.status === "AC") {
+                        s.status = "Accepted"
+                    } else if (s.status === "WA") {
+                        s.status = "Wrong Answer"
+                    }
+                })
+
+                setSubmissions(submissions)
+                setIsSubmissionsLoaded(true)
+            })
+            .catch(error => {
+                return error;
+            });
+
+    }
+
+    const handleKey = (event) => {
+        if (event.key == "Tab") {
+            event.preventDefault();
+            const {selectionStart, selectionEnd, value} = event.target;
+            const val = value.substring(0, selectionStart) + "\t" + value.substring(selectionStart);
+            event.target.value = val;
+            event.target.selectionStart = event.target.selectionEnd = selectionStart + 1;
+        }
+        setCodeSeg(event.value);
     }
-    setCodeSeg(event.value) ;
-  }
-
-  return (
-    <div>
-
-      {
-        problem? (
-          <div id="problempage" className='flex-row'>
-            <div className="ques">
-              <h1>{problem.title}</h1>
-              <h5>Description</h5>
-              <p>{problem.description}</p>
-              <code>Input : {problem.exampleIn}</code>
-              <code>Output : {problem.exampleOut}</code>
+
+    function renderDescription() {
+        if (activeTab !== "description") {
+            setActiveTab("description")
+            setIsSubmissionsLoaded(false)
+        }
+        return (
+            <div className="description">
+                <div className="flex-row">
+                    <h5 className="tab active nav-options">Description</h5>
+                    <h5 className="tab inactive nav-options" onClick={() => renderSubmissions()}>Submissions</h5>
+                </div>
+                <p>{problem.description}</p>
+                <code>Input : {problem.exampleIn}</code>
+                <code>Output : {problem.exampleOut}</code>
             </div>
-            <div className="code">
-              <h1>Code Here</h1>
-              <div className='code-form'>
-                <textarea onChange={(e) => setSubmission(e.target.value)} name="SolvedCode" onKeyDown={ (event) => handleKey(event) }></textarea>
-                <button type="submit" id="submit" onClick={async () => {
-                  const response = await fetch(`${backendUrl}/submission`, {
-                    method: "POST",
-                    headers: {
-                      "authorization": localStorage.getItem("token")
-                    },
-                    body: JSON.stringify({
-                      problemId: cleanId,
-                      submission: submission
-                    })
-                  });
-
-                  const json = await response.json();
-                  console.log(json);
-
-                }}>SubmitCode</button>
-              </div>
+        )
+    }
+
+    function renderSubmissions() {
+        if (activeTab !== "submission") {
+            setActiveTab("submission")
+        }
+        return (
+            <div className="submissions">
+                <div className="flex-row">
+                    <h5 className="tab inactive nav-options" onClick={() => renderDescription()}>Description</h5>
+                    <h5 className="tab active nav-options">Submissions</h5>
+                </div>
+                {
+                    isSubmissionsLoaded ?
+                        <table>
+                            <tbody>
+                            {
+                                submissions.map((s, idx) => {
+                                    return (
+                                        <tr key={idx}>
+                                            <td className={`submission ${s.status.toLowerCase()}`}>{s.status}</td>
+                                            <td>{s.submission}</td>
+                                        </tr>
+                                    )
+                                })
+                            }
+                            </tbody>
+                        </table>
+
+                    : <Loader/>
+                }
+
+
             </div>
-          </div>
-        ) :
-        (<div>The searched Question Doesn't exist</div>)
-      }
-
-    </div>
-
-  )
+        );
+    }
+
+    return (
+        <div>
+
+            {
+                problem ? (
+                        <div id="problempage" className='flex-row'>
+                            <div className="ques">
+                                <h1>{problem.title}</h1>
+                                {activeTab === "description" ? renderDescription() : renderSubmissions()}
+                            </div>
+                            <div className="code">
+                                <h1>Code Here</h1>
+                                <div className='code-form'>
+                                    <textarea onChange={(e) => setSubmission(e.target.value)} name="SolvedCode"
+                                              onKeyDown={(event) => handleKey(event)}></textarea>
+                                    <button type="submit" id="submit" onClick={async () => {
+                                        const response = await fetch(`${backendUrl}/submission`, {
+                                            method: "POST",
+                                            headers: {
+                                                "authorization": localStorage.getItem("token")
+                                            },
+                                            body: JSON.stringify({
+                                                problemId: cleanId,
+                                                submission: submission
+                                            })
+                                        });
+
+                                        const json = await response.json();
+                                        console.log(json);
+
+                                    }}>SubmitCode
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    ) :
+                    (<div>The searched Question Doesn't exist</div>)
+            }
+
+        </div>
+
+    )
 }
 
 export default ProblemsPage