Merge pull request #13193 from szubster/gcalendar-react-query-4

[gcalendar] Upgrade `react-query:3` to `@tanstack/react-query:4`
2022-08-24 16:39:42 +02:00
parent 2c246ecebb 75e9a7652b
commit cf6a99ee6f
9 changed files with 51 additions and 98 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-gcalendar': patch
+---
+
+Upgrade `react-query:3` to `@tanstack/react-query:4`
@@ -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": {
@@ -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({
@@ -58,7 +58,6 @@ export const CalendarSelect = ({
  calendars,
 }: CalendarSelectProps) => {
  const classes = useStyles();
-
  return (
    <FormControl className={classes.formControl}>
      <Select
@@ -75,7 +75,7 @@ describe('<HomePageCalendar />', () => {
      </TestApiProvider>,
    );

-    expect(rendered.queryByText('Sign in')).toBeInTheDocument();
+    expect(await rendered.findByText('Sign in')).toBeInTheDocument();
  });

  it('should render empty card', async () => {
@@ -90,8 +90,8 @@ describe('<HomePageCalendar />', () => {
      </TestApiProvider>,
    );

-    expect(rendered.queryByText('No events')).toBeInTheDocument();
-    expect(rendered.queryByText('Go to Calendar')).toBeInTheDocument();
+    expect(await rendered.findByText('No events')).toBeInTheDocument();
+    expect(await rendered.findByText('Go to Calendar')).toBeInTheDocument();
  });

  it('should select primary calendar by default', async () => {
@@ -106,7 +106,9 @@ describe('<HomePageCalendar />', () => {
      </TestApiProvider>,
    );

-    expect(rendered.queryByText(primaryCalendar.summary)).toBeInTheDocument();
+    expect(
+      await rendered.findByText(primaryCalendar.summary),
+    ).toBeInTheDocument();
    expect(
      rendered.queryByText(nonPrimaryCalendar.summary),
    ).not.toBeInTheDocument();
@@ -124,12 +126,12 @@ describe('<HomePageCalendar />', () => {
      </TestApiProvider>,
    );

+    expect(await rendered.findAllByText('Test event')).toHaveLength(2);
    expect(rendered.queryByText('No events')).not.toBeInTheDocument();
-    expect(rendered.queryAllByText('Test event')).toHaveLength(2);
  });

  it('should select stored calendar', async () => {
-    mockStorage
+    await mockStorage
      .forBucket(gcalendarPlugin.getId())
      .set('google_calendars_selected', [nonPrimaryCalendar.id]);

@@ -146,7 +148,7 @@ describe('<HomePageCalendar />', () => {
    );

    expect(
-      rendered.queryByText(nonPrimaryCalendar.summary),
+      await rendered.findByText(nonPrimaryCalendar.summary),
    ).toBeInTheDocument();
    expect(
      rendered.queryByText(primaryCalendar.summary),
@@ -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';

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

@@ -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<GCalendarEvent[]> => {
            const data = await calendarApi.getEvents(calendarId, {
              calendarId,
@@ -82,7 +82,7 @@ export const useEventsQuery = ({
          },
        };
      }),
-  );
+  });

  const events = useMemo(
    () => compact(eventQueries.map(({ data }) => data).flat()),
@@ -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==
@@ -6570,6 +6570,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"
@@ -8027,6 +8041,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"
@@ -9615,11 +9634,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"
@@ -9812,20 +9826,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"
@@ -12245,11 +12245,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"
@@ -17125,11 +17120,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"
@@ -18561,14 +18551,6 @@ marked@^4.0.14:
  resolved "https://registry.npmjs.org/marked/-/marked-4.0.19.tgz#d36198d1ac1255525153c351c68c75bc1d7aee46"
  integrity sha512-rgQF/OxOiLcvgUAj1Q1tAf4Bgxn5h5JZTp04Fx4XUkVhs7B+7YA9JEWJhJpoO8eJt8MkZMwqLCNeNqj1bCREZQ==

-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"
@@ -19156,11 +19138,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"
@@ -19614,13 +19591,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"
@@ -20229,11 +20199,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"
@@ -22384,15 +22349,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"
@@ -23054,11 +23010,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"
@@ -25991,14 +25942,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"
@@ -26110,6 +26053,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"