From 29cd637a6b3a27344111e6d8a6bf92e6d8c107c2 Mon Sep 17 00:00:00 2001 From: mkljczk Date: Thu, 5 Dec 2024 11:34:58 +0100 Subject: [PATCH] pl-fe: migrate backups to tanstack query Signed-off-by: mkljczk --- packages/pl-api/lib/client.ts | 2 +- packages/pl-api/lib/entities/backup.ts | 2 +- packages/pl-api/package.json | 2 +- packages/pl-fe/package.json | 2 +- packages/pl-fe/src/actions/backups.ts | 81 ------------------- packages/pl-fe/src/features/backups/index.tsx | 20 ++--- .../pl-fe/src/queries/settings/use-backups.ts | 29 +++++++ packages/pl-fe/src/reducers/backups.ts | 23 ------ packages/pl-fe/src/reducers/index.ts | 2 - packages/pl-fe/yarn.lock | 8 +- 10 files changed, 42 insertions(+), 129 deletions(-) delete mode 100644 packages/pl-fe/src/actions/backups.ts create mode 100644 packages/pl-fe/src/queries/settings/use-backups.ts delete mode 100644 packages/pl-fe/src/reducers/backups.ts diff --git a/packages/pl-api/lib/client.ts b/packages/pl-api/lib/client.ts index 407c41851..005934cd9 100644 --- a/packages/pl-api/lib/client.ts +++ b/packages/pl-api/lib/client.ts @@ -256,7 +256,7 @@ interface PlApiClientConstructorOpts { /** * @category Clients - * + * * Mastodon API client. */ class PlApiClient { diff --git a/packages/pl-api/lib/entities/backup.ts b/packages/pl-api/lib/entities/backup.ts index 8a49f4afa..5a142c07e 100644 --- a/packages/pl-api/lib/entities/backup.ts +++ b/packages/pl-api/lib/entities/backup.ts @@ -8,7 +8,7 @@ import { datetimeSchema, mimeSchema } from './utils'; */ const backupSchema = v.object({ id: v.pipe(v.unknown(), v.transform(String)), - contentType: mimeSchema, + content_type: mimeSchema, file_size: v.fallback(v.number(), 0), inserted_at: datetimeSchema, processed: v.fallback(v.boolean(), false), diff --git a/packages/pl-api/package.json b/packages/pl-api/package.json index 83d1222b6..7816f8a90 100644 --- a/packages/pl-api/package.json +++ b/packages/pl-api/package.json @@ -1,6 +1,6 @@ { "name": "pl-api", - "version": "1.0.0-rc.3", + "version": "1.0.0-rc.4", "type": "module", "homepage": "https://github.com/mkljczk/pl-fe/tree/develop/packages/pl-api", "repository": { diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json index e6b9be230..0adbc6b65 100644 --- a/packages/pl-fe/package.json +++ b/packages/pl-fe/package.json @@ -101,7 +101,7 @@ "multiselect-react-dropdown": "^2.0.25", "mutative": "^1.1.0", "path-browserify": "^1.0.1", - "pl-api": "^1.0.0-rc.3", + "pl-api": "^1.0.0-rc.4", "postcss": "^8.4.47", "process": "^0.11.10", "punycode": "^2.1.1", diff --git a/packages/pl-fe/src/actions/backups.ts b/packages/pl-fe/src/actions/backups.ts deleted file mode 100644 index 68e4f6dde..000000000 --- a/packages/pl-fe/src/actions/backups.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { getClient } from '../api'; - -import type { Backup } from 'pl-api'; -import type { AppDispatch, RootState } from 'pl-fe/store'; - -const BACKUPS_FETCH_REQUEST = 'BACKUPS_FETCH_REQUEST' as const; -const BACKUPS_FETCH_SUCCESS = 'BACKUPS_FETCH_SUCCESS' as const; -const BACKUPS_FETCH_FAIL = 'BACKUPS_FETCH_FAIL' as const; - -const BACKUPS_CREATE_REQUEST = 'BACKUPS_CREATE_REQUEST' as const; -const BACKUPS_CREATE_SUCCESS = 'BACKUPS_CREATE_SUCCESS' as const; -const BACKUPS_CREATE_FAIL = 'BACKUPS_CREATE_FAIL' as const; - -interface BackupsFetchRequestAction { - type: typeof BACKUPS_FETCH_REQUEST; -} - -interface BackupsFetchSuccessAction { - type: typeof BACKUPS_FETCH_SUCCESS; - backups: Array; -} - -interface BackupsFetchFailAction { - type: typeof BACKUPS_FETCH_FAIL; - error: unknown; -} - -const fetchBackups = () => - (dispatch: AppDispatch, getState: () => RootState) => { - dispatch({ type: BACKUPS_FETCH_REQUEST }); - - return getClient(getState).settings.getBackups().then((backups) => - dispatch({ type: BACKUPS_FETCH_SUCCESS, backups }), - ).catch(error => { - dispatch({ type: BACKUPS_FETCH_FAIL, error }); - }); - }; - - interface BackupsCreateRequestAction { - type: typeof BACKUPS_CREATE_REQUEST; - } - - interface BackupsCreateSuccessAction { - type: typeof BACKUPS_CREATE_SUCCESS; - backups: Array; - } - - interface BackupsCreateFailAction { - type: typeof BACKUPS_CREATE_FAIL; - error: unknown; - } - -const createBackup = () => - (dispatch: AppDispatch, getState: () => RootState) => { - dispatch({ type: BACKUPS_CREATE_REQUEST }); - return getClient(getState).settings.createBackup().then((backup) => - dispatch({ type: BACKUPS_CREATE_SUCCESS, backups: [backup] }), - ).catch(error => { - dispatch({ type: BACKUPS_CREATE_FAIL, error }); - }); - }; - -type BackupsAction = - | BackupsFetchRequestAction - | BackupsFetchSuccessAction - | BackupsFetchFailAction - | BackupsCreateRequestAction - | BackupsCreateSuccessAction - | BackupsCreateFailAction; - -export { - BACKUPS_FETCH_REQUEST, - BACKUPS_FETCH_SUCCESS, - BACKUPS_FETCH_FAIL, - BACKUPS_CREATE_REQUEST, - BACKUPS_CREATE_SUCCESS, - BACKUPS_CREATE_FAIL, - fetchBackups, - createBackup, - type BackupsAction, -}; diff --git a/packages/pl-fe/src/features/backups/index.tsx b/packages/pl-fe/src/features/backups/index.tsx index d64858534..acb0ea1cb 100644 --- a/packages/pl-fe/src/features/backups/index.tsx +++ b/packages/pl-fe/src/features/backups/index.tsx @@ -1,7 +1,6 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { FormattedDate, defineMessages, useIntl } from 'react-intl'; -import { fetchBackups, createBackup } from 'pl-fe/actions/backups'; import Button from 'pl-fe/components/ui/button'; import Card from 'pl-fe/components/ui/card'; import Column from 'pl-fe/components/ui/column'; @@ -10,8 +9,7 @@ import HStack from 'pl-fe/components/ui/hstack'; import Spinner from 'pl-fe/components/ui/spinner'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; -import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; +import { useBackupsQuery, useCreateBackupMutation } from 'pl-fe/queries/settings/use-backups'; import type { Backup as BackupEntity } from 'pl-api'; @@ -63,23 +61,15 @@ const Backup: React.FC = ({ backup }) => { const Backups = () => { const intl = useIntl(); - const dispatch = useAppDispatch(); - const backups = useAppSelector((state) => Object.values(state.backups).toSorted((a, b) => a.inserted_at.localeCompare(b.inserted_at))); - - const [isLoading, setIsLoading] = useState(true); + const { data: backups = [], isLoading } = useBackupsQuery(); + const { mutate: createBackup } = useCreateBackupMutation(); const handleCreateBackup: React.MouseEventHandler = e => { - dispatch(createBackup()); + createBackup(); e.preventDefault(); }; - useEffect(() => { - dispatch(fetchBackups()).then(() => { - setIsLoading(false); - }).catch(() => {}); - }, []); - const showLoading = isLoading && backups.length === 0; const emptyMessage = ( diff --git a/packages/pl-fe/src/queries/settings/use-backups.ts b/packages/pl-fe/src/queries/settings/use-backups.ts new file mode 100644 index 000000000..f943d4713 --- /dev/null +++ b/packages/pl-fe/src/queries/settings/use-backups.ts @@ -0,0 +1,29 @@ +import { useMutation, useQuery } from '@tanstack/react-query'; + +import { useClient } from 'pl-fe/hooks/use-client'; + +import { queryClient } from '../client'; + +const useBackupsQuery = () => { + const client = useClient(); + + return useQuery({ + queryKey: ['settings', 'backups'], + queryFn: () => client.settings.getBackups(), + select: (backups) => backups.toSorted((a, b) => a.inserted_at.localeCompare(b.inserted_at)), + }); +}; + +const useCreateBackupMutation = () => { + const client = useClient(); + + return useMutation({ + mutationKey: ['settings', 'backups'], + mutationFn: () => client.settings.createBackup(), + onSuccess: () => queryClient.invalidateQueries({ + queryKey: ['settings', 'backups'], + }), + }); +}; + +export { useBackupsQuery, useCreateBackupMutation }; diff --git a/packages/pl-fe/src/reducers/backups.ts b/packages/pl-fe/src/reducers/backups.ts deleted file mode 100644 index 1aff50580..000000000 --- a/packages/pl-fe/src/reducers/backups.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { create } from 'mutative'; - -import { BACKUPS_FETCH_SUCCESS, BACKUPS_CREATE_SUCCESS, type BackupsAction } from '../actions/backups'; - -import type { Backup } from 'pl-api'; - -type State = Record; - -const initialState: State = {}; - -const backups = (state = initialState, action: BackupsAction) => { - switch (action.type) { - case BACKUPS_FETCH_SUCCESS: - case BACKUPS_CREATE_SUCCESS: - return create(state, (draft) => action.backups.forEach((backup) => draft[backup.inserted_at] = backup)); - default: - return state; - } -}; - -export { - backups as default, -}; diff --git a/packages/pl-fe/src/reducers/index.ts b/packages/pl-fe/src/reducers/index.ts index d27b43292..ef720af6a 100644 --- a/packages/pl-fe/src/reducers/index.ts +++ b/packages/pl-fe/src/reducers/index.ts @@ -9,7 +9,6 @@ import admin from './admin'; import admin_user_index from './admin-user-index'; import aliases from './aliases'; import auth from './auth'; -import backups from './backups'; import compose from './compose'; import contexts from './contexts'; import conversations from './conversations'; @@ -43,7 +42,6 @@ const reducers = { admin_user_index, aliases, auth, - backups, compose, contexts, conversations, diff --git a/packages/pl-fe/yarn.lock b/packages/pl-fe/yarn.lock index 722bf4a59..6883651cd 100644 --- a/packages/pl-fe/yarn.lock +++ b/packages/pl-fe/yarn.lock @@ -7834,10 +7834,10 @@ pkg-dir@^4.1.0: dependencies: find-up "^4.0.0" -pl-api@^1.0.0-rc.3: - version "1.0.0-rc.3" - resolved "https://registry.yarnpkg.com/pl-api/-/pl-api-1.0.0-rc.3.tgz#36a3f093bd2935e4b59a2efaa225a5baa4af5dea" - integrity sha512-ILNesTpz+Y+4S/65S2KX597YBXxEmYuuxKGkzX56cny8tBReiw4ar07H6ZrjEBog8Ramq6N6IaRch5Dt9ZPE3A== +pl-api@^1.0.0-rc.4: + version "1.0.0-rc.4" + resolved "https://registry.yarnpkg.com/pl-api/-/pl-api-1.0.0-rc.4.tgz#6119fdef8362104ba238a0e33620d35982b91be6" + integrity sha512-TsORtRUV41NAp4McbYrhcw4pCAiiM99q+gGJpPoPOnyw/5G69JQ1lBCcDFYQzsbgvuQ4yseM5kZolNO6sTxRGg== dependencies: blurhash "^2.0.5" http-link-header "^1.1.3"