diff --git a/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx b/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx new file mode 100644 index 000000000..44e728284 --- /dev/null +++ b/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { Stack } from 'soapbox/components/ui'; + +import { randomIntFromInterval, generateText } from '../utils'; + +export default ({ limit }: { limit: number }) => { + const trend = randomIntFromInterval(6, 3); + const stat = randomIntFromInterval(10, 3); + + return ( + <> + {new Array(limit).fill(undefined).map((_, idx) => ( + +

{generateText(trend)}

+

{generateText(stat)}

+
+ ))} + + ); +}; \ No newline at end of file diff --git a/app/soapbox/features/ui/components/trends-panel.tsx b/app/soapbox/features/ui/components/trends-panel.tsx index 9f582d891..75ef4f151 100644 --- a/app/soapbox/features/ui/components/trends-panel.tsx +++ b/app/soapbox/features/ui/components/trends-panel.tsx @@ -1,26 +1,57 @@ import * as React from 'react'; -import { FormattedMessage } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; +import { Link } from 'react-router-dom'; +import { setFilter } from 'soapbox/actions/search'; import Hashtag from 'soapbox/components/hashtag'; -import { Widget } from 'soapbox/components/ui'; +import { Text, Widget } from 'soapbox/components/ui'; +import PlaceholderSidebarTrends from 'soapbox/features/placeholder/components/placeholder-sidebar-trends'; +import { useAppDispatch } from 'soapbox/hooks'; import useTrends from 'soapbox/queries/trends'; interface ITrendsPanel { limit: number } +const messages = defineMessages({ + viewAll: { + id: 'trendsPanel.viewAll', + defaultMessage: 'View all', + }, +}); + const TrendsPanel = ({ limit }: ITrendsPanel) => { + const dispatch = useAppDispatch(); + const intl = useIntl(); + const { data: trends, isFetching } = useTrends(); - if (trends?.length === 0 || isFetching) { + const setHashtagsFilter = () => { + dispatch(setFilter('hashtags')); + }; + + if (!isFetching && !trends?.length) { return null; } return ( - }> - {trends?.slice(0, limit).map((hashtag) => ( - - ))} + } + action={ + + + {intl.formatMessage(messages.viewAll)} + + + } + > + {isFetching ? ( + + ) : ( + trends?.slice(0, limit).map((hashtag) => ( + + )) + )} ); }; diff --git a/app/soapbox/pages/default_page.tsx b/app/soapbox/pages/default_page.tsx index 9e918cc4e..f6561cbf0 100644 --- a/app/soapbox/pages/default_page.tsx +++ b/app/soapbox/pages/default_page.tsx @@ -36,7 +36,7 @@ const DefaultPage: React.FC = ({ children }) => { )} {features.trends && ( - {Component => } + {Component => } )} {me && features.suggestions && ( diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx index de9375ace..2d73673d7 100644 --- a/app/soapbox/pages/home_page.tsx +++ b/app/soapbox/pages/home_page.tsx @@ -82,7 +82,7 @@ const HomePage: React.FC = ({ children }) => { )} {features.trends && ( - {Component => } + {Component => } )} {hasPatron && ( diff --git a/app/soapbox/pages/status_page.tsx b/app/soapbox/pages/status_page.tsx index a296b8fe0..c0c99abd7 100644 --- a/app/soapbox/pages/status_page.tsx +++ b/app/soapbox/pages/status_page.tsx @@ -40,7 +40,7 @@ const StatusPage: React.FC = ({ children }) => { )} {features.trends && ( - {Component => } + {Component => } )} {me && features.suggestions && (