Skip to content

Commit 3540033

Browse files
seanprashadseanprashad
authored
Upgrade to react-scripts v5 (#366)
1 parent 7d4ed49 commit 3540033

File tree

18 files changed

+13867
-38384
lines changed

18 files changed

+13867
-38384
lines changed

‎.eslintrc.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
2-
extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
2+
extends: ['airbnb', 'plugin:prettier/recommended', 'prettier'],
33
env: {
44
browser: true,
55
commonjs: true,
@@ -10,13 +10,12 @@ module.exports = {
1010
rules: {
1111
'jsx-a11y/href-no-hash': ['off'],
1212
'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
13-
'react/destructuring-assignment': [
14-
'warn',
15-
'always',
16-
{
17-
ignoreClassFields: false,
18-
},
19-
],
13+
'react/destructuring-assignment': ['off'],
14+
'react/function-component-definition': ['off'],
15+
'react/no-unstable-nested-components': ['off'],
16+
'react/jsx-no-useless-fragment': ['off'],
17+
'react/require-default-props': ['off'],
18+
'prettier/prettier': ['off'],
2019
'max-len': [
2120
'warn',
2221
{

‎package-lock.json‎

Lines changed: 13225 additions & 37602 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,39 @@
44
"version": "0.1.0",
55
"private": true,
66
"dependencies": {
7-
"@testing-library/jest-dom": "^4.2.4",
8-
"@testing-library/react": "^9.3.2",
9-
"@testing-library/user-event": "^7.1.2",
10-
"bootstrap": "^4.5.3",
11-
"classnames": "^2.2.6",
12-
"enzyme": "^3.11.0",
13-
"enzyme-adapter-react-16": "^1.15.5",
14-
"gh-pages": "^5.0.0",
7+
"@testing-library/jest-dom": "^6.1.5",
8+
"@testing-library/react": "^14.1.2",
9+
"@testing-library/user-event": "^14.5.1",
10+
"bootstrap": "^5.3.2",
11+
"classnames": "^2.3.2",
12+
"gh-pages": "^6.1.0",
1513
"prop-types": "^15.8.1",
16-
"react": "^16.14.0",
17-
"react-dom": "^16.14.0",
14+
"react": "^18.2.0",
15+
"react-dom": "^18.2.0",
1816
"react-ga4": "^2.1.0",
19-
"react-icons": "^3.11.0",
20-
"react-markdown": "^4.3.1",
17+
"react-icons": "^4.12.0",
18+
"react-markdown": "^9.0.1",
2119
"react-minimal-pie-chart": "^8.4.0",
22-
"react-scripts": "^4.0.0",
23-
"react-scroll": "^1.8.0",
24-
"react-table": "^7.6.3",
25-
"react-test-renderer": "^16.14.0",
26-
"react-toggle": "^4.1.1",
27-
"react-tooltip": "^3.11.2",
28-
"reactstrap": "^8.8.1",
29-
"sass": "1.49.0"
20+
"react-scripts": "^5.0.1",
21+
"react-scroll": "^1.9.0",
22+
"react-table": "^7.8.0",
23+
"react-test-renderer": "^18.2.0",
24+
"react-toggle": "^4.1.3",
25+
"react-tooltip": "^5.25.0",
26+
"reactstrap": "^9.2.1",
27+
"sass": "^1.69.5"
3028
},
3129
"devDependencies": {
32-
"babel-eslint": "^10.0.3",
33-
"eslint": "^7.11.0",
34-
"eslint-config-airbnb": "^18.2.1",
35-
"eslint-config-prettier": "^6.15.0",
36-
"eslint-plugin-import": "^2.22.1",
37-
"eslint-plugin-jsx-a11y": "^6.4.1",
38-
"eslint-plugin-prettier": "^3.3.1",
39-
"eslint-plugin-react": "^7.22.0",
40-
"husky": "^3.1.0",
41-
"prettier": "^1.19.1",
42-
"pretty-quick": "^2.0.2"
30+
"eslint": "^8.55.0",
31+
"eslint-config-airbnb": "^19.0.4",
32+
"eslint-config-prettier": "^9.1.0",
33+
"eslint-plugin-import": "^2.29.1",
34+
"eslint-plugin-jsx-a11y": "^6.8.0",
35+
"eslint-plugin-prettier": "^4.2.1",
36+
"eslint-plugin-react": "^7.33.2",
37+
"husky": "^8.0.3",
38+
"prettier": "^2.8.8",
39+
"pretty-quick": "^3.3.1"
4340
},
4441
"scripts": {
4542
"predeploy": "npm run build",

‎src/components/Dark-Mode/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const DarkMode = () => {
88
});
99

1010
const toggleDarkMode = () => {
11-
setDarkMode(prevMode => {
11+
setDarkMode((prevMode) => {
1212
const newMode = !prevMode;
1313
localStorage.setItem('darkMode', newMode);
1414
return newMode;

‎src/components/Navigation/index.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import DarkMode from '../Dark-Mode';
1515

1616
const Navigation = () => {
1717
return (
18-
<Navbar className="navbar sticky">
18+
<Navbar className="navbar sticky" expand="lg">
1919
<Container>
2020
<NavbarBrand
2121
onClick={() =>
@@ -24,7 +24,7 @@ const Navigation = () => {
2424
>
2525
Leetcode Patterns
2626
</NavbarBrand>
27-
<Nav className="ml-auto" navbar>
27+
<Nav className="ms-auto d-flex flex-row align-items-center" navbar>
2828
<NavItem>
2929
<NavLink
3030
target="_blank"
@@ -34,8 +34,10 @@ const Navigation = () => {
3434
<FaGithub />
3535
</NavLink>
3636
</NavItem>
37+
<NavItem>
38+
<DarkMode />
39+
</NavItem>
3740
</Nav>
38-
<DarkMode />
3941
</Container>
4042
</Navbar>
4143
);

‎src/components/Navigation/styles.scss‎

Lines changed: 58 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,100 @@
1+
// ============================================
2+
// NAVBAR STRUCTURE
3+
// ============================================
4+
15
.navbar.sticky {
26
position: sticky;
37
top: 0;
4-
z-index: 1;
8+
z-index: 100;
9+
10+
.container {
11+
display: flex;
12+
flex-wrap: nowrap;
13+
align-items: center;
14+
justify-content: space-between;
15+
}
16+
17+
.nav {
18+
flex-direction: row !important;
19+
}
520
}
621

22+
// ============================================
23+
// THEME STYLES - Light & Dark Mode
24+
// ============================================
25+
726
body.light-mode .navbar {
827
background-color: #f7f8f9;
928
color: #000000;
10-
}
11-
body.light-mode .navbar a {
12-
color: #212529;
29+
30+
a {
31+
color: #212529;
32+
}
1333
}
1434

1535
body.dark-mode .navbar {
1636
background-color: #1d2125;
1737
color: #ffffff;
38+
39+
a {
40+
color: #ffffff;
41+
}
1842
}
19-
body.dark-mode .navbar a {
20-
color: #ffffff;
21-
}
22-
body.dark-mode .navbar-nav svg {
23-
color: #ffffff;
24-
}
25-
body.dark-mode .navbar-nav svg:hover {
26-
color: #ffc952;
43+
44+
body.dark-mode .navbar-nav {
45+
svg {
46+
color: #ffffff;
47+
48+
&:hover {
49+
color: #ffc952;
50+
}
51+
}
2752
}
2853

54+
// ============================================
55+
// NAVBAR BRAND
56+
// ============================================
57+
2958
.navbar-brand {
3059
font-weight: 600;
3160
letter-spacing: 1px;
3261
text-transform: uppercase;
62+
margin-right: 0;
63+
padding: 0;
3364
}
3465

66+
// ============================================
67+
// NAVBAR NAVIGATION
68+
// ============================================
69+
3570
.navbar-nav {
71+
gap: 10px;
72+
3673
.nav-item {
3774
letter-spacing: 1px;
38-
margin-left: 20px;
3975
text-align: center;
4076
text-transform: uppercase;
4177
cursor: pointer;
42-
}
78+
display: flex;
79+
align-items: center;
4380

44-
.nav-item:hover {
45-
color: #ffc952 !important;
81+
&:hover {
82+
color: #ffc952 !important;
83+
}
4684
}
4785

4886
a {
4987
color: #212529 !important;
5088
display: inline;
5189
font-size: 1rem;
52-
}
5390

54-
a:hover {
55-
color: #ffc952 !important;
91+
&:hover {
92+
color: #ffc952 !important;
93+
}
5694
}
5795

5896
svg {
5997
font-size: 2em;
60-
margin: 0px 10px;
98+
margin: 0;
6199
}
62100
}

‎src/components/PatternFrequencies/index.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ const PatternFrequencies = ({ filters, rows }) => {
1515
const sortedPatternsByFrequency = Object.keys(patternsMap).sort(
1616
(a, b) => patternsMap[b] - patternsMap[a],
1717
);
18-
const showComponent = filters.find(filter =>
18+
const showComponent = filters.find((filter) =>
1919
['companies', 'difficulty'].includes(filter.id),
2020
);
2121

22-
const getFrequencyClass = rate => {
22+
const getFrequencyClass = (rate) => {
2323
const highestFrequency = Math.round(
2424
patternsMap[sortedPatternsByFrequency[0]],
2525
);
@@ -34,7 +34,7 @@ const PatternFrequencies = ({ filters, rows }) => {
3434
hard: highestFrequency,
3535
};
3636

37-
return Object.keys(frequencyRate).find(key => rate <= frequencyRate[key]);
37+
return Object.keys(frequencyRate).find((key) => rate <= frequencyRate[key]);
3838
};
3939

4040
return showComponent ? (
@@ -46,9 +46,10 @@ const PatternFrequencies = ({ filters, rows }) => {
4646
key={pattern + index}
4747
className={`${getFrequencyClass(patternsMap[pattern])}`}
4848
pill
49+
color="secondary"
4950
>
5051
<span
51-
data-tip={`${patternsMap[pattern]} "${pattern}" related problems`}
52+
data-tooltip-content={`${patternsMap[pattern]} "${pattern}" related problems`}
5253
>
5354
{pattern} : {patternsMap[pattern]}
5455
</span>

‎src/components/PatternFrequencies/styles.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,42 @@
1+
// ============================================
2+
// PATTERN FREQUENCY COMPONENT
3+
// ============================================
4+
15
.pattern-count {
26
padding: 0.75em;
37

48
h5 {
59
font-weight: bold;
610
}
711

12+
// Base badge styles
813
.badge {
914
margin: 0.25em 0.25em;
15+
background-color: #6c757d !important;
16+
color: #ffffff !important;
17+
display: inline-block;
18+
width: auto;
19+
white-space: nowrap;
20+
}
21+
22+
.badge-secondary {
23+
background-color: #6c757d !important;
24+
color: #ffffff !important;
25+
}
26+
27+
// Difficulty-based badges
28+
.badge.easy {
29+
background-color: #5cb85c !important;
30+
color: #ffffff !important;
31+
}
32+
33+
.badge.medium {
34+
background-color: #f0ad4e !important;
35+
color: #ffffff !important;
36+
}
37+
38+
.badge.hard {
39+
background-color: #d9534f !important;
40+
color: #ffffff !important;
1041
}
1142
}

‎src/components/Table/filters.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ function CreateDropDownListHelper(options, filterValue, setFilter, id) {
44
return (
55
<select
66
value={filterValue}
7-
onChange={e => {
7+
onChange={(e) => {
88
localStorage.setItem(id, e.target.value);
99
setFilter(e.target.value || '');
1010
}}
@@ -29,7 +29,7 @@ export function DefaultColumnFilter({
2929
return (
3030
<input
3131
value={filterValue || ''}
32-
onChange={e => {
32+
onChange={(e) => {
3333
setFilter(e.target.value || '');
3434
}}
3535
placeholder={`Search ${count} questions`}
@@ -51,10 +51,10 @@ export function SelectColumnFilter({
5151
const options = React.useMemo(() => {
5252
const set = new Set();
5353

54-
preFilteredRows.forEach(row => {
54+
preFilteredRows.forEach((row) => {
5555
const values = String(row.values[id]).split(',');
5656

57-
values.forEach(value => {
57+
values.forEach((value) => {
5858
set.add(value);
5959
});
6060
});
@@ -69,7 +69,7 @@ export function SelectCheckedColumnFilter({
6969
column: { filterValue, setFilter, id, filterByCheckbox },
7070
}) {
7171
const options = ['Checked', 'Unchecked'];
72-
const filter = val => {
72+
const filter = (val) => {
7373
setFilter(val);
7474
filterByCheckbox();
7575
};

0 commit comments

Comments
 (0)