matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support Mastodon trending links

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-08-20 12:42:06 +02:00
parent 236e4db1a9
commit 838ace63d9
13 changed files with 141 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/features/compose/components/search-results.tsx
View File

@ -1,22 +1,23 @@
import clsx from 'clsx';
import React, { useEffect, useRef } from 'react';
import { List as ImmutableList, type OrderedSet as ImmutableOrderedSet } from 'immutable';
import React, { useEffect, useRef, useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { expandSearch, setFilter, setSearchAccount } from 'soapbox/actions/search';
import { fetchTrendingStatuses } from 'soapbox/actions/trending-statuses';
import { useAccount } from 'soapbox/api/hooks';
import { useAccount, useTrendingLinks } from 'soapbox/api/hooks';
import Hashtag from 'soapbox/components/hashtag';
import IconButton from 'soapbox/components/icon-button';
import ScrollableList from 'soapbox/components/scrollable-list';
import TrendingLink from 'soapbox/components/trending-link';
import { HStack, Spinner, Tabs, Text } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account-container';
import StatusContainer from 'soapbox/containers/status-container';
import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account';
import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag';
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
import type { VirtuosoHandle } from 'react-virtuoso';
import type { SearchFilter } from 'soapbox/reducers/search';
@ -24,6 +25,7 @@ const messages = defineMessages({
accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
statuses: { id: 'search_results.statuses', defaultMessage: 'Posts' },
hashtags: { id: 'search_results.hashtags', defaultMessage: 'Hashtags' },
links: { id: 'search_results.links', defaultMessage: 'News' },
});
const SearchResults = () => {
@ -31,6 +33,9 @@ const SearchResults = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const features = useFeatures();
const [tabKey, setTabKey] = useState(1);
const value = useAppSelector((state) => state.search.submittedValue);
const results = useAppSelector((state) => state.search.results);
@ -40,6 +45,7 @@ const SearchResults = () => {
const submitted = useAppSelector((state) => state.search.submitted);
const selectedFilter = useAppSelector((state) => state.search.filter);
const filterByAccount = useAppSelector((state) => state.search.accountId || undefined);
const { trendingLinks } = useTrendingLinks();
const { account } = useAccount(filterByAccount);
const handleLoadMore = () => dispatch(expandSearch(selectedFilter));
@ -61,9 +67,6 @@ const SearchResults = () => {
action: () => selectFilter('statuses'),
name: 'statuses',
},
);
items.push(
{
text: intl.formatMessage(messages.hashtags),
action: () => selectFilter('hashtags'),
@ -71,7 +74,13 @@ const SearchResults = () => {
},
);
return <Tabs items={items} activeItem={selectedFilter} />;
if (!submitted && features.trendingLinks) items.push({
text: intl.formatMessage(messages.links),
action: () => selectFilter('links'),
name: 'links',
});
return <Tabs key={tabKey} items={items} activeItem={selectedFilter} />;
};
const getCurrentIndex = (id: string): number => resultsIds?.keySeq().findIndex(key => key === id);
@ -197,6 +206,15 @@ const SearchResults = () => {
}
}
if (selectedFilter === 'links') {
if (submitted) {
selectFilter('accounts');
setTabKey(key => ++key);
} else if (!submitted && trendingLinks) {
searchResults = ImmutableList(trendingLinks.map(trendingLink => <TrendingLink trendingLink={trendingLink} />));
}
}
return (
<>
{filterByAccount ? (
@ -228,7 +246,7 @@ const SearchResults = () => {
'divide-gray-200 dark:divide-gray-800 divide-solid divide-y': selectedFilter === 'statuses',
})}
itemClassName={clsx({
'pb-4': selectedFilter === 'accounts',
'pb-4': selectedFilter === 'accounts' || selectedFilter === 'links',
'pb-3': selectedFilter === 'hashtags',
})}
>