Migrate graph-related components from React classes to function components (#1634)

Modified components: FocusBar, FocusTab, GraphDropdown, GraphFallback, Infobox, and Sidebar

Author: Japleen-Kaur2409

CHANGELOG.md

@@ -47,6 +47,7 @@
 - Reverted previous CircleCI configuration change
 - Switched CircleCI ImageMagick download to use http
 - Modified CI config to take advantage of partial dependency caching and exploit parallelism when resolving/updating dependencies
+- Migrate graph-related components (FocusBar, FocusTab, GraphDropdown, GraphFallback, Infobox, and Sidebar) from classes to functions
 
 ## [0.7.1] - 2025-06-16
 

js/components/graph/FocusBar.js

@@ -16,59 +16,52 @@ const computerScienceFocusLabels = [
 ]
 
 /**
- * React component representing the focus menu bar
- */
-export default class FocusBar extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      open: false,
-    }
-  }
+* React component representing the focus menu bar
+*/
+export default function FocusBar({focusBarEnabled, highlightFocus, currFocus}) {
+  const [open, setOpen] = React.useState(false)
 
   /**
    * Changes whether the focus bar is open or not
    */
-  toggleFocusBar = () => {
-    this.setState({ open: !this.state.open })
+  const toggleFocusBar = () => {
+    setOpen(!open)
   }
 
   /**
    * Creates the menu items of the focus bar using the FocusTab component
    * @returns an array of FocusTab components
    */
-  generateFocusTabs = () => {
+  const generateFocusTabs = () => {
     return computerScienceFocusLabels.map(([focusId, focusTitle]) => {
-      const selected = this.props.currFocus === focusId
+      const selected = currFocus === focusId
 
       return (
         <FocusTab
           key={focusId}
           pId={focusId}
           focusName={focusTitle}
           selected={selected}
-          highlightFocus={this.props.highlightFocus}
+          highlightFocus={highlightFocus}
         />
       )
     })
   }
 
-  render() {
-    if (!this.props.focusBarEnabled) {
-      return null
-    } else {
-      return (
-        <div className="focus-menu-bar">
-          <button className="focus-menu-toggle" onClick={this.toggleFocusBar}>
-            {this.state.open ? "⪡ Close" : "Focuses ⪢"}
-          </button>
-          <div className="focuses-list">
-            {this.state.open && this.generateFocusTabs()}
-          </div>
-        </div>
-      )
-    }
+  if (!focusBarEnabled) {
+    return null
   }
+
+  return (
+    <div className="focus-menu-bar">
+      <button className="focus-menu-toggle" onClick={toggleFocusBar}>
+        {open ? "⪡ Close" : "Focuses ⪢"}
+      </button>
+      <div className="focuses-list">
+        {open && generateFocusTabs()}
+      </div>
+    </div>
+  )
 }
 
 FocusBar.propTypes = {

js/components/graph/FocusTab.js

@@ -5,51 +5,42 @@ import { FocusModal } from "../common/react_modal.js.jsx"
 /**
  * React component representing an item on the focus menu bar
  */
-export default class FocusTab extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      showFocusModal: false,
-    }
-  }
+export default function FocusTab({focusName, highlightFocus, selected, pId}) {
+  const [showFocusModal, setShowFocusModal] = React.useState(false)
 
   /**
    * Change whether the modal popup describing this focus is shown
    * @param {bool} value
    */
-  toggleFocusModal = value => {
-    this.setState({
-      showFocusModal: value,
-    })
-  }
+  const toggleFocusModal = (value => {
+    setShowFocusModal(value)
+  })
 
-  render() {
-    return (
-      <div className={this.props.selected ? "focus active-focus" : "focus"}>
-        <button
-          id={this.props.pId}
-          onClick={() => this.props.highlightFocus(this.props.pId)}
-        >
-          {this.props.focusName}
-        </button>
-        <div className="focus-info">
-          <FocusModal
-            showFocusModal={this.state.showFocusModal}
-            focusId={this.props.pId}
-            onClose={() => this.toggleFocusModal(false)}
-          />
-          {this.props.selected && (
-            <button
-              onClick={() => this.toggleFocusModal(true)}
-              aria-label="Focus Description"
-            >
-              i
-            </button>
-          )}
-        </div>
+  return (
+    <div className={selected ? "focus active-focus" : "focus"}>
+      <button
+        id={pId}
+        onClick={() => highlightFocus(pId)}
+      >
+        {focusName}
+      </button>
+      <div className="focus-info">
+        <FocusModal
+          showFocusModal={showFocusModal}
+          focusId={pId}
+          onClose={() => toggleFocusModal(false)}
+        />
+        {selected && (
+          <button
+            onClick={() => toggleFocusModal(true)}
+            aria-label="Focus Description"
+          >
+            i
+          </button>
+        )}
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 FocusTab.propTypes = {

js/components/graph/GraphDropdown.js

@@ -1,39 +1,37 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-export default class GraphDropdown extends React.Component {
-  render() {
+export default function GraphDropdown({showGraphDropdown, onMouseMove, onMouseLeave, graphs = [], updateGraph}) {
     let className = "hidden"
     let graphTabLeft = 0
-    if (this.props.graphs.length !== 0 && document.querySelector("#nav-graph")) {
+    if (graphs.length !== 0 && document.querySelector("#nav-graph")) {
       const navGraph = document.querySelector("#nav-graph")
-      if (this.props.graphs.length === 0) {
-        navGraph.classList.remove("show-dropdown-arrow")
-      } else {
-        if (!navGraph.classList.contains("show-dropdown-arrow")) {
-          navGraph.classList.add("show-dropdown-arrow")
-        }
-        if (this.props.showGraphDropdown) {
-          graphTabLeft = navGraph.getBoundingClientRect().left
-          className = "graph-dropdown-display"
-        }
+        if (graphs.length === 0) {
+          navGraph.classList.remove("show-dropdown-arrow")
+        } else {
+          if (!navGraph.classList.contains("show-dropdown-arrow")) {
+            navGraph.classList.add("show-dropdown-arrow")
+          }
+          if (showGraphDropdown) {
+            graphTabLeft = navGraph.getBoundingClientRect().left
+            className = "graph-dropdown-display"
+          }
       }
     }
-
     return (
       <ul
         className={className}
-        onMouseMove={this.props.onMouseMove}
-        onMouseLeave={this.props.onMouseLeave}
+        onMouseMove={onMouseMove}
+        onMouseLeave={onMouseLeave}
         data-testid={"test-graph-dropdown"}
         style={{ left: graphTabLeft }}
       >
-        {this.props.graphs.map((graph, i) => {
+        {graphs.map((graph, i) => {
           return (
             <li
               key={i}
               className="graph-dropdown-item"
-              onClick={() => this.props.updateGraph(graph.title)}
+              onClick={() => updateGraph(graph.title)}
               data-testid={"test-graph-" + i}
             >
               {graph.title}
@@ -43,7 +41,6 @@ export default class GraphDropdown extends React.Component {
       </ul>
     )
   }
-}
 
 GraphDropdown.defaultProps = {
   graphs: [],

js/components/graph/GraphFallback.js

@@ -1,28 +1,25 @@
-import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"
 import PropTypes from "prop-types"
 
-export default class GraphFallback extends React.Component {
-  render() {
-    const { error } = this.props
+export default function GraphFallback(props) {
+  const { error } = props
 
-    return (
-      <div className="error-boundary-container">
-        <div className="error-boundary-box">
-          <FontAwesomeIcon icon={faTriangleExclamation} className="error-svg" />
-          <div className="error-boundary-text">
-            Your graph has failed to render. Please reload this page or report this
-            issue to David Liu at {""}
-            <a className="graph-fallback-email" href="mailto:[email protected]">
-              [email protected]
-            </a>
-            <p className="graph-fallback-error">Details: {error.message}</p>
-          </div>
+  return (
+    <div className="error-boundary-container">
+      <div className="error-boundary-box">
+        <FontAwesomeIcon icon={faTriangleExclamation} className="error-svg" />
+        <div className="error-boundary-text">
+          Your graph has failed to render. Please reload this page or report this
+          issue to David Liu at {""}
+          <a className="graph-fallback-email" href="mailto:[email protected]">
+            [email protected]
+          </a>
+          <p className="graph-fallback-error">Details: {error.message}</p>
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 GraphFallback.propTypes = {

js/components/graph/InfoBox.js

@@ -1,49 +1,46 @@
-import React from "react"
 import PropTypes from "prop-types"
 
-export default class InfoBox extends React.Component {
-  render() {
-    // guard against rendering with no course
-    if (!this.props.nodeId) {
-      return null
-    }
-
-    const className = this.props.showInfoBox
-      ? "tooltip-group-display"
-      : "tooltip-group-hidden"
+export default function InfoBox({showInfoBox, nodeId, xPos, yPos, onClick, onMouseEnter, onMouseLeave}) {
+  // guard against rendering with no course
+  if (!nodeId) {
+    return null
+  }
 
-    const rectAttrs = {
-      id: this.props.nodeId + "-tooltip" + "-rect",
-      x: this.props.xPos,
-      y: this.props.yPos,
-      rx: "4",
-      ry: "4",
-      fill: "white",
-      stroke: "black",
-      strokeWidth: "2",
-      width: "60",
-      height: "30",
-    }
+  const className = showInfoBox
+    ? "tooltip-group-display"
+    : "tooltip-group-hidden"
 
-    const textAttrs = {
-      id: this.props.nodeId + "-tooltip" + "-text",
-      x: this.props.xPos + 60 / 2 - 18,
-      y: this.props.yPos + 30 / 2 + 6,
-    }
+  const rectAttrs = {
+    id: nodeId + "-tooltip" + "-rect",
+    x: xPos,
+    y: yPos,
+    rx: "4",
+    ry: "4",
+    fill: "white",
+    stroke: "black",
+    strokeWidth: "2",
+    width: "60",
+    height: "30",
+  }
 
-    return (
-      <g
-        id="infoBox"
-        className={className}
-        onClick={this.props.onClick}
-        onMouseEnter={this.props.onMouseEnter}
-        onMouseLeave={this.props.onMouseLeave}
-      >
-        <rect {...rectAttrs} />
-        <text {...textAttrs}>Info</text>
-      </g>
-    )
+  const textAttrs = {
+    id: nodeId + "-tooltip" + "-text",
+    x: xPos + 60 / 2 - 18,
+    y: yPos + 30 / 2 + 6,
   }
+
+  return (
+    <g
+      id="infoBox"
+      className={className}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <rect {...rectAttrs} />
+      <text {...textAttrs}>Info</text>
+    </g>
+  )
 }
 
 InfoBox.propTypes = {