Skip to content

Commit 6c14e90

Browse files
david-yz-liudavid-yz-liu
authored
Ran eslint and added lint-staged dev dependency (#1638)
1 parent 53c1cf3 commit 6c14e90

File tree

11 files changed

+362
-117
lines changed

11 files changed

+362
-117
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
- Switched CircleCI ImageMagick download to use http
5050
- Modified CI config to take advantage of partial dependency caching and exploit parallelism when resolving/updating dependencies
5151
- Migrate graph-related components (FocusBar, FocusTab, GraphDropdown, GraphFallback, Infobox, and Sidebar) from classes to functions
52+
- Added `lint-staged` development dependency and fixed eslint issues
5253

5354
## [0.7.1] - 2025-06-16
5455

‎eslint.config.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ module.exports = [
3030
"react/no-find-dom-node": "off",
3131
"react/no-render-return-value": "off",
3232
"react/no-string-refs": "off",
33+
"react/react-in-jsx-scope": "off",
3334
},
3435
settings: {
3536
react: {

‎js/components/common/__tests__/TimetableLoading.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ describe("Displays correct content based on timetable availability", () => {
3636
await screen.findByText("sample description")
3737
await screen.findByText("Beyonce")
3838
})
39-
39+
4040
// New test for winter session
4141
it("displays a timetable for winter session", async () => {
4242
const courseInfo = {

‎js/components/graph/FocusBar.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ const computerScienceFocusLabels = [
1616
]
1717

1818
/**
19-
* React component representing the focus menu bar
20-
*/
21-
export default function FocusBar({focusBarEnabled, highlightFocus, currFocus}) {
19+
* React component representing the focus menu bar
20+
*/
21+
export default function FocusBar({ focusBarEnabled, highlightFocus, currFocus }) {
2222
const [open, setOpen] = React.useState(false)
2323

2424
/**
@@ -57,9 +57,7 @@ export default function FocusBar({focusBarEnabled, highlightFocus, currFocus}) {
5757
<button className="focus-menu-toggle" onClick={toggleFocusBar}>
5858
{open ? "⪡ Close" : "Focuses ⪢"}
5959
</button>
60-
<div className="focuses-list">
61-
{open && generateFocusTabs()}
62-
</div>
60+
<div className="focuses-list">{open && generateFocusTabs()}</div>
6361
</div>
6462
)
6563
}

‎js/components/graph/FocusTab.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,20 @@ import { FocusModal } from "../common/react_modal.js.jsx"
55
/**
66
* React component representing an item on the focus menu bar
77
*/
8-
export default function FocusTab({focusName, highlightFocus, selected, pId}) {
8+
export default function FocusTab({ focusName, highlightFocus, selected, pId }) {
99
const [showFocusModal, setShowFocusModal] = React.useState(false)
1010

1111
/**
1212
* Change whether the modal popup describing this focus is shown
1313
* @param {bool} value
1414
*/
15-
const toggleFocusModal = (value => {
15+
const toggleFocusModal = value => {
1616
setShowFocusModal(value)
17-
})
17+
}
1818

1919
return (
2020
<div className={selected ? "focus active-focus" : "focus"}>
21-
<button
22-
id={pId}
23-
onClick={() => highlightFocus(pId)}
24-
>
21+
<button id={pId} onClick={() => highlightFocus(pId)}>
2522
{focusName}
2623
</button>
2724
<div className="focus-info">
@@ -31,10 +28,7 @@ export default function FocusTab({focusName, highlightFocus, selected, pId}) {
3128
onClose={() => toggleFocusModal(false)}
3229
/>
3330
{selected && (
34-
<button
35-
onClick={() => toggleFocusModal(true)}
36-
aria-label="Focus Description"
37-
>
31+
<button onClick={() => toggleFocusModal(true)} aria-label="Focus Description">
3832
i
3933
</button>
4034
)}

‎js/components/graph/GraphDropdown.js‎

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,52 @@
11
import React from "react"
22
import PropTypes from "prop-types"
33

4-
export default function GraphDropdown({showGraphDropdown, onMouseMove, onMouseLeave, graphs = [], updateGraph}) {
5-
let className = "hidden"
6-
let graphTabLeft = 0
7-
if (graphs.length !== 0 && document.querySelector("#nav-graph")) {
8-
const navGraph = document.querySelector("#nav-graph")
9-
if (graphs.length === 0) {
10-
navGraph.classList.remove("show-dropdown-arrow")
11-
} else {
12-
if (!navGraph.classList.contains("show-dropdown-arrow")) {
13-
navGraph.classList.add("show-dropdown-arrow")
14-
}
15-
if (showGraphDropdown) {
16-
graphTabLeft = navGraph.getBoundingClientRect().left
17-
className = "graph-dropdown-display"
18-
}
4+
export default function GraphDropdown({
5+
showGraphDropdown,
6+
onMouseMove,
7+
onMouseLeave,
8+
graphs = [],
9+
updateGraph,
10+
}) {
11+
let className = "hidden"
12+
let graphTabLeft = 0
13+
if (graphs.length !== 0 && document.querySelector("#nav-graph")) {
14+
const navGraph = document.querySelector("#nav-graph")
15+
if (graphs.length === 0) {
16+
navGraph.classList.remove("show-dropdown-arrow")
17+
} else {
18+
if (!navGraph.classList.contains("show-dropdown-arrow")) {
19+
navGraph.classList.add("show-dropdown-arrow")
20+
}
21+
if (showGraphDropdown) {
22+
graphTabLeft = navGraph.getBoundingClientRect().left
23+
className = "graph-dropdown-display"
1924
}
2025
}
21-
return (
22-
<ul
23-
className={className}
24-
onMouseMove={onMouseMove}
25-
onMouseLeave={onMouseLeave}
26-
data-testid={"test-graph-dropdown"}
27-
style={{ left: graphTabLeft }}
28-
>
29-
{graphs.map((graph, i) => {
30-
return (
31-
<li
32-
key={i}
33-
className="graph-dropdown-item"
34-
onClick={() => updateGraph(graph.title)}
35-
data-testid={"test-graph-" + i}
36-
>
37-
{graph.title}
38-
</li>
39-
)
40-
})}
41-
</ul>
42-
)
4326
}
27+
return (
28+
<ul
29+
className={className}
30+
onMouseMove={onMouseMove}
31+
onMouseLeave={onMouseLeave}
32+
data-testid={"test-graph-dropdown"}
33+
style={{ left: graphTabLeft }}
34+
>
35+
{graphs.map((graph, i) => {
36+
return (
37+
<li
38+
key={i}
39+
className="graph-dropdown-item"
40+
onClick={() => updateGraph(graph.title)}
41+
data-testid={"test-graph-" + i}
42+
>
43+
{graph.title}
44+
</li>
45+
)
46+
})}
47+
</ul>
48+
)
49+
}
4450

4551
GraphDropdown.defaultProps = {
4652
graphs: [],

‎js/components/graph/GraphFallback.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ export default function GraphFallback(props) {
1010
<div className="error-boundary-box">
1111
<FontAwesomeIcon icon={faTriangleExclamation} className="error-svg" />
1212
<div className="error-boundary-text">
13-
Your graph has failed to render. Please reload this page or report this
14-
issue to David Liu at {""}
13+
Your graph has failed to render. Please reload this page or report this issue
14+
to David Liu at {""}
1515
<a className="graph-fallback-email" href="mailto:[email protected]">
1616
[email protected]
1717
</a>

‎js/components/graph/InfoBox.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import PropTypes from "prop-types"
22

3-
export default function InfoBox({showInfoBox, nodeId, xPos, yPos, onClick, onMouseEnter, onMouseLeave}) {
3+
export default function InfoBox({
4+
showInfoBox,
5+
nodeId,
6+
xPos,
7+
yPos,
8+
onClick,
9+
onMouseEnter,
10+
onMouseLeave,
11+
}) {
412
// guard against rendering with no course
513
if (!nodeId) {
614
return null
715
}
816

9-
const className = showInfoBox
10-
? "tooltip-group-display"
11-
: "tooltip-group-hidden"
17+
const className = showInfoBox ? "tooltip-group-display" : "tooltip-group-hidden"
1218

1319
const rectAttrs = {
1420
id: nodeId + "-tooltip" + "-rect",

‎js/components/graph/Sidebar.js‎

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,25 @@ import React from "react"
22
import PropTypes from "prop-types"
33
import Button from "./Button"
44

5-
export default function Sidebar({fceCount, reset, activeCourses, courses, courseClick, xClick, sidebarItemClick, onHover, onMouseLeave}) {
5+
export default function Sidebar({
6+
fceCount,
7+
reset,
8+
activeCourses,
9+
courses,
10+
courseClick,
11+
xClick,
12+
sidebarItemClick,
13+
onHover,
14+
onMouseLeave,
15+
}) {
616
const [collapsed, setCollapsed] = React.useState(true)
717
const [results, setResults] = React.useState([])
818

919
const toggleSidebar = () => {
1020
setCollapsed(!collapsed)
1121
}
1222

13-
const filteredSearch = (query) => {
23+
const filteredSearch = query => {
1424
if (!query || !courses) {
1525
return
1626
}
@@ -33,7 +43,7 @@ export default function Sidebar({fceCount, reset, activeCourses, courses, course
3343
* "CSC999" will resolve to `null`
3444
* @return {string} course node id
3545
*/
36-
const courseIdFromLabel = (courseLabel) => {
46+
const courseIdFromLabel = courseLabel => {
3747
for (let i = 0; i < courses.length; i++) {
3848
if (courses[i][1] === courseLabel) {
3949
return courses[i][0]
@@ -48,9 +58,7 @@ export default function Sidebar({fceCount, reset, activeCourses, courses, course
4858
* @return {HTMLDivElement} FCE to the DOM
4959
*/
5060
const renderFCE = () => {
51-
const fceString = Number.isInteger(fceCount)
52-
? fceCount + ".0"
53-
: fceCount
61+
const fceString = Number.isInteger(fceCount) ? fceCount + ".0" : fceCount
5462

5563
return (
5664
<div className="fcecount" data-testid="test-fcecount">
@@ -110,64 +118,61 @@ export default function Sidebar({fceCount, reset, activeCourses, courses, course
110118
onMouseLeave={onMouseLeave}
111119
>
112120
{course}
113-
<Button
114-
text="X"
115-
mouseDown={() => xClick(courseIdFromLabel(course))}
116-
/>
121+
<Button text="X" mouseDown={() => xClick(courseIdFromLabel(course))} />
117122
</div>
118123
)
119124
})}
120125
</div>
121126
)
122127
}
123128

124-
const collapsedClass = collapsed ? "collapsed" : "expanded"
125-
const masterSidebarClass = `${collapsedClass} sidebar`
129+
const collapsedClass = collapsed ? "collapsed" : "expanded"
130+
const masterSidebarClass = `${collapsedClass} sidebar`
126131

127-
return (
128-
<div
129-
className={masterSidebarClass}
130-
data-testid="test-toggle"
131-
onWheel={e => e.stopPropagation()}
132-
>
133-
{renderFCE()}
134-
<div className="sidebar-dropdown" data-testid="test-sidebar">
135-
<div>
136-
<label htmlFor="header-search">
137-
{/* For text to speech purposes */}
138-
<span className="label-hidden">Search courses</span>
139-
</label>
140-
<input
141-
id="header-search"
142-
className="search-bar"
143-
data-testid="test-search-bar"
144-
type="text"
145-
onChange={e => {
146-
setResults(filteredSearch(e.target.value))
147-
}}
148-
/>
149-
</div>
150-
{renderDropdown()}
151-
<h3 className="selected-courses">Selected courses</h3>
152-
{renderActiveCourses()}
153-
<button
154-
className="reset-selections"
155-
data-testid="test-reset"
156-
onClick={() => reset()}
157-
>
158-
Reset Selections
159-
</button>
132+
return (
133+
<div
134+
className={masterSidebarClass}
135+
data-testid="test-toggle"
136+
onWheel={e => e.stopPropagation()}
137+
>
138+
{renderFCE()}
139+
<div className="sidebar-dropdown" data-testid="test-sidebar">
140+
<div>
141+
<label htmlFor="header-search">
142+
{/* For text to speech purposes */}
143+
<span className="label-hidden">Search courses</span>
144+
</label>
145+
<input
146+
id="header-search"
147+
className="search-bar"
148+
data-testid="test-search-bar"
149+
type="text"
150+
onChange={e => {
151+
setResults(filteredSearch(e.target.value))
152+
}}
153+
/>
160154
</div>
161-
<div
162-
className="sidebar-button"
163-
onClick={() => toggleSidebar()}
164-
data-testid="test-sidebar-button"
155+
{renderDropdown()}
156+
<h3 className="selected-courses">Selected courses</h3>
157+
{renderActiveCourses()}
158+
<button
159+
className="reset-selections"
160+
data-testid="test-reset"
161+
onClick={() => reset()}
165162
>
166-
<img id="sidebar-icon" src="/static/res/ico/sidebar.png" />
167-
</div>
163+
Reset Selections
164+
</button>
168165
</div>
169-
)
170-
}
166+
<div
167+
className="sidebar-button"
168+
onClick={() => toggleSidebar()}
169+
data-testid="test-sidebar-button"
170+
>
171+
<img id="sidebar-icon" src="/static/res/ico/sidebar.png" />
172+
</div>
173+
</div>
174+
)
175+
}
171176

172177
Sidebar.propTypes = {
173178
fceCount: PropTypes.number,

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"husky": "^9.1.7",
7373
"jest": "^30.2.0",
7474
"jest-environment-jsdom": "^30.2.0",
75+
"lint-staged": "^16.2.7",
7576
"markdown-loader": "^8.0.0",
7677
"mini-css-extract-plugin": "^2.9.2",
7778
"node-fetch": "^3.3.2",

0 commit comments

Comments
 (0)