Updates for missing vars in components

app/javascript/gabsocial/components/account/account.js

@@ -64,9 +64,7 @@ class Account extends ImmutablePureComponent {
   render() {
     const { account, intl, hidden, onActionClick, actionIcon, actionTitle, displayOnly } = this.props;
 
-    if (!account) {
+    if (!account) return null;
-      return <div />;
-    }
 
     if (hidden) {
       return (

app/javascript/gabsocial/components/column_header_setting_button/column_header_setting_button.js

@@ -9,12 +9,12 @@ export default class ColumnHeaderSettingButton extends PureComponent {
   static propTypes = {
     title: PropTypes.node.isRequired,
     icon: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
+    onClick: PropTypes.func,
     to: PropTypes.string,
   };
 
   render () {
-    const { title, icon, to } = this.props;
+    const { title, icon, to, onClick } = this.props;
 
     const classes = classNames('column-header-setting-btn', {
       'column-header-setting-btn--link': !!to
@@ -30,7 +30,7 @@ export default class ColumnHeaderSettingButton extends PureComponent {
     }
 
     return (
-      <button className={classes} tabIndex='0' onClick={this.props.onClick}>
+      <button className={classes} tabIndex='0' onClick={onClick}>
         <Icon id={icon} />
         {title}
       </button>

app/javascript/gabsocial/components/modal/compose_modal/compose_modal.js

@@ -3,6 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { openModal } from '../../../actions/modal';
 import { cancelReplyCompose } from '../../../actions/compose';
 import ModalLayout from '../modal_layout';
+import TimelineComposeBlock from '../../timeline_compose_block';
 
 const messages = defineMessages({
   confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -46,7 +47,7 @@ class ComposeModal extends ImmutablePureComponent {
     const { intl } = this.props;
 
     return (
-      <ModalLayout title={intl.formatMessage(messages.title)} onClose={onClickClose}>
+      <ModalLayout title={intl.formatMessage(messages.title)} onClose={this.onClickClose}>
         <TimelineComposeBlock />
       </ModalLayout>
     );

app/javascript/gabsocial/components/modal/modal_layout.js

@@ -16,7 +16,7 @@ class ModalLayout extends PureComponent {
   };
 
   render() {
-    const { title, children } = this.props;
+    const { title, children, intl, onClose } = this.props;
 
     return (
       <div className='modal modal--layout modal--root'>

app/javascript/gabsocial/components/section_headline_bar/section_headline_bar.js

@@ -8,7 +8,7 @@ class SectionHeadlineBarItem extends PureComponent {
     icon: PropTypes.string,
     className: PropTypes.string,
     onClick: PropTypes.func,
-    title: PropTypes.oneOf([
+    title: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.node,
     ]),
@@ -21,14 +21,20 @@ class SectionHeadlineBarItem extends PureComponent {
     const classes = classNames('section-header-bar__item', className);
 
     if (to) {
-      return (<NavLink className={classes} exact={exact} to={to}>{title}</NavLink>);
+      return (
+        <NavLink className={classes} exact={exact} to={to}>{title}</NavLink>
+      )
     } else if (icon) {
-      <button className={classes} onClick={onClick} title={title}>
+      return (
-        <Icon id={icon} fixedWidth />
+        <button className={classes} onClick={onClick} title={title}>
-      </button>
+          <Icon id={icon} fixedWidth />
+        </button>
+      )
     }
 
-    return (<button className={classes} onClick={onClick}>{title}</button>)
+    return (
+      <button className={classes} onClick={onClick}>{title}</button>
+    )
   }
 };
 
@@ -46,8 +52,8 @@ export default class SectionHeadlineBar extends PureComponent {
     return (
       <div className={classes}>
         {
-          items.forEach(item, i => (
+          items.forEach((item, i) => (
-            <SectionHeadlineBarItem key={`shbi-{i}`} {...item} />
+            <SectionHeadlineBarItem key={`shbi-${i}`} {...item} />
           ))
         }
       </div>

app/javascript/gabsocial/components/trending_item/trending_item.js

@@ -14,6 +14,8 @@ export default class TrendingItem extends ImmutablePureComponent {
   };
 
   render() {
+    const { hashtag } = this.props;
+    
     return (
       <div className='trending-item'>
         <div className='trending-item__text'>

app/javascript/gabsocial/features/account_gallery/account_gallery.js

@@ -157,7 +157,7 @@ class AccountGallery extends ImmutablePureComponent {
   }
 
   render () {
-    const { attachments, isLoading, hasMore, isAccount, accountId, unavailable, accountUsername } = this.props;
+    const { attachments, isLoading, hasMore, isAccount, accountId, unavailable, accountUsername, intl } = this.props;
     const { width } = this.state;
 
     if (!isAccount && accountId !== -1) {

app/javascript/gabsocial/features/account_gallery/components/media_item/media_item.js

@@ -6,6 +6,8 @@ import classNames from 'classnames';
 import { decode } from 'blurhash';
 import { isIOS } from 'gabsocial/utils/is_mobile';
 
+import './media_item.scss';
+
 export default class MediaItem extends ImmutablePureComponent {
 
   static propTypes = {

app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js

@@ -17,9 +17,11 @@ export default class CharacterCounter extends PureComponent {
       'character-counter--over': (diff < 0),
     });
 
-    <div className='character-counter__wrapper'>
+    return (
-      <span className={classes}>{diff}</span>
+      <div className='character-counter__wrapper'>
-    </div>
+        <span className={classes}>{diff}</span>
+      </div>
+    )
   }
 
 }

app/javascript/gabsocial/features/compose/components/compose_search/compose_search.js

@@ -50,7 +50,7 @@ class ComposeSearch extends PureComponent {
   }
 
   render () {
-    const { intl, value, onShow, ...rest } = this.props;
+    const { intl, value, onShow, openInRoute } = this.props;
 
     return (
       <Search
@@ -61,7 +61,7 @@ class ComposeSearch extends PureComponent {
         handleClear={this.handleClear}
         onShow={onShow}
         withOverlay
-        {...rest}
+        openInRoute
       />
     )
   }

app/javascript/gabsocial/features/following/following.js

@@ -43,7 +43,6 @@ const mapStateToProps = (state, { params: { username } }) => {
 
 
 export default @connect(mapStateToProps)
-@injectIntl
 class Following extends ImmutablePureComponent {
 
   static propTypes = {

app/javascript/gabsocial/features/list_editor/components/list_editor_search/list_editor_search.js

@@ -48,7 +48,7 @@ class ListEditorSearch extends PureComponent {
   }
 
   render () {
-    const { value, intl, ...rest } = this.props;
+    const { value, intl } = this.props;
 
     return (
       <Search
@@ -60,7 +60,6 @@ class ListEditorSearch extends PureComponent {
         handleSubmit={this.handleSubmit}
         handleClear={this.handleClear}
         searchTitle={intl.formatMessage(messages.searchTitle)}
-        {...rest}
       />
     )
   }

app/javascript/gabsocial/features/notifications/components/notification_filter_bar/notification_filter_bar.js

@@ -1,7 +1,7 @@
 import { defineMessages, injectIntl } from 'react-intl';
 import SectionHeadlineBar from '../../../../components/section_headline_bar';
 
-const tooltips = defineMessages({
+const messages = defineMessages({
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
   favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favorites' },
   boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Reposts' },
@@ -58,33 +58,33 @@ class NotificationFilterBar extends PureComponent {
           {
             className: selectedFilter === 'mention' ? 'active' : '',
             onClick: this.onClick('mention'),
-            title: intl.formatMessage(tooltips.mentions),
+            title: intl.formatMessage(messages.mentions),
             icon: 'at',
           },
           {
             className: selectedFilter === 'favourite' ? 'active' : '',
             onClick: this.onClick('favourite'),
-            title: intl.formatMessage(tooltips.favourites),
+            title: intl.formatMessage(messages.favourites),
             icon: 'star',
           },
           {
             className: selectedFilter === 'reblog' ? 'active' : '',
             onClick: this.onClick('reblog'),
-            title: intl.formatMessage(tooltips.boosts),
+            title: intl.formatMessage(messages.boosts),
             icon: 'retweet',
           },
           {
             className: selectedFilter === 'poll' ? 'active' : '',
             onClick: this.onClick('poll'),
-            title: intl.formatMessage(tooltips.polls),
+            title: intl.formatMessage(messages.polls),
             icon: 'tasks',
           },
           {
             className: selectedFilter === 'follow' ? 'active' : '',
             onClick: this.onClick('follow'),
-            title: intl.formatMessage(tooltips.follows),
+            title: intl.formatMessage(messages.follows),
             icon: 'user-plus',
-          }
+          },
         ]}
       />
     )

app/javascript/gabsocial/features/status/status.js

@@ -420,7 +420,7 @@ class Status extends ImmutablePureComponent {
     const { fullscreen } = this.state;
 
     if (status === null) {
-      return (<ColumnIndicator type='missing' />);
+      return (<ColumnIndicator type='loading' />);
     }
 
     if (ancestorsIds && ancestorsIds.size > 0) {

app/javascript/gabsocial/pages/profile_page.js

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import HeaderContainer from '../features/account_timeline/containers/header_container';
-import {WhoToFollowPanel, SignUpPanel} from '../components/panel';
+import { WhoToFollowPanel, SignUpPanel } from '../components/panel';
 import LinkFooter from '../components/link_footer';
 import ProfileInfoPanel from '../features/account_timeline/components/profile_info_panel/profile_info_panel';
 import ColumnsArea from '../components/columns_area';
@@ -37,12 +37,15 @@ class ProfilePage extends ImmutablePureComponent {
   static propTypes = {
     account: ImmutablePropTypes.map,
     accountUsername: PropTypes.string.isRequired,
-    accountId: PropTypes.number.isRequired,
+    accountId: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]).isRequired,
     children: PropTypes.node,
   };
 
-  render () {
+  render() {
-    const {accountId, account, accountUsername} = this.props;
+    const { accountId, account, accountUsername } = this.props;
 
     return (
       <ColumnsArea