bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: move status history to tanstack query

Browse source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk 2024-11-30 20:38:54 +01:00
parent 154a71142e
commit d95a78085e
5 changed files with 29 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
packages/pl-fe/src/actions/history.ts
View file

@ -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<StatusEdit>) => ({
type: HISTORY_FETCH_SUCCESS,
statusId,
history,
});
const fetchHistoryFail = (statusId: string, error: unknown) => ({
type: HISTORY_FETCH_FAIL,
statusId,
error,
});
type HistoryAction = ReturnType<typeof fetchHistoryRequest> | ReturnType<typeof fetchHistorySuccess> | ReturnType<typeof fetchHistoryFail>;
export {
HISTORY_FETCH_REQUEST,
HISTORY_FETCH_SUCCESS,
HISTORY_FETCH_FAIL,
fetchHistory,
type HistoryAction,
};

25
packages/pl-fe/src/api/hooks/statuses/use-status-history.ts Normal file
View file

@ -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 };

16
packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx
View file

@ -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<BaseModalProps & CompareHistoryModalProps> = ({ 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<BaseModalProps & CompareHistoryModalProps> =
onClose('COMPARE_HISTORY');
};
useEffect(() => {
dispatch(fetchHistory(statusId));
}, [statusId]);
let body;
if (loading) {
if (isLoading) {
body = <Spinner />;
} else {
body = (

45
packages/pl-fe/src/reducers/history.ts
View file

@ -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<ReturnType<typeof minifyStatusEdit>>;
}
type State = Record<string, History>;
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 };

2
packages/pl-fe/src/reducers/index.ts
View file

@ -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,