Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] React Router Migration #3648

Draft
wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

[WIP] React Router Migration #3648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
100a5b9
refactor: rr migration app shell (wip)
Rhotimee Nov 27, 2024
3400865
refactor: migrate application component to use rr v6
Rhotimee Nov 28, 2024
edd6217
refactor: migrate application-templates
Rhotimee Nov 28, 2024
6e17de2
refactor: update switch to routes for starter
Rhotimee Nov 28, 2024
7301f5c
refactor: migrate playground
Rhotimee Nov 28, 2024
bbec0ab
refactor: remove unnecessady hook
Rhotimee Nov 28, 2024
1f85a7a
refactor: migrate visual testing app
Rhotimee Nov 28, 2024
358119a
refactor: migrate website-components-playground
Rhotimee Nov 28, 2024
fd6cacb
refactor: remove left over @types/react-router-dom and @types/react-r…
Rhotimee Nov 28, 2024
a09b3b2
refactor: remove unnecessary exact prop
Rhotimee Nov 28, 2024
9e739ed
refactor: replace useNavigate with useHstory left over
Rhotimee Nov 28, 2024
9425026
refactor: progress on router migration
CarlosCortizasCT Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions application-templates/starter-typescript/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,6 @@
"@types/jest": "^29.5.4",
"@types/react": "^17.0.80",
"@types/react-dom": "^17.0.19",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"@types/testing-library__jest-dom": "^5.14.9",
"eslint": "8.57.0",
"eslint-formatter-pretty": "4.1.0",
Expand All @@ -89,7 +87,7 @@
"react-dom": "17.0.2",
"react-intl": "^6.4.7",
"react-redux": "7.2.9",
"react-router-dom": "5.3.4",
"react-router-dom": "6",
"redux": "4.2.1",
"typescript": "5.0.4"
},
Expand All @@ -99,8 +97,6 @@
"@types/eslint": "<9",
"@types/react": "<18",
"@types/react-dom": "<18",
"@types/react-router": "<6",
"@types/react-router-dom": "<6",
"headers-polyfill": "3.2.5",
"nwsapi": "2.2.7"
}
Expand Down
2 changes: 1 addition & 1 deletion application-templates/starter-typescript/src/components/channel-details/channel-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ type TChannelDetailsProps = {
const ChannelDetails = (props: TChannelDetailsProps) => {
const intl = useIntl();
const params = useParams<{ id: string }>();
const { loading, error, channel } = useChannelDetailsFetcher(params.id);
const { loading, error, channel } = useChannelDetailsFetcher(params.id!);
const { dataLocale, projectLanguages } = useApplicationContext((context) => ({
dataLocale: context.dataLocale ?? '',
projectLanguages: context.project?.languages ?? [],
Expand Down
22 changes: 12 additions & 10 deletions application-templates/starter-typescript/src/components/channels/channels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { useIntl } from 'react-intl';
import {
Link as RouterLink,
Switch,
useHistory,
useRouteMatch,
Routes,
useNavigate,
useResolvedPath,
} from 'react-router-dom';
import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
Expand Down Expand Up @@ -43,8 +43,10 @@

const Channels = (props: TChannelsProps) => {
const intl = useIntl();
const match = useRouteMatch();
const { push } = useHistory();
const resolvedPath = useResolvedPath('');
const basePath = resolvedPath.pathname;

const navigate = useNavigate();
const { page, perPage } = usePaginationState();
const tableSorting = useDataTableSortingState({ key: 'key', order: 'asc' });
const { dataLocale, projectLanguages } = useApplicationContext((context) => ({
Expand Down Expand Up @@ -118,7 +120,7 @@
sortedBy={tableSorting.value.key}
sortDirection={tableSorting.value.order}
onSortChange={tableSorting.onChange}
onRowClick={(row) => push(`${match.url}/${row.id}`)}
onRowClick={(row) => navigate(`${basePath}/${row.id}`)}
/>
<Pagination
page={page.value}
Expand All @@ -127,11 +129,11 @@
onPerPageChange={perPage.onChange}
totalItems={channelsPaginatedResult.total}
/>
<Switch>
<SuspendedRoute path={`${match.url}/:id`}>
<ChannelDetails onClose={() => push(`${match.url}`)} />
<Routes>
<SuspendedRoute path={`${basePath}/:id`}>

Check failure on line 133 in application-templates/starter-typescript/src/components/channels/channels.tsx

View workflow job for this annotation

GitHub Actions / test_custom_app_starter_ts_template 

Type '{ children: Element; path: string; }' is not assignable to type 'IntrinsicAttributes & { children: ReactNode; }'.
<ChannelDetails onClose={() => navigate(basePath)} />
</SuspendedRoute>
</Switch>
</Routes>
</Spacings.Stack>
) : null}
</Spacings.Stack>
Expand Down
5 changes: 2 additions & 3 deletions application-templates/starter-typescript/src/components/welcome/welcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { ReactNode } from 'react';
import { useRouteMatch, Link as RouterLink } from 'react-router-dom';
import { Link as RouterLink } from 'react-router-dom';
import { useIntl } from 'react-intl';
import Constraints from '@commercetools-uikit/constraints';
import Grid from '@commercetools-uikit/grid';
Expand Down Expand Up @@ -65,7 +65,6 @@ const InfoCard = (props: TInfoCardProps) => (
InfoCard.displayName = 'InfoCard';

const Welcome = () => {
const match = useRouteMatch();
const intl = useIntl();

return (
Expand Down Expand Up @@ -105,7 +104,7 @@ const Welcome = () => {
<InfoCard
title={intl.formatMessage(messages.cardChannelsTitle)}
content={intl.formatMessage(messages.cardChannelsContent)}
linkTo={`${match.url}/channels`}
linkTo={'/channels'}
/>
</Grid>
</Spacings.Stack>
Expand Down
16 changes: 5 additions & 11 deletions application-templates/starter-typescript/src/routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { ReactNode } from 'react';
import { Switch, Route, useRouteMatch } from 'react-router-dom';
import { Routes, Route } from 'react-router-dom';
import Spacings from '@commercetools-uikit/spacings';
import Channels from './components/channels';
import Welcome from './components/welcome';
Expand All @@ -8,8 +8,6 @@ type ApplicationRoutesProps = {
children?: ReactNode;
};
const ApplicationRoutes = (_props: ApplicationRoutesProps) => {
const match = useRouteMatch();

/**
* When using routes, there is a good chance that you might want to
* restrict the access to a certain route based on the user permissions.
Expand All @@ -23,14 +21,10 @@ const ApplicationRoutes = (_props: ApplicationRoutesProps) => {

return (
<Spacings.Inset scale="l">
<Switch>
<Route path={`${match.path}/channels`}>
<Channels linkToWelcome={match.url} />
</Route>
<Route>
<Welcome />
</Route>
</Switch>
<Routes>
<Route path={'/channels'} element={<Channels linkToWelcome={'/'} />} />
<Route element={<Welcome />} />
</Routes>
</Spacings.Inset>
);
};
Expand Down
6 changes: 1 addition & 5 deletions application-templates/starter/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,6 @@
"@types/jest": "^29.5.4",
"@types/react": "^17.0.80",
"@types/react-dom": "^17.0.19",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"@types/testing-library__jest-dom": "^5.14.9",
"eslint": "8.57.0",
"eslint-formatter-pretty": "4.1.0",
Expand All @@ -88,7 +86,7 @@
"react-dom": "17.0.2",
"react-intl": "^6.4.7",
"react-redux": "7.2.9",
"react-router-dom": "5.3.4",
"react-router-dom": "6",
"redux": "4.2.1"
},
"resolutions": {
Expand All @@ -97,8 +95,6 @@
"@types/eslint": "<9",
"@types/react": "<18",
"@types/react-dom": "<18",
"@types/react-router": "<6",
"@types/react-router-dom": "<6",
"headers-polyfill": "3.2.5",
"nwsapi": "2.2.7"
}
Expand Down
22 changes: 12 additions & 10 deletions application-templates/starter/src/components/channels/channels.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import {
Link as RouterLink,
Switch,
useHistory,
useRouteMatch,
Routes,
useNavigate,
useResolvedPath,
} from 'react-router-dom';
import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
Expand Down Expand Up @@ -58,8 +58,10 @@ const itemRenderer = (item, column, dataLocale, projectLanguages) => {

const Channels = (props) => {
const intl = useIntl();
const match = useRouteMatch();
const { push } = useHistory();
const resolvedPath = useResolvedPath();
const basePath = resolvedPath.pathname;

const navigate = useNavigate();
const { page, perPage } = usePaginationState();
const tableSorting = useDataTableSortingState({ key: 'key', order: 'asc' });
const { dataLocale, projectLanguages } = useApplicationContext((context) => ({
Expand Down Expand Up @@ -112,7 +114,7 @@ const Channels = (props) => {
sortedBy={tableSorting.value.key}
sortDirection={tableSorting.value.order}
onSortChange={tableSorting.onChange}
onRowClick={(row) => push(`${match.url}/${row.id}`)}
onRowClick={(row) => navigate(`${basePath}/${row.id}`)}
/>
<Pagination
page={page.value}
Expand All @@ -121,11 +123,11 @@ const Channels = (props) => {
onPerPageChange={perPage.onChange}
totalItems={channelsPaginatedResult.total}
/>
<Switch>
<SuspendedRoute path={`${match.path}/:id`}>
<ChannelDetails onClose={() => push(`${match.url}`)} />
<Routes>
<SuspendedRoute path={`${basePath}/:id`}>
<ChannelDetails onClose={() => navigate(`${basePath}`)} />
</SuspendedRoute>
</Switch>
</Routes>
</Spacings.Stack>
) : null}
</Spacings.Stack>
Expand Down
5 changes: 2 additions & 3 deletions application-templates/starter/src/components/welcome/welcome.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import { useRouteMatch, Link as RouterLink } from 'react-router-dom';
import { Link as RouterLink } from 'react-router-dom';
import { useIntl } from 'react-intl';
import Constraints from '@commercetools-uikit/constraints';
import Grid from '@commercetools-uikit/grid';
Expand Down Expand Up @@ -63,7 +63,6 @@ InfoCard.propTypes = {
};

const Welcome = () => {
const match = useRouteMatch();
const intl = useIntl();

return (
Expand Down Expand Up @@ -103,7 +102,7 @@ const Welcome = () => {
<InfoCard
title={intl.formatMessage(messages.cardChannelsTitle)}
content={intl.formatMessage(messages.cardChannelsContent)}
linkTo={`${match.url}/channels`}
linkTo={'/channels'}
/>
</Grid>
</Spacings.Stack>
Expand Down
12 changes: 12 additions & 0 deletions application-templates/starter/src/components/welcome/welcome.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,15 @@ it('should render welcome page', async () => {
renderApp();
await screen.findByText('Develop applications for the Merchant Center');
});

/*
Overall architecture

Relationship between application permissions and OAuth scopes

What's inside the mcAccessToken?

What are data fences?

What are implied permissions?
*/
16 changes: 5 additions & 11 deletions application-templates/starter/src/routes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { Switch, Route, useRouteMatch } from 'react-router-dom';
import { Routes, Route } from 'react-router-dom';
import Spacings from '@commercetools-uikit/spacings';
import Channels from './components/channels';
import Welcome from './components/welcome';

const ApplicationRoutes = () => {
const match = useRouteMatch();

/**
* When using routes, there is a good chance that you might want to
* restrict the access to a certain route based on the user permissions.
Expand All @@ -19,14 +17,10 @@ const ApplicationRoutes = () => {

return (
<Spacings.Inset scale="l">
<Switch>
<Route path={`${match.path}/channels`}>
<Channels linkToWelcome={match.url} />
</Route>
<Route>
<Welcome />
</Route>
</Switch>
<Routes>
<Route path={`/channels`} element={<Channels linkToWelcome={'/'} />} />
<Route element={<Welcome />} />
</Routes>
</Spacings.Inset>
);
};
Expand Down
6 changes: 1 addition & 5 deletions custom-views-templates/starter-typescript/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,6 @@
"@types/jest": "^29.5.4",
"@types/react": "^17.0.80",
"@types/react-dom": "^17.0.19",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"@types/testing-library__jest-dom": "^5.14.9",
"eslint": "8.57.0",
"eslint-formatter-pretty": "4.1.0",
Expand All @@ -89,7 +87,7 @@
"react-dom": "17.0.2",
"react-intl": "^6.4.7",
"react-redux": "7.2.9",
"react-router-dom": "5.3.4",
"react-router-dom": "6",
"redux": "4.2.1",
"typescript": "5.0.4"
},
Expand All @@ -99,8 +97,6 @@
"@types/eslint": "<9",
"@types/react": "<18",
"@types/react-dom": "<18",
"@types/react-router": "<6",
"@types/react-router-dom": "<6",
"headers-polyfill": "3.2.5",
"nwsapi": "2.2.7"
}
Expand Down
6 changes: 1 addition & 5 deletions custom-views-templates/starter/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,6 @@
"@types/jest": "^29.5.4",
"@types/react": "^17.0.80",
"@types/react-dom": "^17.0.19",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"@types/testing-library__jest-dom": "^5.14.9",
"eslint": "8.57.0",
"eslint-formatter-pretty": "4.1.0",
Expand All @@ -88,7 +86,7 @@
"react-dom": "17.0.2",
"react-intl": "^6.4.7",
"react-redux": "7.2.9",
"react-router-dom": "5.3.4",
"react-router-dom": "6",
"redux": "4.2.1"
},
"resolutions": {
Expand All @@ -97,8 +95,6 @@
"@types/eslint": "<9",
"@types/react": "<18",
"@types/react-dom": "<18",
"@types/react-router": "<6",
"@types/react-router-dom": "<6",
"headers-polyfill": "3.2.5",
"nwsapi": "2.2.7"
}
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,6 @@
"@types/eslint": "^8.2.2",
"@types/react": "^17.0.56",
"@types/react-dom": "17.0.25",
"@types/react-router": "5.1.20",
"@typescript-eslint/eslint-plugin": "^5.52.0",
"@typescript-eslint/parser": "^5.52.0"
},
Expand Down
5 changes: 2 additions & 3 deletions packages/application-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@
"@types/react": "^17.0.80",
"@types/react-dom": "^17.0.19",
"@types/react-modal": "^3.16.0",
"@types/react-router-dom": "^5.3.3",
"history": "4.10.1",
"lodash": "4.17.21",
"prop-types": "15.8.1",
Expand All @@ -85,12 +84,12 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-intl": "^6.4.7",
"react-router-dom": "5.3.4"
"react-router-dom": "6"
},
"peerDependencies": {
"react": "17.x",
"react-dom": "17.x",
"react-intl": "6.x",
"react-router-dom": "5.x"
"react-router-dom": "6"
}
}
Loading
Loading