chore: upgrade to react-router@6
This commit is contained in:

committed by
Ömer Faruk Aydın

parent
5c60738f25
commit
39eafca5ec
@@ -16,7 +16,6 @@
|
||||
"@types/node": "^12.0.0",
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"@types/react-router-dom": "^5.3.0",
|
||||
"clipboard-copy": "^4.0.1",
|
||||
"graphql": "^15.6.0",
|
||||
"lodash.template": "^4.5.0",
|
||||
@@ -25,7 +24,7 @@
|
||||
"react-dom": "^17.0.2",
|
||||
"react-hook-form": "^7.17.2",
|
||||
"react-intl": "^5.20.12",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-router-dom": "^6.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"typescript": "^4.1.2",
|
||||
"web-vitals": "^1.0.1"
|
||||
|
@@ -1,4 +1,4 @@
|
||||
import { styled } from "@mui/material/styles";
|
||||
import { styled } from '@mui/material/styles';
|
||||
import BaseForm from 'components/Form';
|
||||
|
||||
export const Form = styled(BaseForm)(({ theme }) => ({
|
||||
|
@@ -35,19 +35,19 @@ export default function Drawer(props: SwipeableDrawerProps) {
|
||||
|
||||
<List>
|
||||
<ListItemLink
|
||||
icon={<SwapCallsIcon htmlColor={theme.palette.primary.dark} />}
|
||||
icon={<SwapCallsIcon htmlColor={theme.palette.primary.main} />}
|
||||
primary={formatMessage('drawer.flows')}
|
||||
to={URLS.FLOWS}
|
||||
/>
|
||||
|
||||
<ListItemLink
|
||||
icon={<AppsIcon htmlColor={theme.palette.primary.dark} />}
|
||||
icon={<AppsIcon htmlColor={theme.palette.primary.main} />}
|
||||
primary={formatMessage('drawer.apps')}
|
||||
to={URLS.APPS}
|
||||
/>
|
||||
|
||||
<ListItemLink
|
||||
icon={<ExploreIcon htmlColor={theme.palette.primary.dark} />}
|
||||
icon={<ExploreIcon htmlColor={theme.palette.primary.main} />}
|
||||
primary={formatMessage('drawer.explore')}
|
||||
to={URLS.EXPLORE}
|
||||
/>
|
||||
|
@@ -4,12 +4,15 @@ import MuiSwipeableDrawer from '@mui/material/SwipeableDrawer';
|
||||
const drawerWidth = 300;
|
||||
|
||||
const openedMixin = (theme: Theme): CSSObject => ({
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
overflowX: 'hidden',
|
||||
width: '100vw',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: drawerWidth,
|
||||
},
|
||||
});
|
||||
|
||||
const closedMixin = (theme: Theme): CSSObject => ({
|
||||
|
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { FormProvider, useForm, FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
|
||||
import { FormProvider, useForm, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
|
||||
|
||||
type FormProps = {
|
||||
children: React.ReactNode;
|
||||
|
@@ -1,5 +1,5 @@
|
||||
import type { AppFields } from 'types/app';
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
|
||||
import TextField from 'components/TextField';
|
||||
|
||||
|
@@ -1,5 +1,6 @@
|
||||
import { useMemo, forwardRef } from 'react';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import { useMatch } from 'react-router-dom';
|
||||
import ListItem from '@mui/material/ListItemButton';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import { Link, LinkProps } from 'react-router-dom';
|
||||
@@ -12,6 +13,7 @@ type ListItemLinkProps = {
|
||||
|
||||
export default function ListItemLink(props: ListItemLinkProps) {
|
||||
const { icon, primary, to } = props;
|
||||
const selected = useMatch({ path: to, end: false });
|
||||
|
||||
const CustomLink = useMemo(
|
||||
() =>
|
||||
@@ -26,9 +28,9 @@ export default function ListItemLink(props: ListItemLinkProps) {
|
||||
|
||||
return (
|
||||
<li>
|
||||
<ListItem button component={CustomLink} sx={{ pl: { xs: 2, sm: 3 } }}>
|
||||
<ListItemIcon>{icon}</ListItemIcon>
|
||||
<ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1' }} />
|
||||
<ListItem component={CustomLink} sx={{ pl: { xs: 2, sm: 3 } }} selected={!!selected}>
|
||||
<ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
|
||||
<ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1', }} />
|
||||
</ListItem>
|
||||
</li>
|
||||
);
|
||||
|
@@ -1,5 +1,5 @@
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
} from "react-router-dom";
|
||||
} from 'react-router-dom';
|
||||
|
||||
export default Router;
|
||||
|
@@ -1,6 +1,6 @@
|
||||
import { useRef } from "react";
|
||||
import { Controller, Control, FieldValues } from "react-hook-form";
|
||||
import MuiTextField, { TextFieldProps as MuiTextFieldProps } from "@mui/material/TextField";
|
||||
import { useRef } from 'react';
|
||||
import { Controller, Control, FieldValues } from 'react-hook-form';
|
||||
import MuiTextField, { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
|
@@ -1,5 +1,6 @@
|
||||
export const DASHBOARD = '/dashboard';
|
||||
export const APPS = '/apps';
|
||||
export const CONNECTIONS = '/connections';
|
||||
export const FLOWS = '/flows';
|
||||
export const EXPLORE = '/explore';
|
||||
export const APP = (appKey: string) => `/app/${appKey}`;
|
||||
|
@@ -1,5 +1,5 @@
|
||||
import { HttpLink, from } from "@apollo/client";
|
||||
import { onError } from "@apollo/client/link/error";
|
||||
import { HttpLink, from } from '@apollo/client';
|
||||
import { onError } from '@apollo/client/link/error';
|
||||
|
||||
type CreateLinkOptions = {
|
||||
uri: string;
|
||||
|
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@@ -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>
|
||||
);
|
||||
|
@@ -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>
|
||||
);
|
||||
};
|
||||
|
@@ -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>
|
||||
);
|
||||
};
|
||||
|
@@ -1,4 +1,4 @@
|
||||
import { Route, Switch, Redirect } from "react-router";
|
||||
import { Route, Routes, Navigate } from 'react-router-dom';
|
||||
import Applications from 'pages/Applications';
|
||||
import Application from 'pages/Application';
|
||||
import Flows from 'pages/Flows';
|
||||
@@ -6,29 +6,17 @@ import Explore from 'pages/Explore';
|
||||
import * as URLS from 'config/urls';
|
||||
|
||||
export default (
|
||||
<Switch>
|
||||
<Route path={URLS.FLOWS}>
|
||||
<Flows />
|
||||
</Route>
|
||||
<Routes>
|
||||
<Route path={URLS.FLOWS} element={<Flows />} />
|
||||
|
||||
<Route path={[URLS.APPS, URLS.NEW_APP_CONNECTION]}>
|
||||
<Applications />
|
||||
</Route>
|
||||
<Route path={`${URLS.APPS}/*`} element={<Applications />} />
|
||||
|
||||
<Route path={URLS.EXPLORE}>
|
||||
<Explore />
|
||||
</Route>
|
||||
<Route path={URLS.EXPLORE} element={<Explore />} />
|
||||
|
||||
<Route path={URLS.APP_PATTERN}>
|
||||
<Application />
|
||||
</Route>
|
||||
<Route path={`${URLS.APP_PATTERN}/*`} element={<Application />} />
|
||||
|
||||
<Route exact path="/">
|
||||
<Redirect to={URLS.FLOWS} />
|
||||
</Route>
|
||||
<Route path="/" element={<Navigate to={URLS.FLOWS} />} />
|
||||
|
||||
<Route>
|
||||
404
|
||||
</Route>
|
||||
</Switch>
|
||||
<Route element={<div>404</div>} />
|
||||
</Routes>
|
||||
);
|
||||
|
@@ -190,7 +190,7 @@ const extendedTheme = createTheme({
|
||||
MuiAppBar: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
background: referenceTheme.palette.primary.main,
|
||||
background: referenceTheme.palette.primary.dark,
|
||||
zIndex: referenceTheme.zIndex.drawer + 1,
|
||||
}
|
||||
},
|
||||
|
Reference in New Issue
Block a user