Merge pull request #168 from HiEventsDev/upgrade-react-query

Update React-Query
HiEventsDev · Aug 28, 2024 · e7f6a88 · e7f6a88
2 parents 1679396 + 9f351bb
commit e7f6a88
Show file tree

Hide file tree

Showing 133 changed files with 2,538 additions and 2,542 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -39,7 +39,7 @@
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@tabler/icons-react": "^2.44.0",
-    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query": "5.52.2",
     "@tiptap/extension-link": "^2.1.13",
     "@tiptap/extension-text-align": "^2.1.13",
     "@tiptap/extension-underline": "^2.1.13",

diff --git a/frontend/src/components/common/AttendeeCheckInTable/index.tsx b/frontend/src/components/common/AttendeeCheckInTable/index.tsx
@@ -124,7 +124,7 @@ export const AttendeesCheckInTable = () => {
                                         onLabel={t`Checked In`}
                                         offLabel={t`Not Checked In`}
                                         size="xl"
-                                        disabled={mutation.isLoading}
+                                        disabled={mutation.isPending}
                                         checked={attendee.checked_in_at !== null}
                                         value={attendee.public_id}
                                         onChange={(event) => handleCheckInToggle(event.target.checked, attendee)}
@@ -201,4 +201,4 @@ export const AttendeesCheckInTable = () => {
             )}
         </>
     );
-};
+};
diff --git a/frontend/src/components/common/CheckInListList/index.tsx b/frontend/src/components/common/CheckInListList/index.tsx
@@ -63,6 +63,7 @@ export const CheckInListList = ({checkInLists, openCreateModal}: CheckInListList
                             </Trans>
                         </p>
                         <Button
+                            loading={deleteMutation.isPending}
                             size={'xs'}
                             leftSection={<IconPlus/>}
                             color={'green'}

diff --git a/frontend/src/components/forms/OrganizerForm/index.tsx b/frontend/src/components/forms/OrganizerForm/index.tsx
@@ -101,11 +101,11 @@ export const OrganizerCreateForm = ({onSuccess}: OrganizerFormProps) => {
     return (
         <LoadingContainer>
             <form onSubmit={form.onSubmit(handleSubmit)}>
-                <fieldset disabled={organizerMutation.isLoading || !accountFetched || !meFetched}>
+                <fieldset disabled={organizerMutation.isPending || !accountFetched || !meFetched}>
                     <OrganizerForm form={form as any}/>
 
                     <Group gap={10}>
-                        <Button fullWidth loading={organizerMutation.isLoading}
+                        <Button fullWidth loading={organizerMutation.isPending}
                                 type={'submit'}
                                 color={'green'}>{t`Create Organizer`}
                         </Button>

diff --git a/frontend/src/components/layouts/CheckIn/index.tsx b/frontend/src/components/layouts/CheckIn/index.tsx
@@ -168,8 +168,8 @@ const CheckIn = () => {
                                 <div className={classes.actions}>
                                     <Button
                                         onClick={() => handleCheckInToggle(attendee)}
-                                        disabled={checkInMutation.isLoading || deleteCheckInMutation.isLoading}
-                                        loading={checkInMutation.isLoading || deleteCheckInMutation.isLoading}
+                                        disabled={checkInMutation.isPending || deleteCheckInMutation.isPending}
+                                        loading={checkInMutation.isPending || deleteCheckInMutation.isPending}
                                         color={attendee.check_in ? 'red' : 'teal'}
                                     >
                                         {attendee.check_in ? t`Check Out` : t`Check In`}

diff --git a/frontend/src/components/layouts/EventHomepage/Footer/index.tsx b/frontend/src/components/layouts/EventHomepage/Footer/index.tsx
@@ -20,4 +20,4 @@ export const Footer = () => {
             <PoweredByFooter/>
         </footer>
     )
-}
+}
diff --git a/frontend/src/components/modals/CancelOrderModal/index.tsx b/frontend/src/components/modals/CancelOrderModal/index.tsx
@@ -54,10 +54,10 @@ export const CancelOrderModal = ({onClose, orderId}: RefundOrderModalProps) => {
                 {t`Canceling will cancel all tickets associated with this order, and release the tickets back into the available pool.`}
             </Alert>
 
-            <Button loading={cancelOrderMutation.isLoading} className={'mb20'} color={'red'} fullWidth
+            <Button loading={cancelOrderMutation.isPending} className={'mb20'} color={'red'} fullWidth
                     onClick={handleCancelOrder}>
                 {t`Cancel Order`}
             </Button>
         </Modal>
     )
-};
+};
diff --git a/frontend/src/components/modals/CreateAttendeeModal/index.tsx b/frontend/src/components/modals/CreateAttendeeModal/index.tsx
@@ -206,8 +206,8 @@ export const CreateAttendeeModal = ({onClose}: GenericModalProps) => {
                     label={t`Send order confirmation and ticket email`}
                     {...form.getInputProps('send_confirmation_email', {type: 'checkbox'})}
                 />
-                <Button type="submit" fullWidth mt="xl" disabled={mutation.isLoading}>
-                    {mutation.isLoading ? t`Working` + '...' : t`Create Attendee`}
+                <Button type="submit" fullWidth mt="xl" disabled={mutation.isPending}>
+                    {mutation.isPending ? t`Working` + '...' : t`Create Attendee`}
                 </Button>
             </form>
         </Modal>

diff --git a/frontend/src/components/modals/CreateCapacityAssignmentModal/index.tsx b/frontend/src/components/modals/CreateCapacityAssignmentModal/index.tsx
@@ -73,7 +73,7 @@ export const CreateCapacityAssignmentModal = ({onClose}: GenericModalProps) => {
                     <Button
                         type={'submit'}
                         fullWidth
-                        loading={createMutation.isLoading}
+                        loading={createMutation.isPending}
                     >
                         {t`Create Capacity Assignment`}
                     </Button>

diff --git a/frontend/src/components/modals/CreateCheckInListModal/index.tsx b/frontend/src/components/modals/CreateCheckInListModal/index.tsx
@@ -74,7 +74,7 @@ export const CreateCheckInListModal = ({onClose}: GenericModalProps) => {
                     <Button
                         type={'submit'}
                         fullWidth
-                        loading={createMutation.isLoading}
+                        loading={createMutation.isPending}
                     >
                         {t`Create Check-In List`}
                     </Button>

diff --git a/frontend/src/components/modals/CreateEventModal/index.tsx b/frontend/src/components/modals/CreateEventModal/index.tsx
@@ -146,7 +146,7 @@ export const CreateEventModal = ({onClose}: GenericModalProps) => {
                                label={t`End Date`}
                     />
                 </SimpleGrid>
-                <Button loading={eventMutation.isLoading} mt={20} fullWidth type={'submit'}>
+                <Button loading={eventMutation.isPending} mt={20} fullWidth type={'submit'}>
                     {t`Continue Event Setup`}
                 </Button>
             </form>

diff --git a/frontend/src/components/modals/CreatePromoCodeModal/index.tsx b/frontend/src/components/modals/CreatePromoCodeModal/index.tsx
@@ -52,8 +52,8 @@ export const CreatePromoCodeModal = ({onClose}: GenericModalProps) => {
         >
             <form onSubmit={form.onSubmit(handleSubmit)}>
                 <PromoCodeForm form={form}/>
-                <Button type="submit" fullWidth mt="xl" disabled={mutation.isLoading}>
-                    {mutation.isLoading ? t`Working...` : t`Create Promo Code`}
+                <Button type="submit" fullWidth mt="xl" disabled={mutation.isPending}>
+                    {mutation.isPending ? t`Working...` : t`Create Promo Code`}
                 </Button>
             </form>
         </Modal>

diff --git a/frontend/src/components/modals/CreateQuestionModal/index.tsx b/frontend/src/components/modals/CreateQuestionModal/index.tsx
@@ -37,29 +37,29 @@ export const CreateQuestionModal = ({onClose, onCompleted}: CreateQuestionModalP
         },
     });
 
-    const mutation = useMutation(
-        (questionData: Question) => questionClient.create(eventId, questionData as QuestionRequestData),
-        {
-            onSuccess: ({data: question}) => {
-                notifications.show({
-                    message: t`Successfully Created Question`,
-                    color: 'green',
-                });
-                queryClient.invalidateQueries({queryKey: [GET_EVENT_QUESTIONS_QUERY_KEY]}).then(() => {
-                    onCompleted(question);
-                    onClose();
-                    form.reset();
-                });
-            },
-            onError: (error: any) => {
-                if (error?.response?.data?.errors) {
-                    form.setErrors(error.response.data.errors);
-                } else {
-                    showError(t`Unable to create question. Please check the your details`);
-                }
-            },
+    const mutation = useMutation({
+        mutationFn: (questionData: Question) => questionClient.create(eventId, questionData as QuestionRequestData),
+
+        onSuccess: ({data: question}) => {
+            notifications.show({
+                message: t`Successfully Created Question`,
+                color: 'green',
+            });
+            queryClient.invalidateQueries({queryKey: [GET_EVENT_QUESTIONS_QUERY_KEY]}).then(() => {
+                onCompleted(question);
+                onClose();
+                form.reset();
+            });
+        },
+
+        onError: (error: any) => {
+            if (error?.response?.data?.errors) {
+                form.setErrors(error.response.data.errors);
+            } else {
+                showError(t`Unable to create question. Please check the your details`);
+            }
         }
-    );
+    });
 
     return (
         <Modal
@@ -69,8 +69,8 @@ export const CreateQuestionModal = ({onClose, onCompleted}: CreateQuestionModalP
         >
             <form onSubmit={form.onSubmit((values) => mutation.mutate(values as any as Question))}>
                 <QuestionForm form={form} tickets={tickets}/>
-                <Button loading={mutation.isLoading} type="submit" fullWidth mt="xl">
-                    {mutation.isLoading ? t`Working...` : t`Create Question`}
+                <Button loading={mutation.isPending} type="submit" fullWidth mt="xl">
+                    {mutation.isPending ? t`Working...` : t`Create Question`}
                 </Button>
             </form>
         </Modal>

diff --git a/frontend/src/components/modals/CreateTaxOrFeeModal/index.tsx b/frontend/src/components/modals/CreateTaxOrFeeModal/index.tsx
@@ -43,7 +43,7 @@ export const CreateTaxOrFeeModal = ({ onClose }: GenericModalProps) => {
                 <TaxAndFeeForm form={form} />
                 <Button
                     fullWidth
-                    loading={createMutation.isLoading}
+                    loading={createMutation.isPending}
                     type={'submit'}>
                     <Trans>Create {form.values.type === TaxAndFeeType.Tax ? t`Tax` : t`Fee`}</Trans>
                 </Button>

diff --git a/frontend/src/components/modals/CreateTicketModal/index.tsx b/frontend/src/components/modals/CreateTicketModal/index.tsx
@@ -41,31 +41,31 @@ export const CreateTicketModal = ({onClose}: GenericModalProps) => {
         },
     });
 
-    const mutation = useMutation(
-        (ticketData: Ticket) => ticketClient.create(eventId, ticketData),
-        {
-            onSuccess: () => {
-                notifications.show({
-                    message: t`Successfully Created Ticket`,
-                    color: 'green',
-                });
-                queryClient.invalidateQueries({queryKey: [GET_TICKETS_QUERY_KEY]}).then(() => {
-                    form.reset();
-                    onClose();
-                });
-            },
-            onError: (error: any) => {
-                if (error?.response?.data?.errors) {
-                    form.setErrors(error.response.data.errors);
-                }
+    const mutation = useMutation({
+        mutationFn: (ticketData: Ticket) => ticketClient.create(eventId, ticketData),
 
-                notifications.show({
-                    message: t`Unable to create ticket. Please check the your details`,
-                    color: 'red',
-                });
-            },
+        onSuccess: () => {
+            notifications.show({
+                message: t`Successfully Created Ticket`,
+                color: 'green',
+            });
+            queryClient.invalidateQueries({queryKey: [GET_TICKETS_QUERY_KEY]}).then(() => {
+                form.reset();
+                onClose();
+            });
+        },
+
+        onError: (error: any) => {
+            if (error?.response?.data?.errors) {
+                form.setErrors(error.response.data.errors);
+            }
+
+            notifications.show({
+                message: t`Unable to create ticket. Please check the your details`,
+                color: 'red',
+            });
         }
-    );
+    });
 
     useEffect(() => {
         form.setFieldValue('tax_and_fee_ids', taxesAndFees
@@ -86,8 +86,8 @@ export const CreateTicketModal = ({onClose}: GenericModalProps) => {
         >
             <form onSubmit={form.onSubmit((values) => mutation.mutate(values as any as Ticket))}>
                 <TicketForm form={form}/>
-                <Button type="submit" fullWidth disabled={mutation.isLoading}>
-                    {mutation.isLoading ? t`Working...` : t`Create Ticket`}
+                <Button type="submit" fullWidth disabled={mutation.isPending}>
+                    {mutation.isPending ? t`Working...` : t`Create Ticket`}
                 </Button>
             </form>
         </Modal>

diff --git a/frontend/src/components/modals/DuplicateEventModal/index.tsx b/frontend/src/components/modals/DuplicateEventModal/index.tsx
@@ -71,7 +71,7 @@ export const DuplicateEventModal = ({onClose, eventId}: DuplicateEventModalProps
             withCloseButton
         >
             <form onSubmit={form.onSubmit((values) => handleDuplicate(eventId, values))}>
-                <fieldset disabled={eventQuery.isLoading || mutation.isLoading}>
+                <fieldset disabled={eventQuery.isLoading || mutation.isPending}>
                     <TextInput
                         {...form.getInputProps('title')}
                         label={t`Name`}
@@ -133,8 +133,8 @@ export const DuplicateEventModal = ({onClose, eventId}: DuplicateEventModalProps
                         />
                     </Card>
                 </fieldset>
-                <Button type="submit" fullWidth disabled={mutation.isLoading}>
-                    {mutation.isLoading ? t`Working...` : t`Duplicate Event`}
+                <Button type="submit" fullWidth disabled={mutation.isPending}>
+                    {mutation.isPending ? t`Working...` : t`Duplicate Event`}
                 </Button>
             </form>
         </Modal>

diff --git a/frontend/src/components/modals/EditAttendeeModal/index.tsx b/frontend/src/components/modals/EditAttendeeModal/index.tsx
@@ -125,10 +125,10 @@ export const EditAttendeeModal = ({onClose, attendeeId}: EditAttendeeModalProps)
                     />
                 )}
 
-                <Button type="submit" fullWidth mt="xl" disabled={mutation.isLoading}>
-                    {mutation.isLoading ? t`Working...` : t`Edit Attendee`}
+                <Button type="submit" fullWidth mt="xl" disabled={mutation.isPending}>
+                    {mutation.isPending ? t`Working...` : t`Edit Attendee`}
                 </Button>
             </form>
         </Modal>
     );
-}
+}
diff --git a/frontend/src/components/modals/EditCapacityAssignmentModal/index.tsx b/frontend/src/components/modals/EditCapacityAssignmentModal/index.tsx
@@ -69,7 +69,7 @@ export const EditCapacityAssignmentModal = ({
                 <Button
                     type={'submit'}
                     fullWidth
-                    loading={editMutation.isLoading}
+                    loading={editMutation.isPending}
                 >
                     {t`Edit Capacity Assignment`}
                 </Button>

diff --git a/frontend/src/components/modals/EditCheckInListModal/index.tsx b/frontend/src/components/modals/EditCheckInListModal/index.tsx
@@ -86,7 +86,7 @@ export const EditCheckInListModal = ({
                     <Button
                         type={'submit'}
                         fullWidth
-                        loading={editMutation.isLoading}
+                        loading={editMutation.isPending}
                     >
                         {t`Edit Check-In List`}
                     </Button>

diff --git a/frontend/src/components/modals/EditOrganizerModal/index.tsx b/frontend/src/components/modals/EditOrganizerModal/index.tsx
@@ -65,7 +65,7 @@ export const EditOrganizerModal = ({organizerId, onClose}: EditOrganizerModalPro
             <form onSubmit={form.onSubmit(handleSubmit)}>
                 <OrganizerForm form={form as any}/>
                 <Group gap={10}>
-                    <Button fullWidth loading={organizerMutation.isLoading}
+                    <Button fullWidth loading={organizerMutation.isPending}
                             type={'submit'}
                     >{t`Save Organizer`}
                     </Button>
@@ -74,4 +74,4 @@ export const EditOrganizerModal = ({organizerId, onClose}: EditOrganizerModalPro
         </Modal>
     );
 
-}
+}
diff --git a/frontend/src/components/modals/EditPromoCodeModal/index.tsx b/frontend/src/components/modals/EditPromoCodeModal/index.tsx
@@ -80,8 +80,8 @@ export const EditPromoCodeModal = ({onClose, promoCodeId}: EditPromoCodeModalPro
         >
             <form onSubmit={form.onSubmit(handleSubmit)}>
                 <PromoCodeForm form={form}/>
-                <Button type="submit" fullWidth mt="xl" disabled={mutation.isLoading}>
-                    {mutation.isLoading ? t`Working...` : t`Edit Promo Code`}
+                <Button type="submit" fullWidth mt="xl" disabled={mutation.isPending}>
+                    {mutation.isPending ? t`Working...` : t`Edit Promo Code`}
                 </Button>
             </form>
             <LoadingMask/>
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,4 +20,4 @@ export const Footer = () => { @@
                 <PoweredByFooter/>
             </footer>
         )
-    }
+    }