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 0000000000..44e7282840
--- /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 9f582d891e..75ef4f1514 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 9e918cc4e3..f6561cbf09 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 de9375acec..2d73673d74 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 a296b8fe02..c0c99abd7b 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 && (