From 7609a7e2a77b623ac01ae46af52327eefe943c47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sat, 9 Nov 2024 13:58:55 +0100 Subject: [PATCH] pl-fe: remove trends reducers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- packages/pl-fe/src/actions/auth.ts | 20 ++++++------- packages/pl-fe/src/actions/compose.ts | 3 +- packages/pl-fe/src/actions/trends.ts | 16 ---------- .../api/hooks/trends/use-trending-statuses.ts | 28 ++++++++++++++++++ .../src/features/developers/apps/create.tsx | 8 ++--- .../search/components/search-results.tsx | 15 ++++------ packages/pl-fe/src/queries/trends.ts | 19 ++++-------- packages/pl-fe/src/reducers/index.ts | 2 -- packages/pl-fe/src/reducers/trends.test.ts | 10 ------- packages/pl-fe/src/reducers/trends.ts | 29 ------------------- packages/pl-fe/src/service-worker/sw.ts | 14 ++++----- .../src/service-worker/web-push-locales.ts | 2 +- packages/pl-fe/src/utils/copy.ts | 2 +- 13 files changed, 64 insertions(+), 104 deletions(-) delete mode 100644 packages/pl-fe/src/actions/trends.ts create mode 100644 packages/pl-fe/src/api/hooks/trends/use-trending-statuses.ts delete mode 100644 packages/pl-fe/src/reducers/trends.test.ts delete mode 100644 packages/pl-fe/src/reducers/trends.ts diff --git a/packages/pl-fe/src/actions/auth.ts b/packages/pl-fe/src/actions/auth.ts index 52c9e5713..20ead9350 100644 --- a/packages/pl-fe/src/actions/auth.ts +++ b/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)) diff --git a/packages/pl-fe/src/actions/compose.ts b/packages/pl-fe/src/actions/compose.ts index b506a5f93..0f0f8bd79 100644 --- a/packages/pl-fe/src/actions/compose.ts +++ b/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>(['trends', 'tags']) || []; return dispatch(updateSuggestionTags(composeId, token, currentTrends)); } diff --git a/packages/pl-fe/src/actions/trends.ts b/packages/pl-fe/src/actions/trends.ts deleted file mode 100644 index 831d94850..000000000 --- a/packages/pl-fe/src/actions/trends.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { Tag } from 'pl-api'; - -const TRENDS_FETCH_SUCCESS = 'TRENDS_FETCH_SUCCESS'; - -const fetchTrendsSuccess = (tags: Array) => ({ - type: TRENDS_FETCH_SUCCESS, - tags, -}); - -type TrendsAction = ReturnType; - -export { - TRENDS_FETCH_SUCCESS, - fetchTrendsSuccess, - type TrendsAction, -}; diff --git a/packages/pl-fe/src/api/hooks/trends/use-trending-statuses.ts b/packages/pl-fe/src/api/hooks/trends/use-trending-statuses.ts new file mode 100644 index 000000000..675a7c71a --- /dev/null +++ b/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 }; diff --git a/packages/pl-fe/src/features/developers/apps/create.tsx b/packages/pl-fe/src/features/developers/apps/create.tsx index 4021ee28b..42c9688f1 100644 --- a/packages/pl-fe/src/features/developers/apps/create.tsx +++ b/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)) diff --git a/packages/pl-fe/src/features/search/components/search-results.tsx b/packages/pl-fe/src/features/search/components/search-results.tsx index cf0c9a872..ffc394ca0 100644 --- a/packages/pl-fe/src/features/search/components/search-results.tsx +++ b/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 => ); } else if (!submitted && suggestions && suggestions.length !== 0) { - searchResults = trends.map(hashtag => ); + searchResults = trendingTags?.map(hashtag => ); } else if (loaded) { noResultsMessage = (
diff --git a/packages/pl-fe/src/queries/trends.ts b/packages/pl-fe/src/queries/trends.ts index c34cf3cf8..cfffe3018 100644 --- a/packages/pl-fe/src/queries/trends.ts +++ b/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>({ - queryKey: ['trends'], - queryFn: getTrends, + queryKey: ['trends', 'tags'], + queryFn: () => client.trends.getTrendingTags(), placeholderData: [], staleTime: 600000, // 10 minutes - enabled: isLoggedIn, + enabled: isLoggedIn && features.trends, }); return result; diff --git a/packages/pl-fe/src/reducers/index.ts b/packages/pl-fe/src/reducers/index.ts index 21212ae71..9f4dc3db3 100644 --- a/packages/pl-fe/src/reducers/index.ts +++ b/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, }; diff --git a/packages/pl-fe/src/reducers/trends.test.ts b/packages/pl-fe/src/reducers/trends.test.ts deleted file mode 100644 index 79ee44ed3..000000000 --- a/packages/pl-fe/src/reducers/trends.test.ts +++ /dev/null @@ -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, - }); - }); -}); diff --git a/packages/pl-fe/src/reducers/trends.ts b/packages/pl-fe/src/reducers/trends.ts deleted file mode 100644 index 918602572..000000000 --- a/packages/pl-fe/src/reducers/trends.ts +++ /dev/null @@ -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; - 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 }; diff --git a/packages/pl-fe/src/service-worker/sw.ts b/packages/pl-fe/src/service-worker/sw.ts index 413f22a62..cc0b86699 100644 --- a/packages/pl-fe/src/service-worker/sw.ts +++ b/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)]; diff --git a/packages/pl-fe/src/service-worker/web-push-locales.ts b/packages/pl-fe/src/service-worker/web-push-locales.ts index c344e94b8..efb638dd1 100644 --- a/packages/pl-fe/src/service-worker/web-push-locales.ts +++ b/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; + const full = JSON.parse(content) as Record; const locale = filename.split('.')[0]; filtered[locale] = { diff --git a/packages/pl-fe/src/utils/copy.ts b/packages/pl-fe/src/utils/copy.ts index 27bf5c70a..b2330b66f 100644 --- a/packages/pl-fe/src/utils/copy.ts +++ b/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);