Skip to content

Commit 6b54825

Browse files
dragoni7dragoni7
committed
Migrate to Typescript
1 parent d73005b commit 6b54825

16 files changed

+151
-63
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99
<body>
1010
<div id="root"></div>
11-
<script type="module" src="/src/main.jsx"></script>
11+
<script type="module" src="/src/main.tsx"></script>
1212
</body>
1313
</html>

‎package-lock.json

+39-15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
8-
"build": "vite build",
8+
"build": "tsc && vite build",
99
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
1010
"preview": "vite preview"
1111
},
@@ -19,16 +19,18 @@
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0",
2121
"react-tsparticles": "^2.12.2",
22-
"tsparticles": "^3.4.0"
22+
"tsparticles": "^3.4.0",
23+
"tsparticles-engine": "^2.12.0"
2324
},
2425
"devDependencies": {
25-
"@types/react": "^18.2.66",
26-
"@types/react-dom": "^18.2.22",
26+
"@types/react": "^18.3.3",
27+
"@types/react-dom": "^18.3.0",
2728
"@vitejs/plugin-react": "^4.2.1",
2829
"eslint": "^8.57.0",
2930
"eslint-plugin-react": "^7.34.1",
3031
"eslint-plugin-react-hooks": "^4.6.0",
3132
"eslint-plugin-react-refresh": "^0.4.6",
33+
"typescript": "^5.5.2",
3234
"vite": "^5.2.0"
3335
}
3436
}

‎src/App.jsx ‎src/App.tsx

File renamed without changes.

‎src/components/NumberBoxes.jsx ‎src/components/NumberBoxes.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ const NumberBoxContainer = styled('div')({
1818
alignItems: 'center',
1919
});
2020

21-
const NumberBox = styled('div')(({ isSelected }) => ({
21+
interface NumberBoxProps {
22+
isSelected: boolean;
23+
}
24+
25+
const NumberBox = styled('div')<NumberBoxProps>(({ isSelected }) => ({
2226
display: 'inline-block',
2327
width: '14px', // Smaller width
2428
height: '14px', // Smaller height
@@ -41,10 +45,14 @@ const stats = [
4145
'Strength',
4246
];
4347

44-
const NumberBoxes = () => {
45-
const [selectedNumbers, setSelectedNumbers] = useState({});
48+
interface selectedNumbers {
49+
[key: string]: number
50+
}
51+
52+
const NumberBoxes: React.FC = () => {
53+
const [selectedNumbers, setSelectedNumbers] = useState<selectedNumbers>({});
4654

47-
const handleSelect = (stat, number) => {
55+
const handleSelect = (stat : string, number : number) => {
4856
setSelectedNumbers((prev) => ({
4957
...prev,
5058
[stat]: number,
@@ -62,7 +70,7 @@ const NumberBoxes = () => {
6270
{[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((number) => (
6371
<NumberBox
6472
key={number}
65-
isSelected={selectedNumbers[stat] && number <= selectedNumbers[stat]}
73+
isSelected={selectedNumbers[stat] !== undefined && number <= selectedNumbers[stat]}
6674
onClick={() => handleSelect(stat, number)}
6775
>
6876
{number}

‎src/components/ParticlesBackground.jsx ‎src/components/ParticlesBackground.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
import React from 'react';
1+
import { useCallback } from 'react';
22
import Particles from 'react-tsparticles';
33
import { loadFull } from 'tsparticles';
4+
import type { Container, Engine } from 'tsparticles-engine';
45

5-
const ParticlesBackground = () => {
6-
const particlesInit = async (main) => {
7-
await loadFull(main);
8-
};
6+
const ParticlesBackground: React.FC = () => {
7+
const particlesInit = useCallback (async (engine: Engine) => {
8+
await loadFull(engine);
9+
}, []);
910

10-
const particlesLoaded = (container) => {};
11+
const particlesLoaded = useCallback(async (container: Container | undefined) => {
12+
await console.log(container);
13+
}, []);
1114

1215
return (
1316
<Particles

‎src/components/SingleDiamondButton.jsx ‎src/components/SingleDiamondButton.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import DiamondGrid from './DiamondGrid';
33
import AnimatedButton from './AnimatedButton';
44
import './SingleDiamondButton.css';
55

6-
const SingleDiamondButton = () => {
6+
const SingleDiamondButton: React.FC = () => {
77
const [hovered, setHovered] = useState(false);
88
const [currentButton, setCurrentButton] = useState({
99
label: '5',
@@ -13,7 +13,7 @@ const SingleDiamondButton = () => {
1313

1414
const handleHover = () => setHovered(true);
1515
const handleLeave = () => setHovered(false);
16-
const handleSelect = (label, color, type) => {
16+
const handleSelect = (label: string, color: string, type: 'single' | 'animated') => {
1717
setCurrentButton({ label, color, type });
1818
setHovered(false);
1919
};
@@ -47,7 +47,7 @@ const SingleDiamondButton = () => {
4747
{hovered && (
4848
<div className="diamond-grid-animated-container">
4949
<div className="diamond-grid-wrapper">
50-
<DiamondGrid onSelect={(label, color) => handleSelect(label, color, 'single')} />
50+
<DiamondGrid onSelect={(label: string, color: string) => handleSelect(label, color, 'single')} />
5151
</div>
5252
</div>
5353
)}

‎src/features/auth/components/BungieLogin.jsx ‎src/features/auth/components/BungieLogin.tsx

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
import BungieAuth from "../../../lib/BungieAuth"
2-
import React, { Component } from "react"
2+
import React, { Component, ReactNode } from "react"
33

4-
class BungieLogin extends Component {
5-
constructor(props) {
4+
5+
interface BungieLoginProps {
6+
children: (props: { isLoggedIn: boolean }) => ReactNode;
7+
}
8+
9+
interface BungieLoginState {
10+
isLoggedIn: boolean;
11+
}
12+
13+
class BungieLogin extends Component<BungieLoginProps, BungieLoginState> {
14+
constructor(props: BungieLoginProps) {
615
super(props)
716

817
this.state = {
9-
isLoggedIn: BungieAuth.isAuthenticated()
18+
isLoggedIn: true
1019
}
1120
}
1221

‎src/lib/BungieApiClient.js ‎src/lib/BungieApiClient.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ const apiClient = axios.create({
99
}
1010
})
1111

12-
const _get = (url, config = {}) => {
12+
const _get = (url: string, config = {}) => {
1313
return apiClient.get(url, config)
1414
}
1515

16-
const _post = (url, data = {}, config = {}) => {
16+
const _post = (url: string, data = {}, config = {}) => {
1717
return apiClient.post(url, data, config)
1818
}
1919

‎src/lib/BungieAuth.jsx ‎src/lib/BungieAuth.ts

+21-13
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,42 @@ import { _get, _post } from './BungieApiClient'
22

33
const BungieAuth = {
44

5-
authenticate: () => {
5+
authenticate: (): void => {
66
window.location.replace(`https://www.bungie.net/en/OAuth/Authorize?client_id=${import.meta.env.VITE_CLIENT_ID}&response_type=code`)
77
},
88

9-
isTokenExpired: () => {
10-
return localStorage.getItem("refreshTokenExpiringAt") < Date.now()
9+
isTokenExpired: (): boolean => {
10+
let val = localStorage.getItem("refreshTokenExpiringAt") || "0"
11+
let expiringAt = val ? Number.parseInt(val) : 0
12+
return expiringAt < Date.now()
1113
},
1214

13-
autoRegenerateTokens: () => {
15+
autoRegenerateTokens: (): boolean => {
1416
const timing = 1000 * 3600 * 0.5
1517
const refreshToken = localStorage.getItem("refreshToken")
16-
const refreshTokenExpiringAt = localStorage.getItem("refreshTokenExpiringAt")
17-
const lastRefresh = localStorage.getItem("lastRefresh")
18+
19+
let expiringAtVal = localStorage.getItem("refreshTokenExpiringAt") || "0"
20+
let expiringAt = expiringAtVal ? Number.parseInt(expiringAtVal) : 0
21+
22+
let lastRefreshVal = localStorage.getItem("lastRefresh") || "0"
23+
let lastRefresh = lastRefreshVal ? Number.parseInt(lastRefreshVal) : 0
1824

1925
console.log("autoRegenerateTokens", {
2026
token: refreshToken,
2127
datenow: Date.now(),
22-
refreshTokenExpiringAt: refreshTokenExpiringAt,
28+
refreshTokenExpiringAt: expiringAt,
2329
lastRefresh: lastRefresh,
2430
"Date.now() > (lastRefresh + timing)": Date.now() > lastRefresh + timing
2531
})
2632

27-
if (refreshToken && Date.now() < refreshTokenExpiringAt && Date.now() > lastRefresh + timing) {
33+
if (refreshToken && Date.now() < expiringAt && Date.now() > lastRefresh + timing) {
2834
return BungieAuth.generateToken(true)
2935
}
3036

3137
return true
3238
},
3339

34-
generateToken: (refresh = false) => {
40+
generateToken: (refresh: boolean = false): boolean => {
3541
const CLIENT_ID = import.meta.env.VITE_CLIENT_ID
3642
const CLIENT_SECRET = import.meta.env.VITE_CLIENT_SECRET
3743
const TOKEN = localStorage.getItem("authCode")
@@ -50,22 +56,24 @@ const BungieAuth = {
5056
if (response.data.access_token) {
5157
localStorage.setItem("accessToken", response.data.access_token)
5258
localStorage.setItem("refreshToken", response.data.refresh_token)
53-
localStorage.setItem("refreshTokenExpiringAt", Date.now() + response.data.refresh_expires_in * 1000 - 10 * 1000)
54-
localStorage.setItem("lastRefresh", Date.now())
59+
localStorage.setItem("refreshTokenExpiringAt", "" + (Date.now() + response.data.refresh_expires_in * 1000 - 10 * 1000))
60+
localStorage.setItem("lastRefresh", "" + (Date.now()))
5561
return true
5662
}
5763
else {
5864
console.log("Could not get access token")
5965
return false
6066
}
6167
})
68+
69+
return false
6270
},
6371

64-
isAuthenticated: () => {
72+
isAuthenticated: (): boolean => {
6573
return (localStorage.getItem("accessToken") !== null && BungieAuth.autoRegenerateTokens())
6674
},
6775

68-
setAuthCode: () => {
76+
setAuthCode: (): boolean => {
6977
if (window.location.href.includes("code=")) {
7078
var code = window.location.href.split('code=')[1]
7179

‎src/main.jsx

-10
This file was deleted.

‎src/main.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react'
2+
import { createRoot } from 'react-dom/client'
3+
import App from './App'
4+
import './index.css'
5+
6+
const root = document.getElementById('root')
7+
if (!root) throw new Error('no root element found')
8+
9+
createRoot(root).render(
10+
<React.StrictMode>
11+
<App />
12+
</React.StrictMode>,
13+
)

‎src/vite-env.d.ts

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

0 commit comments

Comments
 (0)