From a5f86ed1e8f63e3b971cf92d784a105d8046b842 Mon Sep 17 00:00:00 2001
From: August Fu <omgitsmonday@ist-15183.apn.wlan.private.upenn.edu>
Date: Tue, 27 Feb 2024 03:11:24 -0500
Subject: [PATCH] migrate select drop down list to degree add modal

---
 .../components/FourYearPlan/DegreeModal.tsx   | 80 ++++++++++++-------
 .../degree-plan/pages/FourYearPlanPage.tsx    |  4 +-
 frontend/degree-plan/pages/OnboardingPage.tsx |  4 +-
 3 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx b/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
index 648f8cabd..c044be380 100644
--- a/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
-import type { DegreePlan, Fulfillment, Semester } from "@/types";
-import { useState } from "react";
+import type { DegreeListing, DegreePlan, Fulfillment, MajorOption, SchoolOption, Semester } from "@/types";
+import React, { useState } from "react";
 import { deleteFetcher, postFetcher, useSWRCrud } from "@/hooks/swrcrud";
-import { useSWRConfig } from "swr";
+import useSWR, { useSWRConfig } from "swr";
 import ModalContainer from "../common/ModalContainer";
 import Select from "react-select";
 
@@ -61,15 +61,47 @@ const ModalInterior = ({ modalObject, modalKey, setActiveDegreeplanId, close }:
     const { create: createDegreeplan, update: updateDegreeplan, remove: deleteDegreeplan, copy: copyDegreeplan } = useSWRCrud<DegreePlan>('/api/degree/degreeplans');
     const { mutate } = useSWRConfig();
 
-    console.log("FIRED")
-
     const create_degreeplan = (name: string) => { 
         createDegreeplan({ name: name })
         .then((new_) => new_ && setActiveDegreeplanId(new_.id))
     }
+    const [school, setSchool] = useState<SchoolOption>();
+    const [major, setMajor] = useState<MajorOption>();
 
     const [name, setName] = useState<string>(modalObject?.name || "");
-    const [degreeId, setDegreeId] = useState<number | null>(null);
+    // const [degreeId, setDegreeId] = useState<number | null>(null);
+
+    const { data: degrees, isLoading: isLoadingDegrees } = useSWR<
+        DegreeListing[]
+    >(`/api/degree/degrees`);
+
+    const defaultSchools = ['BSE', 'BA', 'BAS', 'BS'];
+
+    const schoolOptions =
+        defaultSchools.map((d) => ({
+        value: d,
+        label: d
+        }))
+    // console.log('schooOptions', schoolOptions);
+
+    /** Create label for major listings */
+    const createMajorLabel = (degree: DegreeListing) => {
+        const concentration = 
+        degree.concentration && degree.concentration !== 'NONE' 
+            ? ` - ${degree.concentration}`
+            : '';
+        return `${degree.major}${concentration}`;
+    }
+
+    const getMajorOptions = React.useCallback(() => {
+        /** Filter major options based on selected schools/degrees */
+        const majorOptions = degrees
+        ?.filter(d => school?.value === d.degree)
+        .map((degree) => ({ value: degree, label: createMajorLabel(degree)})) 
+        || [];
+        return majorOptions;
+    }, [school]);
+
 
     if (modalKey === "plan-create") {
         return (
@@ -138,39 +170,29 @@ const ModalInterior = ({ modalObject, modalKey, setActiveDegreeplanId, close }:
         case "degree-add":
             return (
                 <ModalInteriorWrapper>
-                    {/* <Column>
-                        <div>
-                            <Label required>School(s) or Program(s)</Label>
-                            <Select
+                    <div style={{display: 'flex', flexDirection: 'row'}}>
+                        <Select
                             options={schoolOptions}
-                            value={schools}
-                            onChange={(selectedOption) => setSchools(selectedOption)}
+                            value={school}
+                            onChange={(selectedOption) => setSchool(selectedOption)}
                             isClearable
-                            isMulti
                             placeholder="Select School or Program"
-                            styles={customSelectStylesRight}
+                            // styles={customSelectStylesRight}
                             isLoading={isLoadingDegrees}
                             />
-                        </div>
-
-                        <div>
-                            <Label required>Major(s)</Label>
-                            <Select
+                        <Select
                             options={getMajorOptions()}
-                            value={majors}
-                            onChange={(selectedOption) => setMajors(selectedOption)}
+                            value={major}
+                            onChange={(selectedOption) => setMajor(selectedOption)}
                             isClearable
-                            isMulti
-                            placeholder={schools.length > 0 ? "Major - Concentration" : "Please Select Program First"}
-                            styles={customSelectStylesRight}
+                            placeholder={school ? "Major - Concentration" : "Please Select Program First"}
+                            // styles={customSelectStylesRight}
                             isLoading={isLoadingDegrees}
                             />
-                        </div>
-
-                    <Column/> */}
+                    </div>
                     <ModalButton onClick={() => {
-                        if (!degreeId) return;
-                        add_degree(modalObject.id, degreeId)
+                        if (!major?.value.id) return;
+                        add_degree(modalObject.id, major?.value.id);
                         close();
                     }}>Add</ModalButton>
                 </ModalInteriorWrapper>
diff --git a/frontend/degree-plan/pages/FourYearPlanPage.tsx b/frontend/degree-plan/pages/FourYearPlanPage.tsx
index 2bb8ffeda..28b356e55 100644
--- a/frontend/degree-plan/pages/FourYearPlanPage.tsx
+++ b/frontend/degree-plan/pages/FourYearPlanPage.tsx
@@ -79,8 +79,10 @@ const FourYearPlanPage = ({ updateUser, user, activeDegreeplanId, setActiveDegre
 
   useEffect(() => {
     // recompute the active degreeplan id on changes to the degreeplans
-    if (!degreeplans?.length) {
+    if (!isLoadingDegreeplans && !degreeplans?.length) {
       setShowOnboardingModal(true);
+    }
+    if (!degreeplans?.length) {
       setActiveDegreeplanId(null);
     }
     else if (
diff --git a/frontend/degree-plan/pages/OnboardingPage.tsx b/frontend/degree-plan/pages/OnboardingPage.tsx
index 6e49865ce..724f5646f 100644
--- a/frontend/degree-plan/pages/OnboardingPage.tsx
+++ b/frontend/degree-plan/pages/OnboardingPage.tsx
@@ -41,7 +41,7 @@ const ColumnsContainer = styled.div`
   }
 `;
 
-const Column = styled.div`
+export const Column = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -63,7 +63,7 @@ const NextButton = styled(Button)`
   background-color: var(--primary-color-dark);
 `;
 
-const Label = styled.h5`
+export const Label = styled.h5`
   padding-top: 25px;
   &:after {
     content: "*";