Merge pull request #582 from pennlabs/bump-react-next

Bump react, next and typescript
pennlabs · Apr 2, 2024 · 00ee016 · 00ee016
2 parents b6219a9 + 7b6e0f4
commit 00ee016
Show file tree

Hide file tree

Showing 65 changed files with 1,140 additions and 37,377 deletions.
diff --git a/frontend/README.md b/frontend/README.md
@@ -8,7 +8,7 @@ houses 3 projects, namely `Penn Course Alert`, `Penn Course Plan` and
 that are used in both PCA and PCP. 
 
 ## Setting Up Development Environment 
-Make sure you have `node` (with a version that is <= 16.9.0) and `yarn` installed.
+Make sure you have `node` (with a version that is ^18) and `yarn` installed.
 We use [Yarn Workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) 
 to handle development dependency installation/resolution. In 
 `frontend/package.json`, we have defined the directories of each project 

diff --git a/frontend/alert/.babelrc b/frontend/alert/.babelrc
diff --git a/frontend/alert/components/AutoComplete.tsx b/frontend/alert/components/AutoComplete.tsx
@@ -39,15 +39,15 @@ const DOWN_ARROW = 40;
 const RETURN_KEY = 13;
 const DELETE_KEY = 8;
 
-const DropdownContainer = styled.div<{ below: RefObject<HTMLInputElement> }>`
+const DropdownContainer = styled.div<{ $below: RefObject<HTMLInputElement>, $hidden: boolean }>`
     position: absolute;
     left: 0;
     top: 100%;
-    width: ${({ below }) =>
+    width: ${({ $below: below }) =>
         below.current &&
         below.current.getBoundingClientRect().width -
             AUTOCOMPLETE_BORDER_WIDTH * 2}px;
-    visibility: ${({ hidden }) => (hidden ? "hidden" : "visible")};
+    visibility: ${({ $hidden }) => ($hidden ? "hidden" : "visible")};
     z-index: 5000;
     text-align: left;
 `;
@@ -81,21 +81,21 @@ const AutoCompleteInputBackground = styled(AutoCompleteInput)`
     ${(props) => (props.disabled ? "" : "background: white;")}
 `;
 
-const Container = styled.div<{ inputHeight: string }>`
+const Container = styled.div<{ $inputHeight: string }>`
     position: relative;
     display: block;
     margin-bottom: 1rem;
-    height: ${(props) => props.inputHeight};
+    height: ${(props) => props.$inputHeight};
 `;
 
 const AutoCompleteInputContainer = styled.div``;
 
 const ClearSelection = styled(FontAwesomeIcon)<{
-    hidden?: boolean;
-    parent: RefObject<HTMLInputElement>;
+    $hidden?: boolean;
+    $parent: RefObject<HTMLInputElement>;
 }>`
-    display: ${(props) => (props.hidden ? "none" : "block")};
-    top: ${({ parent }) =>
+    display: ${(props) => (props.$hidden ? "none" : "block")};
+    top: ${({ $parent: parent }) =>
         parent.current && parent.current.getBoundingClientRect().height / 2}px;
     right: 5px;
     padding: 0 8px;
@@ -268,7 +268,7 @@ const AutoComplete = ({
 
     return (
         <Container
-            inputHeight={
+            $inputHeight={
                 inputRef.current
                     ? `${inputRef.current.getBoundingClientRect().height}px`
                     : "inherit"
@@ -280,7 +280,7 @@ const AutoComplete = ({
                     defaultValue={defaultValue}
                     readOnly={bulkMode}
                     // @ts-ignore
-                    autocomplete="off"
+                    autoComplete="off"
                     placeholder="Course"
                     ref={inputRef}
                     onKeyDown={(e) => {
@@ -342,22 +342,22 @@ const AutoComplete = ({
                 />
                 <AutoCompleteInputBackground
                     // @ts-ignore
-                    autocomplete="off"
+                    autoComplete="off"
                     disabled={bulkMode}
                     value={bulkMode ? "" : backdrop}
                     readOnly={true}
                 />
                 <ClearSelection
                     icon={faTimes}
-                    hidden={!bulkMode}
-                    parent={inputRef}
+                    $hidden={!bulkMode}
+                    $parent={inputRef}
                     onClick={() => {
                         clearSelections();
                         clearInputValue();
                     }}
                 />
             </AutoCompleteInputContainer>
-            <DropdownContainer below={inputRef} hidden={!show}>
+            <DropdownContainer $below={inputRef} $hidden={!show}>
                 <DropdownBox>
                     {Object.keys(groupedSuggestions).map((key) => (
                         <GroupSuggestion

diff --git a/frontend/alert/components/GroupSuggestion.tsx b/frontend/alert/components/GroupSuggestion.tsx
@@ -10,8 +10,8 @@ import Checkbox from "./common/Checkbox";
 import { mapActivityToString } from "../util";
 
 interface DropdownItemBoxProps {
-    selected?: boolean | false;
-    headerBox?: boolean | false;
+    $selected?: boolean | false;
+    $headerBox?: boolean | false;
 }
 
 const DropdownItemBox = styled.div<DropdownItemBoxProps>`
@@ -23,20 +23,20 @@ const DropdownItemBox = styled.div<DropdownItemBoxProps>`
     padding-bottom: 1rem;
     display: flex;
     justify-content: stretch;
-    flex-direction: ${(props) => (props.headerBox ? "column" : "row")};
+    flex-direction: ${(props) => (props.$headerBox ? "column" : "row")};
     cursor: pointer;
     ${(props) =>
-        props.selected ? "background-color: rgb(235, 235, 235);" : ""}
+        props.$selected ? "background-color: rgb(235, 235, 235);" : ""}
 
     &:hover {
         ${(props) =>
-            !props.headerBox ? "background-color: rgb(220, 220, 220);" : ""}
+            !props.$headerBox ? "background-color: rgb(220, 220, 220);" : ""}
     }
 `;
 
-const DropdownItemLeftCol = styled.div<{ headerBox?: boolean | false }>`
-    max-width: ${(props) => (props.headerBox ? "100%" : "65%")};
-    flex-basis: ${(props) => (props.headerBox ? "100%" : "65%")};
+const DropdownItemLeftCol = styled.div<{ $headerBox?: boolean | false }>`
+    max-width: ${(props) => (props.$headerBox ? "100%" : "65%")};
+    flex-basis: ${(props) => (props.$headerBox ? "100%" : "65%")};
     flex-grow: 1;
 `;
 
@@ -84,12 +84,12 @@ const ButtonContainer = styled.div`
     margin-top: 8px;
 `;
 
-const ToggleButton = styled.div<{ toggled: boolean }>`
+const ToggleButton = styled.div<{ $toggled: boolean }>`
     border-radius: 18.5px;
-    border: 1px solid ${(props) => (props.toggled ? "#5891FC" : "#D6D6D6")};
-    color: ${(props) => (props.toggled ? "#5891FC" : "#7A848D")};
+    border: 1px solid ${(props) => (props.$toggled ? "#5891FC" : "#D6D6D6")};
+    color: ${(props) => (props.$toggled ? "#5891FC" : "#7A848D")};
     font-size: 12px;
-    background-color: ${(props) => (props.toggled ? "#EBF2FF" : "#ffffff")};
+    background-color: ${(props) => (props.$toggled ? "#EBF2FF" : "#ffffff")};
     padding: 4px 8px;
     margin-right: 8px;
 `;
@@ -147,7 +147,7 @@ const Suggestion = ({
     }, [selected, ref]);
 
     return (
-        <DropdownItemBox selected={selected} ref={ref}>
+        <DropdownItemBox $selected={selected} ref={ref}>
             <CheckboxContainer
                 onClick={() => {
                     onClick();
@@ -283,8 +283,8 @@ const GroupSuggestion = ({
 
     return (
         <>
-            <DropdownItemBox headerBox={true}>
-                <DropdownItemLeftCol headerBox={true}>
+            <DropdownItemBox $headerBox={true}>
+                <DropdownItemLeftCol $headerBox={true}>
                     <SuggestionTitle>{courseCode}</SuggestionTitle>
                     <SuggestionSubtitle>
                         {sections[Object.keys(sections)[0]].length > 0 &&
@@ -294,7 +294,7 @@ const GroupSuggestion = ({
                 <ButtonContainer>
                     {Object.keys(sections).map((key) => (
                         <ToggleButton
-                            toggled={selectedAllActivity(key)}
+                            $toggled={selectedAllActivity(key)}
                             onClick={() => toggleButton(key)}
                             key={key}
                         >

diff --git a/frontend/alert/components/Timeline/TimelineElement.tsx b/frontend/alert/components/Timeline/TimelineElement.tsx
@@ -9,31 +9,31 @@ const MIN_SEGMENT_LENGTH = 20;
 const MAX_SEGMENT_LENGTH = 250;
 const MULTIPLIER = 18;
 
-const Circle = styled.div<{ open: boolean }>`
+const Circle = styled.div<{ $open: boolean }>`
     height: 0.875rem;
     width: 0.875rem;
-    border: 0.0625rem solid ${({ open }) => (open ? "#78D381" : "#cbd5dd")};
+    border: 0.0625rem solid ${({ $open: open }) => (open ? "#78D381" : "#cbd5dd")};
     border-radius: 50%;
-    color: ${({ open }) => (open ? "#78D381" : "#cbd5dd")};
+    color: ${({ $open: open }) => (open ? "#78D381" : "#cbd5dd")};
     font-size: 0.625rem;
     text-align: center;
     vertical-align: middle;
     line-height: 0.875rem;
 `;
 
 type SegmentProps = {
-    open: boolean;
-    length: number;
+    $open: boolean;
+    $length: number;
 };
 
 const Segment = styled.div<SegmentProps>`
-    background-color: ${({ open }) => (open ? "#78D381" : "#cbd5dd")};
-    height: ${({ length }) => length}px;
+    background-color: ${({ $open: open }) => (open ? "#78D381" : "#cbd5dd")};
+    height: ${({ $length: length }) => length}px;
     width: 0.1875rem;
 `;
 
 type InfoLabelProps = {
-    isTime?: boolean | false;
+    $isTime?: boolean | false;
 };
 
 const InfoLabel = styled.div<InfoLabelProps>`
@@ -43,7 +43,7 @@ const InfoLabel = styled.div<InfoLabelProps>`
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    justify-self: ${({ isTime }) => (isTime ? "end" : "start")};
+    justify-self: ${({ $isTime: isTime }) => (isTime ? "end" : "start")};
 `;
 
 const convertTime = (timeString) => {
@@ -100,19 +100,19 @@ const TimelineElement = ({ courseStatusData, index }: TimelineElementProps) => {
                 <>
                     <InfoLabel>{convertTime(prevTime)[0]}</InfoLabel>
                     <Segment
-                        open={courseStatusData[index - 1][1] == "opened"}
-                        length={segLength}
+                        $open={courseStatusData[index - 1][1] == "opened"}
+                        $length={segLength}
                     />
-                    <InfoLabel isTime={true}>
+                    <InfoLabel $isTime={true}>
                         {convertTime(prevTime)[1]}
                     </InfoLabel>
                 </>
             ) : (
                 <>
                     <div />
                     <Segment
-                        open={courseStatusData[index - 1][1] == "opened"}
-                        length={segLength}
+                        $open={courseStatusData[index - 1][1] == "opened"}
+                        $length={segLength}
                     />
                     <div />
                 </>
@@ -121,10 +121,10 @@ const TimelineElement = ({ courseStatusData, index }: TimelineElementProps) => {
             <InfoLabel>
                 {!courseStatusData[index][2] && convertTime(currTime)[0]}
             </InfoLabel>
-            <Circle open={courseStatusData[index][1] == "opened"}>
+            <Circle $open={courseStatusData[index][1] == "opened"}>
                 <FontAwesomeIcon icon={faCircle} />
             </Circle>
-            <InfoLabel isTime={true}>{convertTime(currTime)[1]}</InfoLabel>
+            <InfoLabel $isTime={true}>{convertTime(currTime)[1]}</InfoLabel>
         </>
     );
 };

diff --git a/frontend/alert/components/Timeline/index.tsx b/frontend/alert/components/Timeline/index.tsx
@@ -7,7 +7,7 @@ import { useOnClickOutside } from "pcx-shared-components/src/useOnClickOutside";
 
 import TimelineElement from "./TimelineElement";
 
-const AlertHistoryContainer = styled.div<{ close: boolean }>`
+const AlertHistoryContainer = styled.div<{ $close: boolean }>`
     position: fixed;
     right: 0;
     top: 0;
@@ -20,7 +20,7 @@ const AlertHistoryContainer = styled.div<{ close: boolean }>`
     background: white;
     z-index: 5001;
     transform: translate3d(
-        ${({ close }) => (close ? "16.5625rem" : "0")},
+        ${({ $close: close }) => (close ? "16.5625rem" : "0")},
         0,
         0
     );
@@ -76,34 +76,34 @@ const CourseSubHeading = styled.h5`
     font-weight: 500;
 `;
 
-const StatusLabel = styled.div<{ open: boolean }>`
+const StatusLabel = styled.div<{ $open: boolean }>`
     height: 1.4375rem;
     border-radius: 0.1875rem;
     font-weight: 600;
-    color: ${({ open }) => (open ? "#4AB255" : "#e8746a")};
-    background: ${({ open }) => (open ? "#E9F8EB" : "#f9dcda")};
+    color: ${({ $open: open }) => (open ? "#4AB255" : "#e8746a")};
+    background: ${({ $open: open }) => (open ? "#E9F8EB" : "#f9dcda")};
     font-size: 0.75rem;
     text-align: center;
     line-height: 1.5rem;
     padding: 0rem 0.5rem;
 `;
 
-const TimelineScrollContainer = styled.div<{ scroll: boolean }>`
+const TimelineScrollContainer = styled.div<{ $scroll: boolean }>`
     justify-content: flex-start;
     align-items: center;
     overflow-y: scroll;
     height: calc(100vh - 12.5rem);
     flex-direction: column;
 
     &::-webkit-scrollbar {
-        ${({ scroll }) =>
+        ${({ $scroll: scroll }) =>
             scroll
                 ? `width: 6px !important;
          background-color: transparent;`
                 : "display: none;"}
     }
 
-    ${({ scroll }) =>
+    ${({ $scroll: scroll }) =>
         scroll &&
         `scrollbar-width: thin;
         -ms-overflow-style: none;
@@ -232,7 +232,7 @@ const Timeline = ({ courseCode, setTimeline }: TimelineProps) => {
     }, [courseCode]);
 
     return (
-        <AlertHistoryContainer close={close} ref={scrollRef}>
+        <AlertHistoryContainer $close={close} ref={scrollRef}>
             <AlertTitle>Alert History</AlertTitle>
             <CloseButton
                 onClick={() => {
@@ -249,13 +249,13 @@ const Timeline = ({ courseCode, setTimeline }: TimelineProps) => {
                     <CourseInfoContainer>
                         <CourseSubHeading>{courseCode}</CourseSubHeading>
                         {courseStatusData[0][1] == "opened" ? (
-                            <StatusLabel open={true}>Open</StatusLabel>
+                            <StatusLabel $open={true}>Open</StatusLabel>
                         ) : (
-                            <StatusLabel open={false}>Closed</StatusLabel>
+                            <StatusLabel $open={false}>Closed</StatusLabel>
                         )}
                     </CourseInfoContainer>
 
-                    <TimelineScrollContainer scroll={scrollTimeline}>
+                    <TimelineScrollContainer $scroll={scrollTimeline}>
                         <FlexRow>
                             <TimelineContainer>
                                 {courseStatusData.map(