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

refactor: Use app key instead of name for new connection url

Browse Source
This commit is contained in:
Faruk AYDIN
2022-11-05 21:34:58 +01:00
parent 20b87cb000
commit 74bbbf55f8
1 changed files with 48 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
packages/web/src/components/AddNewAppConnection/index.tsx
View File

@@ -31,13 +31,15 @@ function createConnectionOrFlow(appKey: string, supportsConnections = false) {
} }
return URLS.APP_ADD_CONNECTION(appKey); return URLS.APP_ADD_CONNECTION(appKey);
}; }
type AddNewAppConnectionProps = { type AddNewAppConnectionProps = {
onClose: () => void; onClose: () => void;
}; };
export default function AddNewAppConnection(props: AddNewAppConnectionProps): React.ReactElement { export default function AddNewAppConnection(
props: AddNewAppConnectionProps
): React.ReactElement {
const { onClose } = props; const { onClose } = props;
const theme = useTheme(); const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm')); const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm'));
@@ -45,31 +47,34 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
const [appName, setAppName] = React.useState<string | null>(null); const [appName, setAppName] = React.useState<string | null>(null);
const [loading, setLoading] = React.useState(false); const [loading, setLoading] = React.useState(false);
const [getApps, { data }] = useLazyQuery(GET_APPS, { const [getApps, { data }] = useLazyQuery(GET_APPS, {
onCompleted: () => { setLoading(false); }, onCompleted: () => {
setLoading(false);
},
}); });
const fetchData = React.useMemo( const fetchData = React.useMemo(
() => debounce((name) => getApps({ variables: { name }}), 300), () => debounce((name) => getApps({ variables: { name } }), 300),
[getApps] [getApps]
); );
React.useEffect(function fetchAppsOnAppNameChange() { React.useEffect(
setLoading(true); function fetchAppsOnAppNameChange() {
setLoading(true);
fetchData(appName); fetchData(appName);
}, [fetchData, appName]); },
[fetchData, appName]
);
React.useEffect(function cancelDebounceOnUnmount() { React.useEffect(function cancelDebounceOnUnmount() {
return () => { return () => {
fetchData.cancel(); fetchData.cancel();
} };
}, []); }, []);
return ( return (
<Dialog open={true} onClose={onClose} maxWidth="sm" fullWidth> <Dialog open={true} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle> <DialogTitle>{formatMessage('apps.addNewAppConnection')}</DialogTitle>
{formatMessage('apps.addNewAppConnection')}
</DialogTitle>
<DialogContent> <DialogContent>
<FormControl <FormControl
@@ -77,9 +82,7 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
fullWidth fullWidth
size={matchSmallScreens ? 'small' : 'medium'} size={matchSmallScreens ? 'small' : 'medium'}
> >
<InputLabel <InputLabel htmlFor="search-app">
htmlFor="search-app"
>
{formatMessage('apps.searchApp')} {formatMessage('apps.searchApp')}
</InputLabel> </InputLabel>
@@ -91,7 +94,9 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
onChange={(event) => setAppName(event.target.value)} onChange={(event) => setAppName(event.target.value)}
endAdornment={ endAdornment={
<InputAdornment position="end"> <InputAdornment position="end">
<SearchIcon sx={{ color: (theme) => theme.palette.primary.main }} /> <SearchIcon
sx={{ color: (theme) => theme.palette.primary.main }}
/>
</InputAdornment> </InputAdornment>
} }
label={formatMessage('apps.searchApp')} label={formatMessage('apps.searchApp')}
@@ -100,21 +105,36 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
</FormControl> </FormControl>
<List sx={{ pt: 2, width: '100%' }}> <List sx={{ pt: 2, width: '100%' }}>
{loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />} {loading && (
<CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
)}
{!loading && data?.getApps?.map((app: IApp) => ( {!loading &&
<ListItem disablePadding key={app.name} data-test="app-list-item"> data?.getApps?.map((app: IApp) => (
<ListItemButton component={Link} to={createConnectionOrFlow(app.name.toLowerCase(), app.supportsConnections)}> <ListItem disablePadding key={app.name} data-test="app-list-item">
<ListItemIcon sx={{ minWidth: 74 }}> <ListItemButton
<AppIcon color="transparent" url={app.iconUrl} name={app.name} /> component={Link}
</ListItemIcon> to={createConnectionOrFlow(app.key, app.supportsConnections)}
>
<ListItemIcon sx={{ minWidth: 74 }}>
<AppIcon
color="transparent"
url={app.iconUrl}
name={app.name}
/>
</ListItemIcon>
<ListItemText primary={app.name} primaryTypographyProps={{ sx: { color: (theme) => theme.palette.text.primary } }} /> <ListItemText
</ListItemButton> primary={app.name}
</ListItem> primaryTypographyProps={{
))} sx: { color: (theme) => theme.palette.text.primary },
}}
/>
</ListItemButton>
</ListItem>
))}
</List> </List>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
}; }