chore(fe): Fix deprecations and breaking changes in deps (#1154)

* Update antd to fix React deprecation warnings * Fix breaking changes for styled-components v6 * Apply npm audit fix
devsoc-unsw · Jul 3, 2024 · 9108b32 · 9108b32
1 parent 5c147ae
commit 9108b32
Show file tree

Hide file tree

Showing 37 changed files with 404 additions and 349 deletions.
diff --git a/backend/init-mongo.dockerfile b/backend/init-mongo.dockerfile
@@ -2,7 +2,7 @@
 # speeds up development, since we can rebuild and create new containers without
 # overwriting every time.
 
-FROM python:3.11.5
+FROM python:3.12.3-slim
 
 WORKDIR /util
 
@@ -11,4 +11,4 @@ RUN pip install --no-cache-dir -r requirements.txt
 
 COPY . .
 
-CMD ["python3", "-u", "init-database.py"]
+CMD ["python3", "-u", "init-database.py"]
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,7 +14,7 @@
     "@rive-app/react-canvas": "4.8.3",
     "@tanstack/react-query": "5.29.2",
     "@tippyjs/react": "4.2.6",
-    "antd": "5.15.4",
+    "antd": "5.18.1",
     "axios": "1.6.8",
     "dayjs": "1.11.11",
     "fast-fuzzy": "1.12.0",

diff --git a/frontend/src/components/Collapsible/Collapsible.tsx b/frontend/src/components/Collapsible/Collapsible.tsx
@@ -21,7 +21,7 @@ const Collapsible = ({ initiallyCollapsed = false, title, children, headerStyle
   return (
     <div>
       <S.CollapsibleHeader onClick={toggleCollapse} style={headerStyle}>
-        <S.CollapseButton collapsed={isCollapsed} />
+        <S.CollapseButton $collapsed={isCollapsed} />
         {typeof title === 'string' ? (
           <Title level={3} className="text">
             {title}
@@ -30,7 +30,7 @@ const Collapsible = ({ initiallyCollapsed = false, title, children, headerStyle
           title
         )}
       </S.CollapsibleHeader>
-      <S.CollapsibleContent collapsed={isCollapsed}>{children}</S.CollapsibleContent>
+      <S.CollapsibleContent $collapsed={isCollapsed}>{children}</S.CollapsibleContent>
     </div>
   );
 };

diff --git a/frontend/src/components/Collapsible/styles.ts b/frontend/src/components/Collapsible/styles.ts
@@ -18,25 +18,25 @@ const CollapsibleHeader = styled.div`
   }
 `;
 
-const CollapseButton = styled(RightOutlined)<{ collapsed: boolean }>`
+const CollapseButton = styled(RightOutlined)<{ $collapsed: boolean }>`
   margin-bottom: 10px;
   padding: 10px;
   transition: 200ms;
   transform: rotate(90deg);
   color: ${({ theme }) => theme.collapseBtnIcon.color};
 
-  ${({ collapsed }) =>
-    collapsed &&
+  ${({ $collapsed }) =>
+    $collapsed &&
     css`
       transform: rotate(0);
     `}
 `;
 
-const CollapsibleContent = styled.div<{ collapsed: boolean }>(
-  ({ collapsed }) => css`
+const CollapsibleContent = styled.div<{ $collapsed: boolean }>(
+  ({ $collapsed }) => css`
     width: 100%;
     margin: 10px;
-    max-height: ${collapsed ? 0 : 4000}px;
+    max-height: ${$collapsed ? 0 : 4000}px;
     transition: max-height 0.4s ease-in-out;
     overflow: hidden;
   `

diff --git a/frontend/src/components/CourseButton/CourseButton.tsx b/frontend/src/components/CourseButton/CourseButton.tsx
@@ -21,7 +21,7 @@ const CourseButton = ({ courseCode, title, planned }: Props) => {
   };
 
   return (
-    <S.CourseButton planned={planned} type="primary" onClick={handleCourseLink}>
+    <S.CourseButton $planned={planned} type="primary" onClick={handleCourseLink}>
       {courseCode}: {title}
     </S.CourseButton>
   );

diff --git a/frontend/src/components/CourseButton/styles.ts b/frontend/src/components/CourseButton/styles.ts
@@ -1,7 +1,7 @@
 import { Button } from 'antd';
 import styled, { css } from 'styled-components';
 
-const CourseButton = styled(Button)<{ planned?: boolean }>`
+const CourseButton = styled(Button)<{ $planned?: boolean }>`
   border-radius: 10px;
   border: 1px solid ${({ theme }) => theme.purpleLight};
   display: flex;
@@ -11,8 +11,8 @@ const CourseButton = styled(Button)<{ planned?: boolean }>`
   height: 80px;
   white-space: normal;
 
-  ${({ planned, theme }) =>
-    !planned &&
+  ${({ $planned, theme }) =>
+    !$planned &&
     css`
       background-color: ${theme.courseButton.backgroundColor};
       color: #9254de !important;

diff --git a/frontend/src/components/CourseButtonCard/CourseButtonCard.tsx b/frontend/src/components/CourseButtonCard/CourseButtonCard.tsx
@@ -22,7 +22,7 @@ const CourseButtonCard = ({ courseCode, title, planned }: Props) => {
   };
 
   return (
-    <S.CourseButtonCard planned={planned} type="primary" onClick={handleCourseLink}>
+    <S.CourseButtonCard $planned={planned} type="primary" onClick={handleCourseLink}>
       <S.CourseWrapper>
         <S.CourseCode>{courseCode}</S.CourseCode>
         <S.CourseTitle>{title}</S.CourseTitle>

diff --git a/frontend/src/components/CourseButtonCard/styles.ts b/frontend/src/components/CourseButtonCard/styles.ts
@@ -27,7 +27,7 @@ const CourseTitle = styled.p`
   -webkit-box-orient: vertical;
 `;
 
-const CourseButtonCard = styled(Button)<{ planned?: boolean }>`
+const CourseButtonCard = styled(Button)<{ $planned?: boolean }>`
   border-radius: 10px;
   border-width: 1px;
   width: 270px;
@@ -39,8 +39,8 @@ const CourseButtonCard = styled(Button)<{ planned?: boolean }>`
   justify-content: space-between;
   gap: 5px;
 
-  ${({ planned }) =>
-    !planned &&
+  ${({ $planned }) =>
+    !$planned &&
     css`
       background: #fafafa;
       border-color: #dcdcdc;

diff --git a/frontend/src/components/CourseDescriptionPanel/CourseAttributes/CourseAttributes.tsx b/frontend/src/components/CourseDescriptionPanel/CourseAttributes/CourseAttributes.tsx
@@ -165,7 +165,7 @@ const CourseAttributes = ({ course, courseCapacity }: CourseAttributesProps) =>
                 <p>Overall</p>
               </div>
               <S.Link
-                href={`https://unilectives.csesoc.app/course/${code}/`}
+                href={`https://unilectives.devsoc.app/course/${code}/`}
                 target="_blank"
                 rel="noreferrer"
               >

diff --git a/frontend/src/components/CourseDescriptionPanel/CourseDescriptionPanel.tsx b/frontend/src/components/CourseDescriptionPanel/CourseDescriptionPanel.tsx
@@ -79,7 +79,7 @@ const CourseDescriptionPanel = ({
   });
 
   const loadingWrapper = (
-    <S.Wrapper sidebar={sidebar}>
+    <S.Wrapper $sidebar={sidebar}>
       {!sidebar ? <LoadingCourseDescriptionPanelSidebar /> : <LoadingCourseDescriptionPanel />}
     </S.Wrapper>
   );
@@ -94,9 +94,9 @@ const CourseDescriptionPanel = ({
   // course wasn't fetchable (fatal; should do proper error handling instead of indefinitely loading)
   if (!course) return loadingWrapper;
   return (
-    <S.Wrapper sidebar={sidebar} className={className}>
+    <S.Wrapper $sidebar={sidebar} className={className}>
       <S.MainWrapper>
-        <S.TitleWrapper sidebar={sidebar}>
+        <S.TitleWrapper $sidebar={sidebar}>
           <div>
             <Title level={2} className="text">
               {courseCode} - {course.title}

diff --git a/frontend/src/components/CourseDescriptionPanel/styles.ts b/frontend/src/components/CourseDescriptionPanel/styles.ts
@@ -3,12 +3,12 @@ import styled, { css } from 'styled-components';
 
 const { Text } = Typography;
 
-const Wrapper = styled.div<{ sidebar?: boolean }>`
+const Wrapper = styled.div<{ $sidebar?: boolean }>`
   width: 100%;
   padding: 10px;
 
-  ${({ sidebar }) =>
-    sidebar &&
+  ${({ $sidebar }) =>
+    $sidebar &&
     css`
       padding: 30px;
       display: flex;
@@ -26,9 +26,9 @@ const SidebarWrapper = styled.div`
   flex-basis: 25%;
 `;
 
-const TitleWrapper = styled.div<{ sidebar?: boolean }>`
-  ${({ sidebar }) =>
-    sidebar &&
+const TitleWrapper = styled.div<{ $sidebar?: boolean }>`
+  ${({ $sidebar }) =>
+    $sidebar &&
     css`
       display: flex;
       flex-direction: row;

diff --git a/frontend/src/components/DraggableTab/DraggableTab.tsx b/frontend/src/components/DraggableTab/DraggableTab.tsx
@@ -66,7 +66,7 @@ const DraggableTab = ({ tabName, index }: Props) => {
         {(draggableProvided) => (
           <S.DraggableTabWrapper
             role="tab"
-            active={index === active}
+            $active={index === active}
             onClick={() => dispatch(setActiveTab(index))}
             ref={(r) => {
               ref.current = r;

diff --git a/frontend/src/components/DraggableTab/styles.ts b/frontend/src/components/DraggableTab/styles.ts
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-const DraggableTabWrapper = styled.div<{ active: boolean }>`
+const DraggableTabWrapper = styled.div<{ $active: boolean }>`
   height: 100%;
   border-radius: 10px 0 0 0;
   background-color: ${({ theme }) => theme.draggableTab.backgroundColor};
@@ -13,8 +13,8 @@ const DraggableTabWrapper = styled.div<{ active: boolean }>`
   border: 1px solid ${({ theme }) => theme.draggableTab.borderColor};
   color: ${({ theme }) => theme.text};
 
-  ${({ active, theme }) =>
-    active &&
+  ${({ $active, theme }) =>
+    $active &&
     css`
       background-color: ${theme.body};
       border-bottom-color: ${theme.body};

diff --git a/frontend/src/components/Header/DrawerContent.tsx b/frontend/src/components/Header/DrawerContent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { BugOutlined } from '@ant-design/icons';
 import { Menu } from 'antd';
-import type { ItemType } from 'antd/lib/menu/hooks/useItems';
+import { ItemType } from 'antd/es/menu/interface';
 import { FEEDBACK_LINK, inDev } from 'config/constants';
 import routes from './routes';
 

diff --git a/frontend/src/components/PrerequisiteTree/PrerequisiteTree.tsx b/frontend/src/components/PrerequisiteTree/PrerequisiteTree.tsx
@@ -123,7 +123,7 @@ const PrerequisiteTree = ({ courseCode, onCourseClick }: Props) => {
   }, [courseCode, loading, onCourseClick]);
 
   return (
-    <S.PrereqTreeContainer ref={ref} height={calcHeight(coursesRequires, courseUnlocks)}>
+    <S.PrereqTreeContainer ref={ref} $height={calcHeight(coursesRequires, courseUnlocks)}>
       {loading && <Spinner text="Loading tree..." />}
       {!loading && graphRef.current && !graphRef.current.getEdges().length && (
         <p> No prerequisite visualisation is needed for this course </p>

diff --git a/frontend/src/components/PrerequisiteTree/styles.ts b/frontend/src/components/PrerequisiteTree/styles.ts
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
-const PrereqTreeContainer = styled.div<{ height: number }>`
+const PrereqTreeContainer = styled.div<{ $height: number }>`
   margin-top: 20px;
-  height: ${({ height }) => height}em;
+  height: ${({ $height }) => $height}em;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/frontend/src/components/SidebarDrawer/SidebarDrawer.tsx b/frontend/src/components/SidebarDrawer/SidebarDrawer.tsx
@@ -9,7 +9,7 @@ const SidebarDrawer = ({ children }: Props) => {
   const [open, setOpen] = useState<boolean | undefined>(undefined);
 
   return (
-    <S.Wrapper open={open} className="sidebar-drawer">
+    <S.Wrapper $open={open} className="sidebar-drawer">
       <S.ButtonWrapper role="button" title="See Info..." onClick={() => setOpen(!open)}>
         <S.SVGWrapper xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 48">
           <S.SVGLine y1="2" y2="46" x1="2" x2="2" />

diff --git a/frontend/src/components/SidebarDrawer/styles.ts b/frontend/src/components/SidebarDrawer/styles.ts
@@ -17,7 +17,7 @@ const getAnimationState = (openState: boolean | undefined) => {
       `;
 };
 
-const Wrapper = styled.div<{ open?: boolean }>`
+const Wrapper = styled.div<{ $open?: boolean }>`
   position: absolute;
   height: 85%;
   width: 30rem;
@@ -30,7 +30,7 @@ const Wrapper = styled.div<{ open?: boolean }>`
 
   animation-duration: 0.7s;
   animation-fill-mode: forwards;
-  ${({ open }) => getAnimationState(open)}
+  ${({ $open }) => getAnimationState($open)}
 
   @keyframes animation_opening {
     from {

diff --git a/frontend/src/pages/CourseSelector/CourseMenuTitle/CourseMenuTitle.tsx b/frontend/src/pages/CourseSelector/CourseMenuTitle/CourseMenuTitle.tsx
@@ -24,12 +24,12 @@ const CourseMenuTitle = ({ courseCode, runMutate, selected, accurate, unlocked,
     <S.Wrapper>
       {isSmall ? (
         <Tooltip title={title} placement="topLeft">
-          <S.CourseTitleWrapper selected={selected} locked={locked}>
+          <S.CourseTitleWrapper $selected={selected} $locked={locked}>
             {courseCode}
           </S.CourseTitleWrapper>
         </Tooltip>
       ) : (
-        <S.CourseTitleWrapper selected={selected} locked={locked}>
+        <S.CourseTitleWrapper $selected={selected} $locked={locked}>
           {courseCode}: {title}
         </S.CourseTitleWrapper>
       )}

diff --git a/frontend/src/pages/CourseSelector/CourseMenuTitle/styles.ts b/frontend/src/pages/CourseSelector/CourseMenuTitle/styles.ts
@@ -13,15 +13,15 @@ const IconsWrapper = styled.div`
   gap: 5px;
 `;
 
-const CourseTitleWrapper = styled.div<{ selected?: boolean; locked?: boolean }>`
+const CourseTitleWrapper = styled.div<{ $selected?: boolean; $locked?: boolean }>`
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   color: ${({ theme }) => theme.text};
 
-  font-weight: ${({ selected, locked }) => {
-    if (locked) return '100';
-    if (selected) return '700';
+  font-weight: ${({ $selected, $locked }) => {
+    if ($locked) return '100';
+    if ($selected) return '700';
     return 'normal';
   }};
 `;

diff --git a/frontend/src/pages/CourseSelector/CourseSelector.tsx b/frontend/src/pages/CourseSelector/CourseSelector.tsx
@@ -84,13 +84,13 @@ const CourseSelector = () => {
       <S.ContainerWrapper>
         <CourseBanner courses={coursesQuery.data} />
         <CourseTabs />
-        <S.ContentWrapper offset={menuOffset}>
+        <S.ContentWrapper $offset={menuOffset}>
           <CourseMenu
             planner={plannerQuery.data}
             courses={coursesQuery.data}
             degree={degreeQuery.data}
           />
-          <S.ContentResizer ref={divRef} offset={menuOffset} />
+          <S.ContentResizer ref={divRef} $offset={menuOffset} />
           {courseCode ? (
             <div style={{ overflow: 'auto' }}>
               <CourseDescriptionPanel

diff --git a/frontend/src/pages/CourseSelector/styles.ts b/frontend/src/pages/CourseSelector/styles.ts
@@ -6,19 +6,19 @@ const ContainerWrapper = styled.div`
   height: calc(100vh - var(--navbar-height));
 `;
 
-const ContentWrapper = styled.div<{ offset?: number }>`
+const ContentWrapper = styled.div<{ $offset?: number }>`
   display: grid;
-  grid-template-columns: ${({ offset }) => (offset ? `${offset}px` : '20vw')} auto;
+  grid-template-columns: ${({ $offset }) => ($offset ? `${$offset}px` : '20vw')} auto;
   height: var(--cs-bottom-cont-height);
 `;
 
-const ContentResizer = styled.div<{ offset?: number }>`
+const ContentResizer = styled.div<{ $offset?: number }>`
   cursor: col-resize;
   height: 100%;
   width: 6px;
   background-color: transparent;
   position: fixed;
-  left: ${({ offset }) => (offset ? `${offset}px` : '20vw')};
+  left: ${({ $offset }) => ($offset ? `${$offset}px` : '20vw')};
   margin-left: -3px;
   z-index: 100;
 `;

diff --git a/frontend/src/pages/GraphicalSelector/GraphicalSelector.tsx b/frontend/src/pages/GraphicalSelector/GraphicalSelector.tsx
@@ -48,8 +48,8 @@ const GraphicalSelector = () => {
 
   return (
     <PageTemplate>
-      <S.Wrapper fullscreen={fullscreen}>
-        <S.GraphWrapper fullscreen={fullscreen}>
+      <S.Wrapper $fullscreen={fullscreen}>
+        <S.GraphWrapper $fullscreen={fullscreen}>
           <CourseGraph
             onNodeClick={(node) => {
               setCourseCode(node.getID());

diff --git a/frontend/src/pages/GraphicalSelector/styles.ts b/frontend/src/pages/GraphicalSelector/styles.ts
@@ -1,27 +1,27 @@
 import styled, { css } from 'styled-components';
 import CourseDescriptionPanelComp from 'components/CourseDescriptionPanel';
 
-const Wrapper = styled.div<{ fullscreen: boolean }>`
+const Wrapper = styled.div<{ $fullscreen: boolean }>`
   height: calc(100vh - var(--navbar-height));
   display: flex;
   gap: 20px;
 
-  ${({ fullscreen }) =>
-    !fullscreen &&
+  ${({ $fullscreen }) =>
+    !$fullscreen &&
     css`
       padding: 25px;
     `}
 `;
 
-const GraphWrapper = styled.div<{ fullscreen: boolean }>`
+const GraphWrapper = styled.div<{ $fullscreen: boolean }>`
   height: 100%;
   width: 100%;
   overflow: hidden;
   flex: 5;
   position: relative;
 
-  ${({ fullscreen }) =>
-    !fullscreen &&
+  ${({ $fullscreen }) =>
+    !$fullscreen &&
     css`
       border-radius: 20px;
       border: ${({ theme }) => theme.graph.borderColor} solid 1px;