Merge branch 'next_' into 'next'

next

See merge request soapbox-pub/soapbox-fe!1212

app/soapbox/features/aliases/components/search.js

@@ -1,84 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import Icon from 'soapbox/components/icon';
-import { Button } from 'soapbox/components/ui';
-
-import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from '../../../actions/aliases';
-
-const messages = defineMessages({
-  search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
-  searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
-});
-
-const mapStateToProps = state => ({
-  value: state.getIn(['aliases', 'suggestions', 'value']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onSubmit: value => dispatch(fetchAliasesSuggestions(value)),
-  onClear: () => dispatch(clearAliasesSuggestions()),
-  onChange: value => dispatch(changeAliasesSuggestions(value)),
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class Search extends React.PureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onClear: PropTypes.func.isRequired,
-  };
-
-  handleChange = e => {
-    this.props.onChange(e.target.value);
-  }
-
-  handleKeyUp = e => {
-    if (e.keyCode === 13) {
-      this.props.onSubmit(this.props.value);
-    }
-  }
-
-  handleSubmit = () => {
-    this.props.onSubmit(this.props.value);
-  }
-
-  handleClear = () => {
-    this.props.onClear();
-  }
-
-  render() {
-    const { value, intl } = this.props;
-    const hasValue = value.length > 0;
-
-    return (
-      <div className='aliases_search search'>
-        <label>
-          <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
-
-          <input
-            className='search__input'
-            type='text'
-            value={value}
-            onChange={this.handleChange}
-            onKeyUp={this.handleKeyUp}
-            placeholder={intl.formatMessage(messages.search)}
-          />
-        </label>
-
-        <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
-          <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
-        </div>
-        <Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
-      </div>
-    );
-  }
-
-}

app/soapbox/features/aliases/components/search.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
+import Icon from 'soapbox/components/icon';
+import { Button } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
+  searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
+});
+
+const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const value = useAppSelector(state => state.aliases.getIn(['suggestions', 'value'])) as string;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(changeAliasesSuggestions(e.target.value));
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.keyCode === 13) {
+      dispatch(fetchAliasesSuggestions(value));
+    }
+  };
+
+  const handleSubmit = () => {
+    dispatch(fetchAliasesSuggestions(value));
+  };
+
+  const handleClear = () => {
+    dispatch(clearAliasesSuggestions());
+  };
+
+  const hasValue = value.length > 0;
+
+  return (
+    <div className='aliases_search search'>
+      <label>
+        <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
+
+        <input
+          className='search__input'
+          type='text'
+          value={value}
+          onChange={handleChange}
+          onKeyUp={handleKeyUp}
+          placeholder={intl.formatMessage(messages.search)}
+        />
+      </label>
+
+      <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
+        <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
+      </div>
+      <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
+    </div>
+  );
+};
+
+export default Search;

app/soapbox/features/follow_recommendations/components/account.js

@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display_name';
-import Permalink from 'soapbox/components/permalink';
-import ActionButton from 'soapbox/features/ui/components/action_button';
-import { makeGetAccount } from 'soapbox/selectors';
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = (state, props) => ({
-    account: getAccount(state, props.id),
-  });
-
-  return mapStateToProps;
-};
-
-const getFirstSentence = str => {
-  const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
-
-  return arr[0];
-};
-
-export default @connect(makeMapStateToProps)
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    intl: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const { account } = this.props;
-
-    return (
-      <div className='account follow-recommendations-account'>
-        <div className='account__wrapper'>
-          <Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-
-            <DisplayName account={account} />
-
-            <div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
-          </Permalink>
-
-          <div className='account__relationship'>
-            <ActionButton account={account} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}

app/soapbox/features/follow_recommendations/components/account.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import Avatar from 'soapbox/components/avatar';
+import DisplayName from 'soapbox/components/display_name';
+import Permalink from 'soapbox/components/permalink';
+import ActionButton from 'soapbox/features/ui/components/action_button';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+const getAccount = makeGetAccount();
+
+const getFirstSentence = (str: string) => {
+  const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
+
+  return arr[0];
+};
+
+interface IAccount {
+  id: string,
+}
+
+const Account: React.FC<IAccount> = ({ id }) => {
+  const account = useAppSelector((state) => getAccount(state, id));
+
+  if (!account) return null;
+
+  return (
+    <div className='account follow-recommendations-account'>
+      <div className='account__wrapper'>
+        <Permalink className='account__display-name account__display-name--with-note' title={account.acct} href={account.url} to={`/@${account.get('acct')}`}>
+          <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+
+          <DisplayName account={account} />
+
+          <div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
+        </Permalink>
+
+        <div className='account__relationship'>
+          <ActionButton account={account} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Account;

app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js

@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { Button } from 'soapbox/components/ui';
-
-import FollowRecommendationsList from './follow_recommendations_list';
-
-export default class FollowRecommendationsContainer extends React.Component {
-
-  static propTypes = {
-    onDone: PropTypes.func.isRequired,
-  }
-
-  handleDone = () => {
-    this.props.onDone();
-  }
-
-  render() {
-    return (
-      <div className='scrollable follow-recommendations-container'>
-        <div className='column-title'>
-          <h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
-          <h2 className='follow_subhead'><FormattedMessage id='follow_recommendation.subhead' defaultMessage='Let&#39;s get started!' /></h2>
-          <p><FormattedMessage id='follow_recommendations.lead' defaultMessage='Don&#39;t be afraid to make mistakes; you can unfollow people at any time.' /></p>
-        </div>
-
-        <FollowRecommendationsList />
-
-        <div className='column-actions'>
-          <Button onClick={this.handleDone}>
-            <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-}

app/soapbox/features/follow_recommendations/components/follow_recommendations_container.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from 'soapbox/components/ui';
+
+import FollowRecommendationsList from './follow_recommendations_list';
+
+interface IFollowRecommendationsContainer {
+  onDone: () => void,
+}
+
+const FollowRecommendationsContainer: React.FC<IFollowRecommendationsContainer> = ({ onDone }) => (
+  <div className='scrollable follow-recommendations-container'>
+    <div className='column-title'>
+      <h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
+      <h2 className='follow_subhead'><FormattedMessage id='follow_recommendation.subhead' defaultMessage='Let&#39;s get started!' /></h2>
+      <p><FormattedMessage id='follow_recommendations.lead' defaultMessage='Don&#39;t be afraid to make mistakes; you can unfollow people at any time.' /></p>
+    </div>
+
+    <FollowRecommendationsList />
+
+    <div className='column-actions'>
+      <Button onClick={onDone}>
+        <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
+      </Button>
+    </div>
+  </div>
+);
+
+export default FollowRecommendationsContainer;

app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js

@@ -1,62 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchSuggestions } from 'soapbox/actions/suggestions';
-import { Spinner } from 'soapbox/components/ui';
-
-import Account from './account';
-
-const mapStateToProps = state => ({
-  suggestions: state.getIn(['suggestions', 'items']),
-  isLoading: state.getIn(['suggestions', 'isLoading']),
-});
-
-export default @connect(mapStateToProps)
-class FollowRecommendationsList extends ImmutablePureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    suggestions: ImmutablePropTypes.list,
-    isLoading: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { dispatch, suggestions } = this.props;
-
-    // Don't re-fetch if we're e.g. navigating backwards to this page,
-    // since we don't want followed accounts to disappear from the list
-    if (suggestions.size === 0) {
-      dispatch(fetchSuggestions(true));
-    }
-  }
-
-  render() {
-    const { suggestions, isLoading } = this.props;
-
-    if (isLoading) {
-      return (
-        <div className='column-list'>
-          <Spinner />
-        </div>
-      );
-    }
-
-    return (
-      <div className='column-list'>
-        {suggestions.size > 0 ? suggestions.map(suggestion => (
-          <Account key={suggestion.get('account')} id={suggestion.get('account')} />
-        )) : (
-          <div className='column-list__empty-message'>
-            <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
-          </div>
-        )}
-      </div>
-    );
-
-  }
-
-}

app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { fetchSuggestions } from 'soapbox/actions/suggestions';
+import { Spinner } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import Account from './account';
+
+const FollowRecommendationsList: React.FC = () => {
+  const dispatch = useDispatch();
+
+  const suggestions = useAppSelector((state) => state.suggestions.get('items'));
+  const isLoading = useAppSelector((state) => state.suggestions.get('isLoading'));
+
+  useEffect(() => {
+    if (suggestions.size === 0) {
+      dispatch(fetchSuggestions());
+    }
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className='column-list'>
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className='column-list'>
+      {suggestions.size > 0 ? suggestions.map((suggestion: { account: string }) => (
+        <Account key={suggestion.account} id={suggestion.account} />
+      )) : (
+        <div className='column-list__empty-message'>
+          <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FollowRecommendationsList;

app/soapbox/features/follow_recommendations/index.js

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-
-import Column from 'soapbox/features/ui/components/column';
-
-import FollowRecommendationsContainer from './components/follow_recommendations_container';
-
-export default @withRouter
-class FollowRecommendations extends React.Component {
-
-  static propTypes = {
-    history: PropTypes.object.isRequired,
-  };
-
-  onDone = () => {
-    this.props.history.push('/');
-  }
-
-  render() {
-    return (
-      <Column>
-        <FollowRecommendationsContainer onDone={this.onDone} />
-      </Column>
-    );
-  }
-
-}

app/soapbox/features/follow_recommendations/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Column from 'soapbox/features/ui/components/column';
+
+import FollowRecommendationsContainer from './components/follow_recommendations_container';
+
+const FollowRecommendations: React.FC = () => {
+  const history = useHistory();
+
+  const onDone = () => {
+    history.push('/');
+  };
+
+  return (
+    <Column>
+      <FollowRecommendationsContainer onDone={onDone} />
+    </Column>
+  );
+};
+
+export default FollowRecommendations;

app/soapbox/features/intentional_error/index.tsx

@@ -4,10 +4,8 @@ import React from 'react';
  * IntentionalError:
  * For testing logging/monitoring & previewing ErrorBoundary design.
  */
-export default class IntentionalError extends React.Component {
+const IntentionalError: React.FC = () => {
+  throw 'This error is intentional.';
+};
 
-  render() {
+export default IntentionalError;
-    throw 'This error is intentional.';
-  }
-
-}

app/soapbox/features/list_timeline/index.js

@@ -1,158 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-
-import { Button, Spinner } from 'soapbox/components/ui';
-import Column from 'soapbox/features/ui/components/column';
-
-import { fetchList, deleteList } from '../../actions/lists';
-import { openModal } from '../../actions/modals';
-import { connectListStream } from '../../actions/streaming';
-import { expandListTimeline } from '../../actions/timelines';
-import MissingIndicator from '../../components/missing_indicator';
-import StatusListContainer from '../ui/containers/status_list_container';
-
-const messages = defineMessages({
-  deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' },
-  deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
-  deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
-});
-
-const mapStateToProps = (state, props) => ({
-  list: state.getIn(['lists', props.params.id]),
-  // hasUnread: state.getIn(['timelines', `list:${props.params.id}`, 'unread']) > 0,
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-@withRouter
-class ListTimeline extends React.PureComponent {
-
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    // hasUnread: PropTypes.bool,
-    list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
-    intl: PropTypes.object.isRequired,
-    history: PropTypes.object,
-  };
-
-  componentDidMount() {
-    this.handleConnect(this.props.params.id);
-  }
-
-  componentWillUnmount() {
-    this.handleDisconnect();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.params.id !== prevProps.params.id) {
-      this.handleDisconnect();
-      this.handleConnect(this.props.params.id);
-    }
-  }
-
-  handleConnect(id) {
-    const { dispatch } = this.props;
-
-    dispatch(fetchList(id));
-    dispatch(expandListTimeline(id));
-
-    this.disconnect = dispatch(connectListStream(id));
-  }
-
-  handleDisconnect() {
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
-  }
-
-  handleLoadMore = maxId => {
-    const { id } = this.props.params;
-    this.props.dispatch(expandListTimeline(id, { maxId }));
-  }
-
-  handleEditClick = () => {
-    this.props.dispatch(openModal('LIST_EDITOR', { listId: this.props.params.id }));
-  }
-
-  handleDeleteClick = () => {
-    const { dispatch, intl } = this.props;
-    const { id } = this.props.params;
-
-    dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/trash.svg'),
-      heading: intl.formatMessage(messages.deleteHeading),
-      message: intl.formatMessage(messages.deleteMessage),
-      confirm: intl.formatMessage(messages.deleteConfirm),
-      onConfirm: () => {
-        dispatch(deleteList(id));
-        this.props.history.push('/lists');
-      },
-    }));
-  }
-
-  render() {
-    const { list } = this.props;
-    const { id } = this.props.params;
-    const title  = list ? list.get('title') : id;
-
-    if (typeof list === 'undefined') {
-      return (
-        <Column>
-          <div>
-            <Spinner />
-          </div>
-        </Column>
-      );
-    } else if (list === false) {
-      return (
-        <MissingIndicator />
-      );
-    }
-
-    const emptyMessage = (
-      <div>
-        <FormattedMessage id='empty_column.list' defaultMessage='There is nothing in this list yet. When members of this list create new posts, they will appear here.' />
-        <br /><br />
-        <Button onClick={this.handleEditClick}><FormattedMessage id='list.click_to_add' defaultMessage='Click here to add people' /></Button>
-      </div>
-    );
-
-    return (
-      <Column label={title} heading={title} transparent>
-        {/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
-          <div className='column-header__links'>
-            <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
-              <Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
-            </button>
-
-            <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}>
-              <Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
-            </button>
-
-            <hr />
-
-            <Link to='/lists' className='text-btn column-header__setting-btn column-header__setting-btn--link'>
-              <FormattedMessage id='lists.view_all' defaultMessage='View all lists' />
-              <Icon id='arrow-right' />
-            </Link>
-          </div>
-        </HomeColumnHeader> */}
-
-        <StatusListContainer
-          scrollKey='list_timeline'
-          timelineId={`list:${id}`}
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={emptyMessage}
-          divideType='space'
-        />
-      </Column>
-    );
-  }
-
-}

app/soapbox/features/list_timeline/index.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { fetchList } from 'soapbox/actions/lists';
+import { openModal } from 'soapbox/actions/modals';
+import { connectListStream } from 'soapbox/actions/streaming';
+import { expandListTimeline } from 'soapbox/actions/timelines';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import { Button, Spinner } from 'soapbox/components/ui';
+import Column from 'soapbox/features/ui/components/column';
+import { useAppSelector } from 'soapbox/hooks';
+
+import StatusListContainer from '../ui/containers/status_list_container';
+
+// const messages = defineMessages({
+//   deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' },
+//   deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
+//   deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
+// });
+
+const ListTimeline: React.FC = () => {
+  const dispatch = useDispatch();
+  const { id } = useParams<{ id: string }>();
+  // const intl = useIntl();
+  // const history = useHistory();
+
+  const list = useAppSelector((state) => state.lists.get(id));
+  // const hasUnread = useAppSelector((state) => state.timelines.getIn([`list:${props.params.id}`, 'unread']) > 0);
+
+  useEffect(() => {
+    const disconnect = handleConnect(id);
+
+    return () => {
+      disconnect();
+    };
+  }, [id]);
+
+  const handleConnect = (id: string) => {
+    dispatch(fetchList(id));
+    dispatch(expandListTimeline(id));
+
+    return dispatch(connectListStream(id));
+  };
+
+  const handleLoadMore = (maxId: string) => {
+    dispatch(expandListTimeline(id, { maxId }));
+  };
+
+  const handleEditClick = () => {
+    dispatch(openModal('LIST_EDITOR', { listId: id }));
+  };
+
+  // const handleDeleteClick = () => {
+  //   dispatch(openModal('CONFIRM', {
+  //     icon: require('@tabler/icons/icons/trash.svg'),
+  //     heading: intl.formatMessage(messages.deleteHeading),
+  //     message: intl.formatMessage(messages.deleteMessage),
+  //     confirm: intl.formatMessage(messages.deleteConfirm),
+  //     onConfirm: () => {
+  //       dispatch(deleteList(id));
+  //       history.push('/lists');
+  //     },
+  //   }));
+  // };
+
+  const title  = list ? list.get('title') : id;
+
+  if (typeof list === 'undefined') {
+    return (
+      <Column>
+        <div>
+          <Spinner />
+        </div>
+      </Column>
+    );
+  } else if (list === false) {
+    return (
+      <MissingIndicator />
+    );
+  }
+
+  const emptyMessage = (
+    <div>
+      <FormattedMessage id='empty_column.list' defaultMessage='There is nothing in this list yet. When members of this list create new posts, they will appear here.' />
+      <br /><br />
+      <Button onClick={handleEditClick}><FormattedMessage id='list.click_to_add' defaultMessage='Click here to add people' /></Button>
+    </div>
+  );
+
+  return (
+    <Column label={title} heading={title} transparent>
+      {/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
+        <div className='column-header__links'>
+          <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={handleEditClick}>
+            <Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
+          </button>
+
+          <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={handleDeleteClick}>
+            <Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
+          </button>
+
+          <hr />
+
+          <Link to='/lists' className='text-btn column-header__setting-btn column-header__setting-btn--link'>
+            <FormattedMessage id='lists.view_all' defaultMessage='View all lists' />
+            <Icon id='arrow-right' />
+          </Link>
+        </div>
+      </HomeColumnHeader> */}
+
+      <StatusListContainer
+        scrollKey='list_timeline'
+        timelineId={`list:${id}`}
+        onLoadMore={handleLoadMore}
+        emptyMessage={emptyMessage}
+        divideType='space'
+      />
+    </Column>
+  );
+};
+
+export default ListTimeline;

app/soapbox/features/lists/components/new_list_form.js

@@ -1,82 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
-import { Button } from '../../../components/ui';
-
-const messages = defineMessages({
-  label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
-  title: { id: 'lists.new.create', defaultMessage: 'Add list' },
-  create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
-});
-
-const mapStateToProps = state => ({
-  value: state.getIn(['listEditor', 'title']),
-  disabled: state.getIn(['listEditor', 'isSubmitting']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onChange: value => dispatch(changeListEditorTitle(value)),
-  onSubmit: () => dispatch(submitListEditor(true)),
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class NewListForm extends React.PureComponent {
-
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-  };
-
-  handleChange = e => {
-    this.props.onChange(e.target.value);
-  }
-
-  handleSubmit = e => {
-    e.preventDefault();
-    this.props.onSubmit();
-  }
-
-  handleClick = e => {
-    e.preventDefault();
-    this.props.onSubmit();
-  }
-
-  render() {
-    const { value, disabled, intl } = this.props;
-
-    const label = intl.formatMessage(messages.label);
-    const create = intl.formatMessage(messages.create);
-
-    return (
-      <form className='column-inline-form' method='post' onSubmit={this.handleSubmit}>
-        <label>
-          <span style={{ display: 'none' }}>{label}</span>
-
-          <input
-            className='setting-text new-list-form__input'
-            value={value}
-            disabled={disabled}
-            onChange={this.handleChange}
-            placeholder={label}
-          />
-        </label>
-
-        <Button
-          className='new-list-form__btn'
-          disabled={disabled}
-          onClick={this.handleClick}
-        >
-          {create}
-        </Button>
-      </form>
-    );
-  }
-
-}

app/soapbox/features/lists/components/new_list_form.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists';
+import { Button } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
+  title: { id: 'lists.new.create', defaultMessage: 'Add list' },
+  create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
+});
+
+const NewListForm: React.FC = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const value = useAppSelector((state) => state.listEditor.get('title'));
+  const disabled = useAppSelector((state) => !!state.listEditor.get('isSubmitting'));
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(changeListEditorTitle(e.target.value));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement | HTMLButtonElement>) => {
+    e.preventDefault();
+    dispatch(submitListEditor(true));
+  };
+
+  const label = intl.formatMessage(messages.label);
+  const create = intl.formatMessage(messages.create);
+
+  return (
+    <form className='column-inline-form' method='post' onSubmit={handleSubmit}>
+      <label>
+        <span style={{ display: 'none' }}>{label}</span>
+
+        <input
+          className='setting-text new-list-form__input'
+          value={value}
+          disabled={disabled}
+          onChange={handleChange}
+          placeholder={label}
+        />
+      </label>
+
+      <Button
+        // className='new-list-form__btn'
+        disabled={disabled}
+        onClick={handleSubmit}
+      >
+        {create}
+      </Button>
+    </form>
+  );
+};
+
+export default NewListForm;

app/soapbox/features/lists/index.js

@@ -1,89 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-
-import { fetchLists } from 'soapbox/actions/lists';
-import ScrollableList from 'soapbox/components/scrollable_list';
-import { Spinner } from 'soapbox/components/ui';
-import { CardHeader, CardTitle } from 'soapbox/components/ui';
-
-
-import Column from '../ui/components/column';
-import ColumnLink from '../ui/components/column_link';
-
-import NewListForm from './components/new_list_form';
-
-const messages = defineMessages({
-  heading: { id: 'column.lists', defaultMessage: 'Lists' },
-  subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
-  add: { id: 'lists.new.create', defaultMessage: 'Add list' },
-});
-
-const getOrderedLists = createSelector([state => state.get('lists')], lists => {
-  if (!lists) {
-    return lists;
-  }
-
-  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
-});
-
-const mapStateToProps = state => ({
-  lists: getOrderedLists(state),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Lists extends ImmutablePureComponent {
-
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    lists: ImmutablePropTypes.list,
-    intl: PropTypes.object.isRequired,
-  };
-
-  componentDidMount() {
-    this.props.dispatch(fetchLists());
-  }
-
-  render() {
-    const { intl, lists } = this.props;
-
-    if (!lists) {
-      return (
-        <Column>
-          <Spinner />
-        </Column>
-      );
-    }
-
-    const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
-
-    return (
-      <Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
-        <br />
-        <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.add)} />
-        </CardHeader>
-        <NewListForm />
-        <br />
-        <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.subheading)} />
-        </CardHeader>
-        <ScrollableList
-          scrollKey='lists'
-          emptyMessage={emptyMessage}
-        >
-          {lists.map(list =>
-            <ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
-          )}
-        </ScrollableList>
-      </Column>
-    );
-  }
-
-}

app/soapbox/features/lists/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { fetchLists } from 'soapbox/actions/lists';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Spinner } from 'soapbox/components/ui';
+import { CardHeader, CardTitle } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import Column from '../ui/components/column';
+import ColumnLink from '../ui/components/column_link';
+
+import NewListForm from './components/new_list_form';
+
+import type { RootState } from 'soapbox/store';
+
+const messages = defineMessages({
+  heading: { id: 'column.lists', defaultMessage: 'Lists' },
+  subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
+  add: { id: 'lists.new.create', defaultMessage: 'Add list' },
+});
+
+const getOrderedLists = createSelector([(state: RootState) => state.lists], lists => {
+  if (!lists) {
+    return lists;
+  }
+
+  return lists.toList().filter((item) => !!item).sort((a: any, b: any) => a.get('title').localeCompare(b.get('title')));
+});
+
+const Lists: React.FC = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const lists = useAppSelector((state) => getOrderedLists(state));
+
+  useEffect(() => {
+    dispatch(fetchLists());
+  }, []);
+
+  if (!lists) {
+    return (
+      <Column>
+        <Spinner />
+      </Column>
+    );
+  }
+
+  const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
+
+  return (
+    <Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
+      <br />
+      <CardHeader>
+        <CardTitle title={intl.formatMessage(messages.add)} />
+      </CardHeader>
+      <NewListForm />
+      <br />
+      <CardHeader>
+        <CardTitle title={intl.formatMessage(messages.subheading)} />
+      </CardHeader>
+      <ScrollableList
+        scrollKey='lists'
+        emptyMessage={emptyMessage}
+      >
+        {lists.map((list: any) =>
+          <ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
+        )}
+      </ScrollableList>
+    </Column>
+  );
+};
+
+export default Lists;

app/soapbox/normalizers/index.ts

@@ -5,6 +5,7 @@ export { ChatRecord, normalizeChat } from './chat';
 export { ChatMessageRecord, normalizeChatMessage } from './chat_message';
 export { EmojiRecord, normalizeEmoji } from './emoji';
 export { InstanceRecord, normalizeInstance } from './instance';
+export { ListRecord, normalizeList } from './list';
 export { MentionRecord, normalizeMention } from './mention';
 export { NotificationRecord, normalizeNotification } from './notification';
 export { PollRecord, PollOptionRecord, normalizePoll } from './poll';

app/soapbox/normalizers/list.ts

@@ -0,0 +1,19 @@
+/**
+ * List normalizer:
+ * Converts API lists into our internal format.
+ * @see {@link https://docs.joinmastodon.org/entities/list/}
+ */
+import { Record as ImmutableRecord, Map as ImmutableMap, fromJS } from 'immutable';
+
+// https://docs.joinmastodon.org/entities/list/
+export const ListRecord = ImmutableRecord({
+  id: '',
+  title: '',
+  replies_policy: null as 'followed' | 'list' | 'none' | null,
+});
+
+export const normalizeList = (list: Record<string, any>) => {
+  return ListRecord(
+    ImmutableMap(fromJS(list)),
+  );
+};

app/soapbox/reducers/__tests__/list_adder-test.js

@@ -1,4 +1,4 @@
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 
 import * as actions from 'soapbox/actions/lists';
 
@@ -6,87 +6,87 @@ import reducer from '../list_adder';
 
 describe('list_adder reducer', () => {
   it('should return the initial state', () => {
-    expect(reducer(undefined, {})).toEqual(ImmutableMap({
+    expect(reducer(undefined, {})).toMatchObject({
       accountId: null,
 
-      lists: ImmutableMap({
+      lists: {
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      },
-    }));
+    });
   });
 
   it('should handle LIST_ADDER_RESET', () => {
-    const state = ImmutableMap({
+    const state = ImmutableRecord({
       accountId: null,
 
-      lists: ImmutableMap({
+      lists: ImmutableRecord({
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      })(),
-    });
+    })();
     const action = {
       type: actions.LIST_ADDER_RESET,
     };
-    expect(reducer(state, action)).toEqual(ImmutableMap({
+    expect(reducer(state, action)).toMatchObject({
       accountId: null,
 
-      lists: ImmutableMap({
+      lists: {
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      },
-    }));
+    });
   });
 
   it('should handle LIST_ADDER_LISTS_FETCH_REQUEST', () => {
-    const state = ImmutableMap({
+    const state = ImmutableRecord({
       accountId: null,
 
-      lists: ImmutableMap({
+      lists: ImmutableRecord({
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      })(),
-    });
+    })();
     const action = {
       type: actions.LIST_ADDER_LISTS_FETCH_REQUEST,
     };
-    expect(reducer(state, action)).toEqual(ImmutableMap({
+    expect(reducer(state, action)).toMatchObject({
       accountId: null,
 
-      lists: ImmutableMap({
+      lists: {
         items: ImmutableList(),
         loaded: false,
         isLoading: true,
-      }),
+      },
-    }));
+    });
   });
 
   it('should handle LIST_ADDER_LISTS_FETCH_FAIL', () => {
-    const state = ImmutableMap({
+    const state = ImmutableRecord({
       accountId: null,
 
-      lists: ImmutableMap({
+      lists: ImmutableRecord({
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      })(),
-    });
+    })();
     const action = {
       type: actions.LIST_ADDER_LISTS_FETCH_FAIL,
     };
-    expect(reducer(state, action)).toEqual(ImmutableMap({
+    expect(reducer(state, action)).toMatchObject({
       accountId: null,
 
-      lists: ImmutableMap({
+      lists: {
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      },
-    }));
+    });
   });
 
   // it('should handle LIST_ADDER_LISTS_FETCH_SUCCESS', () => {

app/soapbox/reducers/__tests__/list_editor-test.js

@@ -1,4 +1,4 @@
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 
 import * as actions from 'soapbox/actions/lists';
 
@@ -6,83 +6,83 @@ import reducer from '../list_editor';
 
 describe('list_editor reducer', () => {
   it('should return the initial state', () => {
-    expect(reducer(undefined, {})).toEqual(ImmutableMap({
+    expect(reducer(undefined, {})).toMatchObject({
       listId: null,
       isSubmitting: false,
       isChanged: false,
       title: '',
 
-      accounts: ImmutableMap({
+      accounts: {
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      },
 
-      suggestions: ImmutableMap({
+      suggestions: {
         value: '',
         items: ImmutableList(),
-      }),
+      },
-    }));
+    });
   });
 
   it('should handle LIST_EDITOR_RESET', () => {
-    const state = ImmutableMap({
+    const state = ImmutableRecord({
       listId: null,
       isSubmitting: false,
       isChanged: false,
       title: '',
 
-      accounts: ImmutableMap({
+      accounts: ImmutableRecord({
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      })(),
 
-      suggestions: ImmutableMap({
+      suggestions: ImmutableRecord({
         value: '',
         items: ImmutableList(),
-      }),
+      })(),
-    });
+    })();
     const action = {
       type: actions.LIST_EDITOR_RESET,
     };
-    expect(reducer(state, action)).toEqual(ImmutableMap({
+    expect(reducer(state, action)).toMatchObject({
       listId: null,
       isSubmitting: false,
       isChanged: false,
       title: '',
 
-      accounts: ImmutableMap({
+      accounts: {
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      },
 
-      suggestions: ImmutableMap({
+      suggestions: {
         value: '',
         items: ImmutableList(),
-      }),
+      },
-    }));
+    });
   });
 
   it('should handle LIST_EDITOR_SETUP', () => {
-    const state = ImmutableMap({
+    const state = ImmutableRecord({
       listId: null,
       isSubmitting: false,
       isChanged: false,
       title: '',
 
-      accounts: ImmutableMap({
+      accounts: ImmutableRecord({
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      })(),
 
-      suggestions: ImmutableMap({
+      suggestions: ImmutableRecord({
         value: '',
         items: ImmutableList(),
-      }),
+      })(),
-    });
+    })();
     const action = {
       type: actions.LIST_EDITOR_SETUP,
       list: ImmutableMap({
@@ -90,23 +90,23 @@ describe('list_editor reducer', () => {
         title: 'list 1',
       }),
     };
-    expect(reducer(state, action)).toEqual(ImmutableMap({
+    expect(reducer(state, action)).toMatchObject({
       listId: '22',
       isSubmitting: false,
       isChanged: false,
       title: 'list 1',
 
-      accounts: ImmutableMap({
+      accounts: {
         items: ImmutableList(),
         loaded: false,
         isLoading: false,
-      }),
+      },
 
-      suggestions: ImmutableMap({
+      suggestions: {
         value: '',
         items: ImmutableList(),
-      }),
+      },
-    }));
+    });
   });
 
   it('should handle LIST_EDITOR_TITLE_CHANGE', () => {

app/soapbox/reducers/list_adder.ts

@@ -1,4 +1,5 @@
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+import { AnyAction } from 'redux';
 
 import {
   LIST_ADDER_RESET,
@@ -10,20 +11,24 @@ import {
   LIST_EDITOR_REMOVE_SUCCESS,
 } from '../actions/lists';
 
-const initialState = ImmutableMap({
+const ListsRecord = ImmutableRecord({
-  accountId: null,
+  items: ImmutableList<string>(),
-
+  loaded: false,
-  lists: ImmutableMap({
+  isLoading: false,
-    items: ImmutableList(),
-    loaded: false,
-    isLoading: false,
-  }),
 });
 
-export default function listAdderReducer(state = initialState, action) {
+const ReducerRecord = ImmutableRecord({
+  accountId: null as string | null,
+
+  lists: ListsRecord(),
+});
+
+type State = ReturnType<typeof ReducerRecord>;
+
+export default function listAdderReducer(state: State = ReducerRecord(), action: AnyAction) {
   switch(action.type) {
   case LIST_ADDER_RESET:
-    return initialState;
+    return ReducerRecord();
   case LIST_ADDER_SETUP:
     return state.withMutations(map => {
       map.set('accountId', action.account.get('id'));
@@ -36,12 +41,12 @@ export default function listAdderReducer(state = initialState, action) {
     return state.update('lists', lists => lists.withMutations(map => {
       map.set('isLoading', false);
       map.set('loaded', true);
-      map.set('items', ImmutableList(action.lists.map(item => item.id)));
+      map.set('items', ImmutableList(action.lists.map((item: { id: string }) => item.id)));
     }));
   case LIST_EDITOR_ADD_SUCCESS:
-    return state.updateIn(['lists', 'items'], list => list.unshift(action.listId));
+    return state.updateIn(['lists', 'items'], list => (list as ImmutableList<string>).unshift(action.listId));
   case LIST_EDITOR_REMOVE_SUCCESS:
-    return state.updateIn(['lists', 'items'], list => list.filterNot(item => item === action.listId));
+    return state.updateIn(['lists', 'items'], list => (list as ImmutableList<string>).filterNot(item => item === action.listId));
   default:
     return state;
   }

app/soapbox/reducers/list_editor.ts

@@ -1,4 +1,5 @@
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+import { AnyAction } from 'redux';
 
 import {
   LIST_CREATE_REQUEST,
@@ -20,28 +21,34 @@ import {
   LIST_EDITOR_REMOVE_SUCCESS,
 } from '../actions/lists';
 
-const initialState = ImmutableMap({
+const AccountsRecord = ImmutableRecord({
-  listId: null,
+  items: ImmutableList<string>(),
+  loaded: false,
+  isLoading: false,
+});
+
+const SuggestionsRecord = ImmutableRecord({
+  value: '',
+  items: ImmutableList<string>(),
+});
+
+const ReducerRecord = ImmutableRecord({
+  listId: null as string | null,
   isSubmitting: false,
   isChanged: false,
   title: '',
 
-  accounts: ImmutableMap({
+  accounts: AccountsRecord(),
-    items: ImmutableList(),
-    loaded: false,
-    isLoading: false,
-  }),
 
-  suggestions: ImmutableMap({
+  suggestions: SuggestionsRecord(),
-    value: '',
-    items: ImmutableList(),
-  }),
 });
 
-export default function listEditorReducer(state = initialState, action) {
+type State = ReturnType<typeof ReducerRecord>;
+
+export default function listEditorReducer(state: State = ReducerRecord(), action: AnyAction) {
   switch(action.type) {
   case LIST_EDITOR_RESET:
-    return initialState;
+    return ReducerRecord();
   case LIST_EDITOR_SETUP:
     return state.withMutations(map => {
       map.set('listId', action.list.get('id'));
@@ -76,21 +83,21 @@ export default function listEditorReducer(state = initialState, action) {
     return state.update('accounts', accounts => accounts.withMutations(map => {
       map.set('isLoading', false);
       map.set('loaded', true);
-      map.set('items', ImmutableList(action.accounts.map(item => item.id)));
+      map.set('items', ImmutableList(action.accounts.map((item: { id: string }) => item.id)));
     }));
   case LIST_EDITOR_SUGGESTIONS_CHANGE:
     return state.setIn(['suggestions', 'value'], action.value);
   case LIST_EDITOR_SUGGESTIONS_READY:
-    return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id)));
+    return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map((item: { id: string }) => item.id)));
   case LIST_EDITOR_SUGGESTIONS_CLEAR:
     return state.update('suggestions', suggestions => suggestions.withMutations(map => {
       map.set('items', ImmutableList());
       map.set('value', '');
     }));
   case LIST_EDITOR_ADD_SUCCESS:
-    return state.updateIn(['accounts', 'items'], list => list.unshift(action.accountId));
+    return state.updateIn(['accounts', 'items'], list => (list as ImmutableList<string>).unshift(action.accountId));
   case LIST_EDITOR_REMOVE_SUCCESS:
-    return state.updateIn(['accounts', 'items'], list => list.filterNot(item => item === action.accountId));
+    return state.updateIn(['accounts', 'items'], list => (list as ImmutableList<string>).filterNot((item) => item === action.accountId));
   default:
     return state;
   }

app/soapbox/reducers/lists.js

@@ -1,38 +0,0 @@
-import { Map as ImmutableMap, fromJS } from 'immutable';
-
-import {
-  LIST_FETCH_SUCCESS,
-  LIST_FETCH_FAIL,
-  LISTS_FETCH_SUCCESS,
-  LIST_CREATE_SUCCESS,
-  LIST_UPDATE_SUCCESS,
-  LIST_DELETE_SUCCESS,
-} from '../actions/lists';
-
-const initialState = ImmutableMap();
-
-const normalizeList = (state, list) => state.set(list.id, fromJS(list));
-
-const normalizeLists = (state, lists) => {
-  lists.forEach(list => {
-    state = normalizeList(state, list);
-  });
-
-  return state;
-};
-
-export default function lists(state = initialState, action) {
-  switch(action.type) {
-  case LIST_FETCH_SUCCESS:
-  case LIST_CREATE_SUCCESS:
-  case LIST_UPDATE_SUCCESS:
-    return normalizeList(state, action.list);
-  case LISTS_FETCH_SUCCESS:
-    return normalizeLists(state, action.lists);
-  case LIST_DELETE_SUCCESS:
-  case LIST_FETCH_FAIL:
-    return state.set(action.id, false);
-  default:
-    return state;
-  }
-}

app/soapbox/reducers/lists.ts

@@ -0,0 +1,46 @@
+import { Map as ImmutableMap } from 'immutable';
+import { AnyAction } from 'redux';
+
+import {
+  LIST_FETCH_SUCCESS,
+  LIST_FETCH_FAIL,
+  LISTS_FETCH_SUCCESS,
+  LIST_CREATE_SUCCESS,
+  LIST_UPDATE_SUCCESS,
+  LIST_DELETE_SUCCESS,
+} from 'soapbox/actions/lists';
+import { normalizeList } from 'soapbox/normalizers';
+
+type ListRecord = ReturnType<typeof normalizeList>;
+type APIEntity = Record<string, any>;
+type APIEntities = Array<APIEntity>;
+
+type State = ImmutableMap<string, ListRecord | false>;
+
+const initialState: State = ImmutableMap();
+
+const importList = (state: State, list: APIEntity) => state.set(list.id, normalizeList(list));
+
+const importLists = (state: State, lists: APIEntities) => {
+  lists.forEach(list => {
+    state = importList(state, list);
+  });
+
+  return state;
+};
+
+export default function lists(state: State = initialState, action: AnyAction) {
+  switch(action.type) {
+  case LIST_FETCH_SUCCESS:
+  case LIST_CREATE_SUCCESS:
+  case LIST_UPDATE_SUCCESS:
+    return importList(state, action.list);
+  case LISTS_FETCH_SUCCESS:
+    return importLists(state, action.lists);
+  case LIST_DELETE_SUCCESS:
+  case LIST_FETCH_FAIL:
+    return state.set(action.id, false);
+  default:
+    return state;
+  }
+}