Merge pull request #665 from pennlabs/aug/rebase

fix merge retry
pennlabs · Apr 26, 2024 · 07a1957 · 07a1957
2 parents 177eff6 + bb9d294
commit 07a1957
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 90 deletions.
diff --git a/frontend/degree-plan/components/Dock/Dock.tsx b/frontend/degree-plan/components/Dock/Dock.tsx
@@ -38,11 +38,14 @@ const DockContainer = styled.div<{$isDroppable:boolean, $isOver: boolean}>`
 const SearchIconContainer = styled.div`
     padding: .25rem 2rem;
     padding-left: 0;
-    border-color: var(--primary-color-extra-dark);
+    border-color: var(--primary-color-xx-dark);
+    color: var(--primary-color-extra-dark);
     border-width: 0;
     border-right-width: 2px;
     border-style: solid;
     flex-shrink: 0;
+    display: flex;
+    gap: 1rem;
 `
 
 const DockedCoursesWrapper = styled.div`
@@ -106,7 +109,7 @@ const Dock = ({ user, login, logout, activeDegreeplanId  }: DockProps) => {
     // const [courseAdded, setCourseAdded] = React.useState(false);
     const { searchPanelOpen, setSearchPanelOpen, setSearchRuleQuery, setSearchRuleId } = useContext(SearchPanelContext)
     const { createOrUpdate } = useSWRCrud<DockedCourse>(`/api/degree/docked`, { idKey: 'full_code' });
-    const {data: dockedCourses = [], isLoading} = useSWR<DockedCourse[]>(user ? `/api/degree/docked` : null); 
+    const { data: dockedCourses = [], isLoading } = useSWR<DockedCourse[]>(user ? `/api/degree/docked` : null); 
 
     // Returns a boolean that indiates whether this is the first render
     const useIsMount = () => {
@@ -117,8 +120,6 @@ const Dock = ({ user, login, logout, activeDegreeplanId  }: DockProps) => {
         return isMountRef.current;
       };
 
-    const isMount = useIsMount();
-
     const [{ isOver, canDrop }, drop] = useDrop(() => ({
         accept: [ItemTypes.COURSE_IN_PLAN, ItemTypes.COURSE_IN_REQ],
         drop: (course: DnDCourse) => {
@@ -160,8 +161,11 @@ const Dock = ({ user, login, logout, activeDegreeplanId  }: DockProps) => {
                     setSearchPanelOpen(!searchPanelOpen);
                 }}>
                     <DarkBlueIcon>
-                        <i className="fas fa-search fa-lg"/>
+                        <i className="fas fa-plus fa-lg"/>
                     </DarkBlueIcon>
+                    <div>
+                        Add Course
+                    </div>
                 </SearchIconContainer>
                 <DockedCoursesWrapper>
                     {isLoading ?

diff --git a/frontend/degree-plan/components/FourYearPlan/Semester.tsx b/frontend/degree-plan/components/FourYearPlan/Semester.tsx
@@ -35,7 +35,7 @@ export const SemesterCard = styled.div<{
     padding: 1rem;
     display: flex;
     flex-direction: column;
-    flex: 1 1 15rem;
+    flex: 1 1 11rem;
 `;
 
 const SemesterHeader = styled.div`

diff --git a/frontend/degree-plan/components/FourYearPlan/Semesters.tsx b/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
@@ -66,22 +66,41 @@ const AddButton = styled.div`
   gap: 1rem;
 `;
 
+const YearInput = styled.input`
+  width: 9rem;
+  background-color: transparent;
+  border-color: #9FB5EF;
+  color: #C1C1C1;
+  box-shadow: none;
+  &:hover {
+    borderColor: "#9FB5EF";
+  }
+
+  padding: .75rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  border-style: solid;
+  border-radius: .25rem;
+  border-width: 1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  font-size: 1rem;
+`
+
 const selectStyles = (topOrBottom: boolean) => ({
   control: (provided: any) => ({
     ...provided,
-    width: "130px",
+    width: "9rem",
     backgroundColor: "transparent",
     borderColor: "#9FB5EF",
     color: "#C1C1C1",
     boxShadow: "none",
     "&:hover": {
       borderColor: "#9FB5EF",
     },
-    ...(
-      topOrBottom ? 
-      { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottom: 0 } : 
-      { borderTopLeftRadius: 0, borderTopRightRadius: 0 }
-    )
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottom: 0
   }),
   singleValue: (provided: any) => ({
     ...provided,
@@ -126,14 +145,6 @@ const ModifySemesters = ({
     { value: "C", label: "Fall" },
   ];
 
-  // TODO: Un-hardcode years
-  const yearOptions = [
-    { value: "2024", label: "2024" },
-    { value: "2025", label: "2025" },
-    { value: "2026", label: "2026" },
-    { value: "2027", label: "2027" },
-  ];
-
   return (
     // TODO: add a modal for this
     <AddSemesterContainer className={className}>
@@ -153,11 +164,10 @@ const ModifySemesters = ({
         onChange={(option) => setSelectedSeason(option ? option.value : selectedSeason)}
       />
 
-      <Select
-        styles={selectStyles(false)}
-        options={yearOptions}
-        value={yearOptions.find((option) => option.value === selectedYear)}
-        onChange={(option) => setSelectedYear(option ? option.value : selectedYear)}
+      <YearInput
+        value={selectedYear}
+        type="number"
+        onChange={(e) => setSelectedYear(e.target.value)}
       />
     </AddSemesterContainer>
   );
@@ -247,7 +257,6 @@ const Semesters = ({
   useEffect(() => {
     if (Object.keys(semesters).length == 0 && !isLoading) setEditMode(true);
     // if finish loading and no semesters, we go to edit mode for the user to add new semesters
-    else setEditMode(false);
     if (!activeDegreeplan) return;
     if (typeof window !== "undefined" && Object.keys(semesters).length) {
       localStorage.setItem(

diff --git a/frontend/degree-plan/components/FourYearPlan/Stats.tsx b/frontend/degree-plan/components/FourYearPlan/Stats.tsx
@@ -20,6 +20,7 @@ const getColor = (num: number, reverse: boolean) => {
 
 const ScoreCircle = styled(CircularProgressbar)`
     aspect-ratio: 1;
+    min-width: 1.7rem;
 `;
 
 const ScoreLabel = styled.div`
@@ -58,6 +59,7 @@ const Stack = styled.div`
     gap: 1rem .75rem;
     justify-items: left;
     align-items: center;
+
 `;
 
 type StatsType = "course_quality" | "instructor_quality" | "difficulty" | "work_required";

diff --git a/frontend/degree-plan/components/FourYearPlanPage.tsx b/frontend/degree-plan/components/FourYearPlanPage.tsx
@@ -42,7 +42,7 @@ const PanelWrapper = styled(Pane)`
   height: 100%;
   display: flex;
   flex-direction: row;
-  gap: 0.8rem;
+  gap: 1rem;
 `
 
 const PanelInteriorWrapper = styled.div<{ $maxWidth?: string; $minWidth?: string }>`
@@ -160,10 +160,10 @@ const FourYearPlanPage = ({
                 // @ts-ignore */}
                 <SplitPane
                   split="vertical"
-                  // maxSize={windowWidth ? windowWidth * 0.60 : 1000}
                   maxSize={searchPanelOpen ? 
-                            (windowWidth ? windowWidth : 1000) * 0.5 
-                          : (windowWidth ? windowWidth : 1000) * 0.6}
+                    (windowWidth ? windowWidth : 1000) * 0.5 
+                  : (windowWidth ? windowWidth : 1000) * 0.66}
+                  minSize={(windowWidth ? windowWidth : 400) * 0.33 }
                   defaultSize="50%"
                   style={{
                     padding: "1.5rem",
@@ -201,8 +201,8 @@ const FourYearPlanPage = ({
                       />
                     </PanelInteriorWrapper>
                     {searchPanelOpen && (
-                      <PanelInteriorWrapper $minWidth={"40%"} $maxWidth={"43%"}>
-                        <SearchPanel activeDegreeplanId={activeDegreeplan ? activeDegreeplan.id : null} setSearchedRuleId={setSearchRuleId}/>
+                      <PanelInteriorWrapper $minWidth={"48%"} $maxWidth={"48%"}>
+                        <SearchPanel activeDegreeplanId={activeDegreeplan ? activeDegreeplan.id : null} />
                       </PanelInteriorWrapper>
                     )}
                   </PanelWrapper>

diff --git a/frontend/degree-plan/components/Requirements/QObject.tsx b/frontend/degree-plan/components/Requirements/QObject.tsx
@@ -179,7 +179,7 @@ interface SearchConditionProps extends SearchConditionInnerProps {
     ruleIsSatisfied: boolean,
     ruleId: Rule["id"];
     ruleQuery: string;
-    activeDegreeplanId: DegreePlan["id"];
+    activeDegreeplanId: DegreePlan["id"]
 }
 const SearchCondition = ({ ruleId, ruleQuery, fulfillments, ruleIsSatisfied, q, activeDegreeplanId}: SearchConditionProps) => {
     const { setSearchPanelOpen, searchRuleId, setSearchRuleQuery, setSearchRuleId, setSearchFulfillments } = useContext(SearchPanelContext);
@@ -189,7 +189,6 @@ const SearchCondition = ({ ruleId, ruleQuery, fulfillments, ruleIsSatisfied, q,
             $isDisabled={false}
             $isUsed={false}
             $isSearched={searchRuleId == ruleId}
-
         >
             <SearchConditionInner q={q} />
             <DarkGrayIcon onClick={() => {
@@ -266,7 +265,7 @@ interface QObjectProps {
     satisfied: boolean;
     activeDegreePlanId: number;
 }
-const QObject = ({ q, fulfillments, rule, satisfied, activeDegreePlanId}: QObjectProps) => {
+const QObject = ({ q, fulfillments, rule, satisfied, activeDegreePlanId }: QObjectProps) => {
 
     // recursively render
     switch (q.type) {
@@ -305,14 +304,7 @@ const QObject = ({ q, fulfillments, rule, satisfied, activeDegreePlanId}: QObjec
             const displaySearchConditions = searchConditions.map(search => {
                 const courses = Array.from(fulfillmentsMap.values())
                 fulfillmentsMap.clear()
-                return <SearchCondition 
-                    fulfillments={courses} 
-                    q={search.q} 
-                    ruleIsSatisfied={satisfied} 
-                    ruleId={rule.id} 
-                    ruleQuery={rule.q} 
-                    activeDegreeplanId={activeDegreePlanId} 
-                />
+                return <SearchCondition fulfillments={courses} q={search.q} ruleIsSatisfied={satisfied} ruleId={rule.id} ruleQuery={rule.q} activeDegreeplanId={activeDegreePlanId}/>
             })
 
             return <Row $wrap>
@@ -322,14 +314,7 @@ const QObject = ({ q, fulfillments, rule, satisfied, activeDegreePlanId}: QObjec
                 )}
                 </Row>
         case "SEARCH":
-            return <SearchCondition 
-                q={q.q} 
-                ruleIsSatisfied={satisfied} 
-                fulfillments={fulfillments} 
-                ruleId={rule.id} 
-                ruleQuery={rule.q} 
-                activeDegreeplanId={activeDegreePlanId}
-                />;
+            return <SearchCondition q={q.q} ruleIsSatisfied={satisfied} fulfillments={fulfillments} ruleId={rule.id} ruleQuery={rule.q} activeDegreeplanId={activeDegreePlanId}/>;
         case "COURSE":
             const [fulfillment] = fulfillments.filter(fulfillment => fulfillment.full_code == q.full_code && (!q.semester || q.semester === fulfillment.semester))
             return <CourseInReq course={{...q, rules: fulfillment ? fulfillment.rules : []}} fulfillment={fulfillment} isDisabled={satisfied && !fulfillment} isUsed={!!fulfillment} rule_id={rule.id} activeDegreePlanId={activeDegreePlanId}/>;
@@ -371,13 +356,7 @@ const RuleLeaf = ({ q_json, fulfillmentsForRule, rule, satisfied, activeDegreePl
 
     return (
         <RuleLeafWrapper $wrap>
-            <QObject 
-                q={q_json} 
-                fulfillments={fulfillmentsForRule} 
-                rule={rule} 
-                satisfied={satisfied} 
-                activeDegreePlanId={activeDegreePlanId} 
-                />
+            <QObject q={q_json} fulfillments={fulfillmentsForRule} rule={rule} satisfied={satisfied} activeDegreePlanId={activeDegreePlanId} />
         </RuleLeafWrapper>
     )
 }

diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
@@ -216,7 +216,7 @@ const Degree = ({degree, rulesToFulfillments, activeDegreeplan, editMode, setMod
       <DegreeBody>
         {degree && degree.rules.map((rule: any) => (
           <RuleComponent 
-            {...computeRuleTree({ activeDegreePlanId: activeDegreeplan.id, rule, rulesToFulfillments })}
+          {...computeRuleTree({ activeDegreePlanId: activeDegreeplan.id, rule, rulesToFulfillments })}
           />
         ))}
       </DegreeBody>}

diff --git a/frontend/degree-plan/components/Requirements/Rule.tsx b/frontend/degree-plan/components/Requirements/Rule.tsx
@@ -101,8 +101,7 @@ const RuleLeafLabel = styled.div`
 `
 
 const RuleLeafContainer = styled(Column)`
-  margin: 0.1rem;
-  }
+  margin-top: 0.25rem;
 `
 
 
@@ -148,7 +147,6 @@ export const SkeletonRule: React.FC<React.PropsWithChildren> = ({ children }) =>
 /**
  * Recursive component to represent a rule.
  */
-
 const RuleComponent = (ruleTree : RuleTree) => {
     const { type, activeDegreePlanId, rule, progress } = ruleTree; 
     const satisfied = progress === 1;
@@ -183,13 +181,7 @@ const RuleComponent = (ruleTree : RuleTree) => {
           <RuleLeafContainer>
             <RuleLeafLabel>{rule.title}</RuleLeafLabel>
             <RuleLeafWrapper $isDroppable={canDrop} $isOver={isOver} ref={drop}>
-              <RuleLeaf 
-                q_json={rule.q_json} 
-                rule={rule} 
-                fulfillmentsForRule={fulfillments} 
-                satisfied={satisfied} 
-                activeDegreePlanId={activeDegreePlanId}
-                />
+              <RuleLeaf q_json={rule.q_json} rule={rule} fulfillmentsForRule={fulfillments} satisfied={satisfied} activeDegreePlanId={activeDegreePlanId}/>
               <Row>
               {!!satisfied && <SatisfiedCheck />}
               <Column>
@@ -218,7 +210,7 @@ const RuleComponent = (ruleTree : RuleTree) => {
         </PickNTitle>
             {children.map((ruleTree) => (
               <div>
-                <RuleComponent {...ruleTree}/>
+                <RuleComponent {...ruleTree} />
               </div>
             ))}
       </PickNWrapper>
@@ -247,7 +239,7 @@ const RuleComponent = (ruleTree : RuleTree) => {
             <Column>
               {children.map((ruleTree) => (
                 <div>
-                  <RuleComponent {...ruleTree}/>
+                  <RuleComponent {...ruleTree} />
                 </div>
               ))}
             </Column>

diff --git a/frontend/degree-plan/components/Search/CourseInSearch.tsx b/frontend/degree-plan/components/Search/CourseInSearch.tsx
@@ -9,7 +9,6 @@ import { Course as CourseType, DnDCourse, Rule } from "@/types";
 import Skeleton from "react-loading-skeleton";
 import 'react-loading-skeleton/dist/skeleton.css'
 import { ReviewPanelTrigger } from "../Infobox/ReviewPanel";
-import CourseComponent from "../Course/Course";
 
 
 const RowSelectors = styled.li`
@@ -149,13 +148,6 @@ export default function Course({
     isStar,
 }: CourseProps) {
     /** React dnd */
-    // const [{ isDragging }, drag, dragPreview] = useDrag<DnDCourse>(() => ({
-    //     type: ItemTypes.COURSE_IN_REQ,
-    //     item: {full_code: course.id, semester:-1, rule_id: ruleId},
-    //     collect: (monitor) => ({
-    //         isDragging: !!monitor.isDragging(),
-    //     })
-    // }))
     const [{ isDragging }, drag] = useDrag<DnDCourse, never, { isDragging: boolean }>(() => ({
         type: ItemTypes.COURSE_IN_PLAN,
         item: {full_code: course.id},
@@ -170,11 +162,9 @@ export default function Course({
         <RowSelectors>
             <ReviewPanelTrigger full_code={course.id} triggerType="click">
                 <CourseContainer onMouseEnter={() => setIsMouseOver(true)} onMouseLeave={() => setIsMouseOver(false)}>
-                    <CourseInfoContainer
-                        role="button"
-                    >   
-                        <CourseIdentityContainer >
-                            <CourseIDContainer ref={drag} className="draggable">
+                    <CourseInfoContainer>   
+                        <CourseIdentityContainer ref={drag} className="draggable">
+                            <CourseIDContainer>
                                 <CourseID>{course.id.replace(/-/g, " ")}</CourseID>
                                 {/* {isMouseOver && 
                                 <AddButton onClick={onClick}>
@@ -196,4 +186,4 @@ export default function Course({
             </ReviewPanelTrigger>
         </RowSelectors>
     );
-}
+}
diff --git a/frontend/degree-plan/components/Search/ResultsList.tsx b/frontend/degree-plan/components/Search/ResultsList.tsx
@@ -93,7 +93,7 @@ const ResultsList = ({
                     // star means the course is a fulfillment
                     isStar={!!fulfillments.find((fulfillment) => fulfillment.full_code == course.id)}
                 />) :
-                Array.from(Array(5).keys()).map(() => <SkeletonCourse />)
+                Array.from(Array(6).keys()).map(() => <SkeletonCourse />)
                 }
             </CoursesContainer>
         </CourseListContainer>