groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: upgrade to react-router@6

Browse Source
This commit is contained in:
Ali BARIN
2021-12-11 20:20:40 +01:00
committed by Ömer Faruk Aydın
parent 5c60738f25
commit 39eafca5ec
18 changed files with 207 additions and 4196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/web/src/pages/Application/index.tsx
View File

@@ -1,5 +1,5 @@
import { useQuery } from '@apollo/client';
import { Link, Route, Redirect, Switch, RouteComponentProps, useParams, useRouteMatch, useHistory } from 'react-router-dom';
import { Link, Route, Navigate, Routes, useParams, useMatch, useNavigate } from 'react-router-dom';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
@@ -24,17 +24,31 @@ type ApplicationParams = {
connectionId?: string;
};
const ReconnectConnection = (props: any) => {
const { application, onClose } = props;
const { connectionId } = useParams() as ApplicationParams;
return (
<AddAppConnection
onClose={onClose}
application={application}
connectionId={connectionId}
/>
);
}
export default function Application() {
const formatMessage = useFormatMessage();
const routeMatch = useRouteMatch([URLS.APP_CONNECTIONS_PATTERN, URLS.APP_FLOWS_PATTERN, URLS.APP_PATTERN]);
const { appKey } = useParams<ApplicationParams>();
const history = useHistory();
const connectionsPathMatch = useMatch({ path: URLS.APP_CONNECTIONS_PATTERN, end: false });
const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false });
const { appKey } = useParams() as ApplicationParams;
const navigate = useNavigate();
const { data } = useQuery(GET_APP, { variables: { key: appKey } });
const goToApplicationPage = () => navigate('connections');
const app = data?.getApp || {};
const goToApplicationPage = () => history.push(URLS.APP(appKey));
return (
<>
<Box sx={{ py: 3 }}>
@@ -62,7 +76,7 @@ export default function Application() {
<Grid container>
<Grid item xs>
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
<Tabs value={routeMatch?.path}>
<Tabs value={connectionsPathMatch?.pattern?.path || flowsPathMatch?.pattern?.path}>
<Tab
label={formatMessage('app.connections')}
to={URLS.APP_CONNECTIONS(appKey)}
@@ -79,27 +93,34 @@ export default function Application() {
</Tabs>
</Box>
<Switch>
<Route path={URLS.APP_FLOWS_PATTERN}>
<AppFlows appKey={appKey} />
</Route>
<Routes>
<Route path={`${URLS.FLOWS}/*`} element={<AppFlows appKey={appKey} />} />
<Route path={URLS.APP_CONNECTIONS_PATTERN}>
<AppConnections appKey={appKey} />
</Route>
<Route path={`${URLS.CONNECTIONS}/*`} element={<AppConnections appKey={appKey} />} />
<Route exact path={URLS.APP_PATTERN}>
<Redirect to={URLS.APP_CONNECTIONS(appKey)} />
</Route>
</Switch>
<Route path="/" element={<Navigate to={URLS.APP_CONNECTIONS(appKey)} />} />
</Routes>
</Grid>
</Grid>
</Container>
</Box>
<Route exact path={[URLS.APP_RECONNECT_CONNECTION_PATTERN, URLS.APP_ADD_CONNECTION_PATTERN]} render={({ match }: RouteComponentProps<ApplicationParams>) => (
<AddAppConnection onClose={goToApplicationPage} application={app} connectionId={match.params.connectionId} />
)} />
<Routes>
<Route
path="/connections/add"
element={
<AddAppConnection
onClose={goToApplicationPage}
application={app}
/>
}
/>
<Route
path="/connections/:connectionId/reconnect"
element={<ReconnectConnection application={app} onClose={goToApplicationPage} />}
/>
</Routes>
</>
);
};

14
packages/web/src/pages/Applications/index.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useState } from 'react';
import { Link, Route, useHistory } from 'react-router-dom';
import { Link, Routes, Route, useNavigate } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
@@ -16,7 +16,7 @@ import * as URLS from 'config/urls';
import type { App } from 'types/app';
export default function Applications() {
const history = useHistory();
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [appName, setAppName] = useState(null);
const { data } = useQuery(GET_CONNECTED_APPS, { variables: {name: appName } });
@@ -26,8 +26,8 @@ export default function Applications() {
}, []);
const goToApps = useCallback(() => {
history.push(URLS.APPS);
}, [history]);
navigate(URLS.APPS);
}, [navigate]);
return (
<Box sx={{ py: 3 }}>
@@ -61,9 +61,9 @@ export default function Applications() {
<AppRow key={app.name} application={app} />
))}
<Route exact path={URLS.NEW_APP_CONNECTION}>
<AddNewAppConnection onClose={goToApps} />
</Route>
<Routes>
<Route path="/new" element={<AddNewAppConnection onClose={goToApps} />} />
</Routes>
</Container>
</Box>
);

11
packages/web/src/pages/Explore/index.tsx
View File

@@ -1,3 +1,12 @@
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
export default function Explore() {
return (<>Explore</>);
return (
<Box sx={{ py: 3 }}>
<Container>
Explore
</Container>
</Box>
);
};

11
packages/web/src/pages/Flows/index.tsx
View File

@@ -1,3 +1,12 @@
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
export default function Flows() {
return (<>Flows</>);
return (
<Box sx={{ py: 3 }}>
<Container>
Flows
</Container>
</Box>
);
};