Remove React, PureComponent global import, added those imports to files directly

• Remove:
- React, PureComponent global import and added those imports to files directly

app/javascript/gabsocial/components/about_sidebar.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'

app/javascript/gabsocial/components/account.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import { NavLink } from 'react-router-dom'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { defineMessages, injectIntl } from 'react-intl'
@@ -123,10 +123,10 @@ class Account extends ImmutablePureComponent {
 
     if (isHidden) {
       return (
-        <Fragment>
+        <React.Fragment>
           {account.get('display_name')}
           {`@${account.get('username')}`}
-        </Fragment>
+        </React.Fragment>
       )
     }
 

app/javascript/gabsocial/components/account_action_button.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'

app/javascript/gabsocial/components/account_authorize.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

app/javascript/gabsocial/components/autosuggest_account.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { makeGetAccount } from '../selectors'

app/javascript/gabsocial/components/autosuggest_emoji.js

@@ -1,9 +1,10 @@
+import React from 'react'
 import unicodeMapping from './emoji/emoji_unicode_mapping_light'
 import Text from './text'
 
 const assetHost = process.env.CDN_HOST || ''
 
-export default class AutosuggestEmoji extends PureComponent {
+export default class AutosuggestEmoji extends React.PureComponent {
 
   static propTypes = {
     emoji: PropTypes.object.isRequired,

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import isObject from 'lodash.isobject'
 import ImmutablePureComponent from 'react-immutable-pure-component'
@@ -249,7 +249,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
     })
 
     return (
-      <Fragment>
+      <React.Fragment>
         <div className={textareaContainerClasses}>
           <label htmlFor={id} className={_s.visiblyHidden}>
             {placeholder}
@@ -302,7 +302,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
             {suggestions.map(this.renderSuggestion)}
           </div>
         }
-      </Fragment>
+      </React.Fragment>
     )
   }
 

app/javascript/gabsocial/components/avatar.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import debounce from 'lodash.debounce'

app/javascript/gabsocial/components/back_button.js

@@ -1,7 +1,8 @@
+import React from 'react'
 import { CX } from '../constants'
 import Button from './button'
 
-export default class BackButton extends PureComponent {
+export default class BackButton extends React.PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,

app/javascript/gabsocial/components/block.js

@@ -1,7 +1,9 @@
+import React from 'react'
+
 /**
  * Renders a block component
  */
-export default class Block extends PureComponent {
+export default class Block extends React.PureComponent {
 
   static propTypes = {
     children: PropTypes.any,

app/javascript/gabsocial/components/block_heading.js

@@ -1,6 +1,7 @@
+import React from 'react'
 import Heading from './heading'
 
-export default class BlockHeading extends PureComponent {
+export default class BlockHeading extends React.PureComponent {
 
   static propTypes = {
     title: PropTypes.string.isRequired,

app/javascript/gabsocial/components/bundle_column_error.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'
 import {
   source_url,
@@ -20,7 +21,7 @@ const messages = defineMessages({
 
 export default
 @injectIntl
-class BundleColumnError extends PureComponent {
+class BundleColumnError extends React.PureComponent {
 
   static propTypes = {
     onRetry: PropTypes.func.isRequired,

app/javascript/gabsocial/components/button.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import { NavLink } from 'react-router-dom'
 import classNames from 'classnames/bind'
 import Icon from './icon'
@@ -45,7 +45,7 @@ const COLORS = {
  * @param {bool} [props.type] - `type` attribute for button
  * @param {bool} [props.underlineOnHover] - if the button has underline on hover
  */
-export default class Button extends PureComponent {
+export default class Button extends React.PureComponent {
 
   static propTypes = {
     backgroundColor: PropTypes.string,
@@ -204,10 +204,10 @@ export default class Button extends PureComponent {
     ) : undefined
 
     const theChildren = !!icon ? (
-      <Fragment>
+      <React.Fragment>
         {theIcon}
         {children}
-      </Fragment>
+      </React.Fragment>
     ) : children
 
     const handlers = {

app/javascript/gabsocial/components/character_counter.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { length } from 'stringz'
 
 /**
@@ -5,7 +6,7 @@ import { length } from 'stringz'
  * @param {string} props.text - text to use to measure
  * @param {number} props.max - max text allowed
  */
-export default class CharacterCounter extends PureComponent {
+export default class CharacterCounter extends React.PureComponent {
 
   static propTypes = {
     text: PropTypes.string.isRequired,

app/javascript/gabsocial/components/column_indicator.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import Icon from './icon'
 import Text from './text'
@@ -9,7 +10,7 @@ const messages = defineMessages({
 
 export default
 @injectIntl
-class ColumnIndicator extends PureComponent {
+class ColumnIndicator extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,

app/javascript/gabsocial/components/comment.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { NavLink } from 'react-router-dom'
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
@@ -247,7 +248,7 @@ class Comment extends ImmutablePureComponent {
 
 }
 
-class CommentButton extends PureComponent {
+class CommentButton extends React.PureComponent {
 
   static propTypes = {
     onClick: PropTypes.func.isRequired,

app/javascript/gabsocial/components/comment_header.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import { NavLink } from 'react-router-dom'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
@@ -87,7 +87,7 @@ class CommentHeader extends ImmutablePureComponent {
 
           {
             !!status.get('group') &&
-            <Fragment>
+            <React.Fragment>
               <DotTextSeperator />
               <Button
                 isText
@@ -101,12 +101,12 @@ class CommentHeader extends ImmutablePureComponent {
                   {status.getIn(['group', 'title'])}
                 </Text>
               </Button>
-            </Fragment>
+            </React.Fragment>
           }
 
           {
             status.get('revised_at') !== null &&
-            <Fragment>
+            <React.Fragment>
               <DotTextSeperator />
               <Button
                 isText
@@ -120,12 +120,12 @@ class CommentHeader extends ImmutablePureComponent {
                   {intl.formatMessage(messages.edited)}
                 </Text>
               </Button>
-            </Fragment>
+            </React.Fragment>
           }
 
           {
             favoriteCount > 0 &&
-            <Fragment>
+            <React.Fragment>
               <DotTextSeperator />
                 <Button
                   isText
@@ -141,12 +141,12 @@ class CommentHeader extends ImmutablePureComponent {
                   })}
                 </Text>
               </Button>
-            </Fragment>
+            </React.Fragment>
           }
 
           {
             repostCount > 0 &&
-            <Fragment>
+            <React.Fragment>
               <DotTextSeperator />
                 <Button
                   isText
@@ -162,7 +162,7 @@ class CommentHeader extends ImmutablePureComponent {
                   })}
                 </Text>
               </Button>
-            </Fragment>
+            </React.Fragment>
           }
 
           <DotTextSeperator />

app/javascript/gabsocial/components/comment_list.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Button from './button'
@@ -31,7 +31,7 @@ export default class CommentList extends ImmutablePureComponent {
     const Wrapper = !commentsLimited ? ScrollableList : Dummy
 
     return (
-      <Fragment>
+      <React.Fragment>
         <Wrapper scrollKey='comments'>
           {
             descendants.slice(0, max).map((descendant, i) => (
@@ -67,7 +67,7 @@ export default class CommentList extends ImmutablePureComponent {
             </div>
           </div>
         }
-      </Fragment>
+      </React.Fragment>
     )
   }
 

app/javascript/gabsocial/components/composer.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   getDefaultKeyBinding,
   Editor,
@@ -110,7 +111,7 @@ const GROUP_HANDLE_REGEX = /\g\/[\w]+/g
 const HANDLE_REGEX = /\@[\w]+/g
 const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g
 
-export default class Composer extends PureComponent {
+export default class Composer extends React.PureComponent {
 
   static propTypes = {
     inputRef: PropTypes.func,

app/javascript/gabsocial/components/display_name.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import debounce from 'lodash.debounce'

app/javascript/gabsocial/components/divider.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { CX } from '../constants'
 
 /**
@@ -5,7 +6,7 @@ import { CX } from '../constants'
  * @param {bool} [props.isInvisible] - to style the tab bar larger
  * @param {bool} [props.isSmall] - if item is active
  */
-export default class Divider extends PureComponent {
+export default class Divider extends React.PureComponent {
 
   static propTypes = {
     isInvisible: PropTypes.bool,

app/javascript/gabsocial/components/dot_text_seperator.js

@@ -1,6 +1,7 @@
+import React from 'react'
 import Text from './text'
 
-export default class DotTextSeperator extends PureComponent {
+export default class DotTextSeperator extends React.PureComponent {
 
   render() {
     return (

app/javascript/gabsocial/components/dummy.js

@@ -1,4 +1,6 @@
-export default class Dummy extends PureComponent {
+import React from 'react'
+
+export default class Dummy extends React.PureComponent {
 
   render() {
     return (

app/javascript/gabsocial/components/error_boundary.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import {
   source_url,
@@ -13,7 +14,7 @@ import Divider from './divider'
 import Icon from './icon'
 import Text from './text'
 
-export default class ErrorBoundary extends PureComponent {
+export default class ErrorBoundary extends React.PureComponent {
 
   static propTypes = {
     children: PropTypes.node,

app/javascript/gabsocial/components/extended_video_player.js

@@ -1,4 +1,6 @@
-export default class ExtendedVideoPlayer extends PureComponent {
+import React from 'react'
+
+export default class ExtendedVideoPlayer extends React.PureComponent {
 
   static propTypes = {
     src: PropTypes.string.isRequired,

app/javascript/gabsocial/components/file_input.js

@@ -1,9 +1,10 @@
+import React from 'react'
 import { CX } from '../constants'
 import Icon from './icon'
 import Image from './image'
 import Text from './text'
 
-export default class FileInput extends PureComponent {
+export default class FileInput extends React.PureComponent {
 
   static propTypes = {
     onChange: PropTypes.func,

app/javascript/gabsocial/components/floating_action_button.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import { me } from '../initial_state'
 import { CX } from '../constants'
@@ -15,7 +16,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default
 @injectIntl
 @connect(null, mapDispatchToProps)
-class FloatingActionButton extends PureComponent {
+class FloatingActionButton extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,

app/javascript/gabsocial/components/footer_bar.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { withRouter } from 'react-router-dom'
 import { me } from '../initial_state'
 import { CX } from '../constants'
@@ -11,7 +12,7 @@ const mapStateToProps = (state) => ({
 export default
 @withRouter
 @connect(mapStateToProps)
-class FooterBar extends PureComponent {
+class FooterBar extends React.PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,

app/javascript/gabsocial/components/form.js

@@ -1,6 +1,7 @@
+import React from 'react'
 import Text from './text'
 
-export default class Form extends PureComponent {
+export default class Form extends React.PureComponent {
 
   static propTypes = {
     children: PropTypes.any,

app/javascript/gabsocial/components/global_footer.js

@@ -1,10 +1,11 @@
+import React from 'react'
 import Button from './button'
 import Heading from './heading'
 import Icon from './icon'
 import Text from './text'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
 
-export default class GlobalFooter extends PureComponent {
+export default class GlobalFooter extends React.PureComponent {
 
   render() {
 
@@ -158,7 +159,7 @@ export default class GlobalFooter extends PureComponent {
 
 }
 
-class GlobalFooterColumn extends PureComponent {
+class GlobalFooterColumn extends React.PureComponent {
 
   static propTypes = {
     title: PropTypes.string,

app/javascript/gabsocial/components/group_collection_item.js

@@ -1,6 +1,6 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
 import { defineMessages, injectIntl } from 'react-intl'
 import classNames from 'classnames/bind'
@@ -52,11 +52,11 @@ class GroupCollectionItem extends ImmutablePureComponent {
 
     if (isHidden) {
       return (
-        <Fragment>
+        <React.Fragment>
           {group.get('title')}
           {isMember && intl.formatMessage(messages.member)}
           {isAdmin && intl.formatMessage(messages.admin)}
-        </Fragment>
+        </React.Fragment>
       )
     }
 

app/javascript/gabsocial/components/group_header.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'

app/javascript/gabsocial/components/group_list_item.js

@@ -1,6 +1,6 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
 import { defineMessages, injectIntl } from 'react-intl'
 import { joinGroup, leaveGroup } from '../actions/groups'
@@ -83,9 +83,9 @@ class GroupListItem extends ImmutablePureComponent {
     
     if (isHidden) {
       return (
-        <Fragment>
+        <React.Fragment>
           {group.get('title')}
-        </Fragment>
+        </React.Fragment>
       )
     }
     

app/javascript/gabsocial/components/group_sort_block.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import { openPopover } from '../actions/popover'
 import {
@@ -53,7 +54,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default
 @injectIntl
 @connect(mapStateToProps, mapDispatchToProps)
-class GroupSortBlock extends PureComponent {
+class GroupSortBlock extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,

app/javascript/gabsocial/components/hashtag_item.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'

app/javascript/gabsocial/components/heading.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import classNames from 'classnames/bind'
 
 // Bind CSS Modules global variable `_s` to classNames module
@@ -27,7 +28,7 @@ const ARIA_LEVELS = {
  * @param {bool} [props.isCentered] - if text is centered within the element
  * @param {string} [props.size='h1'] - the size of the heading
  */
-export default class Heading extends PureComponent {
+export default class Heading extends React.PureComponent {
 
   static propTypes = {
     children: PropTypes.any,

app/javascript/gabsocial/components/icon.js

@@ -1,6 +1,7 @@
+import React from 'react'
 import { CX } from '../constants'
 
-export default class Icon extends PureComponent {
+export default class Icon extends React.PureComponent {
 
   static propTypes = {
     className: PropTypes.string,

app/javascript/gabsocial/components/image.js

@@ -1,8 +1,9 @@
+import React from 'react'
 import classNames from 'classnames/bind'
 
 const cx = classNames.bind(_s)
 
-export default class Image extends PureComponent {
+export default class Image extends React.PureComponent {
 
   static propTypes = {
     alt: PropTypes.string.isRequired,

app/javascript/gabsocial/components/image_loader.js

@@ -1,8 +1,9 @@
+import React from 'react'
 import { LoadingBar } from 'react-redux-loading-bar'
 import { CX  } from '../constants'
 import ZoomableImage from './zoomable_image'
 
-export default class ImageLoader extends PureComponent {
+export default class ImageLoader extends React.PureComponent {
 
   static propTypes = {
     alt: PropTypes.string,

app/javascript/gabsocial/components/input.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import classNames from 'classnames/bind'
 import Button from './button'
 import Icon from './icon'
@@ -6,7 +6,7 @@ import Text from './text'
 
 const cx = classNames.bind(_s)
 
-export default class Input extends PureComponent {
+export default class Input extends React.PureComponent {
 
   static propTypes = {
     placeholder: PropTypes.string,
@@ -80,7 +80,7 @@ export default class Input extends PureComponent {
     })
 
     return (
-      <Fragment>
+      <React.Fragment>
         {
           !!title && !hideLabel &&
           <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
@@ -128,7 +128,7 @@ export default class Input extends PureComponent {
             />
           }
         </div>
-      </Fragment>
+      </React.Fragment>
     )
   }
 }

app/javascript/gabsocial/components/intersection_observer_article.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { is } from 'immutable'
 import { setHeight } from '../actions/height_cache'
 import scheduleIdleTask from '../utils/schedule_idle_task'

app/javascript/gabsocial/components/link_footer.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   FormattedMessage,
   defineMessages,
@@ -36,7 +37,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default
 @connect(null, mapDispatchToProps)
 @injectIntl
-class LinkFooter extends PureComponent {
+class LinkFooter extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,

app/javascript/gabsocial/components/list.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import Block from './block'

app/javascript/gabsocial/components/list_item.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import classNames from 'classnames/bind'
 import Button from './button'
 import Icon from './icon'
@@ -7,7 +7,7 @@ import Text from './text'
 
 const cx = classNames.bind(_s)
 
-export default class ListItem extends PureComponent {
+export default class ListItem extends React.PureComponent {
 
   static propTypes = {
     icon: PropTypes.string,
@@ -59,9 +59,9 @@ export default class ListItem extends PureComponent {
 
     if (isHidden) {
       return (
-        <Fragment>
+        <React.Fragment>
           {title}
-        </Fragment>
+        </React.Fragment>
       )
     }
 

app/javascript/gabsocial/components/load_more.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { injectIntl, defineMessages } from 'react-intl'
 import Button from './button'
 import Text from './text'
@@ -8,7 +9,7 @@ const messages = defineMessages({
 
 export default
 @injectIntl
-class LoadMore extends PureComponent {
+class LoadMore extends React.PureComponent {
 
   static propTypes = {
     onClick: PropTypes.func,

app/javascript/gabsocial/components/loading_bar.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import LoadingBar from 'react-redux-loading-bar'
 
 const mapStateToProps = (state, ownProps) => ({

app/javascript/gabsocial/components/logged_out_navigation_bar.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Button from './button'
 import NavigationBarButton from './navigation_bar_button'
@@ -6,7 +7,7 @@ import Text from './text'
 import ResponsiveComponent from '../features/ui/util/responsive_component'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
 
-export default class LoggedOutNavigationBar extends PureComponent {
+export default class LoggedOutNavigationBar extends React.PureComponent {
 
   static propTypes = {
     isProfile: PropTypes.bool,

app/javascript/gabsocial/components/logged_out_sidebar.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { injectIntl, defineMessages } from 'react-intl'
 import { me } from '../initial_state'
 import SidebarSectionTitle from './sidebar_section_title'
@@ -12,7 +13,7 @@ const messages = defineMessages({
 
 export default
 @injectIntl
-class Sidebar extends PureComponent {
+class Sidebar extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,

app/javascript/gabsocial/components/media_gallery.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { is } from 'immutable';
@@ -238,7 +239,7 @@ class Item extends ImmutablePureComponent {
 
 export default
 @injectIntl
-class MediaGallery extends PureComponent {
+class MediaGallery extends React.PureComponent {
 
   static propTypes = {
     sensitive: PropTypes.bool,

app/javascript/gabsocial/components/media_item.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { NavLink } from 'react-router-dom'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { injectIntl, defineMessages } from 'react-intl'
 import { makeGetAccount } from '../../selectors'
 import { blockAccount } from '../../actions/accounts'
@@ -26,7 +27,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default
 @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
-class BlockAccountModal extends PureComponent {
+class BlockAccountModal extends React.PureComponent {
 
   static propTypes = {
     account: PropTypes.object.isRequired,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ConfirmationModal from './confirmation_modal'
 
@@ -9,7 +10,7 @@ const messages = defineMessages({
 
 export default
 @injectIntl
-class BundleErrorModal extends PureComponent {
+class BundleErrorModal extends React.PureComponent {
 
   static propTypes = {
     onRetry: PropTypes.func.isRequired,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { openModal } from '../../actions/modal'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { injectIntl, FormattedMessage } from 'react-intl'
 import Block from '../block'
 import Button from '../button'
@@ -6,7 +7,7 @@ import Text from '../text'
 
 export default
 @injectIntl
-class ConfirmationModal extends PureComponent {
+class ConfirmationModal extends React.PureComponent {
 
   static propTypes = {
     title: PropTypes.any.isRequired,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { injectIntl, defineMessages } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
@@ -198,7 +199,7 @@ class DisplayOptionsModal extends ImmutablePureComponent {
 
 }
 
-class ThemeBlock extends PureComponent {
+class ThemeBlock extends React.PureComponent {
 
   static propTypes = {
     checked: PropTypes.bool,

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
@@ -183,7 +183,7 @@ class EditProfileModal extends ImmutablePureComponent {
               <div className={[_s.default, _s.py5, _s.px15, _s.mt5, _s.mb15, _s.width100PC].join(' ')}>
                 {
                   !isVerified &&
-                  <Fragment>
+                  <React.Fragment>
                     <Input
                       id='display-name'
                       title='Display name'
@@ -192,7 +192,7 @@ class EditProfileModal extends ImmutablePureComponent {
                       onBlur={this.handleDisplayNameBlur}
                     />
                     <Divider isInvisible />
-                  </Fragment>
+                  </React.Fragment>
                 }
 
                 <Textarea

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'
 import api from '../../api'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import {
   fetchGifCategories,
@@ -64,7 +65,7 @@ const mapDispatchToProps = (dispatch, { onClose }) => ({
 export default
 @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
-class GifPickerModal extends PureComponent {
+class GifPickerModal extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
@@ -165,7 +166,7 @@ class GifPickerModal extends PureComponent {
   }
 }
 
-class GifResultsCollectionColumn extends PureComponent {
+class GifResultsCollectionColumn extends React.PureComponent {
 
   static propTypes = {
     results: PropTypes.array.isRequired,
@@ -201,7 +202,7 @@ class GifResultsCollectionColumn extends PureComponent {
 
 }
 
-class GifResultsCollection extends PureComponent {
+class GifResultsCollection extends React.PureComponent {
 
   static propTypes = {
     results: PropTypes.array.isRequired,
@@ -234,7 +235,7 @@ class GifResultsCollection extends PureComponent {
   }
 }
 
-class GifCategoriesCollection extends PureComponent {
+class GifCategoriesCollection extends React.PureComponent {
   static propTypes = {
     categories: PropTypes.array.isRequired,
     handleSelectCategory: PropTypes.func.isRequired,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ModalLayout from './modal_layout'
 import GroupCreate from '../../features/group_create'
@@ -9,7 +10,7 @@ const messages = defineMessages({
 
 export default
 @injectIntl
-class GroupCreateModal extends PureComponent {
+class GroupCreateModal extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { injectIntl, defineMessages } from 'react-intl'
 import { makeGetAccount } from '../../selectors'
 import { blockAccount } from '../../actions/accounts'
@@ -18,7 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default
 @connect(null, mapDispatchToProps)
 @injectIntl
-class GroupDeleteModal extends PureComponent {
+class GroupDeleteModal extends React.PureComponent {
 
   static propTypes = {
     group: PropTypes.object.isRequired,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Button from '../button'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ModalLayout from './modal_layout'
@@ -126,7 +127,7 @@ class HotkeysModal extends ImmutablePureComponent {
 
 }
 
-class HotKeysModalRow extends PureComponent {
+class HotKeysModalRow extends React.PureComponent {
   static propTypes = {
     hotkey: PropTypes.string.isRequired,
     action: PropTypes.string.isRequired,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ModalLayout from './modal_layout'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ModalLayout from './modal_layout'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,7 +1,8 @@
+import React from 'react'
 import Block from '../block'
 import ColumnIndicator from '../column_indicator'
 
-export default class LoadingModal extends PureComponent {
+export default class LoadingModal extends React.PureComponent {
 
   render() {
     return (

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ReactSwipeableViews from 'react-swipeable-views'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'
 import { getWindowDimension } from '../../utils/is_mobile'
 import { openModal } from '../../actions/modal'
@@ -33,7 +33,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default
 @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
-class ModalBase extends PureComponent {
+class ModalBase extends React.PureComponent {
 
   static propTypes = {
     children: PropTypes.node,
@@ -167,7 +167,7 @@ class ModalBase extends PureComponent {
       <div ref={this.setRef} className={containerClasses}>
         {
           !!visible &&
-          <Fragment>
+          <React.Fragment>
             <div
               role='presentation'
               className={[_s.default, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
@@ -180,7 +180,7 @@ class ModalBase extends PureComponent {
             >
               {children}
             </div>
-          </Fragment>
+          </React.Fragment>
         }
       </div>
     )

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import classNames from 'classnames/bind'
 import Button from '../button'
@@ -12,7 +13,7 @@ const messages = defineMessages({
 
 export default
 @injectIntl
-class ModalLayout extends PureComponent {
+class ModalLayout extends React.PureComponent {
 
   static propTypes = {
     title: PropTypes.string,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { closeModal } from '../../actions/modal'
 import { cancelReplyCompose } from '../../actions/compose'
 import Bundle from '../../features/ui/util/bundle'
@@ -130,7 +131,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export default
 @connect(mapStateToProps, mapDispatchToProps)
-class ModalRoot extends PureComponent {
+class ModalRoot extends React.PureComponent {
 
   static propTypes = {
     type: PropTypes.string,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { injectIntl, defineMessages } from 'react-intl'
 import { makeGetAccount } from '../../selectors'
 import { muteAccount } from '../../actions/accounts'
@@ -26,7 +27,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default
 @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
-class MuteModal extends PureComponent {
+class MuteModal extends React.PureComponent {
 
   static propTypes = {
     account: PropTypes.object.isRequired,

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import {

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import { OrderedSet } from 'immutable'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ModalLayout from './modal_layout'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { FormattedMessage } from 'react-intl'

app/javascript/gabsocial/components/moved_note.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { FormattedMessage } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'

app/javascript/gabsocial/components/navigation_bar.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { openSidebar } from '../actions/sidebar'
@@ -233,7 +234,7 @@ class NavigationBar extends ImmutablePureComponent {
 
 }
 
-class NavigationBarButtonDivider extends PureComponent {
+class NavigationBarButtonDivider extends React.PureComponent {
 
   render() {
     return (

app/javascript/gabsocial/components/navigation_bar_button.js

@@ -1,9 +1,10 @@
+import React from 'react'
 import { CX } from '../constants'
 import Button from './button'
 import Icon from './icon'
 import Text from './text'
 
-export default class NavigationBarButton extends PureComponent {
+export default class NavigationBarButton extends React.PureComponent {
 
   static propTypes = {
     title: PropTypes.string,

app/javascript/gabsocial/components/notification.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import { NavLink } from 'react-router-dom'
 import { injectIntl, defineMessages } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
@@ -103,14 +103,14 @@ class Notification extends ImmutablePureComponent {
 
     if (isHidden) {
       return (
-        <Fragment>
+        <React.Fragment>
           {
             accounts && accounts.slice(0, 1).map((account, i) => (
               <DisplayName key={i} account={account} noUsername />
             ))
           }
           {message}
-        </Fragment>
+        </React.Fragment>
       )
     }
 
@@ -164,12 +164,12 @@ class Notification extends ImmutablePureComponent {
                   </Text>
                   {
                     !!createdAt &&
-                    <Fragment>
+                    <React.Fragment>
                       <DotTextSeperator />
                       <Text size='small' color='tertiary' className={_s.ml5}>
                         <RelativeTimestamp timestamp={createdAt} />
                       </Text>
-                    </Fragment>
+                    </React.Fragment>
                   }
                 </div>
               </div>

app/javascript/gabsocial/components/pagination.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { CX } from '../constants'
 
 const COLORS = {
@@ -5,7 +6,7 @@ const COLORS = {
   brand: 'brand',
 }
 
-class Pagination extends PureComponent {
+class Pagination extends React.PureComponent {
 
   handleClickIndex = (i) => {
     this.props.onClick(i)

app/javascript/gabsocial/components/panel/group_info_panel.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
@@ -72,7 +72,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
         <div className={[_s.default].join(' ')}>
           {
             !!group &&
-            <Fragment>
+            <React.Fragment>
               <Heading isCentered>
                 {group.get('title')}
               </Heading>
@@ -103,7 +103,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
                   {intl.formatMessage(messages.members)}
                 </Text>
               </div>
-            </Fragment>
+            </React.Fragment>
           }
         </div>
       )
@@ -113,7 +113,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
       <PanelLayout title={intl.formatMessage(messages.title)}>
         {
           !!group &&
-          <Fragment>
+          <React.Fragment>
 
             <Text className={_s.mb5}>
               {group.get('description')}
@@ -185,7 +185,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
             
             {
               !!tags &&
-              <Fragment>
+              <React.Fragment>
                 <Divider isSmall />
                 <GroupInfoPanelRow title={intl.formatMessage(messages.tags)} icon='shop'>
                   <div className={[_s.default, _s.flexRow, _s.justifyContentEnd, _s.flexWrap, _s.pl5].join(' ')}>
@@ -200,17 +200,17 @@ class GroupInfoPanel extends ImmutablePureComponent {
                     }
                   </div>
                 </GroupInfoPanelRow>
-              </Fragment>
+              </React.Fragment>
             }
 
-          </Fragment>
+          </React.Fragment>
         }
       </PanelLayout>
     )
   }
 }
 
-class GroupInfoPanelRow extends PureComponent {
+class GroupInfoPanelRow extends React.PureComponent {
 
   static propTypes = {
     icon: PropTypes.string,

app/javascript/gabsocial/components/panel/groups_panel.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'

app/javascript/gabsocial/components/panel/list_details_panel.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

app/javascript/gabsocial/components/panel/lists_panel.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'

app/javascript/gabsocial/components/panel/media_gallery_panel.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

app/javascript/gabsocial/components/panel/notification_filter_panel.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'

app/javascript/gabsocial/components/panel/panel_layout.js

@@ -1,9 +1,10 @@
+import React from 'react'
 import Block from '../block'
 import Heading from '../heading'
 import Button from '../button'
 import Text from '../text'
 
-export default class PanelLayout extends PureComponent {
+export default class PanelLayout extends React.PureComponent {
 
   static propTypes = {
     title: PropTypes.string,

app/javascript/gabsocial/components/panel/pro_panel.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import { injectIntl, defineMessages } from 'react-intl'
 import { URL_GAB_PRO } from '../../constants'
 import PanelLayout from './panel_layout';
@@ -12,7 +13,7 @@ const messages = defineMessages({
 
 export default
 @injectIntl
-class ProPanel extends PureComponent {
+class ProPanel extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,