Change frontend slightly and fix publisher bug

camille-readbean · Jul 15, 2023 · 919c157 · 919c157
1 parent 9afc48a
commit 919c157
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 57 deletions.
diff --git a/backend/ezConnect/models.py b/backend/ezConnect/models.py
@@ -204,10 +204,6 @@ class PublishedStudyPlan(db.Model):
     academic_plan = db.relationship('AcademicPlan', uselist=False, backref='published_study_plan')
 
     def toJSON(self):
-        semester_ids = {}
-        for semester in self.semesters:
-            semester_ids[semester.semester_number] = semester.id
-
         return {
             "id": self.id,
             "date_updated": self.date_updated.strftime("%d %b %Y"),
@@ -216,7 +212,7 @@ def toJSON(self):
             "num_of_likes": self.num_of_likes,
             "creator_id": self.creator_id,
             "creator_name": User.query.get(self.creator_id).name,
-            "semester_ids": semester_ids,
+            "semester_info_list": list(map(lambda semester: semester.toJSON(), self.semesters)),
             "academic_plan": self.academic_plan.toJSON() if self.academic_plan is not None else None
         }
 

diff --git a/backend/ezConnect/swagger.yml b/backend/ezConnect/swagger.yml
@@ -101,18 +101,10 @@ components:
         creator_name:
           type: string
           example: Jonathan Tan
-        semester_ids:
-          type: object
-          example: {
-            "1": "abc11111-1234-1234-1234-1234abcdef00",
-            "2": "def22222-1234-1234-1234-1234abcdef00",
-            "3": "abc33333-1234-1234-1234-1234abcdef00",
-            "4": "def44444-1234-1234-1234-1234abcdef00",
-            "5": "abc55555-1234-1234-1234-1234abcdef00",
-            "6": "def66666-1234-1234-1234-1234abcdef00",
-            "7": "abc77777-1234-1234-1234-1234abcdef00",
-            "8": "def88888-1234-1234-1234-1234abcdef00"
-          }
+        semester_info_list:
+          type: array
+          items:
+            $ref: "#/components/schemas/StudyPlanSemesterInformation"
         academic_plan:
           $ref: "#/components/schemas/AcademicPlan"
     PublishedStudyPlanWithLikedFavourited:
@@ -145,18 +137,10 @@ components:
         is_liked_by:
           type: boolean
           example: true
-        semester_ids:
-          type: object
-          example: {
-            "1": "abc11111-1234-1234-1234-1234abcdef00",
-            "2": "def22222-1234-1234-1234-1234abcdef00",
-            "3": "abc33333-1234-1234-1234-1234abcdef00",
-            "4": "def44444-1234-1234-1234-1234abcdef00",
-            "5": "abc55555-1234-1234-1234-1234abcdef00",
-            "6": "def66666-1234-1234-1234-1234abcdef00",
-            "7": "abc77777-1234-1234-1234-1234abcdef00",
-            "8": "def88888-1234-1234-1234-1234abcdef00"
-          }
+        semester_info_list:
+          type: array
+          items:
+            $ref: "#/components/schemas/StudyPlanSemesterInformation"
     StudyPlanSemesterInformation:
       type: object
       properties:

diff --git a/frontend/src/Pages/StudyPlan/StudyPlanEditor/CourseSelector.js b/frontend/src/Pages/StudyPlan/StudyPlanEditor/CourseSelector.js
@@ -81,7 +81,12 @@ function CourseSelector({
   };
 
   return (
-    <div className="mx-3 mb-3">
+    <div className="mx-2 mb-3 p-2 bg-slate-50 rounded-md">
+      <h3 className="font-semibold">Course Selector</h3>
+      <p className="text-sm text-gray-600 mb-2">
+        Search by course code or title and select a course to add it into your
+        study plan!
+      </p>
       <Select
         options={searchResults}
         filterOption={() => true}

diff --git a/frontend/src/Pages/StudyPlan/StudyPlanEditor/Editor.js b/frontend/src/Pages/StudyPlan/StudyPlanEditor/Editor.js
@@ -195,7 +195,10 @@ export default function Editor({ studyPlanId }) {
           setLastInteractedSemesterIndex={setLastInteractedSemesterIndex}
         />
       </div>
-      <p className="text-sm px-2 pb-2">
+      <p className="px-2 text-gray-600">
+        Drag and drop courses to create your own study plan!
+      </p>
+      <p className="text-sm p-2 text-gray-600">
         Your study plan is autosaved every few seconds. Click on the save button
         to ensure that your study plan is saved and calculate the total number
         of units per semester.
@@ -205,7 +208,11 @@ export default function Editor({ studyPlanId }) {
         updateCoursesInSemester={updateCoursesInSemester}
         lastInteractedSemesterIndex={lastInteractedSemesterIndex}
       />
-      <p className="text-sm text-red-500 px-2 pb-2">{errorMessage}</p>
+      <ImportCourses
+        semesterInformation={semesterInformation}
+        updateCoursesInSemester={updateCoursesInSemester}
+      />
+      <p className="text-sm text-red-500 px-4 pb-2">{errorMessage}</p>
       <div id="studyPlan" className="px-3 mb-3">
         <DragDropContext
           onDragEnd={(result) =>
@@ -293,10 +300,6 @@ export default function Editor({ studyPlanId }) {
           </div>
         </DragDropContext>
       </div>
-      <ImportCourses
-        semesterInformation={semesterInformation}
-        updateCoursesInSemester={updateCoursesInSemester}
-      />
     </div>
   );
 }
diff --git a/frontend/src/Pages/StudyPlan/StudyPlanEditor/ImportCourses.js b/frontend/src/Pages/StudyPlan/StudyPlanEditor/ImportCourses.js
@@ -39,7 +39,8 @@ export default function ImportCourses({
   };
 
   return (
-    <div id="importCourses" className="px-5 py-2">
+    <div id="importCourses" className="mx-2 p-2 bg-slate-50 rounded-md">
+      <h3 className="font-semibold">Import courses from NUSMods</h3>
       <form onSubmit={updateCourseList} className="flex gap-2 items-center">
         <input
           type="text"

diff --git a/frontend/src/Pages/StudyPlan/StudyPlanEditor/Publisher.js b/frontend/src/Pages/StudyPlan/StudyPlanEditor/Publisher.js
@@ -51,7 +51,7 @@ function Publisher({
           console.error(err);
         });
     }
-  }, [studyPlanId, isPublished]);
+  }, [studyPlanId]);
 
   const getAcademicPlanRequestBody = (academicPlanInformation) => {
     return {
@@ -88,6 +88,7 @@ function Publisher({
       }
     ).then(() => {
       setIsPublished(true);
+      setIsFetchAgain((previous) => !previous);
     });
   };
 
@@ -120,6 +121,7 @@ function Publisher({
       { method: "DELETE" }
     ).then((res) => {
       setIsPublished(false);
+      setIsFetchAgain((previous) => !previous);
     });
   };
 
@@ -188,8 +190,13 @@ function Publisher({
           </Stack>
           {isPublished ? (
             <p className="text-sm text-gray-600 mt-2">
+              Click on update if you have made changes (e.g. added / deleted
+              courses) to your study plan and would like these changes to be
+              reflected in your published study plan.
+              <br />
               Note: Unpublishing a study plan will remove data on the
-              description and tags associated with the study plan.
+              description and tags associated with the study plan. Likes and
+              favourites will also be lost.
             </p>
           ) : (
             <></>

diff --git a/frontend/src/Pages/StudyPlan/StudyPlanMainPage/PersonalStudyPlanList.js b/frontend/src/Pages/StudyPlan/StudyPlanMainPage/PersonalStudyPlanList.js
@@ -37,10 +37,9 @@ function PersonalStudyPlanList({
   return (
     <div className="bg-white p-2 rounded-lg">
       <p className="text-lg m-1 font-medium">
-        Click on a study plan to continue editing!
+        Click on a study plan title to continue editing!
       </p>
       <div className="flex overflow-x-auto whitespace-nowrap">
-        {personalStudyPlans.map((studyPlan) => makeCard(studyPlan))}
         <div
           className="group relative hover:cursor-pointer"
           onClick={() => createNewStudyPlan(azure_ad_oid)}
@@ -52,6 +51,7 @@ function PersonalStudyPlanList({
             <p>Create blank</p>
           </div>
         </div>
+        {personalStudyPlans.map((studyPlan) => makeCard(studyPlan))}
       </div>
     </div>
   );

diff --git a/frontend/src/Pages/StudyPlan/StudyPlanPost.js/PopUpPost.js b/frontend/src/Pages/StudyPlan/StudyPlanPost.js/PopUpPost.js
@@ -203,7 +203,11 @@ function PopUpPost({
             <h6 className="font-semibold">Description</h6>
             <p className="bg-slate-50 rounded-md p-2">{description}</p>
           </div>
-          <Preview studyPlanId={studyPlanInformation["id"]} />
+          <Preview
+            semesterInformationArray={
+              studyPlanInformation["semester_info_list"]
+            }
+          />
         </div>
       </div>
     </div>

diff --git a/frontend/src/Pages/StudyPlan/StudyPlanPost.js/Preview.js b/frontend/src/Pages/StudyPlan/StudyPlanPost.js/Preview.js
@@ -1,18 +1,4 @@
-import { useEffect, useState } from "react";
-
-export default function Preview({ studyPlanId }) {
-  const [semesterInformationArray, setSemesterInformationArray] = useState([]);
-
-  useEffect(() => {
-    fetch(
-      `${process.env.REACT_APP_API_ENDPOINT}/api/studyplan/semester/${studyPlanId}`
-    )
-      .then((res) => res.json())
-      .then((data) => data["semester_info_list"])
-      .then((semesterInfoList) =>
-        setSemesterInformationArray(semesterInfoList)
-      );
-  }, [studyPlanId]);
+export default function Preview({ semesterInformationArray }) {
 
   return (
     <div