From 6c45dcb1092e2f441535df23db0018614c34af7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 7 Jun 2022 18:25:53 +0200
Subject: [PATCH] TypeScript, FC (reducers, search)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/dropdown_menu.tsx      |   2 +
 app/soapbox/components/hashtag.tsx            |  20 +-
 app/soapbox/components/pullable.tsx           |   2 +-
 app/soapbox/components/ui/column/column.tsx   |   2 +-
 .../containers/dropdown_menu_container.ts     |   2 +-
 .../features/compose/components/search.tsx    |   4 +-
 .../compose/components/search_results.js      | Bin 6408 -> 0 bytes
 .../compose/components/search_results.tsx     | 172 ++++++++++++++++++
 .../containers/search_results_container.js    | Bin 1345 -> 0 bytes
 .../containers/status_check_box_container.js  | Bin 606 -> 524 bytes
 .../features/search/components/header.js      | Bin 1539 -> 0 bytes
 app/soapbox/features/search/index.tsx         |   4 +-
 .../__tests__/trends-panel.test.tsx           |  38 ++--
 .../ui/components/account_note_modal.js       | Bin 2932 -> 0 bytes
 .../ui/components/account_note_modal.tsx      |  68 +++++++
 .../{actions_modal.js => actions_modal.tsx}   | Bin 2767 -> 2847 bytes
 app/soapbox/features/ui/components/column.js  | Bin 966 -> 0 bytes
 app/soapbox/features/ui/components/column.tsx |  36 ++++
 .../ui/components/column_forbidden.js         | Bin 794 -> 0 bytes
 .../ui/components/column_forbidden.tsx        |  23 +++
 .../features/ui/components/column_header.js   | Bin 1016 -> 0 bytes
 .../features/ui/components/column_header.tsx  |  47 +++++
 .../{column_loading.js => column_loading.tsx} | Bin
 .../modals/report-modal/report-modal.tsx      |  12 +-
 .../report-modal/steps/other-actions-step.tsx |   8 +-
 .../modals/report-modal/steps/reason-step.tsx |   7 +-
 .../features/ui/components/mute_modal.js      | Bin 3123 -> 3106 bytes
 .../features/ui/components/trends-panel.tsx   |   9 +-
 app/soapbox/reducers/__tests__/modals-test.js | Bin 1346 -> 1338 bytes
 .../reducers/__tests__/reports-test.js        | Bin 495 -> 379 bytes
 app/soapbox/reducers/__tests__/trends-test.js | Bin 321 -> 228 bytes
 app/soapbox/reducers/account_notes.ts         |   4 +-
 app/soapbox/reducers/{modals.js => modals.ts} | Bin 757 -> 1019 bytes
 .../reducers/{reports.js => reports.ts}       | Bin 2718 -> 2946 bytes
 app/soapbox/reducers/{search.js => search.ts} | Bin 3177 -> 4129 bytes
 .../reducers/{security.tsx => security.ts}    |   3 +-
 app/soapbox/reducers/trending_statuses.js     | Bin 865 -> 0 bytes
 app/soapbox/reducers/trending_statuses.ts     |  37 ++++
 app/soapbox/reducers/trends.js                | Bin 736 -> 0 bytes
 app/soapbox/reducers/trends.ts                |  47 +++++
 40 files changed, 490 insertions(+), 57 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/search_results.js
 create mode 100644 app/soapbox/features/compose/components/search_results.tsx
 delete mode 100644 app/soapbox/features/compose/containers/search_results_container.js
 delete mode 100644 app/soapbox/features/search/components/header.js
 delete mode 100644 app/soapbox/features/ui/components/account_note_modal.js
 create mode 100644 app/soapbox/features/ui/components/account_note_modal.tsx
 rename app/soapbox/features/ui/components/{actions_modal.js => actions_modal.tsx} (71%)
 delete mode 100644 app/soapbox/features/ui/components/column.js
 create mode 100644 app/soapbox/features/ui/components/column.tsx
 delete mode 100644 app/soapbox/features/ui/components/column_forbidden.js
 create mode 100644 app/soapbox/features/ui/components/column_forbidden.tsx
 delete mode 100644 app/soapbox/features/ui/components/column_header.js
 create mode 100644 app/soapbox/features/ui/components/column_header.tsx
 rename app/soapbox/features/ui/components/{column_loading.js => column_loading.tsx} (100%)
 rename app/soapbox/reducers/{modals.js => modals.ts} (50%)
 rename app/soapbox/reducers/{reports.js => reports.ts} (54%)
 rename app/soapbox/reducers/{search.js => search.ts} (56%)
 rename app/soapbox/reducers/{security.tsx => security.ts} (97%)
 delete mode 100644 app/soapbox/reducers/trending_statuses.js
 create mode 100644 app/soapbox/reducers/trending_statuses.ts
 delete mode 100644 app/soapbox/reducers/trends.js
 create mode 100644 app/soapbox/reducers/trends.ts

diff --git a/app/soapbox/components/dropdown_menu.tsx b/app/soapbox/components/dropdown_menu.tsx
index d56a72a018..7a59e49320 100644
--- a/app/soapbox/components/dropdown_menu.tsx
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -26,6 +26,8 @@ export interface MenuItem {
   icon: string,
   count?: number,
   destructive?: boolean,
+  meta?: string,
+  active?: boolean,
 }
 
 export type Menu = Array<MenuItem | null>;
diff --git a/app/soapbox/components/hashtag.tsx b/app/soapbox/components/hashtag.tsx
index c8e45a084a..8206f3f62f 100644
--- a/app/soapbox/components/hashtag.tsx
+++ b/app/soapbox/components/hashtag.tsx
@@ -10,24 +10,26 @@ import { shortNumberFormat } from '../utils/numbers';
 import Permalink from './permalink';
 import { HStack, Stack, Text } from './ui';
 
-import type { Map as ImmutableMap } from 'immutable';
+import type { Hashtag as HashtagEntity } from 'soapbox/reducers/search';
+import type { TrendingHashtag } from 'soapbox/reducers/trends';
 
 interface IHashtag {
-  hashtag: ImmutableMap<string, any>,
+  hashtag: HashtagEntity | TrendingHashtag,
 }
 
 const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
-  const count = Number(hashtag.getIn(['history', 0, 'accounts']));
-  const brandColor = useSelector((state) => getSoapboxConfig(state).get('brandColor'));
+  const history = (hashtag as TrendingHashtag).history;
+  const count = Number(history?.get(0)?.accounts);
+  const brandColor = useSelector((state) => getSoapboxConfig(state).brandColor);
 
   return (
     <HStack alignItems='center' justifyContent='between' data-testid='hashtag'>
       <Stack>
-        <Permalink href={hashtag.get('url')} to={`/tags/${hashtag.get('name')}`} className='hover:underline'>
-          <Text tag='span' size='sm' weight='semibold'>#{hashtag.get('name')}</Text>
+        <Permalink href={hashtag.url} to={`/tags/${hashtag.name}`} className='hover:underline'>
+          <Text tag='span' size='sm' weight='semibold'>#{hashtag.name}</Text>
         </Permalink>
 
-        {hashtag.get('history') && (
+        {history && (
           <Text theme='muted' size='sm'>
             <FormattedMessage
               id='trends.count_by_accounts'
@@ -41,12 +43,12 @@ const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
         )}
       </Stack>
 
-      {hashtag.get('history') && (
+      {history && (
         <div className='w-[40px]' data-testid='sparklines'>
           <Sparklines
             width={40}
             height={28}
-            data={hashtag.get('history').reverse().map((day: ImmutableMap<string, any>) => day.get('uses')).toArray()}
+            data={history.reverse().map((day) => +day.uses).toArray()}
           >
             <SparklinesCurve style={{ fill: 'none' }} color={brandColor} />
           </Sparklines>
diff --git a/app/soapbox/components/pullable.tsx b/app/soapbox/components/pullable.tsx
index 0304a1d465..03840d2c1f 100644
--- a/app/soapbox/components/pullable.tsx
+++ b/app/soapbox/components/pullable.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import PullToRefresh from './pull-to-refresh';
 
 interface IPullable {
-  children: JSX.Element,
+  children: React.ReactNode,
 }
 
 /**
diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index dde81736a6..5ac4f350e0 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -7,7 +7,7 @@ import { useSoapboxConfig } from 'soapbox/hooks';
 
 import { Card, CardBody, CardHeader, CardTitle } from '../card/card';
 
-interface IColumn {
+export interface IColumn {
   /** Route the back button goes to. */
   backHref?: string,
   /** Column title text. */
diff --git a/app/soapbox/containers/dropdown_menu_container.ts b/app/soapbox/containers/dropdown_menu_container.ts
index d3e7149e40..b047edfff5 100644
--- a/app/soapbox/containers/dropdown_menu_container.ts
+++ b/app/soapbox/containers/dropdown_menu_container.ts
@@ -10,7 +10,7 @@ import type { DropdownPlacement, IDropdown } from 'soapbox/components/dropdown_m
 import type { RootState } from 'soapbox/store';
 
 const mapStateToProps = (state: RootState) => ({
-  isModalOpen: Boolean(state.modals.size && state.modals.last().modalType === 'ACTIONS'),
+  isModalOpen: Boolean(state.modals.size && state.modals.last()!.modalType === 'ACTIONS'),
   dropdownPlacement: state.dropdown_menu.placement,
   openDropdownId: state.dropdown_menu.openId,
   openedViaKeyboard: state.dropdown_menu.keyboard,
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index d68f82bc2b..e70786cb7b 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -50,8 +50,8 @@ const Search = (props: ISearch) => {
   const history = useHistory();
   const intl = useIntl();
 
-  const value = useAppSelector((state) => state.search.get('value'));
-  const submitted = useAppSelector((state) => state.search.get('submitted'));
+  const value = useAppSelector((state) => state.search.value);
+  const submitted = useAppSelector((state) => state.search.submitted);
 
   const debouncedSubmit = debounce(() => {
     dispatch(submitSearch());
diff --git a/app/soapbox/features/compose/components/search_results.js b/app/soapbox/features/compose/components/search_results.js
deleted file mode 100644
index e4dfa936b34ecf461b9960554b8dc42207c96bc9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6408
zcmd5>ZExE)5dNNDaVv_-24XuH1`P15U|qMO!PcQ@@@*JWTB2jFvgC<$+Dz4d-yL5>
zQkD~E-LMuYYLRyjA0F?Gtk`U;T0vGYDSu@fE@4$y8%Xp(Ndw7uC&CE5sjKbP-L{k2
z;`c<+fR}m8S*9#TO~3ur#b&cpY+3L=j+UDUH$5TT9<0~h)%-<;d`ezM>xB9!Gs&Eg
zC(yvls@^cAc>bD8$!<8bA=QZ}RS}Bkd?iY5W#uV|@(-S=3zQmGbcTAx<XW*Ci!Cd*
zT~;4w9V0ng8v(!8WmZ>3LB{z-NVl&6McK(+7bxff8n|Lh+0hzM-3c%KJj<$Gsa{m2
zVz|S4kEtD(GiD^OGbidnE)`Qdc?5>kf<q8*3YPJ8Rph+3lzL279M`D1oNc{iXvkpr
z+EVod1N7k&c?|mAkp<|+5}!fcSO}S)pq=sjG3>}aC8QAh;HWtPup5<gXh7t1NF--<
zw!TI??FuEQZaz6BZH8mkg;DekueJqGpglz(vn)Rd<mLx~DygK!v9>vg<K~BO?8z9Y
zc8n(AA9YHy)Zu#{btgJ2!KL2rTeDl>9~Cci2?tU{b7D6tGN8m_5?BgkNPt^b?D!nI
zj5L+17Uc~Y2f*5M9zZ*Q>4t5mLcZmH?nKRVBQJN$jiBrj0xqknFw?j%R_2C$D6!g=
z**+F8FxBw<r6?4yLvh3KfWp4`Ai8t>5Vu-Va@)t<-Jl~Xfqpq?2ued{f2ziFK;xNc
zAg}UA(%G#i{*Vx5<OfN%=rjOpG%lvkisi4Xnq%aQ#*m(aS_?U)gO}6r07k*MjBHIV
z=+G|pj4>)Ami)u>Oo?0WMk06vW2QzuQ3KjlfFA{t!~~2KjUNVVR$OK4tDY@K2msI$
zGn(PGS>^{;cMv9XU`9ZbokF}PtP5#i3B5xAqahUEP@?$_vFVQ?M86b<)?DLFSGsW8
zG%|AOsmnBD;{l|EB_Dld9$Md=OlZqd(&eZ?mD&wVQQedS)wznWA4ARMt^of?YECl=
zR4uh`>a(c1bQs_tNzG{vQ0u08)PA>zU2`m?B`kECpwB#Q^gpdWvRi(Eevme?-?T70
z?>XL{zv&cu>XIdTp38!LC#0z^mz+XBUDy%oVFrA);0k@3%AC#nL<@k1apyMTSFDiS
zPZXF7c<#T;%IaD__A@~n;hW18_Da09rC7lzHWZ|38hEY?Ysw>zoUJC)8?L<jzcSN_
z4sX37%^58)C{Edp=U)0@-p@_{W{Cq3^+D)l49}houbPafQvAi?9M1g4uzLuP;}B!i
z#Zo!4F@2F!N?uq}zIA-h@6x7|X|bz`K4<5heOlmn#(EoHb)H7d1K*-goa}rJYuZm6
zyittC_t6g(h_e5_hqD)o&NUgEJ=`-ryeH$bA<e$iqM=7NQ<J|ea&hZ#Z)w75qj>o#
zcAFCKGr7o^s_NuCP(h{sJt&$*C&?`k_Ur^SHAmg0`=loycbRE&wdPoX8U8IR*y@hc
zc@|(LfhP_2G@JHGA4jJWnKliUo_aGk-5IoPwA?J*%VLK6_XFNdw2H2m#^;B^waez-
z-Uq_fNgf%lPTYs9-N9b;Imv<O^HYzHzCc&Ivc7=X;JfTy+jQ(1g^S#}t(B+r?@f9r
z^7@HfhhKm2xES2i`Y+gj*)i4~UF7u8yUF!qj4oqeVu)cp(MyO#|8DGt4uqJKJTk<b
zxDPSPh5!#&L|lL<9j=HDdLSnK)Z=3^&?T?7pSrfZvhPJY6zznmC)9URF|mVbV}BeM
znZEqUe^wK9JW5@`?ZW>u-!D5B?Ve@7PTgDYoYMapj<(r%jl#lL$VT5Z_wJCkQc?sp
zdmYE8PjSl;KUPM0$`q66J{?zY^MLs?^?UE0_HP^Wr;Tm_+IO*%kQC<lw1D>$ce~II
zZQLgomh0-nz2c<lTHvlTj4|*G=}Mu)jef+lRY~|pK$|mudWeOG5>na>jozb&PX%f7
z^;s;@z1gQt_fzTzLOMqGC&30u<a}~dv%AUHXJ?SJ`u*Gv%7Q6A`IbhFl&lJoyN|nM
z-hW5X*PO0IxvQpGs~yMu=yv(S{l7xY5t8k4^34Hwdk>%&!3fbiF|CKb6Wj*Fl^3(v
TLA_oFx3Ep5Zf?-`+mpWmcfb~?

diff --git a/app/soapbox/features/compose/components/search_results.tsx b/app/soapbox/features/compose/components/search_results.tsx
new file mode 100644
index 0000000000..91e7ff2877
--- /dev/null
+++ b/app/soapbox/features/compose/components/search_results.tsx
@@ -0,0 +1,172 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';
+
+import { expandSearch, setFilter } from 'soapbox/actions/search';
+import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';
+import Hashtag from 'soapbox/components/hashtag';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Tabs } 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 type { SearchFilter } from 'soapbox/reducers/search';
+
+const messages = defineMessages({
+  accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
+  statuses: { id: 'search_results.statuses', defaultMessage: 'Posts' },
+  hashtags: { id: 'search_results.hashtags', defaultMessage: 'Hashtags' },
+});
+
+const SearchResults = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  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 handleLoadMore = () => dispatch(expandSearch(selectedFilter));
+
+  const selectFilter = (newActiveFilter: SearchFilter) => dispatch(setFilter(newActiveFilter));
+
+  const renderFilterBar = () => {
+    const items = [
+      {
+        text: intl.formatMessage(messages.accounts),
+        action: () => selectFilter('accounts'),
+        name: 'accounts',
+      },
+      {
+        text: intl.formatMessage(messages.statuses),
+        action: () => selectFilter('statuses'),
+        name: 'statuses',
+      },
+      {
+        text: intl.formatMessage(messages.hashtags),
+        action: () => selectFilter('hashtags'),
+        name: 'hashtags',
+      },
+    ];
+
+    return <Tabs items={items} activeItem={selectedFilter} />;
+  };
+
+  useEffect(() => {
+    dispatch(fetchTrendingStatuses());
+  }, []);
+
+  let searchResults;
+  let hasMore = false;
+  let loaded;
+  let noResultsMessage;
+  let placeholderComponent = PlaceholderStatus as React.ComponentType;
+
+  if (selectedFilter === 'accounts') {
+    hasMore = results.accountsHasMore;
+    loaded = results.accountsLoaded;
+    placeholderComponent = PlaceholderAccount;
+
+    if (results.accounts && results.accounts.size > 0) {
+      searchResults = results.accounts.map(accountId => <AccountContainer key={accountId} id={accountId} />);
+    } else if (!submitted && suggestions && !suggestions.isEmpty()) {
+      searchResults = suggestions.map(suggestion => <AccountContainer key={suggestion.account} id={suggestion.account} />);
+    } else if (loaded) {
+      noResultsMessage = (
+        <div className='empty-column-indicator'>
+          <FormattedMessage
+            id='empty_column.search.accounts'
+            defaultMessage='There are no people results for "{term}"'
+            values={{ term: value }}
+          />
+        </div>
+      );
+    }
+  }
+
+  if (selectedFilter === 'statuses') {
+    hasMore = results.statusesHasMore;
+    loaded = results.statusesLoaded;
+
+    if (results.statuses && results.statuses.size > 0) {
+      searchResults = results.statuses.map((statusId: string) => (
+      // @ts-ignore
+        <StatusContainer key={statusId} id={statusId} />
+      ));
+    } else if (!submitted && trendingStatuses && !trendingStatuses.isEmpty()) {
+      searchResults = trendingStatuses.map((statusId: string) => (
+      // @ts-ignore
+        <StatusContainer key={statusId} id={statusId} />
+      ));
+    } else if (loaded) {
+      noResultsMessage = (
+        <div className='empty-column-indicator'>
+          <FormattedMessage
+            id='empty_column.search.statuses'
+            defaultMessage='There are no posts results for "{term}"'
+            values={{ term: value }}
+          />
+        </div>
+      );
+    }
+  }
+
+  if (selectedFilter === 'hashtags') {
+    hasMore = results.hashtagsHasMore;
+    loaded = results.hashtagsLoaded;
+    placeholderComponent = PlaceholderHashtag;
+
+    if (results.hashtags && results.hashtags.size > 0) {
+      searchResults = results.hashtags.map(hashtag => <Hashtag key={hashtag.name} hashtag={hashtag} />);
+    } else if (!submitted && suggestions && !suggestions.isEmpty()) {
+      searchResults = trends.map(hashtag => <Hashtag key={hashtag.name} hashtag={hashtag} />);
+    } else if (loaded) {
+      noResultsMessage = (
+        <div className='empty-column-indicator'>
+          <FormattedMessage
+            id='empty_column.search.hashtags'
+            defaultMessage='There are no hashtags results for "{term}"'
+            values={{ term: value }}
+          />
+        </div>
+      );
+    }
+  }
+
+  return (
+    <>
+      {renderFilterBar()}
+
+      {noResultsMessage || (
+        <ScrollableList
+          key={selectedFilter}
+          scrollKey={`${selectedFilter}:${value}`}
+          isLoading={submitted && !loaded}
+          showLoading={submitted && !loaded && searchResults?.isEmpty()}
+          hasMore={hasMore}
+          onLoadMore={handleLoadMore}
+          placeholderComponent={placeholderComponent}
+          placeholderCount={20}
+          className={classNames({
+            'divide-gray-200 dark:divide-slate-700 divide-solid divide-y': selectedFilter === 'statuses',
+          })}
+          itemClassName={classNames({ 'pb-4': selectedFilter === 'accounts' })}
+        >
+          {searchResults || []}
+        </ScrollableList>
+      )}
+    </>
+  );
+};
+
+export default SearchResults;
diff --git a/app/soapbox/features/compose/containers/search_results_container.js b/app/soapbox/features/compose/containers/search_results_container.js
deleted file mode 100644
index e284060d9b70df6feb42208a1a24f333e84d31a4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1345
zcmZ`(!HU~35WVLs<|Y~3<nCn)g=L|)(k#7{vS{sbR$xm;BX3id{Ch{TWjl@o#s|%N
zZ$>loq}$Fq51&w4W3cpaf!f&?ghN&OFAl5zEFN|{op5;Wl&OxWT=|{@p?}tmM>p}v
zs_xC656srq(19Y7B_@R$effUuPbZ`Z$)VEJYNGk<zS>N?k$iDzDs4_juY6BPcSZaN
ze5Db&lsfT^kOka^K<{-!hk6Vz+A_4`CsN;d8XLIZA4<zzGiZEj!z-%>NT71V$wRBU
zP%pmNAI^3Jj}VGNc>D^VI|x%@kmjE<C7%w_Jr^lOIu#kK0XXEMO=JOlsHVqaMt?W*
zw-`r}gP{Jc)!t+EE8xVREN6ir5v#k;OXVj5&EvQs%^|@Vwa1pGL}>!y>S0uCa*EFr
z+LqWR(rv=&!s|>MJ(;Q`Y}gT44I6%+Sw{y<w6q@uEOtqzX~kAw9(MfAEAXVLQ|yX)
z3)m9zBrJjqo3M6G0Wu501e9xl%wno|ytc+Rd5szsmX0sL|Lfv*PI;GM8KOg8j$eDa
z09BT@H~y;X8<-qX<BnG%8}x=@q){0B`;8x%4;){gWh16HNv=>q=n~ArC5K0^!dkH#
V)6*wcUd)3zpROm9$t$a~*nhq*)h7S|

diff --git a/app/soapbox/features/report/containers/status_check_box_container.js b/app/soapbox/features/report/containers/status_check_box_container.js
index 75daf7e2d61a9091681e8b513382bd8e3b1f5ab0..49bcf70f33884653318991abaa3235a7b09f7617 100644
GIT binary patch
delta 35
qcmcb|(!;XRke5-cD77HJsH9jgFST5+xFoTpv^YL9rFe2F<4XYGFAZY=

delta 117
zcmeBSxyNFdnOl%wRH9I=5S&_~kXWqXnVVZ$l9-f}3gXu)q!s1oDyV0|1l6s%Ht;f<
xr>B;9=4nK$7o~zU7pv<isOP1YgQ((?#FEnD_{@}I^;jJg!!$HCCo40)1OQMgC<Xuk

diff --git a/app/soapbox/features/search/components/header.js b/app/soapbox/features/search/components/header.js
deleted file mode 100644
index 14f9d5ddbfe709db3b598104f94ae804d050c64c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1539
zcmah}O>f&U487-9a3?!JouJn>?xn-90$WjR-7Z5BC^nM_vn4~4gA76b`$)-ON|812
zA(S5V9v>yjy3xkLv(e4V-v%vgjjkbSD9#)&BzH3zFyB!WuG=^Kf82Vk>(+@)h0m?Q
z2Tgc|D#B*6hhz<5vZ4o#hn(QEHnngL%Wr6{*dd&!beUAHn!*dM6q2MEWw30IQ`nO@
ze3k0YB}}&tO;+lfuroT!I;chS!wH8kn*FelgXIwNdq__+fP<)7{1_G&J9LjK{he48
zrr0MpkofK7b$&xo+iq&frCf&(5TA0Mvy4hu3tv!_XaJ86RcYahxu+S^kUm)ew=1+S
z2NpU=9s0Vk&PcUmX_2@Qu+h5W?K9~J2UFqQX@k^X!GR<hkwYgx$?|7Yl3!_K@ZcSs
zclmM)soP7tV4-#~9M|syga!;7o`>isN#5N%uOGs?Md#a<o<_SvBAdyDp1B?_$B>g~
z(w;A{y-n*GecQbc0IdB(EUZ6<&vmU)pxUbH89i~gp85b_RmubS=01rU^X|@Md*A5f
zzC*o(Tdy5m33@ro38~Ob@+fnEdzF9^rK>RG^e7476c@&R^}p3}e>+jOq!K3K{|X{L
znjG0yR`kMb#CU0hC<@&ww_aO%$WkkBNk!E~S??P&;mc?c#iU%(s-FT*=gG2rvp_>k
z9`J!*U1&^LxFGlWZ)TG$`#!D>+O~3b;dGNgiCaNYH^TDdg%_8jb-~}&vJ(_<tYVu<
icf1gVlfd71y6N=c(NFYF20ttwlIg{4o2OyQP~t!2;pF@P

diff --git a/app/soapbox/features/search/index.tsx b/app/soapbox/features/search/index.tsx
index 3fdf625f68..c17691c37f 100644
--- a/app/soapbox/features/search/index.tsx
+++ b/app/soapbox/features/search/index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { Column } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
-import SearchResultsContainer from 'soapbox/features/compose/containers/search_results_container';
+import SearchResults from 'soapbox/features/compose/components/search_results';
 
 const messages = defineMessages({
   heading: { id: 'column.search', defaultMessage: 'Search' },
@@ -16,7 +16,7 @@ const SearchPage = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <div className='space-y-4'>
         <Search autoFocus autoSubmit />
-        <SearchResultsContainer />
+        <SearchResults />
       </div>
     </Column>
   );
diff --git a/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx b/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
index d122090c2d..6701c928d1 100644
--- a/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
+++ b/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
@@ -1,4 +1,4 @@
-import { Map as ImmutableMap, fromJS } from 'immutable';
+import { List as ImmutableList } from 'immutable';
 import React from 'react';
 
 import { render, screen } from '../../../../jest/test-helpers';
@@ -7,16 +7,16 @@ import TrendsPanel from '../trends-panel';
 describe('<TrendsPanel />', () => {
   it('renders trending hashtags', () => {
     const store = {
-      trends: ImmutableMap({
-        items: fromJS([{
+      trends: {
+        items: ImmutableList([{
           name: 'hashtag 1',
-          history: [{
+          history: ImmutableList([{
             day: '1652745600',
             uses: '294',
             accounts: '180',
-          }],
+          }]),
         }]),
-      }),
+      },
     };
 
     render(<TrendsPanel limit={1} />, null, store);
@@ -27,18 +27,18 @@ describe('<TrendsPanel />', () => {
 
   it('renders multiple trends', () => {
     const store = {
-      trends: ImmutableMap({
-        items: fromJS([
+      trends: {
+        items: ImmutableList([
           {
             name: 'hashtag 1',
-            history: [{ accounts: [] }],
+            history: ImmutableList([{ accounts: [] }]),
           },
           {
             name: 'hashtag 2',
-            history: [{ accounts: [] }],
+            history: ImmutableList([{ accounts: [] }]),
           },
         ]),
-      }),
+      },
     };
 
     render(<TrendsPanel limit={3} />, null, store);
@@ -47,18 +47,18 @@ describe('<TrendsPanel />', () => {
 
   it('respects the limit prop', () => {
     const store = {
-      trends: ImmutableMap({
-        items: fromJS([
+      trends: {
+        items: ImmutableList([
           {
             name: 'hashtag 1',
-            history: [{ accounts: [] }],
+            history: ImmutableList([{ accounts: [] }]),
           },
           {
             name: 'hashtag 2',
-            history: [{ accounts: [] }],
+            history: ImmutableList([{ accounts: [] }]),
           },
         ]),
-      }),
+      },
     };
 
     render(<TrendsPanel limit={1} />, null, store);
@@ -67,9 +67,9 @@ describe('<TrendsPanel />', () => {
 
   it('renders empty', () => {
     const store = {
-      trends: ImmutableMap({
-        items: fromJS([]),
-      }),
+      trends: {
+        items: ImmutableList([]),
+      },
     };
 
     render(<TrendsPanel limit={1} />, null, store);
diff --git a/app/soapbox/features/ui/components/account_note_modal.js b/app/soapbox/features/ui/components/account_note_modal.js
deleted file mode 100644
index 9242b7b8f2417016293c5ea2a5872e144c3507d2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2932
zcma)8QE%Hg41UkA;M42?se{A4Wp&Y_!w$ot#jy6}a5x+kn@M!FrJN;qExi2qk&<l7
zNw)4Ou|-lJKaw9U>%DF)d~Wpq@pX>|HjS<!+0*ld<rm5One;YaP!u+tH~fD*>Y&7p
zRCtHRh%K50NcA5U_LH*J0zT@d7S>`Jj^PkTxsYTOhbpvE<a=b*VA;NqS&ycJVkguV
zZ;C><%HC^>x4N!T*#($(T}vCC46%$B`?Y>q5_+kXp<m~Hp~yW-m4a8=;GHf-^+Vs9
zPbW^!egTj8GNSKqEHtsG2%cHCGETP^PxuG+Xisi4SP>bz;frQ7;>K901I>^h@t$@w
zfPEzj-07;sW(6I{as^4q^Iy(0iwu$lM-XjgLv6_RUIT$;CV|@ES(aEPa9B`eBcAbm
zNIp3i>w(|1^I=Z#1A0pMPV677u=uFC^9&`D&LO`7#_z4RBPBUZIZ8QJZ&#m0G8~wL
zIW_>Kd2sz;rP{8*on{pMlS==d@M0)|1WRf8H+D+?nRE64fyEV!;8GWlT8=M$J8WME
zSyIptHIV(w(1LwH<%k7n(6)^tq9(k)pB*CF_aCI$3tQ|)*30mw=RSntG5~0GtJOv}
zHPyzy0q7mllNn3rR2FulYWMCuMCY8x={o1-oA1_*cN(%igWyN=Ke&u|2$ZJ+U!2^9
zo`-AdHP)Jx8|<hj7fj|6WAoYdC~UK$62`#IC_r8>X!=o=2Ap1IpWB9o$<IE~NYrqz
z$byF}Xl@?pjhk*YYI3&Lx;pAW9vdgvnO?KfX3~7Y|655i=`E>v%zhkZ)2iZ}oiFk)
zSvpzpm3h;C=<5-yu?-EO2gtG?$2gk@w=V#7LRt0l?r$f>a5L`v((a_mm`{^&(?%#$
z%&cf=UbAOWwdh*nFvj%CFp(dCqiA6SxVa<GKk@a0{;H-p<Ob-%Cw#rtCBe&c`0aOi
z_l{o{wyDSmzI_ACYP5nL=3`g8JAIxW6N{XirvBQ7nhKj?n!HMOy(ZDdjbv`oEBJzk
znEQY?vgKWtN9j3o2kl7ReE^rPjl%=6A#H_ucX_hKWtmU(GZ38|ZIqlA3hD7iH*nqg
zS{xE^)i8P2fq%8?6JZTaIj&9Sa5%v7>M%eFx#V5=GoBC|EL1dCTHUzao_8mdo;T-h
zop;PmMi?nX*o0}nWiwuG^YhN64`N+mNdY4Id)uo4`K9|Nusf_VPwJMwg_7}*D1V#W
z9U(lW_AlK+Arw3z?!kS;fLQC+x*|hsuyMq{>b9W|3F=NJ1-{CvVry6<n4KWapjUQB
zPFT-Z32{CGUo!G5ujt&5mzJK%MGPjiiCGBm1?Oha@}9k5E2!jlXOqY<`ttZW<&j~;
zJovWByC5w+&y0&&!YzzR-6v8owGQ(;F%R!zL)v#gDKK9wTB|?mqBTRF1AUiEH%gw(
IUV09*@9oCNI{*Lx

diff --git a/app/soapbox/features/ui/components/account_note_modal.tsx b/app/soapbox/features/ui/components/account_note_modal.tsx
new file mode 100644
index 0000000000..b34e5e1321
--- /dev/null
+++ b/app/soapbox/features/ui/components/account_note_modal.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { changeAccountNoteComment, submitAccountNote } from 'soapbox/actions/account-notes';
+import { closeModal } from 'soapbox/actions/modals';
+import { Modal, Text } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+const messages = defineMessages({
+  placeholder: { id: 'account_note.placeholder', defaultMessage: 'No comment provided' },
+  save: { id: 'account_note.save', defaultMessage: 'Save' },
+});
+
+const getAccount = makeGetAccount();
+
+const AccountNoteModal = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const isSubmitting = useAppSelector((state) => state.account_notes.edit.isSubmitting);
+  const account = useAppSelector((state) => getAccount(state, state.account_notes.edit.account!));
+  const comment = useAppSelector((state) => state.account_notes.edit.comment);
+
+  const onClose = () => {
+    dispatch(closeModal('ACCOUNT_NOTE'));
+  };
+
+  const handleCommentChange: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
+    dispatch(changeAccountNoteComment(e.target.value));
+  };
+
+  const handleSubmit = () => {
+    dispatch(submitAccountNote());
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = e => {
+    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
+      handleSubmit();
+    }
+  };
+
+  return (
+    <Modal
+      title={<FormattedMessage id='account_note.target' defaultMessage='Note for @{target}' values={{ target: account!.acct }} />}
+      onClose={onClose}
+      confirmationAction={handleSubmit}
+      confirmationText={intl.formatMessage(messages.save)}
+      confirmationDisabled={isSubmitting}
+    >
+      <Text theme='muted'>
+        <FormattedMessage id='account_note.hint' defaultMessage='You can keep notes about this user for yourself (this will not be shared with them):' />
+      </Text>
+
+      <textarea
+        className='setting-text light'
+        placeholder={intl.formatMessage(messages.placeholder)}
+        value={comment}
+        onChange={handleCommentChange}
+        onKeyDown={handleKeyDown}
+        disabled={isSubmitting}
+        autoFocus
+      />
+    </Modal>
+  );
+};
+
+export default AccountNoteModal;
diff --git a/app/soapbox/features/ui/components/actions_modal.js b/app/soapbox/features/ui/components/actions_modal.tsx
similarity index 71%
rename from app/soapbox/features/ui/components/actions_modal.js
rename to app/soapbox/features/ui/components/actions_modal.tsx
index aa0201ca91a8d5764d24c21e64851cae9357b630..e123149b68b4f22946f7b1735b037d1440cec3dd 100644
GIT binary patch
delta 558
zcmZ`$%}T>S7$gNP>|H6S@Zm*;*!18j+JY2?A}#(rK-q4#vNYKZ*)M8|rFT!396WmT
zZlAy>@D+RwZ*G!W8pJ&;!|?6Qe6yb$uba>I>~d@N=C}#yFcR_>CNPXt0DBRq3=ac^
zLdm^jLPQX%2%*E2Tuf+1!-0B8YgWDbi+k455<gka5`S2bep!v_LIuYmhXlG@#&&*p
zkOxcag_y&X@swPmcDzW1p1PO)z&tT=$~relG1fpe6zEK%!0{hF98W{89U~}EaGh@@
zkw-(yICM@~wyN$bkNS`h0G+G4B~9D#rk8BcE#ezO$+j=p$c6m_Xtv-^2``(=Xr=io
z-LT1o5L2N>SoL$^I;*>W-aaYiXr;TA-ge=XSM&%n_I(?KYd|pI(Og&7*DgkU+)RqR
qb;_8EC1!1C%)WGDvXqbT{+~`?s#k=W-$(BCDbByEwMzO<c76bzIlyfI

delta 452
zcmZWlO-jQ+6ecZ7$WB4&MtQgy3&{k;jg<)MstZL$+{$z^ErUrW&P<Tdg-6hk19%0Y
z2XW&S+;|7UNt4D>VHWSb@8`Yw-nKusUftf66zOfAG6iEPVnC_sJ)Nfopo3u?XPS&6
zwn~zWQ0?&r>{TM8VX6p@&QvOSGHL8;W-K%pi68NiU!&;Qad?~xsbNS((vUIs=dXCj
zc3XcPwsi@X|JU4EP(E4yrqL@6r?gt3E<{M8^0RZ<b%D=Ly6bDZgi?_uI+!X=bf)lx
z>3!4;QNMh#uQ%o+YHrmmyeAs<XWw?O^Stbdt3TF31u%60YPSLW4+%>~g$!LoGBH(G
q4WLaB6DdhvVInz?IDJ^g##urakWf2p6~kQJu*Zx`7P{q+v-b-T!J8BS

diff --git a/app/soapbox/features/ui/components/column.js b/app/soapbox/features/ui/components/column.js
deleted file mode 100644
index 22c9b7f07902e43baca7b78d2a7660990199a685..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 966
zcmZ`&J#X7E5Z(PN-V{54EbWbzAz7NuDB8K8rAthd76p=O9SHpIJ$}Vfi)f;F_wIe1
zBrl^j4o9QM@9!g7yc&JMcI5ZH3m4mmjZ8h?NOUgOO*nI@)Q*!<;-n~-trp`+Uz<)d
zbfCf6X3QP8c{851nl1zU=cq|8NK*S(5<Qs=shJ|o_<4@Ep_#7HQBSX8QVyLG*5b!Y
z=Ax^kp|^-;>f>bSxoE_^*#OoFCp&}yQXnnggP*`4hqo`ctZM5F-&C<IJ3V|>>&{a3
zhF0}K_mq&Fr2I`w>`7~tYWA%EJc;htlUspHgJ-`VlC$HmN{ga;HNcrEa{7Q`J)Gn2
zKHFpY)?qF-D+EIoiu4LeW`)JX3Uyr@Vw`6}cb2vex!H%9NSc`Tla}_<b6d_4cX#E;
zBSs}U+BIn2Ds1=L`{*lZbdwpdi}Qd(UZOBk?D=~mrKmr>xAU6BW6rw#V@3k=f;Z1e
zqN34u4t9Mu+0MzVNB9NW0`*w){Lj0{rkxir9?hfwka8%0%S|2YD@iZ<ntvM)O-djE
LIVFI1={J7?|4BYn

diff --git a/app/soapbox/features/ui/components/column.tsx b/app/soapbox/features/ui/components/column.tsx
new file mode 100644
index 0000000000..f0bc6cfdfc
--- /dev/null
+++ b/app/soapbox/features/ui/components/column.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import Pullable from 'soapbox/components/pullable';
+import { Column } from 'soapbox/components/ui';
+
+import ColumnHeader from './column_header';
+
+import type { IColumn } from 'soapbox/components/ui/column/column';
+
+interface IUIColumn extends IColumn {
+  heading?: string,
+  icon?: string,
+  active?: boolean,
+}
+
+const UIColumn: React.FC<IUIColumn> = ({
+  heading,
+  icon,
+  children,
+  active,
+  ...rest
+}) => {
+  const columnHeaderId = heading && heading.replace(/ /g, '-');
+
+  return (
+    <Column aria-labelledby={columnHeaderId} {...rest}>
+      {heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />}
+      <Pullable>
+        {children}
+      </Pullable>
+    </Column>
+  );
+
+};
+
+export default UIColumn;
diff --git a/app/soapbox/features/ui/components/column_forbidden.js b/app/soapbox/features/ui/components/column_forbidden.js
deleted file mode 100644
index 0eb56af92cf0a3d00f4b2b6927c7f40764990ff4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 794
zcmZ`%%TB{E5WM#*=9W}y(|e&@kdQcl5aPlKx$%}7C3dhk2o&YtSvw8|1UY3NGrK!u
z({|1??!4<BJ~|3Gc-NxnBwlk&6lV)F_1u%HIoEysKa~b(Iv7hg6oPuDu!6BKRP(jv
z2IF_k+DJ-(GwG#k`qt)-YE!2$)@x@2qs@fa{hCk?3xEwbw8a3Uw<sp;)4}<@(VA?P
z%Ec-oRo`%4PCBpVmIC8Sc=k?z{7)0Bf3ZBe9@@b=#!<ZyI`XXv!8i+cP<1W4gO4Vl
z6HTf#Yh1?D8YPwK@~>4u?@U$)B$=zb-qWQM;VoIlu#hbSD>gNvHIr34$wR&<>Got{
z<@Qng%7lA*?TsfLZyY0qmkH#{Wd=?fi+qV-fJoP>Sts#r6xrheRh$`Q^Ek~D_uisR
z0dSrjY}B5b-SC5=ob8*eSdJGNBrt8>kc7BZE$s^O-uZR5|I`Nj#~58%jwim25YD*s
b&9u}Mi{$BiQGnjlYtIkj+aoQ1xgnTO`ostk

diff --git a/app/soapbox/features/ui/components/column_forbidden.tsx b/app/soapbox/features/ui/components/column_forbidden.tsx
new file mode 100644
index 0000000000..001c824173
--- /dev/null
+++ b/app/soapbox/features/ui/components/column_forbidden.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import Column from './column';
+
+const messages = defineMessages({
+  title: { id: 'column_forbidden.title', defaultMessage: 'Forbidden' },
+  body: { id: 'column_forbidden.body', defaultMessage: 'You do not have permission to access this page.' },
+});
+
+const ColumnForbidden = () => {
+  const intl = useIntl();
+
+  return (
+    <Column label={intl.formatMessage(messages.title)}>
+      <div className='error-column'>
+        {intl.formatMessage(messages.body)}
+      </div>
+    </Column>
+  );
+};
+
+export default ColumnForbidden;
diff --git a/app/soapbox/features/ui/components/column_header.js b/app/soapbox/features/ui/components/column_header.js
deleted file mode 100644
index 5f5153cc52c82eb1bb035b9162e1b9e2ba7a86e1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1016
zcmaJ<O^=%}5WVv&=CmXd8*8s!$R(HNvRbv3dW;Nqf>mN8+pJQt{_mZ!NdT!WCp;hT
zy?Hb0+8gWP-J1T#?_N4MTXTiH$M>_RK>nJkRP#;p#!q=m|Cq`cgDKr~+_^V?ePG0Z
zrT`Ysb;ri&3B?)S*XG6=gA7_~@0h~uO!<AN-}r~RaIgN?<c9jBA9W;4-r`t7p83#u
zh*IESy5Xw7N-m@YdGk^W2XU(1`(Wkat^&p^18^Q$8z3i=GZn@GKa%)mc5LUoRr*rI
z99j0S96F{xR@vH^F7+9G=v4D-*?JyylakFs_fafsX6k@L1GHR=PDUuGV6%m4KZ*9O
zayy#E?Iy0x_7yt<wOMpRS}ack;(X4-2s8`?1e%+vh3fraHI(c1;G!MB$ZDj%0Brxj
z$K|gm@C|ThAv=r6RY0<+z}&p4qxg#k#!yIvnY3)~Z-BCWNeicAtj75+H+jN+ZsQ5$
z1<sflA#4LEfyHa$&ri@p*M<Fzj`;Q9J)Yy_BhE|SF05ad1B^5xJUu~qq#xp;NPx4t
sN%2z&-!25NMV?MnnxmUxsR2Qw%gb2FlCXu?lC>|7XWTb>hAR)*A1`P{QUCw|

diff --git a/app/soapbox/features/ui/components/column_header.tsx b/app/soapbox/features/ui/components/column_header.tsx
new file mode 100644
index 0000000000..a0b9a7acb1
--- /dev/null
+++ b/app/soapbox/features/ui/components/column_header.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+// import classNames from 'classnames';
+// import Icon from 'soapbox/components/icon';
+import SubNavigation from 'soapbox/components/sub_navigation';
+
+interface IColumnHeader {
+  icon?: string,
+  type: string
+  active?: boolean,
+  columnHeaderId?: string,
+}
+
+const ColumnHeader: React.FC<IColumnHeader> = ({ type }) => {
+  return <SubNavigation message={type} />;
+};
+
+export default ColumnHeader;
+
+// export default class ColumnHeader extends React.PureComponent {
+
+//   static propTypes = {
+//     icon: PropTypes.string,
+//     type: PropTypes.string,
+//     active: PropTypes.bool,
+//     onClick: PropTypes.func,
+//     columnHeaderId: PropTypes.string,
+//   };
+
+//   handleClick = () => {
+//     this.props.onClick();
+//   }
+
+//   render() {
+//     const { icon, type, active, columnHeaderId } = this.props;
+
+//     return (
+//       <h1 className={classNames('column-header', { active })} id={columnHeaderId || null}>
+//         <button onClick={this.handleClick}>
+//           {icon && <Icon id={icon} fixedWidth className='column-header__icon' />}
+//           {type}
+//         </button>
+//       </h1>
+//     );
+//   }
+
+// }
diff --git a/app/soapbox/features/ui/components/column_loading.js b/app/soapbox/features/ui/components/column_loading.tsx
similarity index 100%
rename from app/soapbox/features/ui/components/column_loading.js
rename to app/soapbox/features/ui/components/column_loading.tsx
diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
index db4b5ebb24..2522b9f369 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@@ -77,14 +77,14 @@ const ReportModal = ({ onClose }: IReportModal) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
-  const accountId = useAppSelector((state) => state.reports.getIn(['new', 'account_id']) as string);
-  const account = useAccount(accountId);
+  const accountId = useAppSelector((state) => state.reports.new.account_id);
+  const account = useAccount(accountId as string);
 
-  const isBlocked = useAppSelector((state) => state.reports.getIn(['new', 'block']) as boolean);
-  const isSubmitting = useAppSelector((state) => state.reports.getIn(['new', 'isSubmitting']) as boolean);
+  const isBlocked = useAppSelector((state) => state.reports.new.block);
+  const isSubmitting = useAppSelector((state) => state.reports.new.isSubmitting);
   const rules = useAppSelector((state) => state.rules.items);
-  const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet<string>);
-  const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet<string>);
+  const ruleIds = useAppSelector((state) => state.reports.new.rule_ids);
+  const selectedStatusIds = useAppSelector((state) => state.reports.new.status_ids);
 
   const isReportingAccount = useMemo(() => selectedStatusIds.size === 0, []);
   const shouldRequireRule = rules.length > 0;
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 1724c6a977..a9c32e775d 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -30,11 +30,11 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
   const features = useFeatures();
   const intl = useIntl();
 
-  const statusIds = useAppSelector((state) => OrderedSet(state.timelines.getIn([`account:${account.id}:with_replies`, 'items'])).union(state.reports.getIn(['new', 'status_ids']) as Iterable<unknown>) as OrderedSet<string>);
-  const isBlocked = useAppSelector((state) => state.reports.getIn(['new', 'block']) as boolean);
-  const isForward = useAppSelector((state) => state.reports.getIn(['new', 'forward']) as boolean);
+  const statusIds = useAppSelector((state) => OrderedSet(state.timelines.getIn([`account:${account.id}:with_replies`, 'items'])).union(state.reports.new.status_ids) as OrderedSet<string>);
+  const isBlocked = useAppSelector((state) => state.reports.new.block);
+  const isForward = useAppSelector((state) => state.reports.new.forward);
   const canForward = isRemote(account as any) && features.federating;
-  const isSubmitting = useAppSelector((state) => state.reports.getIn(['new', 'isSubmitting']) as boolean);
+  const isSubmitting = useAppSelector((state) => state.reports.new.isSubmitting);
 
   const [showAdditionalStatuses, setShowAdditionalStatuses] = useState<boolean>(false);
 
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 87e83d8a6e..484946657c 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -8,7 +8,6 @@ import { fetchRules } from 'soapbox/actions/rules';
 import { FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
-import type { Set as ImmutableSet } from 'immutable';
 import type { ReducerAccount } from 'soapbox/reducers/accounts';
 
 const messages = defineMessages({
@@ -31,12 +30,12 @@ const ReasonStep = (_props: IReasonStep) => {
   const [isNearBottom, setNearBottom] = useState<boolean>(false);
   const [isNearTop, setNearTop] = useState<boolean>(true);
 
-  const comment = useAppSelector((state) => state.reports.getIn(['new', 'comment']) as string);
+  const comment = useAppSelector((state) => state.reports.new.comment);
   const rules = useAppSelector((state) => state.rules.items);
-  const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet<string>);
+  const ruleIds = useAppSelector((state) => state.reports.new.rule_ids);
   const shouldRequireRule = rules.length > 0;
 
-  const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet<string>);
+  const selectedStatusIds = useAppSelector((state) => state.reports.new.status_ids);
   const isReportingAccount = useMemo(() => selectedStatusIds.size === 0, []);
 
   const handleCommentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
diff --git a/app/soapbox/features/ui/components/mute_modal.js b/app/soapbox/features/ui/components/mute_modal.js
index 99bdb7ef8f5dbe30bb27e761923cfcca0a446b04..0714b5cfb157117c59c7fc62dfa3cf3e57da6760 100644
GIT binary patch
delta 37
scmdliu}EUWKSqh7)Pnq?l48BQ)N;Md;^5Mx+{}`a%)Io?>P$Rb03H$z_5c6?

delta 54
zcmZ1^u~}lnKSs^;)Dq7;jcE0v)Pnq?l45lo1@*ktauAhS99)`|n^{tlnU}5}tGQW>
HiH8dS888wY

diff --git a/app/soapbox/features/ui/components/trends-panel.tsx b/app/soapbox/features/ui/components/trends-panel.tsx
index 9fafc930f3..cc8d78392d 100644
--- a/app/soapbox/features/ui/components/trends-panel.tsx
+++ b/app/soapbox/features/ui/components/trends-panel.tsx
@@ -1,4 +1,3 @@
-import { Map as ImmutableMap } from 'immutable';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
@@ -15,10 +14,10 @@ interface ITrendsPanel {
 const TrendsPanel = ({ limit }: ITrendsPanel) => {
   const dispatch = useDispatch();
 
-  const trends: any = useAppSelector((state) => state.trends.get('items'));
+  const trends = useAppSelector((state) => state.trends.get('items'));
 
   const sortedTrends = React.useMemo(() => {
-    return trends.sort((a: ImmutableMap<string, any>, b: ImmutableMap<string, any>) => {
+    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;
@@ -35,8 +34,8 @@ const TrendsPanel = ({ limit }: ITrendsPanel) => {
 
   return (
     <Widget title={<FormattedMessage id='trends.title' defaultMessage='Trends' />}>
-      {sortedTrends.map((hashtag: ImmutableMap<string, any>) => (
-        <Hashtag key={hashtag.get('name')} hashtag={hashtag} />
+      {sortedTrends.map((hashtag) => (
+        <Hashtag key={hashtag.name} hashtag={hashtag} />
       ))}
     </Widget>
   );
diff --git a/app/soapbox/reducers/__tests__/modals-test.js b/app/soapbox/reducers/__tests__/modals-test.js
index 3873d0a7618fbfcbde1fa97803e354e7b0de0f7b..36f4fba64046e385b81013e87576360cae8978a1 100644
GIT binary patch
delta 46
zcmX@awTo*5FO#TVNxoOGhNdQv_Dw8F&hSslN==^3$ErNphe>U+8l&>&X-sRF08o|=
A6aWAK

delta 24
gcmdnRb%<*NFVo~$X1U4xnA|7VFl%m}%(R>d0BD^ECjbBd

diff --git a/app/soapbox/reducers/__tests__/reports-test.js b/app/soapbox/reducers/__tests__/reports-test.js
index 66acbf8625a6627eecbf220567266669bb21cade..975a7ec49db6f26d31dbc0efca972293a25f04e6 100644
GIT binary patch
delta 81
zcmaFQ{F`Z_`wTg~l6<dV4NXlT?OIrxn4?k6r2qzbspVD*lLZ)knWAGSXETP&N5|?w
QrD`FJT1{)90Eh%(0L>;8!T<mO

delta 196
zcmey(^q$#0Gq)hWs6?S!!8fr$A+cD&GdH)iBrz!`70B072u>|Q5d`sT71E0Ga~0Gx
zVJg+Fxwt0GFx1p5$#*R*P0Z0iHbbMDO92e>Qp>GSOxKvW&6f|Z6lk)B=44jJa9va(
V9jNwNO$e)2Q_~tKR0||Q7yunGKA->q

diff --git a/app/soapbox/reducers/__tests__/trends-test.js b/app/soapbox/reducers/__tests__/trends-test.js
index 5ebeabb31d4d0f0e8aa7199a6fb6b5709e4653b1..644654038dc2c0dd5e9b0116116f19cf2feb983e 100644
GIT binary patch
delta 59
zcmX@e^n`Ju=QJg~l6<dV4NXlT?OIrxn4?k6r2qz*C8@c^RtnLvlSLR6c&ve<wVKvk
GAPfK`^AJ1$

delta 151
zcmaFDc#z36Gq)hWs6?S!!8fr$A+cD&GdH)iBrz!`70B07@X0JLK@kND)GDME<>xA>
zXTsE~TXS(um}aV}SCa2qSelrlfozIKHJ1VyWR|4n7F!`~0GXwsIdO*quckFnNiC2B
FVF0=_GC=?U

diff --git a/app/soapbox/reducers/account_notes.ts b/app/soapbox/reducers/account_notes.ts
index 446b04ca97..88515a59fe 100644
--- a/app/soapbox/reducers/account_notes.ts
+++ b/app/soapbox/reducers/account_notes.ts
@@ -12,7 +12,7 @@ import {
 const EditRecord = ImmutableRecord({
   isSubmitting: false,
   account: null,
-  comment: null,
+  comment: '',
 });
 
 const ReducerRecord = ImmutableRecord({
@@ -26,7 +26,7 @@ export default function account_notes(state: State = ReducerRecord(), action: An
     case ACCOUNT_NOTE_INIT_MODAL:
       return state.withMutations((state) => {
         state.setIn(['edit', 'isSubmitting'], false);
-        state.setIn(['edit', 'account_id'], action.account.get('id'));
+        state.setIn(['edit', 'account'], action.account.get('id'));
         state.setIn(['edit', 'comment'], action.comment);
       });
     case ACCOUNT_NOTE_CHANGE_COMMENT:
diff --git a/app/soapbox/reducers/modals.js b/app/soapbox/reducers/modals.ts
similarity index 50%
rename from app/soapbox/reducers/modals.js
rename to app/soapbox/reducers/modals.ts
index 3058604b3caf6e98903c5e33eac32b0c5f4d2f28..d16451bd184f89798bcb4cd105cdbd1e3e112552 100644
GIT binary patch
delta 309
zcmey$`kQ@%oV1QYP-=31QHnxhv4UrAZfQwkQcfyFXrf$5eP(V!eo=`+No7H*LbZZp
zUZrDlNoIbYLajntQGTw1dQoahX@$Bq7Z+D@eqM2jf^U9GVh+?qTXX|8s<{*tazQFW
zfaX~#sH^M11Okfk3yQ52@=9}ZKrVrpU{mZ}Qk0pOuA`8cS81nE1D4j|s?`MA2X+zI
zHU(Rt@{-b`JdmL_Ao2V(WOvwELljS}7iG5r>#&<RO^wM)0Vp6270}QG+5z^N71)y#
T&-rsBd1bN;qr>KC##xL2-@Iv-

delta 82
zcmey({*`rt+(gR|mE`=q;u3|-yv&l!#GK%g#FA76TLsVD+|rW7q?}Zr%;FLa&B?`#
bYC=F^WK}u}iIa~r`cGD3vfrG<G?Nhk;^`dD

diff --git a/app/soapbox/reducers/reports.js b/app/soapbox/reducers/reports.ts
similarity index 54%
rename from app/soapbox/reducers/reports.js
rename to app/soapbox/reducers/reports.ts
index 56f5247fafb14f1fef949ee7a780f430fbdcea40..1ca8ead41c0950de9a435b74f8c3113891fbc0b4 100644
GIT binary patch
literal 2946
zcmbVOO>d(x5WVMDcu#;7(L39;O0%>ZZ9aB^Xb)8tQE*yRJ|bf_ty=#3&VUJa;_ar*
zC1O1DX8h)P>?GS3jFVU5(WqcC2}?4~vWkcIDQ!(d;#02J@w+A)R%FCTI%nhSV2}u~
z0U@6IbLj=^>0%lT`%iy$HJ=7+&;7M>ea(WunoL~ZKaRK_PiK;KGG0tv+29A`VCAoa
z<;~5^l^vJ!xw{C~lkeljjl6KZ^nQ=MZ^sK)v*qN+vDsVA+`YBiyltO_5l@P|JYy7j
zEF~8B%a#JK<NRgZ`0OcTG_Ib}F@iu&7Ifz|!J-4B!v>hIKwwh()qR$5p5zY>*@S6H
zahqWj6;;mHN$ilkN>l7p$r(72x5j`@B@cO3f=}u6*wDoD*7L%&&?_pkjON@ShJl}(
zg6%>Eu=`y1X%Rh1->gdM`=GV8-=znejwpL~k2&2rhjd_V4NOC)4?Ce`1Y+eC%L8Ee
z9PPyhEE4_&q@~Y|uw%LjtCW*XmA73GjWUrG>X05$iif1YEH>8Z`)3jCL%B<M^hnHh
z*~aYc0uUIMRMx!%?)YO(u}v4K4dIV-I9`ov%q-lJ(M1E?`hvkODWB%%tpRixLpWhl
z=Z(8z+YcbN4Io4l(yIakM5)4PCoy)Vi%vGArNV}Eb{|N-j7FMBsZ?#|UTRY2)<`ZD
z@tL=xu6EUC6!i6Q3FVQuw=T0-OX53=sM<9xi2`jYLeE%-VMxw3p>TKzZd|FLYh&Mt
zY8!(_<X))TgGOQZO#GMUrgXF{JB(vB&wq9*@2eJV!UKS1$qG{@o>ponmXE4#e-b6p
zBaNPDta2iR{K5TBQEy#}x>w#wXpCmXAF2{40qTgEC?j9X%)tqhlp+)%EE?L?d*c*z
zF-WEJAS@bm`SLjhyBWz6a`Uahm2NLB?6Fk3;f~<ga7&$2D3$khkmONX#kA~tCjhNa
zNJ<q!2lRPSNk{S!OeZMy(W2$=Kv0Jxo3n~)x*~w_ZSxt_=3>^swvVG0QJEO+<4e4;
zv>88sJM}jPDg~b)q9Q!;nyX2jp!=sLj7(*sYa*pns?2kZ>mmO#Q~#(-*84}Q+Mhr*
RN2eq4{Lqn&`mG1`;4gu*ky!u$

delta 655
zcma))&q~8U5XR|WN)94I5yZnNND>KwqNhl`_aF+r6iSh8vMH;{rX(9Glv?oMRb=nI
z_ypo}_yRtJ7f;@tO{`7n#l0*$JKt|+zTJo2MRT8p<0uv|g$ptUl0YX6Q$dCS#q;Z7
zt2B2bo(N!^2}XjhAc8`BEz6i{0Gv*o%_sm%y6G@vLNGpZz$ZaMEldX>t{bIXTr<xB
zo(4f4O^}}^7)+M5IkwWJ!Z7m$Hwr__g#)^t2mC0WkQgBa_ArRt+qFoX2DC^mLT8Ac
znP-|t?=mYq>XS4O;HTUbOn#QPcW~mO0TvK>RC(`>urHl?x~bG^D7Bamh8ly~c-`Sf
zUq^3r3-r~*`oM&Pb{jnqEaLX>h04!y(ysPTm+F|}I3oqXN&_sNi*lz{8WWk0oN0T~
zsW#<Dbtvz(txF3MDxiI?Hk){!v7yd7{BI5UT)R<R`CW4=h?H0LmfGJI^~cij-`DA8
f?}au{VXETlgXAkS2X(!Mo#|g1Cz<}M@l^f+{&~@r

diff --git a/app/soapbox/reducers/search.js b/app/soapbox/reducers/search.ts
similarity index 56%
rename from app/soapbox/reducers/search.js
rename to app/soapbox/reducers/search.ts
index e086ef4a0c6c8cdb82525d99874329e65d4f39a5..8941b7fcfce2fb01a8014c78e033088b871efe1c 100644
GIT binary patch
literal 4129
zcmb_f-EZPJ5P#>d@WW{nBot2f$S#!-O|P8V(k1jhv|4rD#FR*oAltbs>hZtdj6V`P
z3EgUSJRtCV&-`XQ&i99sOY%yVJY$??36q2hve@q{NuPGCIUbP}OG}=4WPLOu8(!{z
zOUOz6AVF@$gO7tjZcWVY7jYqTd93+FNe@ru%UB){OpF;4b0%D&0U`6{?fo)|A8+Hk
z^<sH9a*kH<{mozQ!R2BV&)4qB=ZEDw9u2H#Q8cEh%*#TI(-IsL46IoXL30w%R`ct}
z`StAXR}gCsZh+wYzlztuwu(PL#EG(J1oe6HFrUXs;_xTe%RijISBsl<yn0MxS2q6h
zes*`+qtp;;tv$gAMtQn*GKVRJvd)U*OvPL09Ex1MAY%$ikmQ<*t)$PUw$rBa`XqdX
z929iVCL{<jfQs+*&(pBhv0|dyN%5u*nx<t{NHJ+FG}!tiB+rZIi*Sf0gru?(>^-bo
z?fn^66C0`}<1xu)AP6P99KtR)WKRzQtXao^`L^T`=Z5YCbN%R2tl2KbYP%_E#<Ct|
z9fH->B6#V|s+93J)B88wRdtO-^|a5W^zGZT-(Ajao@K0X+~m5H6KHm)rn)Yhd?y))
z>f0a#oCS$O-j$+3pCKv~_7bQfBU4Z$D_*Ptj-T)x62Afj*700?)a-URK>vf#jB|SY
zWY3Pk#9q{(QmP^Ch}mA{hNhF%l5<@JVJD7%NnlYI5cp$@()5We7a4jM=929JZ`L>P
zcSxoe1p9=mQ2PL`r6Pcw`h^0hC(5%SB<xgolAc5+_h=2hg1V|?j=+E_N@M*vBD(X}
zjPEDVIoL+^8KfITo%*yrRobI}a=E>Qaj(XrwrC?FB;Ob(A_XxrolYH-<iiKmt}N2v
zaLHhOsM12<qb&(0!@vX);DzF13^S-d7GD#hvK|_V$eybyp;=L{o)tc;J$G1bO?xL$
zZNqY@T6tg^zBNUB$3afdlD6m3jup>xOD?A5m!EOQ_)&D^Y#3+ctg{_COE@EE6KQ9T
z<dvFuzBm0;tGbVRLNuGGoQl`;2x^X|fC(*~;2Y;f1OEek&I<s%0Y<k04A?uses631
z?+ws{@I?`RaX|j<r`N{old06VueHZt8tPZCTqa9S@4Ts5*8>$hDYnAZA%nEG<Q>B!
zHI87u=|QG(pce!Xq)-ThWY=3=MdXFc6#~PV3>PeCtxGl{OSxrSlNOgEs&TJ|i<(b(
zKd9l+jNT@-Xu`}^JxIMBw7W(OBXB*XGSq8nh#?>{Q4fAjguxYG&n7(jA@zFXbhH~g
z2yJBzzI~W)X_4(%VsGRw%*}1C$N3Ln*6BS{x6ZV+`EXdzv}qrQS|UKFa#Y1>BQ*DP
z#x@joLb9m}y?$!2+1th60dPOlTRGfpc45`!7jQYHTM}w=gx9~tMM|ND-o8FDnK#9B
z99MpVzeY{tHX)uG-11vmylo{kHFbq>wQtEdmi2}Orqx>MiraUMdc<f2O07LN@0}is
ze&zHK)MMuzzBm)Yjl_G@wA8dPs|)$vgnG}RmPT*aY3Vblt@WEx1xrr*2mzt{%!{Oc
zU$u-nmC+l^_d(%5%g*U*%~qKD25ZffJvAe`0|tX*|E1Tm)w&&9DQoQ1DLS7;lQPq#
OEjublnA6kXH24oVE;E_{

delta 425
zcmZ3e@KQoHGq)hWs6?S!!8fr$A+cD&GdH)iBrz!`70B0_$e}XPU1j3}BSyvK{Ji24
zh0MInlFY=M;F83WR0UfU#gh*+huI<P*3i`9Qcy_C%qdANvQkh_Ois=(%_}KZ*Ws$w
zwC3W17+8|;nNkciDYGOsw|KHEYl5PVLQ!gQX--M8jzV#2Vo`ENNNQ0ooLyOvI{7_^
zEl+xCiH3SvVoqtQy5?j9Hc4Kv0K_t&h(DVi53*Y(cd=!QrxoSrdIf7hjn~UaEY2uN
zOfTN7!(PP*v=(X`&<3ndz_50+A!j`!E5zZ~xGbS8Q|<_M9R;w<fI5sPU*i_#Lw1RV
k=42Tj>B)H<e3O-VLiv#cR7W9k@>HH)9%Ql2hP)q`0J@5kcK`qY

diff --git a/app/soapbox/reducers/security.tsx b/app/soapbox/reducers/security.ts
similarity index 97%
rename from app/soapbox/reducers/security.tsx
rename to app/soapbox/reducers/security.ts
index 143b912c04..ecc76f9824 100644
--- a/app/soapbox/reducers/security.tsx
+++ b/app/soapbox/reducers/security.ts
@@ -1,5 +1,4 @@
 import { Map as ImmutableMap, List as ImmutableList, Record as ImmutableRecord, fromJS } from 'immutable';
-import { AnyAction } from 'redux';
 
 import {
   MFA_FETCH_SUCCESS,
@@ -11,6 +10,8 @@ import {
   REVOKE_TOKEN_SUCCESS,
 } from '../actions/security';
 
+import type { AnyAction } from 'redux';
+
 const TokenRecord = ImmutableRecord({
   id: 0,
   app_name: '',
diff --git a/app/soapbox/reducers/trending_statuses.js b/app/soapbox/reducers/trending_statuses.js
deleted file mode 100644
index ee4fa234b7a3cda982841789ddfe8430c998b441..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 865
zcmah{%Wi`(5WMphdjljy?x|9#N@*LZN!6H~kpoL(iI?m}O%?I)wGA{SsZuV$?s#@)
z)}m}`NpONSZ-6UUm1RqOU!eXE;7w*IF=I%R-mh{8xvWcY#dyxWa~v^{IsoxD+B~i{
z&k2hk;vI`v@)X6(mt-5g?;;ilHy~`cTt<uq&NxHWyxG^s8Ba;nm70;nDihU5qKH$g
zP?_1O?huGdkl+Q=4TQzSm3PuJ1!1Y?=la=^=NnBzz1G}t&mrf9LM_7oA*XtkDa~q0
zU~&H^jctY{Z#?s5Q05(q%s&(LIT?{gy=L@`6AWN9<ePIwuS9BPW$PGz3OcOymTU_B
zkr4+2L?L;umEZ<o^;(=6W9EZ??5MB@j&3#B+O-hlxYMTbXs<|yId2Psysd2ha25Y3
zWs-gX{knYXLuu{l0ldBz(pQ6h10dxJ|GO@8tNbF4D+?rB98BIM9WK}f>2xXMMh3w@
Si|I2QGPz)|$r?cCbj~-bNgeb6

diff --git a/app/soapbox/reducers/trending_statuses.ts b/app/soapbox/reducers/trending_statuses.ts
new file mode 100644
index 0000000000..c27ab31a07
--- /dev/null
+++ b/app/soapbox/reducers/trending_statuses.ts
@@ -0,0 +1,37 @@
+import { OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord } from 'immutable';
+
+import {
+  TRENDING_STATUSES_FETCH_REQUEST,
+  TRENDING_STATUSES_FETCH_SUCCESS,
+} from 'soapbox/actions/trending_statuses';
+import { APIEntity } from 'soapbox/types/entities';
+
+import type { AnyAction } from 'redux';
+
+const ReducerRecord = ImmutableRecord({
+  items: ImmutableOrderedSet<string>(),
+  isLoading: false,
+});
+
+type State = ReturnType<typeof ReducerRecord>;
+type APIEntities = Array<APIEntity>;
+
+const toIds = (items: APIEntities) => ImmutableOrderedSet(items.map(item => item.id));
+
+const importStatuses = (state: State, statuses: APIEntities) => {
+  return state.withMutations(state => {
+    state.set('items', toIds(statuses));
+    state.set('isLoading', false);
+  });
+};
+
+export default function trending_statuses(state: State = ReducerRecord(), action: AnyAction) {
+  switch (action.type) {
+    case TRENDING_STATUSES_FETCH_REQUEST:
+      return state.set('isLoading', true);
+    case TRENDING_STATUSES_FETCH_SUCCESS:
+      return importStatuses(state, action.statuses);
+    default:
+      return state;
+  }
+}
diff --git a/app/soapbox/reducers/trends.js b/app/soapbox/reducers/trends.js
deleted file mode 100644
index eb7df59bfa6fdfb9c0fa5568196d2c8507010bbf..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 736
zcmZvZPj7-i5XJ9&in*~Q1n)F9X)LBT+N7dqvxPx7;g4a5)W-PTI|FF7uqSrddA~Pr
zOmVDgf-|i25wwLxQ8c8#a^$-YOJnJwDg__1x+>mdxU?VOnrn~y<T$1mbO1K%=;Jls
z&7;liZMTj-w^6+D|JUQ~Y!=1wpgw<DEPdyS2!e@D$W*1BP>p431(ooXz?6oJ&STPq
zFnt(6otb6`3mg8`Wd!93&)8+9Q&a9k$aHRzaURR!sf{GXOgA|})|4$7I`A6PCc#?S
zo_CM;p)=`$fbF-T<N&Ix1@v>o?gv1kEsn+$a-W<Usi{k7A%R6w?#-<0vy%qdsXQDi
z^?{Bmv7^I^_uD3^3SRm2x%Dbi09@!{k{N@#Mc*dSdmHc@rB2d!^7wQv9-FVRih$&L
cdnED7)1hhE_Ne2*?DvZOipClRba5`uFM|%{sQ>@~

diff --git a/app/soapbox/reducers/trends.ts b/app/soapbox/reducers/trends.ts
new file mode 100644
index 0000000000..2c654e4fe4
--- /dev/null
+++ b/app/soapbox/reducers/trends.ts
@@ -0,0 +1,47 @@
+import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+
+import {
+  TRENDS_FETCH_REQUEST,
+  TRENDS_FETCH_SUCCESS,
+  TRENDS_FETCH_FAIL,
+} from '../actions/trends';
+
+import type { AnyAction } from 'redux';
+import type { APIEntity } from 'soapbox/types/entities';
+
+const HistoryRecord = ImmutableRecord({
+  accounts: '',
+  day: '',
+  uses: '',
+});
+
+const TrendingHashtagRecord = ImmutableRecord({
+  name: '',
+  url: '',
+  history: ImmutableList<History>(),
+});
+
+const ReducerRecord = ImmutableRecord({
+  items: ImmutableList<TrendingHashtag>(),
+  isLoading: false,
+});
+
+type State = ReturnType<typeof ReducerRecord>;
+type History = ReturnType<typeof HistoryRecord>;
+export type TrendingHashtag = ReturnType<typeof TrendingHashtagRecord>;
+
+export default function trendsReducer(state: State = ReducerRecord(), action: AnyAction) {
+  switch (action.type) {
+    case TRENDS_FETCH_REQUEST:
+      return state.set('isLoading', true);
+    case TRENDS_FETCH_SUCCESS:
+      return state.withMutations(map => {
+        map.set('items', ImmutableList(action.tags.map((item: APIEntity) => TrendingHashtagRecord({ ...item, history: ImmutableList(item.history.map(HistoryRecord)) }))));
+        map.set('isLoading', false);
+      });
+    case TRENDS_FETCH_FAIL:
+      return state.set('isLoading', false);
+    default:
+      return state;
+  }
+}