Skip to content

Commit f3c7c9b

Browse files
aslilacaslilac
committed
finish porting over to react-query
1 parent 759c5ef commit f3c7c9b

File tree

4 files changed

+44
-44
lines changed

4 files changed

+44
-44
lines changed

‎site/src/api/queries/settings.ts

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import * as API from "api/api";
2-
import { type UserQuietHoursScheduleResponse } from "api/typesGenerated";
3-
import { type QueryOptions } from "@tanstack/react-query";
2+
import {
3+
type UserQuietHoursScheduleResponse,
4+
type UpdateUserQuietHoursScheduleRequest,
5+
} from "api/typesGenerated";
6+
import {
7+
type QueryClient,
8+
type QueryOptions,
9+
type MutationOptions,
10+
} from "@tanstack/react-query";
411

512
export const userQuietHoursScheduleKey = (userId: string) => [
613
"settings",
@@ -16,3 +23,19 @@ export const userQuietHoursSchedule = (
1623
queryFn: () => API.getUserQuietHoursSchedule(userId),
1724
};
1825
};
26+
27+
export const updateUserQuietHoursSchedule = (
28+
userId: string,
29+
queryClient: QueryClient,
30+
): MutationOptions<
31+
UserQuietHoursScheduleResponse,
32+
unknown,
33+
UpdateUserQuietHoursScheduleRequest
34+
> => {
35+
return {
36+
mutationFn: (request) => API.updateUserQuietHoursSchedule(userId, request),
37+
onSuccess: async () => {
38+
await queryClient.invalidateQueries(userQuietHoursScheduleKey(userId));
39+
},
40+
};
41+
};

‎site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const Submitting: Story = {
5252
export const WithError: Story = {
5353
args: {
5454
...defaultArgs,
55-
updateErr: mockApiError({
55+
mutationError: mockApiError({
5656
message: "Invalid schedule",
5757
validations: [
5858
{

‎site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export interface ScheduleFormProps {
5757
isLoading: boolean;
5858
initialValues: UserQuietHoursScheduleResponse;
5959
refetch: () => Promise<void>;
60-
updateErr: unknown;
60+
mutationError: unknown;
6161
onSubmit: (data: UpdateUserQuietHoursScheduleRequest) => void;
6262
// now can be set to force the time used for "Next occurrence" in tests.
6363
now?: Date;
@@ -67,7 +67,7 @@ export const ScheduleForm: FC<React.PropsWithChildren<ScheduleFormProps>> = ({
6767
isLoading,
6868
initialValues,
6969
refetch,
70-
updateErr,
70+
mutationError,
7171
onSubmit,
7272
now,
7373
}) => {
@@ -83,10 +83,6 @@ export const ScheduleForm: FC<React.PropsWithChildren<ScheduleFormProps>> = ({
8383
}, []);
8484

8585
const preferredTimezone = getPreferredTimezone();
86-
if (!timeZones.includes(initialValues.timezone)) {
87-
}
88-
if (!timeZones.includes(preferredTimezone)) {
89-
}
9086

9187
// If the user has a custom schedule, use that as the initial values.
9288
// Otherwise, use midnight in their preferred timezone.
@@ -111,12 +107,15 @@ export const ScheduleForm: FC<React.PropsWithChildren<ScheduleFormProps>> = ({
111107
await refetch();
112108
},
113109
});
114-
const getFieldHelpers = getFormHelpers<ScheduleFormValues>(form, updateErr);
110+
const getFieldHelpers = getFormHelpers<ScheduleFormValues>(
111+
form,
112+
mutationError,
113+
);
115114

116115
return (
117116
<Form onSubmit={form.handleSubmit}>
118117
<FormFields>
119-
{Boolean(updateErr) && <ErrorAlert error={updateErr} />}
118+
{Boolean(mutationError) && <ErrorAlert error={mutationError} />}
120119

121120
{!initialValues.user_set && (
122121
<Alert severity="info">

‎site/src/pages/UserSettingsPage/SchedulePage/SchedulePage.tsx

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
import { FC, useState } from "react";
1+
import { FC } from "react";
22
import { Section } from "../../../components/SettingsLayout/Section";
33
import { ScheduleForm } from "./ScheduleForm";
44
import { useMe } from "hooks/useMe";
5-
import {
6-
UpdateUserQuietHoursScheduleRequest,
7-
UserQuietHoursScheduleResponse,
8-
} from "api/typesGenerated";
9-
import * as API from "api/api";
105
import { Loader } from "components/Loader/Loader";
11-
import { displaySuccess } from "components/GlobalSnackbar/utils";
12-
import { useQuery, useQueryClient } from "@tanstack/react-query";
6+
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
137
import {
8+
updateUserQuietHoursSchedule,
149
userQuietHoursSchedule,
1510
userQuietHoursScheduleKey,
1611
} from "api/queries/settings";
@@ -20,35 +15,18 @@ export const SchedulePage: FC = () => {
2015
const me = useMe();
2116
const queryClient = useQueryClient();
2217

23-
const [, setQuietHoursSchedule] = useState<
24-
UserQuietHoursScheduleResponse | undefined
25-
>(undefined);
26-
const [quietHoursSubmitting, setQuietHoursSubmitting] =
27-
useState<boolean>(false);
28-
const [quietHoursScheduleError, setQuietHoursScheduleError] =
29-
useState<unknown>("");
30-
3118
const {
3219
data: quietHoursSchedule,
3320
error,
3421
isLoading,
3522
isError,
3623
} = useQuery(userQuietHoursSchedule(me.id));
3724

38-
const onSubmit = async (data: UpdateUserQuietHoursScheduleRequest) => {
39-
setQuietHoursSubmitting(true);
40-
API.updateUserQuietHoursSchedule(me.id, data)
41-
.then((response) => {
42-
setQuietHoursSchedule(response);
43-
setQuietHoursSubmitting(false);
44-
setQuietHoursScheduleError(undefined);
45-
displaySuccess("Schedule updated successfully");
46-
})
47-
.catch((error) => {
48-
setQuietHoursSubmitting(false);
49-
setQuietHoursScheduleError(error);
50-
});
51-
};
25+
const {
26+
mutate: onSubmit,
27+
error: mutationError,
28+
isLoading: mutationLoading,
29+
} = useMutation(updateUserQuietHoursSchedule(me.id, queryClient));
5230

5331
if (isLoading) {
5432
return <Loader />;
@@ -65,12 +43,12 @@ export const SchedulePage: FC = () => {
6543
description="Workspaces may be automatically updated during your quiet hours, as configured by your administrators."
6644
>
6745
<ScheduleForm
68-
isLoading={quietHoursSubmitting}
46+
isLoading={mutationLoading}
6947
initialValues={quietHoursSchedule}
7048
refetch={async () => {
71-
queryClient.invalidateQueries(userQuietHoursScheduleKey(me.id));
49+
await queryClient.invalidateQueries(userQuietHoursScheduleKey(me.id));
7250
}}
73-
updateErr={quietHoursScheduleError}
51+
mutationError={mutationError}
7452
onSubmit={onSubmit}
7553
/>
7654
</Section>

0 commit comments

Comments
 (0)