Convert trends to React Query

app/soapbox/features/ui/components/trends-panel.tsx

@@ -1,40 +1,32 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
-import { fetchTrends } from 'soapbox/actions/trends';
 import Hashtag from 'soapbox/components/hashtag';
 import { Widget } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import useTrends from 'soapbox/queries/trends';
 
 interface ITrendsPanel {
   limit: number
 }
 
 const TrendsPanel = ({ limit }: ITrendsPanel) => {
-  const dispatch = useDispatch();
-
-  const trends = useAppSelector((state) => state.trends.items);
+  const { data: trends, isFetching } = useTrends();
 
   const sortedTrends = React.useMemo(() => {
-    return trends.sort((a, b) => {
+    return trends?.sort((a, b) => {
       const num_a = Number(a.getIn(['history', 0, 'accounts']));
       const num_b = Number(b.getIn(['history', 0, 'accounts']));
       return num_b - num_a;
     }).slice(0, limit);
   }, [trends, limit]);
 
-  React.useEffect(() => {
-    dispatch(fetchTrends());
-  }, []);
-
-  if (sortedTrends.isEmpty()) {
+  if (trends?.length === 0 || isFetching) {
     return null;
   }
 
   return (
     <Widget title={<FormattedMessage id='trends.title' defaultMessage='Trends' />}>
-      {sortedTrends.map((hashtag) => (
+      {sortedTrends?.slice(0, limit).map((hashtag) => (
         <Hashtag key={hashtag.name} hashtag={hashtag} />
       ))}
     </Widget>