Skip to content

Commit dde6300

Browse files
dgrcodedgrcode
committed
Reuse Routes
1 parent 85d4c43 commit dde6300

File tree

6 files changed

+49
-80
lines changed

6 files changed

+49
-80
lines changed

‎packages/react-app/src/App.jsx

+26-20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback, useEffect, useRef, useState } from "react";
2-
import { Switch, Redirect, Route } from "react-router-dom";
2+
import { Switch, Route } from "react-router-dom";
33
import { Web3Provider, StaticJsonRpcProvider, InfuraProvider } from "@ethersproject/providers";
44
import "./App.css";
55
import Web3Modal from "web3modal";
@@ -10,15 +10,7 @@ import { useIntl } from "react-intl";
1010
import { useUserProvider } from "./hooks";
1111
import { Header, ColorModeSwitcher } from "./components";
1212
import { INFURA_ID, SERVER_URL as serverUrl } from "./constants";
13-
import {
14-
BuilderListView,
15-
ChallengeDetailView,
16-
BuilderProfileView,
17-
SubmissionReviewView,
18-
HomeView,
19-
ActivityView,
20-
} from "./views";
21-
import { USER_ROLES } from "./helpers/constants";
13+
import { SUPPORTED_LANGS, USER_ROLES } from "./helpers/constants";
2214
import { providerPromiseWrapper } from "./helpers/blockchainProviders";
2315
import BlockchainProvidersContext from "./contexts/blockchainProvidersContext";
2416
import SiteFooter from "./components/SiteFooter";
@@ -187,16 +179,30 @@ function App({ setLocale }) {
187179
logoutOfWeb3Modal={logoutOfWeb3Modal}
188180
setUserRole={setUserRole}
189181
/>
190-
<Routes
191-
connectedBuilder={connectedBuilder}
192-
userProvider={userProvider}
193-
address={address}
194-
serverUrl={serverUrl}
195-
mainnetProvider={mainnetProvider}
196-
userRole={userRole}
197-
fetchUserData={fetchUserData}
198-
loadWeb3Modal={loadWeb3Modal}
199-
/>
182+
<Switch>
183+
<Routes
184+
connectedBuilder={connectedBuilder}
185+
userProvider={userProvider}
186+
address={address}
187+
serverUrl={serverUrl}
188+
mainnetProvider={mainnetProvider}
189+
userRole={userRole}
190+
fetchUserData={fetchUserData}
191+
loadWeb3Modal={loadWeb3Modal}
192+
/>
193+
<Route path={`/:lang(${SUPPORTED_LANGS.join("|")})`}>
194+
<Routes
195+
connectedBuilder={connectedBuilder}
196+
userProvider={userProvider}
197+
address={address}
198+
serverUrl={serverUrl}
199+
mainnetProvider={mainnetProvider}
200+
userRole={userRole}
201+
fetchUserData={fetchUserData}
202+
loadWeb3Modal={loadWeb3Modal}
203+
/>
204+
</Route>
205+
</Switch>
200206
<ColorModeSwitcher />
201207
</div>
202208
<SiteFooter />

‎packages/react-app/src/Routes.jsx

+14-53
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
HomeView,
99
SubmissionReviewView,
1010
} from "./views";
11-
import { SUPPORTED_LANGS } from "./helpers/constants";
11+
import useUrlLang from "./hooks/useUrlLang";
1212

1313
const Routes = ({
1414
connectedBuilder,
@@ -20,18 +20,22 @@ const Routes = ({
2020
fetchUserData,
2121
loadWeb3Modal,
2222
}) => {
23+
const { langUrlPrefix, path } = useUrlLang();
24+
// INFO: pathPrefix is the path without trailing `/`
25+
const pathPrefix = path.replace(/\/$/, "");
26+
2327
return (
2428
<Switch>
25-
<Route exact path="/">
26-
{({ match }) => <HomeView connectedBuilder={connectedBuilder} userProvider={userProvider} match={match} />}
29+
<Route exact path={path}>
30+
<HomeView connectedBuilder={connectedBuilder} userProvider={userProvider} />
2731
</Route>
28-
<Route exact path="/portfolio">
29-
{address && <Redirect to={`/builders/${address}`} />}
32+
<Route exact path={`${pathPrefix}/portfolio`}>
33+
{address && <Redirect to={`${langUrlPrefix}/builders/${address}`} />}
3034
</Route>
31-
<Route path="/builders" exact>
35+
<Route path={`${pathPrefix}/builders`} exact>
3236
<BuilderListView serverUrl={serverUrl} mainnetProvider={mainnetProvider} userRole={userRole} />
3337
</Route>
34-
<Route path="/builders/:builderAddress">
38+
<Route path={`${pathPrefix}/builders/:builderAddress`}>
3539
<BuilderProfileView
3640
serverUrl={serverUrl}
3741
mainnetProvider={mainnetProvider}
@@ -41,7 +45,7 @@ const Routes = ({
4145
fetchUserData={fetchUserData}
4246
/>
4347
</Route>
44-
<Route path="/challenge/:challengeId">
48+
<Route path={`${pathPrefix}/challenge/:challengeId`}>
4549
<ChallengeDetailView
4650
serverUrl={serverUrl}
4751
address={address}
@@ -51,55 +55,12 @@ const Routes = ({
5155
/>
5256
</Route>
5357
{/* ToDo: Protect this route on the frontend? */}
54-
<Route path="/submission-review" exact>
58+
<Route path={`${pathPrefix}/submission-review`} exact>
5559
<SubmissionReviewView userProvider={userProvider} mainnetProvider={mainnetProvider} />
5660
</Route>
57-
<Route path="/activity" exact>
61+
<Route path={`${pathPrefix}/activity`} exact>
5862
<ActivityView />
5963
</Route>
60-
<Route path={`/:lang(${SUPPORTED_LANGS.join("|")})`}>
61-
{({ match: { path, url } }) => (
62-
<Switch>
63-
<Route exact path={path}>
64-
{({ match }) => (
65-
<HomeView connectedBuilder={connectedBuilder} userProvider={userProvider} match={match} />
66-
)}
67-
</Route>
68-
<Route exact path={`${path}/portfolio`}>
69-
{address && <Redirect to={`${url}/builders/${address}`} />}
70-
</Route>
71-
<Route path={`${path}/builders`} exact>
72-
<BuilderListView serverUrl={serverUrl} mainnetProvider={mainnetProvider} userRole={userRole} />
73-
</Route>
74-
<Route path={`${path}/builders/:builderAddress`}>
75-
<BuilderProfileView
76-
serverUrl={serverUrl}
77-
mainnetProvider={mainnetProvider}
78-
address={address}
79-
userRole={userRole}
80-
userProvider={userProvider}
81-
fetchUserData={fetchUserData}
82-
/>
83-
</Route>
84-
<Route path={`${path}/challenge/:challengeId`}>
85-
<ChallengeDetailView
86-
serverUrl={serverUrl}
87-
address={address}
88-
userProvider={userProvider}
89-
userRole={userRole}
90-
loadWeb3Modal={loadWeb3Modal}
91-
/>
92-
</Route>
93-
{/* ToDo: Protect this route on the frontend? */}
94-
<Route path={`${path}/submission-review`} exact>
95-
<SubmissionReviewView userProvider={userProvider} mainnetProvider={mainnetProvider} />
96-
</Route>
97-
<Route path={`${path}/activity`} exact>
98-
<ActivityView />
99-
</Route>
100-
</Switch>
101-
)}
102-
</Route>
10364
</Switch>
10465
);
10566
};

‎packages/react-app/src/helpers/constants.js

+1
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,5 @@ export const userFunctionDescription = {
3232
[USER_FUNCTIONS.mentor]: { colorScheme: "yellow", label: "Mentor" },
3333
};
3434

35+
export const DEFAULT_LANG = "en";
3536
export const SUPPORTED_LANGS = ["es", "fr"];

‎packages/react-app/src/hooks/useUrlLang.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { useRouteMatch } from "react-router-dom";
2-
import { SUPPORTED_LANGS } from "../helpers/constants";
2+
import { DEFAULT_LANG, SUPPORTED_LANGS } from "../helpers/constants";
33

44
const useUrlLang = () => {
55
const langMatch = useRouteMatch(`/:lang(${SUPPORTED_LANGS.join("|")})`);
6-
const lang = langMatch?.params.lang ?? "en";
7-
const langUrlPrefix = lang === "en" ? "" : `/${lang}`;
6+
const lang = langMatch?.params.lang ?? DEFAULT_LANG;
7+
const langUrlPrefix = lang === DEFAULT_LANG ? "" : `/${lang}`;
8+
const path = langMatch?.path ?? "/";
89

9-
return { lang, langUrlPrefix };
10+
return { lang, langUrlPrefix, path };
1011
};
1112

1213
export default useUrlLang;

‎packages/react-app/src/index.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { IntlProvider } from "react-intl";
99
import theme from "./theme";
1010
import App from "./App";
1111

12+
import { DEFAULT_LANG } from "./helpers/constants";
1213
import translationEn from "./lang/en.json";
1314
import translationEs from "./lang/es.json";
1415

@@ -18,7 +19,7 @@ const translations = {
1819
};
1920

2021
// TODO: change from ui
21-
const defaultLocale = "en";
22+
const defaultLocale = DEFAULT_LANG;
2223

2324
const Root = () => {
2425
const [locale, setLocale] = useState(defaultLocale);

‎packages/react-app/src/views/HomeView.jsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@ const BulletNumber = ({ children, bgColor, primaryFontColor }) => (
2424
</Box>
2525
);
2626

27-
export default function HomeView({ connectedBuilder, userProvider, match }) {
28-
console.log("homeView match", match);
27+
export default function HomeView({ connectedBuilder, userProvider }) {
2928
const { primaryFontColor, bgColor } = useCustomColorModes();
3029
const cardBgColor = useColorModeValue("sre.cardBackground", "sreDark.cardBackground");
3130
const intl = useIntl();

0 commit comments

Comments
 (0)