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

3
packages/web/package.json
View File

@@ -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"

2
packages/web/src/components/AddAppConnection/style.ts
View File

@@ -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 }) => ({

6
packages/web/src/components/Drawer/index.tsx
View File

@@ -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}
/>

5
packages/web/src/components/Drawer/style.ts
View File

@@ -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 => ({

2
packages/web/src/components/Form/index.tsx
View File

@@ -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;

2
packages/web/src/components/InputCreator/index.tsx
View File

@@ -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';

10
packages/web/src/components/ListItemLink/index.tsx
View File

@@ -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>
);

2
packages/web/src/components/Router/index.tsx
View File

@@ -1,5 +1,5 @@
import {
BrowserRouter as Router,
} from "react-router-dom";
} from 'react-router-dom';
export default Router;

6
packages/web/src/components/TextField/index.tsx
View File

@@ -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
packages/web/src/config/urls.ts
View File

@@ -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}`;

4
packages/web/src/graphql/link.ts
View File

@@ -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;

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>
);
};

30
packages/web/src/routes.tsx
View File

@@ -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>
);

2
packages/web/src/styles/theme.ts
View File

@@ -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,
}
},

4229
yarn.lock
View File

File diff suppressed because it is too large Load Diff