pl-fe: move status history to tanstack query

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/actions/history.ts

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

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

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<BaseModalProps & CompareHistoryModalProps> = ({ onClose, statusId }) => {
-  const dispatch = useAppDispatch();
+  const { data: versions, isLoading } = useStatusHistory(statusId);
-
-  const loading = useAppSelector(state => state.history[statusId]?.loading);
-  const versions = useAppSelector(state => state.history[statusId]?.items);
 
   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 = (

packages/pl-fe/src/reducers/history.ts

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

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,