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

60
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);
};
}
type AddNewAppConnectionProps = {
onClose: () => void;
};
export default function AddNewAppConnection(props: AddNewAppConnectionProps): React.ReactElement {
export default function AddNewAppConnection(
props: AddNewAppConnectionProps
): React.ReactElement {
const { onClose } = props;
const theme = useTheme();
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 [loading, setLoading] = React.useState(false);
const [getApps, { data }] = useLazyQuery(GET_APPS, {
onCompleted: () => { setLoading(false); },
onCompleted: () => {
setLoading(false);
},
});
const fetchData = React.useMemo(
() => debounce((name) => getApps({ variables: { name }}), 300),
() => debounce((name) => getApps({ variables: { name } }), 300),
[getApps]
);
React.useEffect(function fetchAppsOnAppNameChange() {
React.useEffect(
function fetchAppsOnAppNameChange() {
setLoading(true);
fetchData(appName);
}, [fetchData, appName]);
},
[fetchData, appName]
);
React.useEffect(function cancelDebounceOnUnmount() {
return () => {
fetchData.cancel();
}
};
}, []);
return (
<Dialog open={true} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>
{formatMessage('apps.addNewAppConnection')}
</DialogTitle>
<DialogTitle>{formatMessage('apps.addNewAppConnection')}</DialogTitle>
<DialogContent>
<FormControl
@@ -77,9 +82,7 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
fullWidth
size={matchSmallScreens ? 'small' : 'medium'}
>
<InputLabel
htmlFor="search-app"
>
<InputLabel htmlFor="search-app">
{formatMessage('apps.searchApp')}
</InputLabel>
@@ -91,7 +94,9 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
onChange={(event) => setAppName(event.target.value)}
endAdornment={
<InputAdornment position="end">
<SearchIcon sx={{ color: (theme) => theme.palette.primary.main }} />
<SearchIcon
sx={{ color: (theme) => theme.palette.primary.main }}
/>
</InputAdornment>
}
label={formatMessage('apps.searchApp')}
@@ -100,16 +105,31 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
</FormControl>
<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 &&
data?.getApps?.map((app: IApp) => (
<ListItem disablePadding key={app.name} data-test="app-list-item">
<ListItemButton component={Link} to={createConnectionOrFlow(app.name.toLowerCase(), app.supportsConnections)}>
<ListItemButton
component={Link}
to={createConnectionOrFlow(app.key, app.supportsConnections)}
>
<ListItemIcon sx={{ minWidth: 74 }}>
<AppIcon color="transparent" url={app.iconUrl} name={app.name} />
<AppIcon
color="transparent"
url={app.iconUrl}
name={app.name}
/>
</ListItemIcon>
<ListItemText primary={app.name} primaryTypographyProps={{ sx: { color: (theme) => theme.palette.text.primary } }} />
<ListItemText
primary={app.name}
primaryTypographyProps={{
sx: { color: (theme) => theme.palette.text.primary },
}}
/>
</ListItemButton>
</ListItem>
))}
@@ -117,4 +137,4 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
</DialogContent>
</Dialog>
);
};
}