diff --git a/apps/web/src/components/discussion/discussion.tsx b/apps/web/src/components/discussion/discussion.tsx index dbf7fa2b5..5e974e569 100644 --- a/apps/web/src/components/discussion/discussion.tsx +++ b/apps/web/src/components/discussion/discussion.tsx @@ -25,23 +25,19 @@ interface CommentForm { const Discussion: React.FunctionComponent = () => { const { dayjs } = useDayjs(); - const queryClient = trpc.useContext(); const { t } = useTranslation("app"); const { poll, admin } = usePoll(); const pollId = poll.id; - const { data: comments } = trpc.polls.comments.list.useQuery( - { pollId }, - { - refetchInterval: 10000, // refetch every 10 seconds - trpc: {}, - }, - ); + const { data: comments } = trpc.polls.comments.list.useQuery({ pollId }); const posthog = usePostHog(); + const queryClient = trpc.useContext(); + const addComment = trpc.polls.comments.add.useMutation({ onSuccess: () => { + queryClient.polls.comments.invalidate(); posthog?.capture("created comment"); }, }); diff --git a/apps/web/src/components/participant-dropdown.tsx b/apps/web/src/components/participant-dropdown.tsx index c100db810..9f684646a 100644 --- a/apps/web/src/components/participant-dropdown.tsx +++ b/apps/web/src/components/participant-dropdown.tsx @@ -95,8 +95,10 @@ const ChangeNameModal = (props: { onDone: () => void; }) => { const posthog = usePostHog(); + const queryClient = trpc.useContext(); const changeName = trpc.polls.participants.rename.useMutation({ onSuccess: (_, { participantId, newName }) => { + queryClient.polls.participants.invalidate(); posthog?.capture("changed name", { participantId, oldName: props.oldName, diff --git a/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx b/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx index cec31a9f2..d0b8b7b8d 100644 --- a/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx +++ b/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx @@ -22,8 +22,10 @@ export const DeletePollForm: React.FunctionComponent<{ const confirmationText = watch("confirmation"); const canDelete = confirmationText === confirmText; const posthog = usePostHog(); + const queryClient = trpc.useContext(); const deletePoll = trpc.polls.delete.useMutation({ onSuccess: () => { + queryClient.polls.invalidate(); posthog?.capture("deleted poll"); }, }); diff --git a/apps/web/src/components/poll/mutations.ts b/apps/web/src/components/poll/mutations.ts index 74e449d17..ed27d1f28 100644 --- a/apps/web/src/components/poll/mutations.ts +++ b/apps/web/src/components/poll/mutations.ts @@ -16,8 +16,11 @@ export const normalizeVotes = ( export const useAddParticipantMutation = () => { const posthog = usePostHog(); + const queryClient = trpc.useContext(); + return trpc.polls.participants.add.useMutation({ onSuccess: (_, { pollId, name, email }) => { + queryClient.polls.participants.list.invalidate({ pollId }); posthog?.capture("add participant", { pollId, name, diff --git a/apps/web/src/components/poll/notifications-toggle.tsx b/apps/web/src/components/poll/notifications-toggle.tsx index 1733e7679..1a57f016b 100644 --- a/apps/web/src/components/poll/notifications-toggle.tsx +++ b/apps/web/src/components/poll/notifications-toggle.tsx @@ -20,12 +20,18 @@ const NotificationsToggle: React.FunctionComponent = () => { const watchers = data.watchers ?? []; const { user } = useUser(); - const isWatching = watchers.some(({ userId }) => userId === user.id); + const [isWatching, setIsWatching] = React.useState(() => + watchers.some(({ userId }) => userId === user.id), + ); const posthog = usePostHog(); const watch = trpc.polls.watch.useMutation({ + onMutate: () => { + setIsWatching(true); + }, onSuccess: () => { + // TODO (Luke Vella) [2023-04-08]: We should have a separate query for getting watchers posthog?.capture("turned notifications on", { pollId: poll.id, source: "notifications-toggle", @@ -34,6 +40,9 @@ const NotificationsToggle: React.FunctionComponent = () => { }); const unwatch = trpc.polls.unwatch.useMutation({ + onMutate: () => { + setIsWatching(false); + }, onSuccess: () => { posthog?.capture("turned notifications off", { pollId: poll.id, @@ -42,7 +51,6 @@ const NotificationsToggle: React.FunctionComponent = () => { }, }); - const isUpdating = watch.isLoading || unwatch.isLoading; const { openLoginModal } = useLoginModal(); return ( @@ -59,7 +67,6 @@ const NotificationsToggle: React.FunctionComponent = () => { >