chore: update dependencies (#753)

uclaacm · Feb 9, 2025 · 5004b08 · 5004b08
1 parent 67ad98e
commit 5004b08
Show file tree

Hide file tree

Showing 97 changed files with 1,983 additions and 2,986 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -30,6 +30,7 @@ module.exports = {
     'eol-last': ['error', 'always'],
     'react/prop-types': 'off',
     'react/no-unknown-property': 'off',
+    'react/react-in-jsx-scope': 'off',
 
     // many of these rules are taken from our friends at Creative Labs;
     // see their config here: https://github.com/UCLA-Creative-Labs/sunshine/blob/master/.eslintrc.js
@@ -87,7 +88,7 @@ module.exports = {
     'quote-props': ['error', 'consistent-as-needed'],
 
     // No multiple empty lines
-    'no-multiple-empty-lines': ['error'],
+    'no-multiple-empty-lines': ['error', { max: 1 }],
 
     // Max line lengths
     'max-len': [

diff --git a/__tests__/components/Footer.test.js b/__tests__/components/Footer.test.js
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+
+import { act } from 'react';
 import Footer from '../../components/Footer';
 
 expect.extend(toHaveNoViolations);

diff --git a/__tests__/components/NewsArticle.test.js b/__tests__/components/NewsArticle.test.js
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+
+import { act } from 'react';
 import NewsArticle from '../../components/NewsArticle';
 import data from '../../data';
 

diff --git a/components/ActiveLink.js b/components/ActiveLink.js
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { Children } from 'react';
+import { Children, cloneElement } from 'react';
 
 const ActiveLink = ({ children, activeClassName, ...props }) => {
   const { asPath } = useRouter();
@@ -14,9 +14,9 @@ const ActiveLink = ({ children, activeClassName, ...props }) => {
       : childClassName;
 
   return (
-  //clones child with className if className exists
+    //clones child with className if className exists
     (<Link {...props} legacyBehavior>
-      {React.cloneElement(child, {
+      {cloneElement(child, {
         className: className || null,
       })}
     </Link>)

diff --git a/components/Banner.js b/components/Banner.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
 
 // this can get refactored into something better
 const mapUpToSum = (num, fn) => {
@@ -30,18 +30,16 @@ const generateCols = (n, m, classPattern = [''], randomize = false) => {
   ));
 };
 
-export default class Banner extends React.Component {
-  constructor(props) {
-    super(props);
-    this.timer = null;
-    this.color = 0;
-    this.state = { randomize: false };
-  }
+const Banner = (props) => {
+  const [randomize, setRandomize] = useState(false);
+  const [color, setColor] = useState(0);
+  let timer;
+
+  useEffect(() => {
+    setRandomize(true);
 
-  componentDidMount() {
-    this.setState({ randomize: true });
     const committees = ['acm'];
-    if (!this.props.decorative)
+    if (!props.decorative) {
       committees.push(
         'studio',
         'icpc',
@@ -52,78 +50,78 @@ export default class Banner extends React.Component {
         'ai',
         'hack',
       );
+    }
+
     const el = document.querySelector('.banner');
-    this.timer = setInterval(() => {
-      el.classList.remove(committees[this.color]);
-      this.color = (this.color + 1) % committees.length;
-      el.classList.add(committees[this.color]);
-      this.forceUpdate();
+    timer = setInterval(() => {
+      el.classList.remove(committees[color]);
+      setColor((prevColor) => (prevColor + 1) % committees.length);
+      el.classList.add(committees[color]);
     }, 4000);
-  }
 
-  componentWillUnmount() {
-    clearInterval(this.timer);
-    this.timer = null;
-  }
+    return () => {
+      clearInterval(timer); // Cleanup on unmount
+    };
+  }, [color, props.decorative]); // Re-run when color or decorative props change
 
-  render() {
-    const decorative = this.props.decorative || false;
+  const decorative = props.decorative || false;
+  const sideCols = props.sideCols || (decorative ? 12 : 7);
+  const height = props.height || (decorative ? 2 : 7);
+  const width = props.width || 5;
 
-    const sideCols = this.props.sideCols || (decorative ? 12 : 7);
-    const height = this.props.height || (decorative ? 2 : 7);
-    const width = this.props.width || 5;
-    return (
-      <div className={`banner ${decorative ? 'decorative' : ''}`}>
-        <div className="square-col-container">
-          {!decorative &&
-            generateCols(1, height, [
-              '',
-              '',
-              '',
-              '',
-              'white',
-              'white',
-              'white',
-            ])}
-          {!decorative &&
-            generateCols(1, height, ['', '', '', '', '', 'white', 'white'])}
-          {generateCols(1, height, ['', '', '', '', '', '', 'white'])}
-          {generateCols(sideCols, height, undefined, this.state.randomize)}
-          {!decorative &&
-            generateCols(1, height, ['', '', 'white', 'white', '', '', ''])}
-          {!decorative &&
-            generateCols(width, height, [
-              '',
-              '',
-              'white',
-              'white',
-              'white',
-              '',
-              '',
-            ])}
-          {!decorative &&
-            generateCols(1, height, ['', '', '', 'white', 'white', '', ''])}
-          {generateCols(sideCols, height, undefined, this.state.randomize)}
-          {generateCols(1, height, ['white', '', '', '', '', '', ''])}
-          {!decorative &&
-            generateCols(1, height, ['white', 'white', '', '', '', '', ''])}
-          {!decorative &&
-            generateCols(1, height, [
-              'white',
-              'white',
-              'white',
-              '',
-              '',
-              '',
-              '',
-            ])}
-        </div>
-        {!decorative && (
-          <div className="title">
-            <h1>code the future.</h1>
-          </div>
-        )}
+  return (
+    <div className={`banner ${decorative ? 'decorative' : ''}`}>
+      <div className="square-col-container">
+        {!decorative &&
+          generateCols(1, height, [
+            '',
+            '',
+            '',
+            '',
+            'white',
+            'white',
+            'white',
+          ])}
+        {!decorative &&
+          generateCols(1, height, ['', '', '', '', '', 'white', 'white'])}
+        {generateCols(1, height, ['', '', '', '', '', '', 'white'])}
+        {generateCols(sideCols, height, undefined, randomize)}
+        {!decorative &&
+          generateCols(1, height, ['', '', 'white', 'white', '', '', ''])}
+        {!decorative &&
+          generateCols(width, height, [
+            '',
+            '',
+            'white',
+            'white',
+            'white',
+            '',
+            '',
+          ])}
+        {!decorative &&
+          generateCols(1, height, ['', '', '', 'white', 'white', '', ''])}
+        {generateCols(sideCols, height, undefined, randomize)}
+        {generateCols(1, height, ['white', '', '', '', '', '', ''])}
+        {!decorative &&
+          generateCols(1, height, ['white', 'white', '', '', '', '', ''])}
+        {!decorative &&
+          generateCols(1, height, [
+            'white',
+            'white',
+            'white',
+            '',
+            '',
+            '',
+            '',
+          ])}
       </div>
-    );
-  }
-}
+      {!decorative && (
+        <div className="title">
+          <h1>code the future.</h1>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Banner;
diff --git a/components/Carousel.js b/components/Carousel.js
@@ -1,29 +1,29 @@
 import Image from 'next/legacy/image';
-import React from 'react';
+import { useState, useEffect } from 'react';
 
 // width of each img in px
 // needs to be updated if style.scss changes
 const IMAGE_WIDTH = 360;
 const ITEMS_PER_SECTION = 4;
 
-export default class Carousel extends React.Component {
-  constructor(props) {
-    super(props);
+const Carousel = ({ images }) => {
+  const [sections, setSections] = useState([]);
+  const sectionWidth = (IMAGE_WIDTH * ITEMS_PER_SECTION) / 2;
 
-    const numItems = this.props.images.length;
-    const sections = [];
-    this.sectionWidth = (IMAGE_WIDTH * ITEMS_PER_SECTION) / 2;
+  useEffect(() => {
+    const numItems = images.length;
+    const sectionsData = [];
 
     for (let i = 0; i < numItems; i += ITEMS_PER_SECTION) {
-      sections.push({
-        left: (i / ITEMS_PER_SECTION) * this.sectionWidth,
-        width: this.sectionWidth,
-        items: this.props.images.slice(i, i + 4).map((item, i) => (
+      sectionsData.push({
+        left: (i / ITEMS_PER_SECTION) * sectionWidth,
+        width: sectionWidth,
+        items: images.slice(i, i + ITEMS_PER_SECTION).map((item, index) => (
           <a
             href={item}
             target="_blank"
             rel="noreferrer noopener"
-            key={i}
+            key={index}
             tabIndex="-1"
           >
             <Image src={item} width={IMAGE_WIDTH} height={IMAGE_WIDTH} alt="" />
@@ -32,49 +32,41 @@ export default class Carousel extends React.Component {
       });
     }
 
-    this.timer = null;
-    this.state = {
-      sections,
-    };
-  }
+    setSections(sectionsData);
 
-  componentDidMount() {
-    this.timer = setInterval(() => {
-      this.setState({
-        sections: this.state.sections.map((section) => {
+    const timer = setInterval(() => {
+      setSections((prevSections) => {
+        return prevSections.map((section) => {
           section.left -= 1;
-          if (section.left < -this.sectionWidth) {
+          if (section.left < -sectionWidth) {
             section.left =
-              (this.state.sections.length - 1) * this.sectionWidth - 1;
+              (prevSections.length - 1) * sectionWidth - 1;
           }
           return section;
-        }),
+        });
       });
     }, 30);
-  }
 
-  componentWillUnmount() {
-    clearInterval(this.timer);
-    this.timer = null;
-  }
+    return () => clearInterval(timer);
+  }, [images]);
 
-  render() {
-    return (
-      <div id="carousel">
-        <div id="carousel-inner">
-          {this.state.sections.map((section, i) => {
-            const carouselStyle = {
-              left: section.left + 'px',
-              width: section.width + 'px',
-            };
-            return (
-              <div className="carousel-sect" style={carouselStyle} key={i}>
-                {section.items}
-              </div>
-            );
-          })}
-        </div>
+  return (
+    <div id="carousel">
+      <div id="carousel-inner">
+        {sections.map((section, i) => {
+          const carouselStyle = {
+            left: section.left + 'px',
+            width: section.width + 'px',
+          };
+          return (
+            <div className="carousel-sect" style={carouselStyle} key={i}>
+              {section.items}
+            </div>
+          );
+        })}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+export default Carousel;
diff --git a/components/CommitteeSpread.js b/components/CommitteeSpread.js
@@ -1,6 +1,4 @@
 // import Image from 'next/image';
-import React from 'react';
-
 function Committee(props) {
   return (
     <a

diff --git a/components/Committees/ArchiveSidebar.js b/components/Committees/ArchiveSidebar.js
@@ -1,5 +1,5 @@
 // import Image from 'next/image';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 function SidebarLink(props) {
   return (

diff --git a/components/Committees/CommitteeEventCard.js b/components/Committees/CommitteeEventCard.js
@@ -1,5 +1,4 @@
 import Image from 'next/legacy/image';
-import React from 'react';
 
 function CommitteeEventCard(props) {
   const hasImage = props.image.src;

diff --git a/components/Committees/CommitteeSection.js b/components/Committees/CommitteeSection.js
@@ -1,5 +1,5 @@
 // import Image from 'next/image';
-import React from 'react';
+
 import CommitteeEventCard from './CommitteeEventCard';
 import Intro from './CommitteeSectionIntro';
 

diff --git a/components/Committees/CommitteeSectionIntro.js b/components/Committees/CommitteeSectionIntro.js
@@ -9,7 +9,6 @@ import {
 import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Image from 'next/legacy/image';
-import React from 'react';
 
 function CommitteeIconLink({ committee, link }) {
   const committeeStr = `acm ${committee.name}`;

diff --git a/components/Committees/Sidebar.js b/components/Committees/Sidebar.js
@@ -1,5 +1,5 @@
 // import Image from 'next/image';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 function SidebarLink(props) {
   return (