From 1c860ed6803c165c74ff23045b0b762a1909b7d5 Mon Sep 17 00:00:00 2001
From: Ajinkya Talekar <91043799+ajinkyatalekar@users.noreply.github.com>
Date: Thu, 27 Apr 2023 02:25:04 -0400
Subject: [PATCH 1/2] Updated assignmentDetailPage

---
 .../pages/assignmentDetailPage.scss           | 55 ++++++++++++++++
 src/components/pages/assignmentDetailPage.tsx | 63 ++++++++++++++++++-
 2 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 src/components/pages/assignmentDetailPage.scss

diff --git a/src/components/pages/assignmentDetailPage.scss b/src/components/pages/assignmentDetailPage.scss
new file mode 100644
index 0000000..2fa1275
--- /dev/null
+++ b/src/components/pages/assignmentDetailPage.scss
@@ -0,0 +1,55 @@
+@import 'variables';
+
+.header {
+    color: $text-color;
+    display: flex;
+    justify-content: space-between;
+}
+
+.name {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.4rem;
+}
+
+.subText {
+    font-size: 1.1rem;
+    width: 100%;
+  }
+
+.assignmentBox {
+    text-decoration: none;
+
+    background: $list-item-background;
+    border-radius: 0.6rem;
+
+    padding: 1.5rem;
+
+    color: $text-color;
+
+}
+
+.button {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    border: none;
+    border-radius: 4px;
+    color: $background;
+    background-color: $green;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: $green-lighter;
+    color: $text-color;
+  }
+
+@media (max-width: 700px) {
+  .header {
+    display: block;
+  }
+}
diff --git a/src/components/pages/assignmentDetailPage.tsx b/src/components/pages/assignmentDetailPage.tsx
index 775bc56..e2e6b9b 100644
--- a/src/components/pages/assignmentDetailPage.tsx
+++ b/src/components/pages/assignmentDetailPage.tsx
@@ -1,7 +1,64 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { Assignment } from 'devu-shared-modules'
+import { prettyPrintDate } from 'utils/date.utils'
 
+import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
 import PageWrapper from 'components/shared/layouts/pageWrapper'
+import ErrorPage from './errorPage'
 
-const AssignmentDetailPage = ({}) => <PageWrapper>Assignment Detail</PageWrapper>
+import RequestService from 'services/request.service'
 
-export default AssignmentDetailPage
+import styles from './assignmentDetailPage.scss'
+
+const AssignmentDetailPage = () => {
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState(null)
+    
+    // REPLACE array with single Assignment
+    const [assignment, setAssignment] = useState(new Array<Assignment>())
+    
+    useEffect(() => {
+        fetchData()
+    },[])
+
+    const fetchData = async () => {
+        try {
+            // Replace 1 with current assignment
+            const assignment = await RequestService.get<Assignment>(`/api/assignments/1`)
+
+            // REPLACE array with single Assignment
+            const assignmentArray = [assignment]
+            setAssignment(assignmentArray)
+        } catch (error) {
+            setError(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    if (loading) return <LoadingOverlay delay={250} />
+    if (error) return <ErrorPage error={error} />
+
+    return (
+        <PageWrapper>
+                <div className={styles.header}>
+                    <h1>Assignment Details</h1>
+                </div>
+            <div className={styles.assignmentBox}>
+                <div className={styles.name}>{assignment[0].name}</div>
+                <div className={styles.subText}>
+                    <p>{assignment[0].description}</p>
+                    <p>Due: <b>{prettyPrintDate(assignment[0].dueDate)}</b></p>
+                    <p>Last day to handin: <b>{prettyPrintDate(assignment[0].endDate)}</b></p>
+                    
+                    {/* Add functionality to button */}
+                    <button className={styles.button}>SUBMIT</button>
+                </div>
+            </div>
+
+        {/* Add submission history here */}
+        </PageWrapper>
+    )
+}
+
+export default AssignmentDetailPage
\ No newline at end of file

From 634786f944047635c30443c38ff55841bb5ecc74 Mon Sep 17 00:00:00 2001
From: Ajinkya Talekar <91043799+ajinkyatalekar@users.noreply.github.com>
Date: Tue, 9 May 2023 19:31:14 -0400
Subject: [PATCH 2/2] Update assignmentDetailPage.tsx

---
 src/components/pages/assignmentDetailPage.tsx | 88 ++++++++++---------
 1 file changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/components/pages/assignmentDetailPage.tsx b/src/components/pages/assignmentDetailPage.tsx
index e2e6b9b..fd5153a 100644
--- a/src/components/pages/assignmentDetailPage.tsx
+++ b/src/components/pages/assignmentDetailPage.tsx
@@ -11,54 +11,58 @@ import RequestService from 'services/request.service'
 import styles from './assignmentDetailPage.scss'
 
 const AssignmentDetailPage = () => {
-    const [loading, setLoading] = useState(true)
-    const [error, setError] = useState(null)
-    
-    // REPLACE array with single Assignment
-    const [assignment, setAssignment] = useState(new Array<Assignment>())
-    
-    useEffect(() => {
-        fetchData()
-    },[])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
 
-    const fetchData = async () => {
-        try {
-            // Replace 1 with current assignment
-            const assignment = await RequestService.get<Assignment>(`/api/assignments/1`)
+  const [assignment, setAssignment] = useState<Assignment | null>(null)
 
-            // REPLACE array with single Assignment
-            const assignmentArray = [assignment]
-            setAssignment(assignmentArray)
-        } catch (error) {
-            setError(error)
-        } finally {
-            setLoading(false)
-        }
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  const fetchData = async () => {
+    try {
+      const currentAssignment = await RequestService.get<Assignment>(`/api/assignments/2`)
+      setAssignment(currentAssignment)
+    } catch (error) {
+      setError(error)
+    } finally {
+      setLoading(false)
     }
+  }
+
+  if (loading) return <LoadingOverlay delay={250} />
+  if (error) return <ErrorPage error={error} />
 
-    if (loading) return <LoadingOverlay delay={250} />
-    if (error) return <ErrorPage error={error} />
+  return (
+    <PageWrapper>
+      <div className={styles.header}>
+        <h1>Assignment Details</h1>
+      </div>
+      <div className={styles.assignmentBox}>
+        {assignment ? (
+          <>
+            <div className={styles.name}>{assignment.name}</div>
+            <div className={styles.subText}>
+              <p>{assignment.description}</p>
+              <p>
+                Due: <b>{prettyPrintDate(assignment.dueDate)}</b>
+              </p>
+              <p>
+                Last day to handin: <b>{prettyPrintDate(assignment.endDate)}</b>
+              </p>
 
-    return (
-        <PageWrapper>
-                <div className={styles.header}>
-                    <h1>Assignment Details</h1>
-                </div>
-            <div className={styles.assignmentBox}>
-                <div className={styles.name}>{assignment[0].name}</div>
-                <div className={styles.subText}>
-                    <p>{assignment[0].description}</p>
-                    <p>Due: <b>{prettyPrintDate(assignment[0].dueDate)}</b></p>
-                    <p>Last day to handin: <b>{prettyPrintDate(assignment[0].endDate)}</b></p>
-                    
-                    {/* Add functionality to button */}
-                    <button className={styles.button}>SUBMIT</button>
-                </div>
+              <button className={styles.button}>SUBMIT</button>
             </div>
+          </>
+        ) : (
+          <div>Could not find assignment</div>
+        )}
+      </div>
 
-        {/* Add submission history here */}
-        </PageWrapper>
-    )
+      {/* Add submission history here */}
+    </PageWrapper>
+  )
 }
 
-export default AssignmentDetailPage
\ No newline at end of file
+export default AssignmentDetailPage