pl-fe: remove trends reducers

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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

@@ -5,6 +5,7 @@ import { getClient } from 'pl-fe/api';
 import { isNativeEmoji } from 'pl-fe/features/emoji';
 import emojiSearch from 'pl-fe/features/emoji/search';
 import { Language } from 'pl-fe/features/preferences';
+import { queryClient } from 'pl-fe/queries/client';
 import { selectAccount, selectOwnAccount, makeGetAccount } from 'pl-fe/selectors';
 import { tagHistory } from 'pl-fe/settings';
 import { useModalsStore } from 'pl-fe/stores/modals';
@@ -615,7 +616,7 @@ const fetchComposeSuggestionsTags = (dispatch: AppDispatch, getState: () => Root
   const { trends } = state.auth.client.features;
 
   if (trends) {
-    const currentTrends = state.trends.items;
+    const currentTrends = queryClient.getQueryData<Array<Tag>>(['trends', 'tags']) || [];
 
     return dispatch(updateSuggestionTags(composeId, token, currentTrends));
   }

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

@@ -1,16 +0,0 @@
-import type { Tag } from 'pl-api';
-
-const TRENDS_FETCH_SUCCESS = 'TRENDS_FETCH_SUCCESS';
-
-const fetchTrendsSuccess = (tags: Array<Tag>) => ({
-  type: TRENDS_FETCH_SUCCESS,
-  tags,
-});
-
-type TrendsAction = ReturnType<typeof fetchTrendsSuccess>;
-
-export {
-  TRENDS_FETCH_SUCCESS,
-  fetchTrendsSuccess,
-  type TrendsAction,
-};

packages/pl-fe/src/api/hooks/trends/use-trending-statuses.ts

@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { importEntities } from 'pl-fe/actions/importer';
+import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
+import { useClient } from 'pl-fe/hooks/use-client';
+import { useFeatures } from 'pl-fe/hooks/use-features';
+
+const useTrendingStatuses = () => {
+  const client = useClient();
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+
+  const fetchTrendingStatuses = async () => {
+    const response = await client.trends.getTrendingStatuses();
+
+    dispatch(importEntities({ statuses: response }));
+
+    return response.map(({ id }) => id);
+  };
+
+  return useQuery({
+    queryKey: ['trends', 'statuses'],
+    queryFn: fetchTrendingStatuses,
+    enabled: features.trendingStatuses,
+  });
+};
+
+export { useTrendingStatuses };

packages/pl-fe/src/features/search/components/search-results.tsx

@@ -1,11 +1,11 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { expandSearch, setFilter, setSearchAccount } from 'pl-fe/actions/search';
-import { fetchTrendingStatuses } from 'pl-fe/actions/trending-statuses';
 import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
 import { useTrendingLinks } from 'pl-fe/api/hooks/trends/use-trending-links';
+import { useTrendingStatuses } from 'pl-fe/api/hooks/trends/use-trending-statuses';
 import Hashtag from 'pl-fe/components/hashtag';
 import IconButton from 'pl-fe/components/icon-button';
 import ScrollableList from 'pl-fe/components/scrollable-list';
@@ -21,6 +21,7 @@ import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useFeatures } from 'pl-fe/hooks/use-features';
+import useTrends from 'pl-fe/queries/trends';
 
 import type { SearchFilter } from 'pl-fe/reducers/search';
 
@@ -41,11 +42,11 @@ const SearchResults = () => {
   const value = useAppSelector((state) => state.search.submittedValue);
   const results = useAppSelector((state) => state.search.results);
   const suggestions = useAppSelector((state) => state.suggestions.items);
-  const trendingStatuses = useAppSelector((state) => state.trending_statuses.items);
-  const trends = useAppSelector((state) => state.trends.items);
   const submitted = useAppSelector((state) => state.search.submitted);
   const selectedFilter = useAppSelector((state) => state.search.filter);
   const filterByAccount = useAppSelector((state) => state.search.accountId || undefined);
+  const { data: trendingTags } = useTrends();
+  const { data: trendingStatuses } = useTrendingStatuses();
   const { trendingLinks } = useTrendingLinks();
   const { account } = useAccount(filterByAccount);
 
@@ -107,10 +108,6 @@ const SearchResults = () => {
     if (element) element.focus();
   };
 
-  useEffect(() => {
-    dispatch(fetchTrendingStatuses());
-  }, []);
-
   let searchResults;
   let hasMore = false;
   let loaded;
@@ -187,7 +184,7 @@ const SearchResults = () => {
     if (results.hashtags && results.hashtags.length > 0) {
       searchResults = results.hashtags.map(hashtag => <Hashtag key={hashtag.name} hashtag={hashtag} />);
     } else if (!submitted && suggestions && suggestions.length !== 0) {
-      searchResults = trends.map(hashtag => <Hashtag key={hashtag.name} hashtag={hashtag} />);
+      searchResults = trendingTags?.map(hashtag => <Hashtag key={hashtag.name} hashtag={hashtag} />);
     } else if (loaded) {
       noResultsMessage = (
         <div className='empty-column-indicator'>

packages/pl-fe/src/queries/trends.ts

@@ -1,31 +1,22 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { fetchTrendsSuccess } from 'pl-fe/actions/trends';
-import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useClient } from 'pl-fe/hooks/use-client';
+import { useFeatures } from 'pl-fe/hooks/use-features';
 import { useLoggedIn } from 'pl-fe/hooks/use-logged-in';
 
 import type { Tag } from 'pl-api';
 
 const useTrends = () => {
-  const dispatch = useAppDispatch();
   const client = useClient();
+  const features = useFeatures();
   const { isLoggedIn } = useLoggedIn();
 
-  const getTrends = async() => {
-    const data = await client.trends.getTrendingTags();
-
-    dispatch(fetchTrendsSuccess(data));
-
-    return data;
-  };
-
   const result = useQuery<ReadonlyArray<Tag>>({
-    queryKey: ['trends'],
-    queryFn: getTrends,
+    queryKey: ['trends', 'tags'],
+    queryFn: () => client.trends.getTrendingTags(),
     placeholderData: [],
     staleTime: 600000, // 10 minutes
-    enabled: isLoggedIn,
+    enabled: isLoggedIn && features.trends,
   });
 
   return result;

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

@@ -40,7 +40,6 @@ import suggestions from './suggestions';
 import tags from './tags';
 import timelines from './timelines';
 import trending_statuses from './trending-statuses';
-import trends from './trends';
 import user_lists from './user-lists';
 
 const reducers = {
@@ -81,7 +80,6 @@ const reducers = {
   tags,
   timelines,
   trending_statuses,
-  trends,
   user_lists,
 };
 

packages/pl-fe/src/reducers/trends.test.ts

@@ -1,10 +0,0 @@
-import reducer from './trends';
-
-describe('trends reducer', () => {
-  it('should return the initial state', () => {
-    expect(reducer(undefined, {} as any).toJS()).toEqual({
-      items: [],
-      isLoading: false,
-    });
-  });
-});

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

@@ -1,29 +0,0 @@
-import { create } from 'mutative';
-
-import { TRENDS_FETCH_SUCCESS, type TrendsAction } from '../actions/trends';
-
-import type { Tag } from 'pl-api';
-
-interface State {
-  items: Array<Tag>;
-  isLoading: boolean;
-}
-
-const initialState: State = {
-  items: [],
-  isLoading: false,
-};
-
-const trendsReducer = (state = initialState, action: TrendsAction) => {
-  switch (action.type) {
-    case TRENDS_FETCH_SUCCESS:
-      return create(state, (draft) => {
-        draft.items = action.tags;
-        draft.isLoading = false;
-      });
-    default:
-      return state;
-  }
-};
-
-export { trendsReducer as default };