From c7ff9dc1628eddf6250d15cca536f01c3af82a77 Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Wed, 3 Aug 2022 21:02:53 +0200 Subject: [PATCH 1/2] chore: upgrade @apollo/client to 3.6.9 --- packages/web/package.json | 2 +- yarn.lock | 37 ++++++++++++++++++++++--------------- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/packages/web/package.json b/packages/web/package.json index bb4bfcea..0afe3caf 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "description": "> TODO: description", "dependencies": { - "@apollo/client": "^3.4.15", + "@apollo/client": "^3.6.9", "@automatisch/types": "0.1.0", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", diff --git a/yarn.lock b/yarn.lock index 977ec379..f640888d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -139,23 +139,23 @@ jsonpointer "^5.0.0" leven "^3.1.0" -"@apollo/client@^3.4.15": - version "3.5.7" - resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.5.7.tgz#38051c0a414ebf784319fa5131faa19df24fa9ec" - integrity sha512-HSLqTGp3sp/PVIWYLLr5v3fjQSr6Fxg6Z5RQj5Q9ALyseIVudD8GZk1jHplaUblTFMBueXGw3Z6DXObuVAr3tw== +"@apollo/client@^3.6.9": + version "3.6.9" + resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.6.9.tgz#ad0ee2e3a3c92dbed4acd6917b6158a492739d94" + integrity sha512-Y1yu8qa2YeaCUBVuw08x8NHenFi0sw2I3KCu7Kw9mDSu86HmmtHJkCAifKVrN2iPgDTW/BbP3EpSV8/EQCcxZA== dependencies: - "@graphql-typed-document-node/core" "^3.0.0" + "@graphql-typed-document-node/core" "^3.1.1" "@wry/context" "^0.6.0" "@wry/equality" "^0.5.0" "@wry/trie" "^0.3.0" - graphql-tag "^2.12.3" + graphql-tag "^2.12.6" hoist-non-react-statics "^3.3.2" optimism "^0.16.1" prop-types "^15.7.2" symbol-observable "^4.0.0" - ts-invariant "^0.9.4" + ts-invariant "^0.10.3" tslib "^2.3.0" - zen-observable-ts "^1.2.0" + zen-observable-ts "^1.2.5" "@apollo/client@~3.2.5 || ~3.3.0 || ~3.4.0": version "3.4.17" @@ -2242,7 +2242,7 @@ dependencies: tslib "~2.3.0" -"@graphql-typed-document-node/core@^3.0.0": +"@graphql-typed-document-node/core@^3.0.0", "@graphql-typed-document-node/core@^3.1.1": version "3.1.1" resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052" integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg== @@ -10298,7 +10298,7 @@ graphql-shield@^7.5.0: object-hash "^2.0.3" yup "^0.31.0" -graphql-tag@^2.12.3: +graphql-tag@^2.12.3, graphql-tag@^2.12.6: version "2.12.6" resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1" integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg== @@ -18504,7 +18504,14 @@ ts-custom-error@^3.2.0: resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.2.0.tgz#ff8f80a3812bab9dc448536312da52dce1b720fb" integrity sha512-cBvC2QjtvJ9JfWLvstVnI45Y46Y5dMxIaG1TDMGAD/R87hpvqFL+7LhvUDhnRCfOnx/xitollFWWvUKKKhbN0A== -ts-invariant@^0.9.0, ts-invariant@^0.9.4: +ts-invariant@^0.10.3: + version "0.10.3" + resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c" + integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ== + dependencies: + tslib "^2.1.0" + +ts-invariant@^0.9.0: version "0.9.4" resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.9.4.tgz#42ac6c791aade267dd9dc65276549df5c5d71cac" integrity sha512-63jtX/ZSwnUNi/WhXjnK8kz4cHHpYS60AnmA6ixz17l7E12a5puCWFlNpkne5Rl0J8TBPVHpGjsj4fxs8ObVLQ== @@ -20131,10 +20138,10 @@ yup@^0.32.11: property-expr "^2.0.4" toposort "^2.0.2" -zen-observable-ts@^1.2.0: - version "1.2.3" - resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.3.tgz#c2f5ccebe812faf0cfcde547e6004f65b1a6d769" - integrity sha512-hc/TGiPkAWpByykMwDcem3SdUgA4We+0Qb36bItSuJC9xD0XVBZoFHYoadAomDSNf64CG8Ydj0Qb8Od8BUWz5g== +zen-observable-ts@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58" + integrity sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg== dependencies: zen-observable "0.8.15" From df55d9fdd9b9e5626a0c6b23a0c83c71ab04364d Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Wed, 3 Aug 2022 21:03:22 +0200 Subject: [PATCH 2/2] feat: add loading indicator in AddNewAppConnection --- .../components/AddNewAppConnection/index.tsx | 33 ++++++++++++++++--- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/web/src/components/AddNewAppConnection/index.tsx b/packages/web/src/components/AddNewAppConnection/index.tsx index d3bbabc8..ea78f8bf 100644 --- a/packages/web/src/components/AddNewAppConnection/index.tsx +++ b/packages/web/src/components/AddNewAppConnection/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { useQuery } from '@apollo/client'; +import { useLazyQuery } from '@apollo/client'; import { Link } from 'react-router-dom'; +import debounce from 'lodash/debounce'; import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import DialogTitle from '@mui/material/DialogTitle'; @@ -8,6 +9,7 @@ import DialogContent from '@mui/material/DialogContent'; import Dialog from '@mui/material/Dialog'; import SearchIcon from '@mui/icons-material/Search'; import InputAdornment from '@mui/material/InputAdornment'; +import CircularProgress from '@mui/material/CircularProgress'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemButton from '@mui/material/ListItemButton'; @@ -33,7 +35,27 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm')); const formatMessage = useFormatMessage(); const [appName, setAppName] = React.useState(null); - const { data } = useQuery(GET_APPS, { variables: { name: appName } }); + const [loading, setLoading] = React.useState(false); + const [getApps, { data }] = useLazyQuery(GET_APPS, { + onCompleted: () => { setLoading(false); }, + }); + + const fetchData = React.useMemo( + () => debounce((name) => getApps({ variables: { name }}), 300), + [getApps] + ); + + React.useEffect(function fetchAppsOnAppNameChange() { + setLoading(true); + + fetchData(appName); + }, [fetchData, appName]); + + React.useEffect(function cancelDebounceOnUnmount() { + return () => { + fetchData.cancel(); + } + }, []); return ( @@ -57,6 +79,7 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re id="search-app" type="text" fullWidth + autoFocus onChange={(event) => setAppName(event.target.value)} endAdornment={ @@ -67,8 +90,10 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re /> - - {data?.getApps?.map((app: IApp) => ( + + {loading && } + + {!loading && data?.getApps?.map((app: IApp) => (