Skip to content

Commit 1efcfca

Browse files
cnohallcnohall
committed
Refactor components to functional components written in typescript
1 parent f6cfd60 commit 1efcfca

12 files changed

+13757
-99
lines changed

‎frontend/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
"@testing-library/jest-dom": "^5.11.4",
88
"@testing-library/react": "^11.1.0",
99
"@testing-library/user-event": "^12.1.10",
10+
"@types/react": "^18.0.21",
11+
"@types/react-router-dom": "^5.3.3",
1012
"multiselect-react-dropdown": "^2.0.7",
1113
"plotly.js": "^2.5.1",
1214
"react": "^17.0.2",
@@ -19,6 +21,7 @@
1921
"react-tabs": "^4.0.1",
2022
"source-map-explorer": "^2.5.2",
2123
"styled-components": "^5.3.5",
24+
"typescript": "^4.8.4",
2225
"web-vitals": "^1.0.1"
2326
},
2427
"scripts": {

‎frontend/src/App.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { render, screen } from '@testing-library/react';
2-
import App from './App';
2+
import App from './App.tsx';
33

44
test('renders learn react link', () => {
55
render(<App />);

‎frontend/src/App.js ‎frontend/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
1111
const App = () => (
1212
<BrowserRouter>
1313
<Menu/>
14-
<div class="layout">
14+
<div className="layout">
1515
<Switch>
1616
<Route
1717
render={() => { return <Redirect to="/home"/>; }}

‎frontend/src/components/about.js

-76
This file was deleted.

‎frontend/src/components/about.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
3+
const About = () => (
4+
<div>
5+
<h1 className='page-title'>About</h1>
6+
<div className='text-div'>
7+
<p>
8+
Follow me (<b>Dj0wns</b>) on <a href="https://twitter.com/Dj0wns">Twitter</a> to keep up to date with new AoEPulse updates and features or reach out with any questions or bug reports!
9+
</p>
10+
<h2>Tools and Technologies</h2>
11+
<ul>
12+
<li>
13+
This website is entirely open source! The source code is on GitHub at: <a href="https://github.com/dj0wns/AoE_Openings">https://github.com/dj0wns/AoE_Openings</a>
14+
</li>
15+
<li>
16+
Match histories are pulled from the <a href="https://aoe2.net/">aoe2.net</a> API.
17+
</li>
18+
<li>
19+
Replay files for each of those matches are then pulled from the <a href="https://aoe.ms/">aoe.ms</a> API.
20+
</li>
21+
<li>
22+
The replays are then parsed with the <a href="https://github.com/happyleavesaoc/aoc-mgz">aoc-mgz</a> python library.
23+
</li>
24+
</ul>
25+
<h2>Acknowledgements</h2>
26+
<ul>
27+
<li>
28+
Special thanks to <b>treadmill</b> (<a href="https://www.twitch.tv/tredmil">Twitch</a>) for being with the project since its inception and contributing many hours of testing, idea and project direction discussions.
29+
</li>
30+
<li>
31+
Thanks to <b>Waverly</b> (<a href="https://twitter.com/RogueWaverly">Twitter</a>) for letting me work on this while we were wedding planning, helping with database design, Django API debugging and design, and also coming up with the name!
32+
</li>
33+
<li>
34+
Thanks to <b>zigge</b> for providing high level player insights.
35+
</li>
36+
</ul>
37+
<h2>People you should check out!</h2>
38+
<ul>
39+
<li>
40+
<b>ilovebaskets</b> <a href="https://www.twitch.tv/ilovebaskets">https://www.twitch.tv/ilovebaskets</a>
41+
<ul>
42+
<li>
43+
Awesome high level 1v1's with a mix of occasional nomad tgs!
44+
</li>
45+
</ul>
46+
</li>
47+
<li>
48+
<b>mangomel_</b> <a href="https://www.twitch.tv/mangomel_">https://www.twitch.tv/mangomel_</a>
49+
<ul>
50+
<li>
51+
Chill 1v1 stream with a fun positive atmosphere!
52+
</li>
53+
</ul>
54+
</li>
55+
<li>
56+
<b>Vaurion</b> <a href="https://www.twitch.tv/vaurion">https://www.twitch.tv/vaurion</a>
57+
<ul>
58+
<li>
59+
1v1 streams with just the right amount of tilt!
60+
</li>
61+
</ul>
62+
</li>
63+
</ul>
64+
<p className='copyright-text'>
65+
Age of Empires II DE © Microsoft Corporation. AoEPulse.com was created under Microsoft's <a href="https://www.xbox.com/en-GB/developers/rules">"Game Content Usage Rules"</a> using assets from Age of Empires II DE, and it is not endorsed by or affiliated with Microsoft.
66+
</p>
67+
</div>
68+
</div>
69+
);
70+
71+
export default About;

‎frontend/src/components/home.js ‎frontend/src/components/home.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ import MetaSnapshotChart from './metaSnapshotChart.js';
44

55
const Home = () => (
66
<div>
7-
<h1 class='page-title'>Welcome to AoE Pulse!</h1>
7+
<h1 className='page-title'>Welcome to AoE Pulse!</h1>
88
<MetaSnapshotChart/>
9-
<div class='text-div'>
9+
<div className='text-div'>
1010
<p>
1111
AoEPulse is an Age of Empires 2 statistics website which parses and stores millions of replays to give never before seen insights on the effectiveness of the different core openings. The data is updated twice daily at 3:00 and 15:00 GMT. This site is primarily focused on 1v1 Arabia (due to it being the only map and mode with enough games to draw meaningful conclusions) but also provides any stats collected for all other maps and Empire Wars where possible. Openings may not be as accurate on these other maps or modes (specifically the different timings of Empire Wars and the uniqueness of nomad don't agree with the heuristics.) I hope these statistics help provide the insights you need to take your game to the next level!
1212
</p>
1313
</div>
14-
<div class='text-div'>
14+
<div className='text-div'>
1515
<h2>Update (September 20, 2022)</h2>
1616
<p>
1717
Created a dump of the entire database with over 5 million matches for anyone who wants to play with the backbone of AoEPulse themselves. See this reddit post for more information. <a href="https://www.reddit.com/r/aoe2/comments/xj815r">https://www.reddit.com/r/aoe2/comments/xj815r</a>
1818
</p>
1919
<h2>Update (May 26, 2022)</h2>
2020
<p>
21-
We began reaching storage capacity limits (>22gb postgres database) 90%+ all used by the average tech timings tab. This seems to be a mostly useless and unused tab so it was removed. This allows us to store match data for longer and also reduces the cost to keep the website online substantially! I want to someday do something more with that data but what was implemented just wasn't a good use.
21+
We began reaching storage capacity limits ({'>'}22gb postgres database) 90%+ all used by the average tech timings tab. This seems to be a mostly useless and unused tab so it was removed. This allows us to store match data for longer and also reduces the cost to keep the website online substantially! I want to someday do something more with that data but what was implemented just wasn't a good use.
2222
</p>
2323
<h2>Update (May 6, 2022)</h2>
2424
<p>
@@ -34,14 +34,14 @@ const Home = () => (
3434
</p>
3535
<h2>Update (Nov 26, 2021)</h2>
3636
<p>
37-
Big rewrite of the database to improve scaling and responsiveness with up to 200x speedups for some of the biggest queries! I never expected to have >1M replays analyzed when I started this project. Next big project is adding an endpoint and infrastructure to automatically update the website as I download and parse new replays.
37+
Big rewrite of the database to improve scaling and responsiveness with up to 200x speedups for some of the biggest queries! I never expected to have {'>'}1M replays analyzed when I started this project. Next big project is adding an endpoint and infrastructure to automatically update the website as I download and parse new replays.
3838
</p>
3939
<h2>Alpha release (Oct 5, 2021)</h2>
4040
<p>
4141
Initial release with 1 patch worth of data and 400k replays! Some queries take forever but the site all works at least.
4242
</p>
4343
</div>
4444
</div>
45-
)
45+
);
4646

4747
export default Home;

‎frontend/src/components/menu.js ‎frontend/src/components/menu.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Menu = () => {
1818
</Nav>
1919
<Nav className='ml-auto'>
2020
<Navbar.Brand href='https://ko-fi.com/M4M7BG61H'>
21-
<img height='36' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' />
21+
<img height='36' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3' alt='Buy Me a Coffee at ko-fi.com' />
2222
</Navbar.Brand>
2323
<Nav>
2424
<Nav.Link href={"/about"}>About</Nav.Link>
@@ -28,6 +28,6 @@ const Menu = () => {
2828
</Navbar>
2929
</div>
3030
);
31-
}
31+
};
3232

3333
export default Menu;

‎frontend/src/components/metaSnapshotChart.js

+11-12
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class MetaSnapshotChart extends React.Component {
1313
for (let opening of data.meta_list) {
1414
let opening_dict = { x:[], y:[], stackgroup: 'one', groupnorm:'percent'}
1515
for (let [key, value] of Object.entries(opening)) {
16-
if (key == "name") {
16+
if (key === "name") {
1717
opening_dict['name'] = value;
1818
} else {
1919
opening_dict.x.push(key)
@@ -32,19 +32,18 @@ class MetaSnapshotChart extends React.Component {
3232
return (
3333
<Plot
3434
data={this.state.graph_data.meta_list}
35-
layout={{title: 'Playrate of each Opening by Elo for Patch ' + this.state.graph_data.patch + ' on Arabia', responsive: true,
36-
xaxis: { title:"1v1 Elo"},
37-
yaxis: { title:"Percentage"},
38-
}}
35+
layout={{
36+
title: 'Playrate of each Opening by Elo for Patch ' + this.state.graph_data.patch + ' on Arabia', responsive: true,
37+
xaxis: { title:"1v1 Elo"},
38+
yaxis: { title:"Percentage"},
39+
}}
3940
useResizeHandler= {true}
4041
style={{width:'%100', height: '%100'}}
4142
/>
4243
);
43-
} else {
44-
return ( <div/>);
44+
};
45+
return null;
46+
};
47+
};
4548

46-
}
47-
}
48-
}
49-
50-
export default MetaSnapshotChart
49+
export default MetaSnapshotChart;

‎frontend/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import './index.css';
4-
import App from './App';
4+
import App from './App.tsx';
55
import reportWebVitals from './reportWebVitals';
66
import './App.css';
77

‎frontend/src/react-app-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="react-scripts" />

‎frontend/tsconfig.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"esnext"
8+
],
9+
"allowJs": true,
10+
"skipLibCheck": true,
11+
"esModuleInterop": true,
12+
"allowSyntheticDefaultImports": true,
13+
"strict": true,
14+
"forceConsistentCasingInFileNames": true,
15+
"noFallthroughCasesInSwitch": true,
16+
"module": "esnext",
17+
"moduleResolution": "node",
18+
"resolveJsonModule": true,
19+
"isolatedModules": true,
20+
"noEmit": true,
21+
"jsx": "react-jsx"
22+
},
23+
"include": [
24+
"src"
25+
]
26+
}

0 commit comments

Comments
 (0)