From a69ac5b63aa16f7b92707f9ef41169e9e62e8260 Mon Sep 17 00:00:00 2001 From: Tomasz Szuba Date: Wed, 17 Aug 2022 15:53:56 +0200 Subject: [PATCH 1/2] [gcalendar] Upgrade `react-query:3` to `@tanstack/react-query:4` Signed-off-by: Tomasz Szuba --- .changeset/rich-melons-compete.md | 5 + plugins/gcalendar/package.json | 2 +- .../CalendarCard/HomePageCalendar.tsx | 2 +- .../gcalendar/src/hooks/useCalendarsQuery.ts | 2 +- plugins/gcalendar/src/hooks/useEventsQuery.ts | 12 +-- yarn.lock | 102 +++++------------- 6 files changed, 39 insertions(+), 86 deletions(-) create mode 100644 .changeset/rich-melons-compete.md diff --git a/.changeset/rich-melons-compete.md b/.changeset/rich-melons-compete.md new file mode 100644 index 0000000000..68297159f7 --- /dev/null +++ b/.changeset/rich-melons-compete.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-gcalendar': patch +--- + +Upgrade `react-query:3` to `@tanstack/react-query:4` diff --git a/plugins/gcalendar/package.json b/plugins/gcalendar/package.json index cc7fdfa61c..6983bfcd8e 100644 --- a/plugins/gcalendar/package.json +++ b/plugins/gcalendar/package.json @@ -30,13 +30,13 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", "@maxim_mazurok/gapi.client.calendar": "^3.0.20220408", + "@tanstack/react-query": "^4.1.3", "classnames": "^2.3.1", "cross-fetch": "^3.1.5", "dompurify": "^2.3.6", "lodash": "^4.17.21", "luxon": "^3.0.0", "material-ui-popup-state": "^1.9.3", - "react-query": "^3.34.16", "react-use": "^17.2.4" }, "peerDependencies": { diff --git a/plugins/gcalendar/src/components/CalendarCard/HomePageCalendar.tsx b/plugins/gcalendar/src/components/CalendarCard/HomePageCalendar.tsx index afe7a0fada..406a4dfca6 100644 --- a/plugins/gcalendar/src/components/CalendarCard/HomePageCalendar.tsx +++ b/plugins/gcalendar/src/components/CalendarCard/HomePageCalendar.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import React from 'react'; -import { QueryClient, QueryClientProvider } from 'react-query'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { CalendarCard } from './CalendarCard'; diff --git a/plugins/gcalendar/src/hooks/useCalendarsQuery.ts b/plugins/gcalendar/src/hooks/useCalendarsQuery.ts index a76142ff09..ab581c5782 100644 --- a/plugins/gcalendar/src/hooks/useCalendarsQuery.ts +++ b/plugins/gcalendar/src/hooks/useCalendarsQuery.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { useQuery } from 'react-query'; +import { useQuery } from '@tanstack/react-query'; import { errorApiRef, useApi } from '@backstage/core-plugin-api'; diff --git a/plugins/gcalendar/src/hooks/useEventsQuery.ts b/plugins/gcalendar/src/hooks/useEventsQuery.ts index 8f8ca68e4f..5dd5fb9b32 100644 --- a/plugins/gcalendar/src/hooks/useEventsQuery.ts +++ b/plugins/gcalendar/src/hooks/useEventsQuery.ts @@ -15,12 +15,11 @@ */ import { compact, unescape } from 'lodash'; import { useMemo } from 'react'; -import { useQueries } from 'react-query'; +import { useQueries } from '@tanstack/react-query'; import { useApi } from '@backstage/core-plugin-api'; -import { gcalendarApiRef } from '../api'; -import { GCalendar, GCalendarEvent } from '../api'; +import { gcalendarApiRef, GCalendar, GCalendarEvent } from '../api'; type Options = { selectedCalendars?: string[]; @@ -41,8 +40,8 @@ export const useEventsQuery = ({ timeZone, }: Options) => { const calendarApi = useApi(gcalendarApiRef); - const eventQueries = useQueries( - selectedCalendars + const eventQueries = useQueries({ + queries: selectedCalendars .filter(id => calendars.find(c => c.id === id)) .map(calendarId => { const calendar = calendars.find(c => c.id === calendarId); @@ -53,6 +52,7 @@ export const useEventsQuery = ({ initialData: [], refetchInterval: 60000, refetchIntervalInBackground: true, + queryFn: async (): Promise => { const data = await calendarApi.getEvents(calendarId, { calendarId, @@ -82,7 +82,7 @@ export const useEventsQuery = ({ }, }; }), - ); + }); const events = useMemo( () => compact(eventQueries.map(({ data }) => data).flat()), diff --git a/yarn.lock b/yarn.lock index 6f8286da14..24471f7b22 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1929,7 +1929,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.17.7" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825" integrity sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA== @@ -6301,6 +6301,20 @@ dependencies: defer-to-connect "^2.0.0" +"@tanstack/query-core@^4.0.0-beta.1": + version "4.2.1" + resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.2.1.tgz#21ff3a33f27bf038c990ea53af89cf7c7e8078fc" + integrity sha512-UOyOhHKLS/5i9qG2iUnZNVV3R9riJJmG9eG+hnMFIPT/oRh5UzAfjxCtBneNgPQZLDuP8y6YtRYs/n4qVAD5Ng== + +"@tanstack/react-query@^4.1.3": + version "4.2.1" + resolved "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.2.1.tgz#1f00f03573b35a353e62fa64f904bbb0286a1808" + integrity sha512-w02oTOYpoxoBzD/onAGRQNeLAvggLn7WZjS811cT05WAE/4Q3br0PTp388M7tnmyYGbgOOhFq0MkhH0wIfAKqA== + dependencies: + "@tanstack/query-core" "^4.0.0-beta.1" + "@types/use-sync-external-store" "^0.0.3" + use-sync-external-store "^1.2.0" + "@testing-library/cypress@^8.0.2": version "8.0.3" resolved "https://registry.npmjs.org/@testing-library/cypress/-/cypress-8.0.3.tgz#24ab34df34d7896866603ade705afbdd186e273c" @@ -7753,6 +7767,11 @@ resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d" integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ== +"@types/use-sync-external-store@^0.0.3": + version "0.0.3" + resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43" + integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA== + "@types/uuid@^8.0.0": version "8.3.4" resolved "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc" @@ -9341,11 +9360,6 @@ bfj@^7.0.2: hoopy "^0.1.4" tryer "^1.0.1" -big-integer@^1.6.16: - version "1.6.51" - resolved "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686" - integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg== - big.js@^5.2.2: version "5.2.2" resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" @@ -9538,20 +9552,6 @@ breakword@^1.0.5: dependencies: wcwidth "^1.0.1" -broadcast-channel@^3.4.1: - version "3.7.0" - resolved "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937" - integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg== - dependencies: - "@babel/runtime" "^7.7.2" - detect-node "^2.1.0" - js-sha3 "0.8.0" - microseconds "0.2.0" - nano-time "1.0.0" - oblivious-set "1.0.0" - rimraf "3.0.2" - unload "2.2.0" - brorand@^1.0.1, brorand@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" @@ -11966,11 +11966,6 @@ detect-node@^2.0.4: resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c" integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw== -detect-node@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1" - integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g== - detect-port-alt@^1.1.6: version "1.1.6" resolved "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275" @@ -16823,11 +16818,6 @@ js-levenshtein@^1.1.6: resolved "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d" integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g== -js-sha3@0.8.0: - version "0.8.0" - resolved "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840" - integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q== - "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -18248,14 +18238,6 @@ marked@^4.0.14: resolved "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz#cd0ac54b2e5610cfb90e8fd46ccaa8292c9ed569" integrity sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw== -match-sorter@^6.0.2: - version "6.3.1" - resolved "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda" - integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw== - dependencies: - "@babel/runtime" "^7.12.5" - remove-accents "0.4.2" - matcher@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca" @@ -18843,11 +18825,6 @@ micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5: braces "^3.0.2" picomatch "^2.3.1" -microseconds@0.2.0: - version "0.2.0" - resolved "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39" - integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA== - miller-rabin@^4.0.0: version "4.0.1" resolved "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d" @@ -19328,13 +19305,6 @@ nano-css@^5.3.1: stacktrace-js "^2.0.2" stylis "^4.0.6" -nano-time@1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef" - integrity sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8= - dependencies: - big-integer "^1.6.16" - nanoclone@^0.2.1: version "0.2.1" resolved "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4" @@ -19938,11 +19908,6 @@ object.values@^1.1.5: define-properties "^1.1.3" es-abstract "^1.19.1" -oblivious-set@1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566" - integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw== - obuf@^1.0.0, obuf@^1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e" @@ -22108,15 +22073,6 @@ react-markdown@^8.0.0: unist-util-visit "^4.0.0" vfile "^5.0.0" -react-query@^3.34.16: - version "3.39.2" - resolved "https://registry.npmjs.org/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f" - integrity sha512-F6hYDKyNgDQfQOuR1Rsp3VRzJnWHx6aRnnIZHMNGGgbL3SBgpZTDg8MQwmxOgpCAoqZJA+JSNCydF1xGJqKOCA== - dependencies: - "@babel/runtime" "^7.5.5" - broadcast-channel "^3.4.1" - match-sorter "^6.0.2" - react-redux@^7.1.1, react-redux@^7.2.4: version "7.2.5" resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.5.tgz#213c1b05aa1187d9c940ddfc0b29450957f6a3b8" @@ -22773,11 +22729,6 @@ remedial@^1.0.7: resolved "https://registry.npmjs.org/remedial/-/remedial-1.0.8.tgz#a5e4fd52a0e4956adbaf62da63a5a46a78c578a0" integrity sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg== -remove-accents@0.4.2: - version "0.4.2" - resolved "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5" - integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U= - remove-trailing-separator@^1.0.1: version "1.1.0" resolved "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef" @@ -25705,14 +25656,6 @@ unixify@^1.0.0: dependencies: normalize-path "^2.1.1" -unload@2.2.0: - version "2.2.0" - resolved "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7" - integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA== - dependencies: - "@babel/runtime" "^7.6.2" - detect-node "^2.0.4" - unpipe@1.0.0, unpipe@~1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" @@ -25824,6 +25767,11 @@ use-resize-observer@^8.0.0: dependencies: "@juggle/resize-observer" "^3.3.1" +use-sync-external-store@^1.2.0: + version "1.2.0" + resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + use@^3.1.0: version "3.1.1" resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" From 75e9a7652b40cb2b580a378aa35464d387b03945 Mon Sep 17 00:00:00 2001 From: Tomasz Szuba Date: Wed, 17 Aug 2022 18:02:06 +0200 Subject: [PATCH 2/2] [gcalendar] fix tests Signed-off-by: Tomasz Szuba --- .../src/components/CalendarCard/CalendarCard.tsx | 7 +++---- .../components/CalendarCard/CalendarSelect.tsx | 1 - .../CalendarCard/HomePageCalendar.test.tsx | 16 +++++++++------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/plugins/gcalendar/src/components/CalendarCard/CalendarCard.tsx b/plugins/gcalendar/src/components/CalendarCard/CalendarCard.tsx index b698c23ea1..a5575bc190 100644 --- a/plugins/gcalendar/src/components/CalendarCard/CalendarCard.tsx +++ b/plugins/gcalendar/src/components/CalendarCard/CalendarCard.tsx @@ -15,7 +15,7 @@ */ import { sortBy } from 'lodash'; import { DateTime } from 'luxon'; -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { InfoCard, Progress } from '@backstage/core-components'; import { useAnalytics } from '@backstage/core-plugin-api'; @@ -35,6 +35,7 @@ import { CalendarEvent } from './CalendarEvent'; import { CalendarSelect } from './CalendarSelect'; import { SignInContent } from './SignInContent'; import { getStartDate } from './util'; +import useAsync from 'react-use/lib/useAsync'; export const CalendarCard = () => { const [date, setDate] = useState(DateTime.now()); @@ -47,9 +48,7 @@ export const CalendarCard = () => { const { isSignedIn, isInitialized, signIn } = useSignIn(); - useEffect(() => { - signIn(true); - }, [signIn]); + useAsync(async () => signIn(true), [signIn]); const { isLoading: isCalendarLoading, data: calendars = [] } = useCalendarsQuery({ diff --git a/plugins/gcalendar/src/components/CalendarCard/CalendarSelect.tsx b/plugins/gcalendar/src/components/CalendarCard/CalendarSelect.tsx index a1e037a2a3..cd48d9ad3e 100644 --- a/plugins/gcalendar/src/components/CalendarCard/CalendarSelect.tsx +++ b/plugins/gcalendar/src/components/CalendarCard/CalendarSelect.tsx @@ -58,7 +58,6 @@ export const CalendarSelect = ({ calendars, }: CalendarSelectProps) => { const classes = useStyles(); - return (