Skip to content

Commit cfeeffd

Browse files
RichDom2185RichDom2185
authored
Refactor/Cleanup Frontend (Part 2) (#2724)
* Remove unnecessary type annotations Since we already explicitly type the containing object, redeclaring the function parameter types would only lead to worse code readability. * Remove unused styles These styles seem to have been duplicated to `_achievementdashboard.scss` and not used anywhere. * Move some academy styles to use CSS modules * Move AchievementCommentCard styles to CSS modules * Remove CSS selector nesting Prevents unnecessary selector specificity. Since we now use CSS modules, there is no risk of style conflicts. * Move Contributors to use CSS modules * Fix regressions due to `Academy` CSS module * Move some navigation bar styles to CSS modules * Fix format * Move GitHub assessment styles to CSS modules Also deleted some unused styles. Further refactoring awaits to properly separate out and group the relevant styles to relevant files. * Standardise CSS module filenames to use PascalCase * Update test snapshots
1 parent 853c818 commit cfeeffd

26 files changed

+330
-428
lines changed

‎src/commons/achievement/AchievementCommentCard.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useMemo } from 'react';
22
import { useNavigate } from 'react-router';
3+
import classes from 'src/styles/AchievementCommentCard.module.scss';
34

45
import { Assessment } from '../assessment/AssessmentTypes';
56
import { useTypedSelector } from '../utils/Hooks';
@@ -28,22 +29,25 @@ const AchievementCommentCard: React.FC<{
2829

2930
return (
3031
<div>
31-
<h1 className="assessment-feedback">Feedback</h1>
32-
<div className="feedback-list">
32+
<h1 className={classes['assessment-feedback']}>Feedback</h1>
33+
<div className={classes['feedback-list']}>
3334
{assessment &&
3435
assessment.questions.map((question, index) => (
35-
<div className="assessment-comments" key={index}>
36+
<div className={classes['assessment-comments']} key={index}>
3637
<span>
37-
<h2 className="question-header">{'Q' + (index + 1)}</h2>
38+
<h2 className={classes['question-header']}>{'Q' + (index + 1)}</h2>
3839
</span>
3940

40-
<div className="box-comment">
41+
<div className={classes['box-comment']}>
4142
<p>{question.comments === null ? 'No Comments' : question.comments}</p>
4243
<p className="xp">{'XP: ' + question.xp + '/' + question.maxXp}</p>
4344
</div>
4445

4546
{showToQuestion && (
46-
<button className="to-assessment-button" onClick={() => toMission(index)}>
47+
<button
48+
className={classes['to-assessment-button']}
49+
onClick={() => toMission(index)}
50+
>
4751
{'To Question'}
4852
</button>
4953
)}

‎src/commons/githubAssessments/GitHubMissionCreateDialog.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { AnchorButton, Button, Classes, Dialog, InputGroup, Intent } from '@blueprintjs/core';
22
import classNames from 'classnames';
33
import React, { useState } from 'react';
4+
import classes from 'src/styles/GithubAssessments.module.scss';
45

56
import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
67

@@ -19,7 +20,7 @@ export const GitHubMissionCreateDialog: React.FC<GitHubMissionCreateDialogProps>
1920
const [repositoryName, setrepositoryName] = useState('sa-new-mission-repository');
2021

2122
return (
22-
<Dialog className="missionBrowser" isOpen={true}>
23+
<Dialog className={classes['missionBrowser']} isOpen={true}>
2324
<div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
2425
<h3>Please confirm your save</h3>
2526
</div>

‎src/commons/githubAssessments/GitHubMissionSaveDialog.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { AnchorButton, Button, Classes, Dialog, InputGroup, Intent } from '@blueprintjs/core';
22
import classNames from 'classnames';
33
import React, { useState } from 'react';
4+
import classes from 'src/styles/GithubAssessments.module.scss';
45

56
export type GitHubMissionSaveDialogResolution = {
67
confirmSave: boolean;
@@ -23,7 +24,7 @@ export const GitHubMissionSaveDialog: React.FC<GitHubMissionSaveDialogProps> = p
2324
const [commitMessage, setCommitMessage] = useState('');
2425

2526
return (
26-
<Dialog className="missionBrowser" isOpen={true}>
27+
<Dialog className={classes['missionBrowser']} isOpen={true}>
2728
<div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
2829
<h3>Please confirm your save</h3>
2930
</div>

‎src/commons/navigationBar/NavigationBar.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import classNames from 'classnames';
1818
import { Location } from 'history';
1919
import { useCallback, useMemo, useState } from 'react';
2020
import { NavLink, Route, Routes, useLocation } from 'react-router-dom';
21+
import classes from 'src/styles/NavigationBar.module.scss';
2122

2223
import Dropdown from '../dropdown/Dropdown';
2324
import NotificationBadge from '../notificationBadge/NotificationBadge';
@@ -304,7 +305,14 @@ const NavigationBar: React.FC = () => {
304305

305306
return (
306307
<>
307-
<Navbar className={classNames('NavigationBar', 'primary-navbar', Classes.DARK)}>
308+
<Navbar
309+
className={classNames(
310+
'NavigationBar',
311+
'primary-navbar',
312+
classes['primary-navbar'],
313+
Classes.DARK
314+
)}
315+
>
308316
{Constants.playgroundOnly
309317
? isMobileBreakpoint
310318
? renderPlaygroundOnlyNavbarLeftMobile()
@@ -376,7 +384,7 @@ export const renderNavlinksFromInfo = (
376384
export const createDesktopNavlink: CreateNavlinkFunction = navbarEntry => (
377385
<NavLink
378386
className={({ isActive }) =>
379-
classNames('NavigationBar__link', Classes.BUTTON, Classes.MINIMAL, {
387+
classNames(Classes.BUTTON, Classes.MINIMAL, {
380388
[Classes.ACTIVE]: isActive
381389
})
382390
}
@@ -385,12 +393,7 @@ export const createDesktopNavlink: CreateNavlinkFunction = navbarEntry => (
385393
title={navbarEntry.text}
386394
>
387395
<Icon icon={navbarEntry.icon} />
388-
<div
389-
className={classNames(
390-
'navbar-button-text',
391-
navbarEntry.hiddenInBreakpoints?.map(bp => `hidden-${bp}`)
392-
)}
393-
>
396+
<div className={classNames(navbarEntry.hiddenInBreakpoints?.map(bp => `hidden-${bp}`))}>
394397
{navbarEntry.text}
395398
</div>
396399
{navbarEntry.hasNotifications && (

‎src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
44
<React.Fragment>
55
<Blueprint4.Navbar
6-
className="NavigationBar primary-navbar bp4-dark"
6+
className="NavigationBar primary-navbar primary-navbar bp4-dark"
77
>
88
<Blueprint4.NavbarGroup
99
align="left"
@@ -64,7 +64,7 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
6464
icon="briefcase"
6565
/>
6666
<div
67-
className="navbar-button-text"
67+
className=""
6868
>
6969
Classroom
7070
</div>
@@ -134,7 +134,7 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
134134
exports[`NavigationBar Renders correctly for student with course 1`] = `
135135
<React.Fragment>
136136
<Blueprint4.Navbar
137-
className="NavigationBar primary-navbar bp4-dark"
137+
className="NavigationBar primary-navbar primary-navbar bp4-dark"
138138
>
139139
<Blueprint4.NavbarGroup
140140
align="left"
@@ -156,7 +156,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
156156
icon="flame"
157157
/>
158158
<div
159-
className="navbar-button-text hidden-xs hidden-sm"
159+
className="hidden-xs hidden-sm"
160160
>
161161
Missions
162162
</div>
@@ -174,7 +174,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
174174
icon="lightbulb"
175175
/>
176176
<div
177-
className="navbar-button-text hidden-xs hidden-sm"
177+
className="hidden-xs hidden-sm"
178178
>
179179
Quests
180180
</div>
@@ -192,7 +192,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
192192
icon="predictive-analysis"
193193
/>
194194
<div
195-
className="navbar-button-text hidden-xs hidden-sm"
195+
className="hidden-xs hidden-sm"
196196
>
197197
Paths
198198
</div>
@@ -210,7 +210,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
210210
icon="comparison"
211211
/>
212212
<div
213-
className="navbar-button-text hidden-xs hidden-sm"
213+
className="hidden-xs hidden-sm"
214214
>
215215
Contests
216216
</div>
@@ -228,7 +228,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
228228
icon="manual"
229229
/>
230230
<div
231-
className="navbar-button-text hidden-xs hidden-sm"
231+
className="hidden-xs hidden-sm"
232232
>
233233
Missions
234234
</div>
@@ -286,7 +286,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
286286
icon="music"
287287
/>
288288
<div
289-
className="navbar-button-text"
289+
className=""
290290
>
291291
Sourcecast
292292
</div>
@@ -300,7 +300,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
300300
icon="code"
301301
/>
302302
<div
303-
className="navbar-button-text"
303+
className=""
304304
>
305305
Playground
306306
</div>
@@ -314,7 +314,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
314314
icon="briefcase"
315315
/>
316316
<div
317-
className="navbar-button-text"
317+
className=""
318318
>
319319
Classroom
320320
</div>
@@ -328,7 +328,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
328328
icon="book"
329329
/>
330330
<div
331-
className="navbar-button-text"
331+
className=""
332332
>
333333
SICP JS
334334
</div>
@@ -342,7 +342,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
342342
icon="mountain"
343343
/>
344344
<div
345-
className="navbar-button-text"
345+
className=""
346346
>
347347
Achievements
348348
</div>
@@ -356,7 +356,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
356356
icon="git-repo"
357357
/>
358358
<div
359-
className="navbar-button-text"
359+
className=""
360360
>
361361
Stories
362362
</div>
@@ -438,7 +438,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
438438
exports[`NavigationBar Renders correctly for student without course 1`] = `
439439
<React.Fragment>
440440
<Blueprint4.Navbar
441-
className="NavigationBar primary-navbar bp4-dark"
441+
className="NavigationBar primary-navbar primary-navbar bp4-dark"
442442
>
443443
<Blueprint4.NavbarGroup
444444
align="left"
@@ -499,7 +499,7 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
499499
icon="briefcase"
500500
/>
501501
<div
502-
className="navbar-button-text"
502+
className=""
503503
>
504504
Classroom
505505
</div>
@@ -513,7 +513,7 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
513513
icon="book"
514514
/>
515515
<div
516-
className="navbar-button-text"
516+
className=""
517517
>
518518
SICP JS
519519
</div>
@@ -527,7 +527,7 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
527527
icon="git-repo"
528528
/>
529529
<div
530-
className="navbar-button-text"
530+
className=""
531531
>
532532
Stories
533533
</div>

0 commit comments

Comments
 (0)