commit 301c65e417a12605ee2be8da7ac935c6da8b4699
parent 52283c2e11203ffcc94f900624dc6873811fe73d
Author: MTRNord <mtrnord1@gmail.com>
Date: Tue, 19 Apr 2022 19:50:16 +0200
Move to react-router to make it easier to set the basepath
Diffstat:
8 files changed, 204 insertions(+), 69 deletions(-)
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
</head>
<body>
+ <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
diff --git a/package-lock.json b/package-lock.json
@@ -14,10 +14,9 @@
"inquirer": "^8.2.2",
"matrix-events-sdk": "^0.0.1-beta.7",
"matrix-js-sdk": "^16.0.1",
- "photoswipe": "^5.2.2",
"preact": "^10.5.15",
- "preact-router": "^4.0.1",
- "react-plock": "^1.2.0"
+ "react-plock": "^1.2.0",
+ "react-router-dom": "^6.3.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.1.5",
@@ -2754,6 +2753,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/history": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+ "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.7.6"
+ }
+ },
"node_modules/hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -3068,8 +3075,7 @@
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
- "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
- "dev": true
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"node_modules/js-yaml": {
"version": "4.1.0",
@@ -3301,6 +3307,18 @@
"url": "https://tidelift.com/funding/github/npm/loglevel"
}
},
+ "node_modules/loose-envify": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+ "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "peer": true,
+ "dependencies": {
+ "js-tokens": "^3.0.0 || ^4.0.0"
+ },
+ "bin": {
+ "loose-envify": "cli.js"
+ }
+ },
"node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -3770,14 +3788,6 @@
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
},
- "node_modules/photoswipe": {
- "version": "5.2.2",
- "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.2.tgz",
- "integrity": "sha512-es0AEX4zgzzcrr8ztdPWRODSARCLqCm/5H/aSwFtZwovokGtzBf/y/HXJxHMnNx6h4650DkKVIVFYILXJhmMhw==",
- "engines": {
- "node": ">= 0.12.0"
- }
- },
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -3924,14 +3934,6 @@
"url": "https://opencollective.com/preact"
}
},
- "node_modules/preact-router": {
- "version": "4.0.1",
- "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-4.0.1.tgz",
- "integrity": "sha512-xPyHVLouc5oKIlKu9iEElplNygJYkOn/vfXfZhcoOFqzfAZHZMmT3FsQb0yyPkdt1rwTLFAxek6/5CFkofocSQ==",
- "peerDependencies": {
- "preact": ">=10"
- }
- },
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4000,11 +4002,60 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/react": {
+ "version": "18.0.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
+ "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
+ "peer": true,
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/react-dom": {
+ "version": "18.0.0",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
+ "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
+ "peer": true,
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.21.0"
+ },
+ "peerDependencies": {
+ "react": "^18.0.0"
+ }
+ },
"node_modules/react-plock": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-plock/-/react-plock-1.2.0.tgz",
"integrity": "sha512-bBlyAj8LM/1DSSl98yQ+7QN2xjs/JZ8QOlvF93Jbs/Yys6tMzSFf+oLE/R/iReL9N0acgAI/0MFdmjC0Vke1Nw=="
},
+ "node_modules/react-router": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+ "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+ "dependencies": {
+ "history": "^5.2.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+ "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+ "dependencies": {
+ "history": "^5.2.0",
+ "react-router": "6.3.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -4294,6 +4345,15 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
+ "node_modules/scheduler": {
+ "version": "0.21.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+ "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+ "peer": true,
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ }
+ },
"node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -6789,6 +6849,14 @@
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
},
+ "history": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+ "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+ "requires": {
+ "@babel/runtime": "^7.7.6"
+ }
+ },
"hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -7015,8 +7083,7 @@
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
- "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
- "dev": true
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"js-yaml": {
"version": "4.1.0",
@@ -7189,6 +7256,15 @@
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.0.tgz",
"integrity": "sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA=="
},
+ "loose-envify": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+ "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "peer": true,
+ "requires": {
+ "js-tokens": "^3.0.0 || ^4.0.0"
+ }
+ },
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -7539,11 +7615,6 @@
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
},
- "photoswipe": {
- "version": "5.2.2",
- "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.2.tgz",
- "integrity": "sha512-es0AEX4zgzzcrr8ztdPWRODSARCLqCm/5H/aSwFtZwovokGtzBf/y/HXJxHMnNx6h4650DkKVIVFYILXJhmMhw=="
- },
"picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -7622,12 +7693,6 @@
"resolved": "https://registry.npmjs.org/preact/-/preact-10.7.0.tgz",
"integrity": "sha512-9MEURwzNMKpAil/t6+wabDIJI6oG6GnwypYxiJDvQnW+fHDTt51PYuLZ1QUM31hFr7sDaj9qTaShAF9VIxuxGQ=="
},
- "preact-router": {
- "version": "4.0.1",
- "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-4.0.1.tgz",
- "integrity": "sha512-xPyHVLouc5oKIlKu9iEElplNygJYkOn/vfXfZhcoOFqzfAZHZMmT3FsQb0yyPkdt1rwTLFAxek6/5CFkofocSQ==",
- "requires": {}
- },
"prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7664,11 +7729,47 @@
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
"dev": true
},
+ "react": {
+ "version": "18.0.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
+ "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
+ "peer": true,
+ "requires": {
+ "loose-envify": "^1.1.0"
+ }
+ },
+ "react-dom": {
+ "version": "18.0.0",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
+ "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
+ "peer": true,
+ "requires": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.21.0"
+ }
+ },
"react-plock": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-plock/-/react-plock-1.2.0.tgz",
"integrity": "sha512-bBlyAj8LM/1DSSl98yQ+7QN2xjs/JZ8QOlvF93Jbs/Yys6tMzSFf+oLE/R/iReL9N0acgAI/0MFdmjC0Vke1Nw=="
},
+ "react-router": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+ "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+ "requires": {
+ "history": "^5.2.0"
+ }
+ },
+ "react-router-dom": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+ "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+ "requires": {
+ "history": "^5.2.0",
+ "react-router": "6.3.0"
+ }
+ },
"read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -7881,6 +7982,15 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
+ "scheduler": {
+ "version": "0.21.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+ "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+ "peer": true,
+ "requires": {
+ "loose-envify": "^1.1.0"
+ }
+ },
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
diff --git a/package.json b/package.json
@@ -16,8 +16,8 @@
"matrix-events-sdk": "^0.0.1-beta.7",
"matrix-js-sdk": "^16.0.1",
"preact": "^10.5.15",
- "preact-router": "^4.0.1",
- "react-plock": "^1.2.0"
+ "react-plock": "^1.2.0",
+ "react-router-dom": "^6.3.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.1.5",
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,4 +1,3 @@
-import Router from 'preact-router';
import { lazy, PureComponent, Suspense } from 'preact/compat';
import { Home } from './pages/Home';
import { Client } from './context';
@@ -10,6 +9,7 @@ import { MatrixClient } from './matrix/client';
import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
import OlmLegacy from '@matrix-org/olm/olm_legacy.js?url';
import Olm from '@matrix-org/olm';
+import { Route, Routes } from 'react-router-dom';
const Join = lazy(() => import("./pages/Join"));
@@ -73,26 +73,28 @@ export class App extends PureComponent<any, State> {
render() {
return (
- <Suspense fallback={
- <div class="flex flex-col">
- <header>
- <Header />
- </header>
- <main class="m-12 mt-6 flex items-center justify-center">
- <p class="text-lg text-data font-bold">Loading...</p>
- </main>
- </div>
- }>
- <Client.Provider value={
- this.state.client
- }>
- <Router>
- <Home path={`${import.meta.env.BASE_URL}/`} />
- <Join path={`${import.meta.env.BASE_URL}/join`} />
- </Router>
- </Client.Provider>
- </Suspense>
+ <Client.Provider value={
+ this.state.client
+ }>
+ <Routes>
+ <Route path="/" element={<Home />} />
+ <Route path="join" element={
+ <Suspense fallback={
+ <div class="flex flex-col">
+ <header>
+ <Header />
+ </header>
+ <main class="m-12 mt-6 flex items-center justify-center">
+ <p class="text-lg text-data font-bold">Loading...</p>
+ </main>
+ </div>
+ }>
+ <Join />
+ </Suspense>
+ } />
+ </Routes>
+ </Client.Provider>
);
}
}
\ No newline at end of file
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,4 +1,4 @@
-import { Link } from "preact-router";
+import { Link } from "react-router-dom";
import { PureComponent } from "preact/compat";
import { Client } from "../context";
import { MatrixClient } from "../matrix/client";
@@ -8,7 +8,7 @@ export class Header extends PureComponent {
const client: MatrixClient | undefined = this.context;
return (
<div class="m-12 flex flex-col lg:flex-row items-center justify-between">
- <Link href="/"><img alt="Matrix Art" src="Logo_colored.svg" class="ease-in-out hover:scale-105 trandform transition-transform duration-300" /></Link>
+ <Link to="/"><img alt="Matrix Art" src="Logo_colored.svg" class="ease-in-out hover:scale-105 trandform transition-transform duration-300" /></Link>
<div class="flex items-center mt-8 lg:mt-0 flex-col sm:flex-row">
<div class="flex items-center justify-between w-80 max-w-80 mx-6 ease-in-out hover:scale-105 trandform transition-transform duration-300">
<div class="absolute ml-4">
@@ -21,8 +21,8 @@ export class Header extends PureComponent {
</div>
{
- !client?.isLoggedIn() ? <Link href={`${import.meta.env.BASE_URL}/join`} class="text-white font-bold text-1xl logo-bg rounded-2xl py-3 px-12 shadow mt-4 sm:mt-0 transform transition-transform ease-in-out duration-300 hover:scale-105">Join</Link> :
- <Link class="text-white font-bold text-1xl logo-bg rounded-2xl py-3 px-12 shadow mt-4 sm:mt-0 transform transition-transform ease-in-out duration-300 hover:scale-105">Post</Link>
+ !client?.isLoggedIn() ? <Link to="/join" class="text-white font-bold text-1xl logo-bg rounded-2xl py-3 px-12 shadow mt-4 sm:mt-0 transform transition-transform ease-in-out duration-300 hover:scale-105">Join</Link> :
+ <Link to="/" class="text-white font-bold text-1xl logo-bg rounded-2xl py-3 px-12 shadow mt-4 sm:mt-0 transform transition-transform ease-in-out duration-300 hover:scale-105">Post</Link>
}
</div>
diff --git a/src/components/hookHelpers.tsx b/src/components/hookHelpers.tsx
@@ -0,0 +1,9 @@
+import { useNavigate } from "react-router-dom";
+
+export const withNavigateHOC = (Component: any) => {
+ return (props: any) => {
+ const navigate = useNavigate();
+
+ return <Component navigate={navigate} {...props} />;
+ };
+};
+\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,4 +1,5 @@
import { render } from 'preact';
+import { BrowserRouter } from 'react-router-dom';
import { App } from './app';
import './index.css';
@@ -10,4 +11,9 @@ if (import.meta.env.DEV) {
import("preact/debug");
}
-render(<App />, document.querySelector('#app')!);
-\ No newline at end of file
+render(
+ <BrowserRouter basename={`${import.meta.env.BASE_URL}`}>
+ <App />
+ </BrowserRouter>,
+ document.querySelector('#app')!
+);
+\ No newline at end of file
diff --git a/src/pages/Join.tsx b/src/pages/Join.tsx
@@ -2,7 +2,12 @@ import { PureComponent } from "preact/compat";
import { Client } from "../context";
import { Header } from "../components/header";
import { MatrixClient } from "../matrix/client";
-import { route } from "preact-router";
+import { NavigateFunction } from "react-router-dom";
+import { withNavigateHOC } from "../components/hookHelpers";
+
+type Props = {
+ navigate: NavigateFunction;
+};
type State = {
homeserver: string;
@@ -15,9 +20,9 @@ type State = {
const ACTIVE_TAB_CSS = "inline-block p-4 w-full text-gray-900 bg-gray-100 hover:ring-blue-300 hover:ring-1 focus:ring-transparent focus:outline-none dark:bg-gray-700 dark:text-white";
const TAB_CSS = "inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 hover:ring-blue-300 hover:ring-1 focus:ring-transparent focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700";
-export default class Join extends PureComponent<any, State> {
- constructor() {
- super();
+class Join extends PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
this.state = {
homeserver: "https://art.midnightthoughts.space",
username: "",
@@ -41,7 +46,7 @@ export default class Join extends PureComponent<any, State> {
} else if (this.state.current_tab === "register" && !client.isLoggedIn()) {
await client.register(this.state.homeserver, this.state.username, this.state.password, this.state.create_profile);
}
- route('/', true);
+ this.props.navigate('/', { replace: true });
}
onInput(e: Event) {
@@ -88,4 +93,5 @@ export default class Join extends PureComponent<any, State> {
}
-Join.contextType = Client;
-\ No newline at end of file
+Join.contextType = Client;
+export default withNavigateHOC(Join);
+\ No newline at end of file
