diff --git a/packages/pl-fe/src/actions/history.ts b/packages/pl-fe/src/actions/history.ts deleted file mode 100644 index 25190ef49..000000000 --- a/packages/pl-fe/src/actions/history.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { getClient } from 'pl-fe/api'; - -import { importEntities } from './importer'; - -import type { StatusEdit } from 'pl-api'; -import type { AppDispatch, RootState } from 'pl-fe/store'; - -const HISTORY_FETCH_REQUEST = 'HISTORY_FETCH_REQUEST' as const; -const HISTORY_FETCH_SUCCESS = 'HISTORY_FETCH_SUCCESS' as const; -const HISTORY_FETCH_FAIL = 'HISTORY_FETCH_FAIL' as const; - -const fetchHistory = (statusId: string) => - (dispatch: AppDispatch, getState: () => RootState) => { - const loading = getState().history[statusId]?.loading; - - if (loading) return; - - dispatch(fetchHistoryRequest(statusId)); - - return getClient(getState()).statuses.getStatusHistory(statusId).then(data => { - dispatch(importEntities({ accounts: data.map((x) => x.account) })); - dispatch(fetchHistorySuccess(statusId, data)); - }).catch(error => dispatch(fetchHistoryFail(statusId, error))); - }; - -const fetchHistoryRequest = (statusId: string) => ({ - type: HISTORY_FETCH_REQUEST, - statusId, -}); - -const fetchHistorySuccess = (statusId: string, history: Array) => ({ - type: HISTORY_FETCH_SUCCESS, - statusId, - history, -}); - -const fetchHistoryFail = (statusId: string, error: unknown) => ({ - type: HISTORY_FETCH_FAIL, - statusId, - error, -}); - -type HistoryAction = ReturnType | ReturnType | ReturnType; - -export { - HISTORY_FETCH_REQUEST, - HISTORY_FETCH_SUCCESS, - HISTORY_FETCH_FAIL, - fetchHistory, - type HistoryAction, -}; diff --git a/packages/pl-fe/src/api/hooks/statuses/use-status-history.ts b/packages/pl-fe/src/api/hooks/statuses/use-status-history.ts new file mode 100644 index 000000000..bb2bda943 --- /dev/null +++ b/packages/pl-fe/src/api/hooks/statuses/use-status-history.ts @@ -0,0 +1,25 @@ +import { useQuery } from '@tanstack/react-query'; +import { StatusEdit } from 'pl-api'; + +import { importEntities } from 'pl-fe/actions/importer'; +import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; +import { useClient } from 'pl-fe/hooks/use-client'; + +const minifyStatusEdit = ({ account, ...statusEdit }: StatusEdit) => ({ + account_id: account.id, + ...statusEdit, +}); + +const useStatusHistory = (statusId: string) => { + const client = useClient(); + const dispatch = useAppDispatch(); + + return useQuery({ + queryKey: ['statuses', 'history', statusId], + queryFn: () => client.statuses.getStatusHistory(statusId) + .then(history => (dispatch(importEntities({ accounts: history.map(({ account }) => account) })), history)) + .then(history => history.map(minifyStatusEdit)), + }); +}; + +export { useStatusHistory }; diff --git a/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx index 8bb84762c..6aa9d6c85 100644 --- a/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx @@ -1,7 +1,7 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { FormattedDate, FormattedMessage } from 'react-intl'; -import { fetchHistory } from 'pl-fe/actions/history'; +import { useStatusHistory } from 'pl-fe/api/hooks/statuses/use-status-history'; import AttachmentThumbs from 'pl-fe/components/attachment-thumbs'; import { ParsedContent } from 'pl-fe/components/parsed-content'; import HStack from 'pl-fe/components/ui/hstack'; @@ -10,7 +10,6 @@ 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 Emojify from 'pl-fe/features/emoji/emojify'; -import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import type { BaseModalProps } from '../modal-root'; @@ -20,10 +19,7 @@ interface CompareHistoryModalProps { } const CompareHistoryModal: React.FC = ({ onClose, statusId }) => { - const dispatch = useAppDispatch(); - - const loading = useAppSelector(state => state.history[statusId]?.loading); - const versions = useAppSelector(state => state.history[statusId]?.items); + const { data: versions, isLoading } = useStatusHistory(statusId); const status = useAppSelector(state => state.statuses[statusId]); @@ -31,13 +27,9 @@ const CompareHistoryModal: React.FC = onClose('COMPARE_HISTORY'); }; - useEffect(() => { - dispatch(fetchHistory(statusId)); - }, [statusId]); - let body; - if (loading) { + if (isLoading) { body = ; } else { body = ( diff --git a/packages/pl-fe/src/reducers/history.ts b/packages/pl-fe/src/reducers/history.ts deleted file mode 100644 index 33fac0b9f..000000000 --- a/packages/pl-fe/src/reducers/history.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { create } from 'mutative'; - -import { HISTORY_FETCH_REQUEST, HISTORY_FETCH_SUCCESS, HISTORY_FETCH_FAIL, type HistoryAction } from 'pl-fe/actions/history'; - -import type { StatusEdit } from 'pl-api'; - -interface History { - loading: boolean; - items: Array>; -} - -type State = Record; - -const initialState: State = {}; - -const minifyStatusEdit = ({ account, ...statusEdit }: StatusEdit, i: number) => ({ - ...statusEdit, account_id: account.id, original: i === 0, -}); - -const history = (state: State = initialState, action: HistoryAction) => { - switch (action.type) { - case HISTORY_FETCH_REQUEST: - return create(state, (draft) => { - draft[action.statusId] = { - loading: true, - items: [], - }; - }); - case HISTORY_FETCH_SUCCESS: - return create(state, (draft) => { - draft[action.statusId] = { - loading: false, - items: action.history.map(minifyStatusEdit).toReversed(), - }; - }); - case HISTORY_FETCH_FAIL: - return create(state, (draft) => { - if (draft[action.statusId]) draft[action.statusId].loading = false; - }); - default: - return state; - } -}; - -export { history as default }; diff --git a/packages/pl-fe/src/reducers/index.ts b/packages/pl-fe/src/reducers/index.ts index d0becaf1d..945556710 100644 --- a/packages/pl-fe/src/reducers/index.ts +++ b/packages/pl-fe/src/reducers/index.ts @@ -18,7 +18,6 @@ import domain_lists from './domain-lists'; import draft_statuses from './draft-statuses'; import filters from './filters'; import followed_tags from './followed-tags'; -import history from './history'; import instance from './instance'; import listAdder from './list-adder'; import listEditor from './list-editor'; @@ -55,7 +54,6 @@ const reducers = { entities, filters, followed_tags, - history, instance, listAdder, listEditor,