From d07f69857310833280f15f486ab92cbe96f27b8c Mon Sep 17 00:00:00 2001 From: mkljczk Date: Thu, 5 Dec 2024 11:16:26 +0100 Subject: [PATCH] pl-fe: move stuff around Signed-off-by: mkljczk --- .../src/api/hooks/admin/use-announcements.ts | 82 ------------------- .../src/features/admin/announcements.tsx | 4 +- packages/pl-fe/src/features/admin/domains.tsx | 2 +- .../src/features/admin/moderation-log.tsx | 2 +- packages/pl-fe/src/features/admin/relays.tsx | 2 +- packages/pl-fe/src/features/admin/rules.tsx | 2 +- .../modals/edit-announcement-modal.tsx | 5 +- .../components/modals/edit-domain-modal.tsx | 2 +- .../ui/components/modals/edit-rule-modal.tsx | 2 +- .../src/queries/admin/use-announcements.ts | 79 ++++++++++++++++++ .../hooks => queries}/admin/use-domains.ts | 0 .../admin/use-moderation-log.ts | 0 .../hooks => queries}/admin/use-relays.ts | 0 .../{api/hooks => queries}/admin/use-rules.ts | 0 .../use-event-participation-requests.ts | 4 +- .../statuses/use-status-interactions.ts | 4 +- 16 files changed, 94 insertions(+), 96 deletions(-) delete mode 100644 packages/pl-fe/src/api/hooks/admin/use-announcements.ts create mode 100644 packages/pl-fe/src/queries/admin/use-announcements.ts rename packages/pl-fe/src/{api/hooks => queries}/admin/use-domains.ts (100%) rename packages/pl-fe/src/{api/hooks => queries}/admin/use-moderation-log.ts (100%) rename packages/pl-fe/src/{api/hooks => queries}/admin/use-relays.ts (100%) rename packages/pl-fe/src/{api/hooks => queries}/admin/use-rules.ts (100%) diff --git a/packages/pl-fe/src/api/hooks/admin/use-announcements.ts b/packages/pl-fe/src/api/hooks/admin/use-announcements.ts deleted file mode 100644 index 651ae4b0b..000000000 --- a/packages/pl-fe/src/api/hooks/admin/use-announcements.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { useMutation, useQuery } from '@tanstack/react-query'; -import { - adminAnnouncementSchema, - type AdminAnnouncement, - type AdminCreateAnnouncementParams, - type AdminUpdateAnnouncementParams, -} from 'pl-api'; -import * as v from 'valibot'; - -import { useClient } from 'pl-fe/hooks/use-client'; -import { queryClient } from 'pl-fe/queries/client'; - -import { useAnnouncements as useUserAnnouncements } from '../../../queries/announcements/use-announcements'; - -const useAnnouncements = () => { - const client = useClient(); - const userAnnouncements = useUserAnnouncements(); - - const getAnnouncements = async () => { - const data = await client.admin.announcements.getAnnouncements(); - - return data.items; - }; - - const result = useQuery>({ - queryKey: ['admin', 'announcements'], - queryFn: getAnnouncements, - placeholderData: [] as ReadonlyArray, - }); - - const { - mutate: createAnnouncement, - isPending: isCreating, - } = useMutation({ - mutationFn: (params: AdminCreateAnnouncementParams) => client.admin.announcements.createAnnouncement(params), - retry: false, - onSuccess: (data) => - queryClient.setQueryData(['admin', 'announcements'], (prevResult: ReadonlyArray) => - [...prevResult, v.parse(adminAnnouncementSchema, data)], - ), - onSettled: () => userAnnouncements.refetch(), - }); - - const { - mutate: updateAnnouncement, - isPending: isUpdating, - } = useMutation({ - mutationFn: ({ id, ...params }: AdminUpdateAnnouncementParams & { id: string }) => - client.admin.announcements.updateAnnouncement(id, params), - retry: false, - onSuccess: (data) => - queryClient.setQueryData(['admin', 'announcements'], (prevResult: ReadonlyArray) => - prevResult.map((announcement) => announcement.id === data.id ? v.parse(adminAnnouncementSchema, data) : announcement), - ), - onSettled: () => userAnnouncements.refetch(), - }); - - const { - mutate: deleteAnnouncement, - isPending: isDeleting, - } = useMutation({ - mutationFn: (id: string) => client.admin.announcements.deleteAnnouncement(id), - retry: false, - onSuccess: (_, id) => - queryClient.setQueryData(['admin', 'announcements'], (prevResult: ReadonlyArray) => - prevResult.filter(({ id: announcementId }) => announcementId !== id), - ), - onSettled: () => userAnnouncements.refetch(), - }); - - return { - ...result, - createAnnouncement, - isCreating, - updateAnnouncement, - isUpdating, - deleteAnnouncement, - isDeleting, - }; -}; - -export { useAnnouncements }; diff --git a/packages/pl-fe/src/features/admin/announcements.tsx b/packages/pl-fe/src/features/admin/announcements.tsx index b72abe15e..844709882 100644 --- a/packages/pl-fe/src/features/admin/announcements.tsx +++ b/packages/pl-fe/src/features/admin/announcements.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { useAnnouncements } from 'pl-fe/api/hooks/admin/use-announcements'; import { ParsedContent } from 'pl-fe/components/parsed-content'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Button from 'pl-fe/components/ui/button'; @@ -9,6 +8,7 @@ import Column from 'pl-fe/components/ui/column'; import HStack from 'pl-fe/components/ui/hstack'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; +import { useAnnouncements, useDeleteAnnouncementMutation } from 'pl-fe/queries/admin/use-announcements'; import { useModalsStore } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; @@ -28,7 +28,7 @@ interface IAnnouncement { const Announcement: React.FC = ({ announcement }) => { const intl = useIntl(); - const { deleteAnnouncement } = useAnnouncements(); + const { mutate: deleteAnnouncement } = useDeleteAnnouncementMutation(); const { openModal } = useModalsStore(); const handleEditAnnouncement = () => { diff --git a/packages/pl-fe/src/features/admin/domains.tsx b/packages/pl-fe/src/features/admin/domains.tsx index adb517959..acdb57736 100644 --- a/packages/pl-fe/src/features/admin/domains.tsx +++ b/packages/pl-fe/src/features/admin/domains.tsx @@ -1,7 +1,6 @@ import React, { useEffect } from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { useDomains } from 'pl-fe/api/hooks/admin/use-domains'; import { dateFormatOptions } from 'pl-fe/components/relative-timestamp'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Button from 'pl-fe/components/ui/button'; @@ -9,6 +8,7 @@ import Column from 'pl-fe/components/ui/column'; import HStack from 'pl-fe/components/ui/hstack'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; +import { useDomains } from 'pl-fe/queries/admin/use-domains'; import { useModalsStore } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; diff --git a/packages/pl-fe/src/features/admin/moderation-log.tsx b/packages/pl-fe/src/features/admin/moderation-log.tsx index fb0ce492b..ca38fc9aa 100644 --- a/packages/pl-fe/src/features/admin/moderation-log.tsx +++ b/packages/pl-fe/src/features/admin/moderation-log.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { defineMessages, FormattedDate, useIntl } from 'react-intl'; -import { useModerationLog } from 'pl-fe/api/hooks/admin/use-moderation-log'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Column from 'pl-fe/components/ui/column'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; +import { useModerationLog } from 'pl-fe/queries/admin/use-moderation-log'; import type { AdminModerationLogEntry } from 'pl-api'; diff --git a/packages/pl-fe/src/features/admin/relays.tsx b/packages/pl-fe/src/features/admin/relays.tsx index 821310d7a..7aa2bb566 100644 --- a/packages/pl-fe/src/features/admin/relays.tsx +++ b/packages/pl-fe/src/features/admin/relays.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { useRelays } from 'pl-fe/api/hooks/admin/use-relays'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Button from 'pl-fe/components/ui/button'; import Column from 'pl-fe/components/ui/column'; @@ -11,6 +10,7 @@ import Input from 'pl-fe/components/ui/input'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import { useTextField } from 'pl-fe/hooks/forms/use-text-field'; +import { useRelays } from 'pl-fe/queries/admin/use-relays'; import toast from 'pl-fe/toast'; import type { AdminRelay as RelayEntity } from 'pl-api'; diff --git a/packages/pl-fe/src/features/admin/rules.tsx b/packages/pl-fe/src/features/admin/rules.tsx index 60e525bbd..4e50d64b8 100644 --- a/packages/pl-fe/src/features/admin/rules.tsx +++ b/packages/pl-fe/src/features/admin/rules.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { useRules } from 'pl-fe/api/hooks/admin/use-rules'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Button from 'pl-fe/components/ui/button'; import Column from 'pl-fe/components/ui/column'; import HStack from 'pl-fe/components/ui/hstack'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; +import { useRules } from 'pl-fe/queries/admin/use-rules'; import { useModalsStore } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; diff --git a/packages/pl-fe/src/features/ui/components/modals/edit-announcement-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/edit-announcement-modal.tsx index 9e7a9b526..3671b7552 100644 --- a/packages/pl-fe/src/features/ui/components/modals/edit-announcement-modal.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/edit-announcement-modal.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { useAnnouncements } from 'pl-fe/api/hooks/admin/use-announcements'; import Form from 'pl-fe/components/ui/form'; import FormGroup from 'pl-fe/components/ui/form-group'; import HStack from 'pl-fe/components/ui/hstack'; @@ -11,6 +10,7 @@ import Text from 'pl-fe/components/ui/text'; import Textarea from 'pl-fe/components/ui/textarea'; import Toggle from 'pl-fe/components/ui/toggle'; import { DatePicker } from 'pl-fe/features/ui/util/async-components'; +import { useCreateAnnouncementMutation, useUpdateAnnouncementMutation } from 'pl-fe/queries/admin/use-announcements'; import toast from 'pl-fe/toast'; import type { BaseModalProps } from '../modal-root'; @@ -30,7 +30,8 @@ interface EditAnnouncementModalProps { } const EditAnnouncementModal: React.FC = ({ onClose, announcement }) => { - const { createAnnouncement, updateAnnouncement } = useAnnouncements(); + const { mutate: createAnnouncement } = useCreateAnnouncementMutation(); + const { mutate: updateAnnouncement } = useUpdateAnnouncementMutation(); const intl = useIntl(); const [content, setContent] = useState(announcement?.raw_content || ''); diff --git a/packages/pl-fe/src/features/ui/components/modals/edit-domain-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/edit-domain-modal.tsx index 91e1b462d..dca5b8f6a 100644 --- a/packages/pl-fe/src/features/ui/components/modals/edit-domain-modal.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/edit-domain-modal.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { useDomains } from 'pl-fe/api/hooks/admin/use-domains'; import Form from 'pl-fe/components/ui/form'; import FormGroup from 'pl-fe/components/ui/form-group'; import HStack from 'pl-fe/components/ui/hstack'; @@ -10,6 +9,7 @@ import Modal from 'pl-fe/components/ui/modal'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import Toggle from 'pl-fe/components/ui/toggle'; +import { useDomains } from 'pl-fe/queries/admin/use-domains'; import toast from 'pl-fe/toast'; import type { BaseModalProps } from '../modal-root'; diff --git a/packages/pl-fe/src/features/ui/components/modals/edit-rule-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/edit-rule-modal.tsx index 59bccf6fb..0ca92abd2 100644 --- a/packages/pl-fe/src/features/ui/components/modals/edit-rule-modal.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/edit-rule-modal.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { useRules } from 'pl-fe/api/hooks/admin/use-rules'; import Form from 'pl-fe/components/ui/form'; import FormGroup from 'pl-fe/components/ui/form-group'; import Input from 'pl-fe/components/ui/input'; import Modal from 'pl-fe/components/ui/modal'; import { useTextField } from 'pl-fe/hooks/forms/use-text-field'; +import { useRules } from 'pl-fe/queries/admin/use-rules'; import toast from 'pl-fe/toast'; import type { BaseModalProps } from '../modal-root'; diff --git a/packages/pl-fe/src/queries/admin/use-announcements.ts b/packages/pl-fe/src/queries/admin/use-announcements.ts new file mode 100644 index 000000000..76d3ac22a --- /dev/null +++ b/packages/pl-fe/src/queries/admin/use-announcements.ts @@ -0,0 +1,79 @@ +import { type InfiniteData, useMutation } from '@tanstack/react-query'; +import { create } from 'mutative'; +import { + adminAnnouncementSchema, + PaginatedResponse, + type AdminAnnouncement, + type AdminCreateAnnouncementParams, + type AdminUpdateAnnouncementParams, +} from 'pl-api'; +import * as v from 'valibot'; + +import { useClient } from 'pl-fe/hooks/use-client'; +import { queryClient } from 'pl-fe/queries/client'; + +import { makePaginatedResponseQuery } from '../utils/make-paginated-response-query'; + +const useAnnouncements = makePaginatedResponseQuery( + () => ['admin', 'announcements'], + (client) => client.admin.announcements.getAnnouncements(), +); + +const useCreateAnnouncementMutation = () => { + const client = useClient(); + + return useMutation({ + mutationFn: (params: AdminCreateAnnouncementParams) => client.admin.announcements.createAnnouncement(params), + retry: false, + onSuccess: (data) => { + queryClient.setQueryData>>( + ['admin', 'announcements'], + (prevData) => create(prevData, (draft) => { + if (draft?.pages.length) draft.pages[0].items = [v.parse(adminAnnouncementSchema, data), ...draft.pages[0].items]; + }), + ); + queryClient.invalidateQueries({ queryKey: ['announcements'] }); + }, + }); +}; + +const useUpdateAnnouncementMutation = () => { + const client = useClient(); + + return useMutation({ + mutationFn: ({ id, ...params }: AdminUpdateAnnouncementParams & { id: string }) => client.admin.announcements.updateAnnouncement(id, params), + retry: false, + onSuccess: (data) => { + queryClient.setQueryData>>( + ['admin', 'announcements'], + (prevData) => create(prevData, (draft) => { + draft?.pages.forEach(({ items }) => { + const index = items.findIndex(({ id }) => id === data.id); + if (index !== -1) items[index] = v.parse(adminAnnouncementSchema, data); + }); + }), + ); + queryClient.invalidateQueries({ queryKey: ['announcements'] }); + }, + }); +}; + +const useDeleteAnnouncementMutation = () => { + const client = useClient(); + + return useMutation({ + mutationFn: (id: string) => client.admin.announcements.deleteAnnouncement(id), + retry: false, + onSuccess: (_, deletedAnnouncementId) => { + queryClient.setQueryData>>( + ['admin', 'announcements'], + (prevData) => create(prevData, (draft) => { + draft?.pages.forEach((page) => page.items = page.items.filter(({ id }) => id !== deletedAnnouncementId)); + }), + ); + queryClient.invalidateQueries({ queryKey: ['announcements'] }); + }, + }); +}; + +export { useAnnouncements, useCreateAnnouncementMutation, useUpdateAnnouncementMutation, useDeleteAnnouncementMutation }; diff --git a/packages/pl-fe/src/api/hooks/admin/use-domains.ts b/packages/pl-fe/src/queries/admin/use-domains.ts similarity index 100% rename from packages/pl-fe/src/api/hooks/admin/use-domains.ts rename to packages/pl-fe/src/queries/admin/use-domains.ts diff --git a/packages/pl-fe/src/api/hooks/admin/use-moderation-log.ts b/packages/pl-fe/src/queries/admin/use-moderation-log.ts similarity index 100% rename from packages/pl-fe/src/api/hooks/admin/use-moderation-log.ts rename to packages/pl-fe/src/queries/admin/use-moderation-log.ts diff --git a/packages/pl-fe/src/api/hooks/admin/use-relays.ts b/packages/pl-fe/src/queries/admin/use-relays.ts similarity index 100% rename from packages/pl-fe/src/api/hooks/admin/use-relays.ts rename to packages/pl-fe/src/queries/admin/use-relays.ts diff --git a/packages/pl-fe/src/api/hooks/admin/use-rules.ts b/packages/pl-fe/src/queries/admin/use-rules.ts similarity index 100% rename from packages/pl-fe/src/api/hooks/admin/use-rules.ts rename to packages/pl-fe/src/queries/admin/use-rules.ts diff --git a/packages/pl-fe/src/queries/events/use-event-participation-requests.ts b/packages/pl-fe/src/queries/events/use-event-participation-requests.ts index 039214d8a..33a91afcc 100644 --- a/packages/pl-fe/src/queries/events/use-event-participation-requests.ts +++ b/packages/pl-fe/src/queries/events/use-event-participation-requests.ts @@ -2,10 +2,10 @@ import { type InfiniteData, useMutation } from '@tanstack/react-query'; import { importEntities } from 'pl-fe/actions/importer'; -import { makePaginatedResponseQuery } from 'pl-fe/queries/utils/make-paginated-response-query'; -import { minifyList } from 'pl-fe/queries/utils/minify-list'; import { useClient } from 'pl-fe/hooks/use-client'; import { queryClient } from 'pl-fe/queries/client'; +import { makePaginatedResponseQuery } from 'pl-fe/queries/utils/make-paginated-response-query'; +import { minifyList } from 'pl-fe/queries/utils/minify-list'; import { store } from 'pl-fe/store'; import type { PlApiClient } from 'pl-api'; diff --git a/packages/pl-fe/src/queries/statuses/use-status-interactions.ts b/packages/pl-fe/src/queries/statuses/use-status-interactions.ts index 2423982f5..f4b3ef0e4 100644 --- a/packages/pl-fe/src/queries/statuses/use-status-interactions.ts +++ b/packages/pl-fe/src/queries/statuses/use-status-interactions.ts @@ -1,10 +1,10 @@ import { useQuery } from '@tanstack/react-query'; import { importEntities } from 'pl-fe/actions/importer'; -import { makePaginatedResponseQuery } from 'pl-fe/queries/utils/make-paginated-response-query'; -import { minifyAccountList } from 'pl-fe/queries/utils/minify-list'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useClient } from 'pl-fe/hooks/use-client'; +import { makePaginatedResponseQuery } from 'pl-fe/queries/utils/make-paginated-response-query'; +import { minifyAccountList } from 'pl-fe/queries/utils/minify-list'; const queryKey = { getDislikedBy: 'statusDislikes',