From 3f3f012081a2d988ad5b7c5882443f2c3e759edd Mon Sep 17 00:00:00 2001 From: Mat Sz Date: Tue, 24 Oct 2023 18:33:43 +0200 Subject: [PATCH] replace react-router-dom with wouter --- web/package.json | 4 +-- web/src/App.tsx | 46 +++++++++++++++--------- web/src/components/Footer.tsx | 2 +- web/src/components/Header.tsx | 2 +- web/src/screens/About.tsx | 2 +- web/src/screens/Abuse.tsx | 2 +- web/src/screens/Home.tsx | 2 +- web/src/screens/Redirect.tsx | 4 +-- web/src/sections/Connect/index.tsx | 6 ++-- web/src/sections/LocalNetworks/index.tsx | 2 +- yarn.lock | 29 +++++---------- 11 files changed, 51 insertions(+), 50 deletions(-) diff --git a/web/package.json b/web/package.json index cdba0b9..38fed85 100644 --- a/web/package.json +++ b/web/package.json @@ -35,11 +35,11 @@ "react-expanding-textarea": "^2.3.6", "react-i18not": "^0.1.1", "react-icons": "^4.3.1", - "react-router-dom": "^6.3.0", "sass": "^1.51.0", "typesocket": "^1.0.2", "uuid": "^9.0.0", - "vite-plugin-info": "^0.4.1" + "vite-plugin-info": "^0.4.1", + "wouter": "^2.12.1" }, "scripts": { "start": "vite", diff --git a/web/src/App.tsx b/web/src/App.tsx index 9c657f6..492492e 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Routes, Route, BrowserRouter } from 'react-router-dom'; +import { Router, Route, Switch } from 'wouter'; import { useTranslation } from 'react-i18not'; import './App.scss'; @@ -19,20 +19,34 @@ export const App: React.FC = () => { document.body.dir = dir; return ( - -
-
- - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - -
- +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
); }; diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx index 0084ff7..186fbbe 100644 --- a/web/src/components/Footer.tsx +++ b/web/src/components/Footer.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useTranslation } from 'react-i18not'; -import { Link } from 'react-router-dom'; +import { Link } from 'wouter'; import { observer } from 'mobx-react-lite'; import clsx from 'clsx'; diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx index d280946..bf182f2 100644 --- a/web/src/components/Header.tsx +++ b/web/src/components/Header.tsx @@ -5,7 +5,7 @@ import { IoInformationCircle, IoLogoTwitter, } from 'react-icons/io5/index.js'; -import { Link } from 'react-router-dom'; +import { Link } from 'wouter'; import { observer } from 'mobx-react-lite'; import styles from './Header.module.scss'; diff --git a/web/src/screens/About.tsx b/web/src/screens/About.tsx index 5f22ad6..279f9e1 100644 --- a/web/src/screens/About.tsx +++ b/web/src/screens/About.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'wouter'; import { TextSection } from '../components/TextSection.js'; diff --git a/web/src/screens/Abuse.tsx b/web/src/screens/Abuse.tsx index bb7e127..5e8c58f 100644 --- a/web/src/screens/Abuse.tsx +++ b/web/src/screens/Abuse.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'wouter'; import { observer } from 'mobx-react-lite'; import { TextSection } from '../components/TextSection.js'; diff --git a/web/src/screens/Home.tsx b/web/src/screens/Home.tsx index 08c605a..8185e3b 100644 --- a/web/src/screens/Home.tsx +++ b/web/src/screens/Home.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { useParams } from 'react-router-dom'; +import { useParams } from 'wouter'; import { observer } from 'mobx-react-lite'; import { useTranslation } from 'react-i18not'; import clsx from 'clsx'; diff --git a/web/src/screens/Redirect.tsx b/web/src/screens/Redirect.tsx index 17254d5..e13ed36 100644 --- a/web/src/screens/Redirect.tsx +++ b/web/src/screens/Redirect.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { useLocation } from 'wouter'; import { useTranslation } from 'react-i18not'; import { observer } from 'mobx-react-lite'; @@ -14,7 +14,7 @@ export const Redirect: React.FC = observer(() => { const suggestedNetworkName = applicationStore.suggestedNetworkName; const { connected, clientId } = connection; - const navigate = useNavigate(); + const navigate = useLocation()[1]; useEffect(() => { const currentNetworkName = diff --git a/web/src/sections/Connect/index.tsx b/web/src/sections/Connect/index.tsx index 02e1967..f2c2796 100644 --- a/web/src/sections/Connect/index.tsx +++ b/web/src/sections/Connect/index.tsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; import { QRCodeSVG } from 'qrcode.react'; import { useTranslation } from 'react-i18not'; import { IoSend } from 'react-icons/io5/index.js'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'wouter'; import { observer } from 'mobx-react-lite'; import styles from './index.module.scss'; @@ -16,10 +16,10 @@ import { LocalNetworks } from '../LocalNetworks/index.js'; export const ConnectSection: React.FC = observer(() => { const { t } = useTranslation(); - const { pathname } = useLocation(); + const [location] = useLocation(); // eslint-disable-next-line react-hooks/exhaustive-deps - const href = useMemo(() => window.location.href, [pathname]); + const href = useMemo(() => window.location.href, [location]); return ( <> diff --git a/web/src/sections/LocalNetworks/index.tsx b/web/src/sections/LocalNetworks/index.tsx index 7586789..19a31e4 100644 --- a/web/src/sections/LocalNetworks/index.tsx +++ b/web/src/sections/LocalNetworks/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import clsx from 'clsx'; import { observer } from 'mobx-react-lite'; -import { Link } from 'react-router-dom'; +import { Link } from 'wouter'; import styles from './index.module.scss'; import { applicationStore, networkStore } from '../../stores/index.js'; diff --git a/yarn.lock b/yarn.lock index 0609bda..830e89a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1581,11 +1581,6 @@ node-addon-api "^3.2.1" node-gyp-build "^4.3.0" -"@remix-run/router@1.8.0": - version "1.8.0" - resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc" - integrity sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg== - "@rushstack/eslint-patch@^1.1.0": version "1.3.3" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69" @@ -5056,21 +5051,6 @@ react-refresh@^0.14.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== -react-router-dom@^6.3.0: - version "6.15.0" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.15.0.tgz#6da7db61e56797266fbbef0d5e324d6ac443ee40" - integrity sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ== - dependencies: - "@remix-run/router" "1.8.0" - react-router "6.15.0" - -react-router@6.15.0: - version "6.15.0" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.15.0.tgz#bf2cb5a4a7ed57f074d4ea88db0d95033f39cac8" - integrity sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg== - dependencies: - "@remix-run/router" "1.8.0" - react-with-forwarded-ref@^0.3.5: version "0.3.5" resolved "https://registry.yarnpkg.com/react-with-forwarded-ref/-/react-with-forwarded-ref-0.3.5.tgz#7d0bae2a9996fc91493f40ab179b8c54d29cfab9" @@ -5957,7 +5937,7 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" -use-sync-external-store@^1.2.0: +use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== @@ -6118,6 +6098,13 @@ why-is-node-running@^2.2.2: siginfo "^2.0.0" stackback "0.0.2" +wouter@^2.12.1: + version "2.12.1" + resolved "https://registry.yarnpkg.com/wouter/-/wouter-2.12.1.tgz#11d913324c6320b679873783acb15ea3523b8521" + integrity sha512-G7a6JMSLSNcu6o8gdOfIzqxuo8Qx1qs+9rpVnlurH69angsSFPZP5gESNuVNeJct/MGpQg191pDo4HUjTx7IIQ== + dependencies: + use-sync-external-store "^1.0.0" + wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"