pl-fe: remove trends reducers

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

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

@@ -113,11 +113,11 @@ const createAppToken = () =>
     const app = getState().auth.app!;
 
     const params = {
-      client_id:     app.client_id!,
+      client_id: app.client_id!,
       client_secret: app.client_secret!,
-      redirect_uri:  'urn:ietf:wg:oauth:2.0:oob',
-      grant_type:    'client_credentials',
-      scope:         getScopes(getState()),
+      redirect_uri: 'urn:ietf:wg:oauth:2.0:oob',
+      grant_type: 'client_credentials',
+      scope: getScopes(getState()),
     };
 
     return dispatch(obtainOAuthToken(params)).then((token) =>
@@ -130,13 +130,13 @@ const createUserToken = (username: string, password: string) =>
     const app = getState().auth.app;
 
     const params = {
-      client_id:     app?.client_id!,
+      client_id: app?.client_id!,
       client_secret: app?.client_secret!,
-      redirect_uri:  'urn:ietf:wg:oauth:2.0:oob',
-      grant_type:    'password',
-      username:      username,
-      password:      password,
-      scope:         getScopes(getState()),
+      redirect_uri: 'urn:ietf:wg:oauth:2.0:oob',
+      grant_type: 'password',
+      username: username,
+      password: password,
+      scope: getScopes(getState()),
     };
 
     return dispatch(obtainOAuthToken(params))

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/developers/apps/create.tsx

@@ -57,11 +57,11 @@ const CreateApp: React.FC = () => {
     const baseURL = getBaseURL(account!);
 
     const tokenParams = {
-      client_id:     app!.client_id,
+      client_id: app!.client_id,
       client_secret: app!.client_secret,
-      redirect_uri:  params.redirect_uris,
-      grant_type:    'client_credentials',
-      scope:         params.scopes,
+      redirect_uri: params.redirect_uris,
+      grant_type: 'client_credentials',
+      scope: params.scopes,
     };
 
     return dispatch(obtainOAuthToken(tokenParams, baseURL))

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

packages/pl-fe/src/service-worker/sw.ts

@@ -155,13 +155,13 @@ const handlePush = (event: PushEvent) => {
   event.waitUntil(
     fetchFromApi(`/api/v1/notifications/${notification_id}`, 'get', access_token).then(notification => {
       const options: ExtendedNotificationOptions = {
-        title:     formatMessage(`notification.${notification.type}`, preferred_locale, { name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username }),
-        body:      notification.status && htmlToPlainText(notification.status.content),
-        icon:      notification.account.avatar_static,
+        title: formatMessage(`notification.${notification.type}`, preferred_locale, { name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username }),
+        body: notification.status && htmlToPlainText(notification.status.content),
+        icon: notification.account.avatar_static,
         timestamp: notification.created_at ? Number(new Date(notification.created_at)) : undefined,
-        tag:       notification.id,
-        image:     notification.status?.media_attachments[0]?.preview_url,
-        data:      { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.acct}/posts/${notification.status.id}` : `/@${notification.account.acct}` },
+        tag: notification.id,
+        image: notification.status?.media_attachments[0]?.preview_url,
+        data: { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.acct}/posts/${notification.status.id}` : `/@${notification.account.acct}` },
       };
 
       if (notification.status?.spoiler_text || notification.status?.sensitive) {
@@ -224,7 +224,7 @@ const findBestClient = (clients: readonly WindowClient[]): WindowClient => {
 const expandNotification = (notification: Notification) => {
   const newNotification = cloneNotification(notification);
 
-  newNotification.body  = newNotification.data.hiddenBody;
+  newNotification.body = newNotification.data.hiddenBody;
   newNotification.image = newNotification.data.hiddenImage;
   newNotification.actions = [actionReblog(notification.data.preferred_locale), actionFavourite(notification.data.preferred_locale)];
 

packages/pl-fe/src/service-worker/web-push-locales.ts

@@ -8,7 +8,7 @@ filenames.forEach(filename => {
   if (!filename.match(/\.json$/) || filename.match(/defaultMessages|whitelist/)) return;
 
   const content = fs.readFileSync(path.resolve(__dirname, `../locales/${filename}`), 'utf-8');
-  const full  = JSON.parse(content) as Record<string, string>;
+  const full = JSON.parse(content) as Record<string, string>;
   const locale = filename.split('.')[0];
 
   filtered[locale] = {

packages/pl-fe/src/utils/copy.ts

@@ -8,7 +8,7 @@ const copy = (text: string, onSuccess?: () => void) => {
   } else {
     const textarea = document.createElement('textarea');
 
-    textarea.textContent  = text;
+    textarea.textContent = text;
     textarea.style.position = 'fixed';
 
     document.body.appendChild(textarea);