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

[gcalendar] Upgrade `react-query:3` to `@tanstack/react-query:4`

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({

plugins/gcalendar/src/components/CalendarCard/CalendarSelect.tsx

@@ -58,7 +58,6 @@ export const CalendarSelect = ({
   calendars,
 }: CalendarSelectProps) => {
   const classes = useStyles();
-
   return (
     <FormControl className={classes.formControl}>
       <Select

plugins/gcalendar/src/components/CalendarCard/HomePageCalendar.test.tsx

@@ -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),

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

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

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