Skip to content

Commit 7ff265f

Browse files
committed
app: use wouter for navigation
1 parent a77b909 commit 7ff265f

File tree

8 files changed

+44
-57
lines changed

8 files changed

+44
-57
lines changed

src/app/App.tsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
User as FirebaseUser,
1414
} from 'firebase/auth';
1515

16-
import { BrowserRouter, Route, RouteComponentProps } from 'react-router-dom';
16+
import { useLocation, Route, RouteComponentProps, Switch } from 'wouter';
1717
import { styled } from '@mui/material/styles';
1818
import { createTheme, ThemeProvider } from '@mui/material/styles';
1919
import CssBaseline from '@mui/material/CssBaseline';
@@ -35,6 +35,8 @@ const firebaseApp = initializeApp(config);
3535
interface EditorMatchParams {
3636
username: string;
3737
projectName: string;
38+
39+
readonly [paramName: string | number]: string | undefined;
3840
}
3941

4042
const theme = createTheme({
@@ -219,19 +221,20 @@ const InnerApp = styled(
219221
}
220222

221223
editor = (props: RouteComponentProps<EditorMatchParams>) => {
222-
const { username, projectName } = props.match.params;
224+
const { username, projectName } = props.params;
223225
return (
224226
<HostedWebEditor
225227
username={username}
226228
projectName={projectName}
227229
baseURL={this.getBaseURL()}
228-
history={props.history}
229230
/>
230231
);
231232
};
232233

233-
home = (props: RouteComponentProps) => {
234-
const isNewProject = props.location.pathname === '/new';
234+
home = (_props: RouteComponentProps) => {
235+
const location = useLocation()[0];
236+
237+
const isNewProject = location === '/new';
235238
return <Home isNewProject={isNewProject} user={defined(this.state.user)} />;
236239
};
237240

@@ -249,13 +252,13 @@ const InnerApp = styled(
249252
return (
250253
<React.Fragment>
251254
<CssBaseline />
252-
<BrowserRouter>
255+
<Switch>
253256
<div className={className}>
254-
<Route exact path="/" component={this.home} />
255-
<Route exact path="/:username/:projectName" render={this.editor} />
256-
<Route exact path="/new" component={this.home} />
257+
<Route path="/" component={this.home} />
258+
<Route path="/:username/:projectName" component={this.editor} />
259+
<Route path="/new" component={this.home} />
257260
</div>
258-
</BrowserRouter>
261+
</Switch>
259262
</React.Fragment>
260263
);
261264
}

src/app/Home.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import * as React from 'react';
66

7-
import { Link } from 'react-router-dom';
7+
import { Link } from 'wouter';
88
import clsx from 'clsx';
99
import { styled } from '@mui/material/styles';
1010
import AppBar from '@mui/material/AppBar';

src/app/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@
6262
"url-loader": "^4.1.1",
6363
"webpack": "^5.49.0",
6464
"webpack-dev-server": "^4.3.0",
65-
"webpack-manifest-plugin": "^5.0.0"
65+
"webpack-manifest-plugin": "^5.0.0",
66+
"wouter": "^3.6.0"
6667
},
6768
"resolutions": {
6869
"immer": "9.0.19"

src/diagram/HostedWebEditor.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import * as React from 'react';
77
import { styled } from '@mui/material/styles';
88
import { List } from 'immutable';
99
import { fromUint8Array, toUint8Array } from 'js-base64';
10-
import { History } from 'history';
1110

1211
import { baseURL, defined } from '@system-dynamics/core/common';
1312

@@ -26,7 +25,6 @@ interface HostedWebEditorProps {
2625
projectName: string;
2726
embedded?: boolean;
2827
baseURL?: string;
29-
history?: History;
3028
}
3129

3230
// eslint-disable-next-line @typescript-eslint/no-empty-interface

src/diagram/ModelPropertiesDrawer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import * as React from 'react';
66

7-
import { Link } from 'react-router-dom';
7+
import { Link } from 'wouter';
88
import clsx from 'clsx';
99
import { styled } from '@mui/material/styles';
1010
import Button from '@mui/material/Button';

src/diagram/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,10 @@
3232
"js-base64": "^3.7.7",
3333
"react": "^18.1.0",
3434
"react-dom": "^18.1.0",
35-
"react-router": "^7.1.0",
36-
"react-router-dom": "^7.1.0",
3735
"slate": "^0.87.0",
3836
"slate-history": "^0.86.0",
39-
"slate-react": "^0.88.0"
37+
"slate-react": "^0.88.0",
38+
"wouter": "^3.6.0"
4039
},
4140
"resolutions": {
4241
"@types/slate*/**/immutable": "5.0.3",

website/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
"@tsconfig/docusaurus": "^2.0.3",
2121
"@types/react": "^18.0.0",
2222
"@types/react-helmet": "^6.1.0",
23-
"@types/react-router-dom": "^5.1.7",
2423
"react": "^18.1.0",
2524
"react-dom": "^18.1.0",
2625
"typescript": "^5.7.2"

yarn.lock

Lines changed: 25 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3478,11 +3478,6 @@
34783478
resolved "https://registry.yarnpkg.com/@types/cookie-parser/-/cookie-parser-1.4.8.tgz#d2215e7915f624fbfe4233da8f063f511679f1f3"
34793479
integrity sha512-l37JqFrOJ9yQfRQkljb41l0xVphc7kg5JTjjr+pLRZ0IyZ49V4BQ8vbF4Ut2C2e+WH4al3xD3ZwYwIUfnbT4NQ==
34803480

3481-
"@types/cookie@^0.6.0":
3482-
version "0.6.0"
3483-
resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
3484-
integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==
3485-
34863481
"@types/cors@^2.8.9":
34873482
version "2.8.17"
34883483
resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.17.tgz#5d718a5e494a8166f569d986794e49c48b216b2b"
@@ -3845,7 +3840,7 @@
38453840
"@types/react" "*"
38463841
"@types/react-router" "^5.1.0"
38473842

3848-
"@types/react-router-dom@*", "@types/react-router-dom@^5.1.7":
3843+
"@types/react-router-dom@*":
38493844
version "5.3.3"
38503845
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
38513846
integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
@@ -5813,11 +5808,6 @@ [email protected]:
58135808
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.2.tgz#556369c472a2ba910f2979891b526b3436237ed7"
58145809
integrity sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==
58155810

5816-
cookie@^1.0.1:
5817-
version "1.0.2"
5818-
resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.0.2.tgz#27360701532116bd3f1f9416929d176afe1e4610"
5819-
integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
5820-
58215811
copy-text-to-clipboard@^3.2.0:
58225812
version "3.2.0"
58235813
resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz#0202b2d9bdae30a49a53f898626dcc3b49ad960b"
@@ -11032,6 +11022,11 @@ minizlib@^2.1.1, minizlib@^2.1.2:
1103211022
minipass "^3.0.0"
1103311023
yallist "^4.0.0"
1103411024

11025+
mitt@^3.0.1:
11026+
version "3.0.1"
11027+
resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
11028+
integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
11029+
1103511030
mkdirp@^0.5.1, mkdirp@^0.5.6:
1103611031
version "0.5.6"
1103711032
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
@@ -12955,13 +12950,6 @@ react-router-dom@^5.3.4:
1295512950
tiny-invariant "^1.0.2"
1295612951
tiny-warning "^1.0.0"
1295712952

12958-
react-router-dom@^7.1.0:
12959-
version "7.1.0"
12960-
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.1.0.tgz#5e48f6499a1b788edd5aacb4009d929d5f3dd4e1"
12961-
integrity sha512-F4/nYBC9e4s0/ZjxM8GkZ9a68DpX76LN1a9W9mfPl2GfbDJ9/vzJro6MThNR5qGBH6KkgcK1BziyEzXhHV46Xw==
12962-
dependencies:
12963-
react-router "7.1.0"
12964-
1296512953
[email protected], react-router@^5.3.4:
1296612954
version "5.3.4"
1296712955
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.4.tgz#8ca252d70fcc37841e31473c7a151cf777887bb5"
@@ -12977,16 +12965,6 @@ [email protected], react-router@^5.3.4:
1297712965
tiny-invariant "^1.0.2"
1297812966
tiny-warning "^1.0.0"
1297912967

12980-
[email protected], react-router@^7.1.0:
12981-
version "7.1.0"
12982-
resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.1.0.tgz#85911e27aae8c4a57482f2404aef65ac9ca68a10"
12983-
integrity sha512-VcFhWqkNIcojDRYaUO8qV0Jib52s9ULpCp3nkBbmrvtoCVFRp6tmk3tJ2w9BZauVctA1YRnJlFYDn9iJRuCpGA==
12984-
dependencies:
12985-
"@types/cookie" "^0.6.0"
12986-
cookie "^1.0.1"
12987-
set-cookie-parser "^2.6.0"
12988-
turbo-stream "2.4.0"
12989-
1299012968
react-smooth@^4.0.0:
1299112969
version "4.0.4"
1299212970
resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-4.0.4.tgz#a5875f8bb61963ca61b819cedc569dc2453894b4"
@@ -13207,6 +13185,11 @@ regexp.prototype.flags@^1.5.3:
1320713185
es-errors "^1.3.0"
1320813186
set-function-name "^2.0.2"
1320913187

13188+
regexparam@^3.0.0:
13189+
version "3.0.0"
13190+
resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-3.0.0.tgz#1673e09d41cb7fd41eaafd4040a6aa90daa0a21a"
13191+
integrity sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==
13192+
1321013193
regexpu-core@^6.2.0:
1321113194
version "6.2.0"
1321213195
resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
@@ -13806,11 +13789,6 @@ seshcookie@^1.2.0:
1380613789
cookie-parser "^1.4.3"
1380713790
express "^4.16.4"
1380813791

13809-
set-cookie-parser@^2.6.0:
13810-
version "2.7.1"
13811-
resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz#3016f150072202dfbe90fadee053573cc89d2943"
13812-
integrity sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==
13813-
1381413792
set-function-length@^1.2.2:
1381513793
version "1.2.2"
1381613794
resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -14852,11 +14830,6 @@ tsutils@^3.21.0:
1485214830
dependencies:
1485314831
tslib "^1.8.1"
1485414832

14855-
14856-
version "2.4.0"
14857-
resolved "https://registry.yarnpkg.com/turbo-stream/-/turbo-stream-2.4.0.tgz#1e4fca6725e90fa14ac4adb782f2d3759a5695f0"
14858-
integrity sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==
14859-
1486014833
type-check@^0.4.0, type-check@~0.4.0:
1486114834
version "0.4.0"
1486214835
resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -15203,6 +15176,11 @@ url-template@^2.0.8:
1520315176
resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21"
1520415177
integrity sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw==
1520515178

15179+
use-sync-external-store@^1.0.0:
15180+
version "1.4.0"
15181+
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
15182+
integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
15183+
1520615184
util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
1520715185
version "1.0.2"
1520815186
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -15651,6 +15629,15 @@ word-wrap@^1.2.5, word-wrap@~1.2.3:
1565115629
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
1565215630
integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
1565315631

15632+
wouter@^3.6.0:
15633+
version "3.6.0"
15634+
resolved "https://registry.yarnpkg.com/wouter/-/wouter-3.6.0.tgz#8d89cd9108e9a61d5b288fe95e370c6550565622"
15635+
integrity sha512-l11eR4urCc+CbY8+pV8HKFHxEqMgffss9aVB1XwiSkLDtH3cI6XpCa50cOzREzL0KwQqrwCVE5dCyeNcCgFpPg==
15636+
dependencies:
15637+
mitt "^3.0.1"
15638+
regexparam "^3.0.0"
15639+
use-sync-external-store "^1.0.0"
15640+
1565415641
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
1565515642
version "7.0.0"
1565615643
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"

0 commit comments

Comments
 (0)