From a0bc0619caf045f912e49bb2ddfe1e7c0a9bc0bc Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sun, 28 May 2023 14:56:24 +0200
Subject: [PATCH] [Glitch] Use JSX syntax for Fragments

Port 5a16bd7bf4591feb852364da9b84407438c9b7d6 to glitch-soc
---
 .../flavours/glitch/components/account.jsx    |  9 ++++----
 .../glitch/components/admin/Counter.jsx       | 14 +++++------
 .../glitch/components/dropdown_menu.jsx       |  6 ++---
 .../flavours/glitch/components/hashtag.jsx    |  4 ++--
 .../glitch/components/icon_button.tsx         |  4 ++--
 .../glitch/components/navigation_portal.jsx   | 14 +++++------
 .../glitch/containers/media_container.jsx     |  6 ++---
 .../features/account/components/header.jsx    |  5 ++--
 .../compose/components/dropdown_menu.jsx      |  6 ++---
 .../features/compose/components/options.jsx   |  5 ++--
 .../features/explore/components/story.jsx     |  6 ++---
 .../glitch/features/explore/results.jsx       |  6 ++---
 .../features/filters/added_to_filter.jsx      | 14 +++++------
 .../glitch/features/filters/select_filter.jsx |  6 ++---
 .../features/follow_recommendations/index.jsx |  5 ++--
 .../glitch/features/getting_started/index.jsx |  5 ++--
 .../components/follow_request.jsx             |  5 ++--
 .../notifications/components/report.jsx       |  5 ++--
 .../glitch/features/notifications/index.jsx   |  8 +------
 .../glitch/features/report/category.jsx       |  6 ++---
 .../glitch/features/report/comment.jsx        | 10 ++++----
 .../flavours/glitch/features/report/rules.jsx |  6 ++---
 .../glitch/features/report/statuses.jsx       |  6 ++---
 .../glitch/features/report/thanks.jsx         | 10 ++++----
 .../status/components/detailed_status.jsx     | 23 +++++++++----------
 .../features/ui/components/actions_modal.jsx  |  5 ++--
 .../ui/components/compare_history_modal.jsx   |  6 ++---
 .../features/ui/components/compose_panel.jsx  | 10 ++++----
 .../ui/components/focal_point_modal.jsx       |  6 ++---
 .../ui/components/navigation_panel.jsx        | 10 ++++----
 .../features/ui/components/zoomable_image.jsx |  6 ++---
 31 files changed, 110 insertions(+), 127 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 12758d2351..c1c7560e92 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { Avatar } from './avatar';
@@ -97,10 +96,10 @@ class Account extends ImmutablePureComponent {
 
     if (hidden) {
       return (
-        <Fragment>
+        <>
           {account.get('display_name')}
           {account.get('username')}
-        </Fragment>
+        </>
       );
     }
 
@@ -128,10 +127,10 @@ class Account extends ImmutablePureComponent {
           hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />;
         }
         buttons = (
-          <Fragment>
+          <>
             <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
             {hidingNotificationsButton}
-          </Fragment>
+          </>
         );
       } else if (defaultAction === 'mute') {
         buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />;
diff --git a/app/javascript/flavours/glitch/components/admin/Counter.jsx b/app/javascript/flavours/glitch/components/admin/Counter.jsx
index 9c0a958096..471eb113f3 100644
--- a/app/javascript/flavours/glitch/components/admin/Counter.jsx
+++ b/app/javascript/flavours/glitch/components/admin/Counter.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import api from 'flavours/glitch/api';
 import { FormattedNumber } from 'react-intl';
@@ -62,25 +62,25 @@ export default class Counter extends PureComponent {
 
     if (loading) {
       content = (
-        <Fragment>
+        <>
           <span className='sparkline__value__total'><Skeleton width={43} /></span>
           <span className='sparkline__value__change'><Skeleton width={43} /></span>
-        </Fragment>
+        </>
       );
     } else {
       const measure = data[0];
       const percentChange = measure.previous_total && percIncrease(measure.previous_total * 1, measure.total * 1);
 
       content = (
-        <Fragment>
+        <>
           <span className='sparkline__value__total'>{measure.human_value || <FormattedNumber value={measure.total} />}</span>
           {measure.previous_total && (<span className={classNames('sparkline__value__change', { positive: percentChange > 0, negative: percentChange < 0 })}>{percentChange > 0 && '+'}<FormattedNumber value={percentChange} style='percent' /></span>)}
-        </Fragment>
+        </>
       );
     }
 
     const inner = (
-      <Fragment>
+      <>
         <div className='sparkline__value'>
           {content}
         </div>
@@ -96,7 +96,7 @@ export default class Counter extends PureComponent {
             </Sparklines>
           )}
         </div>
-      </Fragment>
+      </>
     );
 
     if (href) {
diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
index 45ed2561c0..de303b8dc7 100644
--- a/app/javascript/flavours/glitch/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, cloneElement, Children, Fragment } from 'react';
+import { PureComponent, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconButton } from './icon_button';
@@ -306,7 +306,7 @@ export default class Dropdown extends PureComponent {
     );
 
     return (
-      <Fragment>
+      <>
         <span ref={this.setTargetRef}>
           {button}
         </span>
@@ -329,7 +329,7 @@ export default class Dropdown extends PureComponent {
             </div>
           )}
         </Overlay>
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/components/hashtag.jsx b/app/javascript/flavours/glitch/components/hashtag.jsx
index 0cd7953e49..4a1f43ec0d 100644
--- a/app/javascript/flavours/glitch/components/hashtag.jsx
+++ b/app/javascript/flavours/glitch/components/hashtag.jsx
@@ -1,5 +1,5 @@
 // @ts-check
-import { Component, Fragment } from 'react';
+import { Component } from 'react';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
@@ -70,7 +70,7 @@ const Hashtag = ({ name, href, to, people, uses, history, className, description
   <div className={classNames('trends__item', className)}>
     <div className='trends__item__name'>
       <Permalink href={href} to={to}>
-        {name ? <Fragment>#<span>{name}</span></Fragment> : <Skeleton width={50} />}
+        {name ? <>#<span>{name}</span></> : <Skeleton width={50} />}
       </Permalink>
 
       {description ? (
diff --git a/app/javascript/flavours/glitch/components/icon_button.tsx b/app/javascript/flavours/glitch/components/icon_button.tsx
index 8b7aa104c2..ecc418773c 100644
--- a/app/javascript/flavours/glitch/components/icon_button.tsx
+++ b/app/javascript/flavours/glitch/components/icon_button.tsx
@@ -138,7 +138,7 @@ export class IconButton extends React.PureComponent<Props, States> {
     }
 
     let contents = (
-      <React.Fragment>
+      <>
         <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
         {typeof counter !== 'undefined' && (
           <span className='icon-button__counter'>
@@ -146,7 +146,7 @@ export class IconButton extends React.PureComponent<Props, States> {
           </span>
         )}
         {this.props.label}
-      </React.Fragment>
+      </>
     );
 
     if (href != null) {
diff --git a/app/javascript/flavours/glitch/components/navigation_portal.jsx b/app/javascript/flavours/glitch/components/navigation_portal.jsx
index 8995c7e657..cdd16259aa 100644
--- a/app/javascript/flavours/glitch/components/navigation_portal.jsx
+++ b/app/javascript/flavours/glitch/components/navigation_portal.jsx
@@ -5,14 +5,12 @@ import Trends from 'flavours/glitch/features/getting_started/containers/trends_c
 import AccountNavigation from 'flavours/glitch/features/account/navigation';
 
 const DefaultNavigation = () => (
-  <>
-    {showTrends && (
-      <>
-        <div className='flex-spacer' />
-        <Trends />
-      </>
-    )}
-  </>
+  showTrends ? (
+    <>
+      <div className='flex-spacer' />
+      <Trends />
+    </>
+  ) : null
 );
 
 class NavigationPortal extends PureComponent {
diff --git a/app/javascript/flavours/glitch/containers/media_container.jsx b/app/javascript/flavours/glitch/containers/media_container.jsx
index 4378f93ad1..f0e6ae7762 100644
--- a/app/javascript/flavours/glitch/containers/media_container.jsx
+++ b/app/javascript/flavours/glitch/containers/media_container.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { IntlProvider, addLocaleData } from 'react-intl';
@@ -75,7 +75,7 @@ export default class MediaContainer extends PureComponent {
 
     return (
       <IntlProvider locale={locale} messages={messages}>
-        <Fragment>
+        <>
           {[].map.call(components, (component, i) => {
             const componentName = component.getAttribute('data-component');
             const Component = MEDIA_COMPONENTS[componentName];
@@ -115,7 +115,7 @@ export default class MediaContainer extends PureComponent {
               />
             )}
           </ModalRoot>
-        </Fragment>
+        </>
       </IntlProvider>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx
index a1bdfeb5d4..a7a4e680b2 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/header.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@@ -345,10 +344,10 @@ class Header extends ImmutablePureComponent {
             {!suspended && (
               <div className='account__header__tabs__buttons'>
                 {!hidden && (
-                  <Fragment>
+                  <>
                     {actionBtn}
                     {bellBtn}
-                  </Fragment>
+                  </>
                 )}
 
                 <DropdownMenuContainer disabled={menu.length === 0} items={menu} icon='ellipsis-v' size={24} direction='right' />
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
index 1ff28d29c1..bb3c8b4aef 100644
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
@@ -1,6 +1,6 @@
 //  Package imports.
 import PropTypes from 'prop-types';
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import classNames from 'classnames';
 import { supportsPassiveEvents } from 'detect-passive-events';
 
@@ -152,14 +152,14 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
 
     if (!contents) {
       contents = (
-        <Fragment>
+        <>
           {icon && <Icon className='icon' fixedWidth id={icon} />}
 
           <div className='privacy-dropdown__option__content'>
             <strong>{text}</strong>
             {meta}
           </div>
-        </Fragment>
+        </>
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx
index f6a9b2e2ea..ffbd12264c 100644
--- a/app/javascript/flavours/glitch/features/compose/components/options.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx
@@ -1,6 +1,5 @@
 //  Package imports.
 import PropTypes from 'prop-types';
-import { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl } from 'react-intl';
 import Toggle from 'react-toggle';
@@ -101,14 +100,14 @@ class ToggleOptionImpl extends ImmutablePureComponent {
     const { meta, text, checked } = this.props;
 
     return (
-      <Fragment>
+      <>
         <Toggle checked={checked} onChange={this.handleChange} />
 
         <div className='privacy-dropdown__option__content'>
           <strong>{text}</strong>
           {meta}
         </div>
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/explore/components/story.jsx b/app/javascript/flavours/glitch/features/explore/components/story.jsx
index 3d67340e77..0df5418192 100644
--- a/app/javascript/flavours/glitch/features/explore/components/story.jsx
+++ b/app/javascript/flavours/glitch/features/explore/components/story.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { accountsCountRenderer } from 'flavours/glitch/components/hashtag';
@@ -38,10 +38,10 @@ export default class Story extends PureComponent {
 
         <div className='story__thumbnail'>
           {thumbnail ? (
-            <Fragment>
+            <>
               <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
               <img src={thumbnail} onLoad={this.handleImageLoad} alt='' role='presentation' />
-            </Fragment>
+            </>
           ) : <Skeleton />}
         </div>
       </a>
diff --git a/app/javascript/flavours/glitch/features/explore/results.jsx b/app/javascript/flavours/glitch/features/explore/results.jsx
index c9cd707464..dc85a1cabe 100644
--- a/app/javascript/flavours/glitch/features/explore/results.jsx
+++ b/app/javascript/flavours/glitch/features/explore/results.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
@@ -102,7 +102,7 @@ class Results extends PureComponent {
     }
 
     return (
-      <Fragment>
+      <>
         <div className='account__section-headline'>
           <button onClick={this.handleSelectAll} className={type === 'all' && 'active'}><FormattedMessage id='search_results.all' defaultMessage='All' /></button>
           <button onClick={this.handleSelectAccounts} className={type === 'accounts' && 'active'}><FormattedMessage id='search_results.accounts' defaultMessage='People' /></button>
@@ -117,7 +117,7 @@ class Results extends PureComponent {
         <Helmet>
           <title>{intl.formatMessage(messages.title, { q })}</title>
         </Helmet>
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/filters/added_to_filter.jsx b/app/javascript/flavours/glitch/features/filters/added_to_filter.jsx
index a7deb5a06b..8afbacbcfb 100644
--- a/app/javascript/flavours/glitch/features/filters/added_to_filter.jsx
+++ b/app/javascript/flavours/glitch/features/filters/added_to_filter.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
@@ -30,7 +30,7 @@ class AddedToFilter extends PureComponent {
     let expiredMessage = null;
     if (filter.get('expires_at') && filter.get('expires_at') < new Date()) {
       expiredMessage = (
-        <Fragment>
+        <>
           <h4 className='report-dialog-modal__subtitle'><FormattedMessage id='filter_modal.added.expired_title' defaultMessage='Expired filter!' /></h4>
           <p className='report-dialog-modal__lead'>
             <FormattedMessage
@@ -38,14 +38,14 @@ class AddedToFilter extends PureComponent {
               defaultMessage='This filter category has expired, you will need to change the expiration date for it to apply.'
             />
           </p>
-        </Fragment>
+        </>
       );
     }
 
     let contextMismatchMessage = null;
     if (contextType && !filter.get('context').includes(toServerSideType(contextType))) {
       contextMismatchMessage = (
-        <Fragment>
+        <>
           <h4 className='report-dialog-modal__subtitle'><FormattedMessage id='filter_modal.added.context_mismatch_title' defaultMessage='Context mismatch!' /></h4>
           <p className='report-dialog-modal__lead'>
             <FormattedMessage
@@ -53,7 +53,7 @@ class AddedToFilter extends PureComponent {
               defaultMessage='This filter category does not apply to the context in which you have accessed this post. If you want the post to be filtered in this context too, you will have to edit the filter.'
             />
           </p>
-        </Fragment>
+        </>
       );
     }
 
@@ -67,7 +67,7 @@ class AddedToFilter extends PureComponent {
     );
 
     return (
-      <Fragment>
+      <>
         <h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.added.title' defaultMessage='Filter added!' /></h3>
         <p className='report-dialog-modal__lead'>
           <FormattedMessage
@@ -94,7 +94,7 @@ class AddedToFilter extends PureComponent {
         <div className='report-dialog-modal__actions'>
           <Button onClick={this.handleCloseClick}><FormattedMessage id='report.close' defaultMessage='Done' /></Button>
         </div>
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/filters/select_filter.jsx b/app/javascript/flavours/glitch/features/filters/select_filter.jsx
index 23d9d1582a..5881252c9b 100644
--- a/app/javascript/flavours/glitch/features/filters/select_filter.jsx
+++ b/app/javascript/flavours/glitch/features/filters/select_filter.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@@ -169,7 +169,7 @@ class SelectFilter extends PureComponent {
     const results = this.search();
 
     return (
-      <Fragment>
+      <>
         <h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.select_filter.title' defaultMessage='Filter this post' /></h3>
         <p className='report-dialog-modal__lead'><FormattedMessage id='filter_modal.select_filter.subtitle' defaultMessage='Use an existing category or create a new one' /></p>
 
@@ -183,7 +183,7 @@ class SelectFilter extends PureComponent {
           {isSearching && this.renderCreateNew(searchValue) }
         </div>
 
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/follow_recommendations/index.jsx b/app/javascript/flavours/glitch/features/follow_recommendations/index.jsx
index fae99a5991..7eea6ad192 100644
--- a/app/javascript/flavours/glitch/features/follow_recommendations/index.jsx
+++ b/app/javascript/flavours/glitch/features/follow_recommendations/index.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -86,7 +85,7 @@ class FollowRecommendations extends ImmutablePureComponent {
           </div>
 
           {!isLoading && (
-            <Fragment>
+            <>
               <div className='column-list'>
                 {suggestions.size > 0 ? suggestions.map(suggestion => (
                   <Account key={suggestion.get('account')} id={suggestion.get('account')} />
@@ -101,7 +100,7 @@ class FollowRecommendations extends ImmutablePureComponent {
                 <img src={imageGreeting} alt='' className='column-actions__background' />
                 <Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button>
               </div>
-            </Fragment>
+            </>
           )}
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/getting_started/index.jsx b/app/javascript/flavours/glitch/features/getting_started/index.jsx
index 9537180d60..0f84682a9f 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.jsx
+++ b/app/javascript/flavours/glitch/features/getting_started/index.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import Column from 'flavours/glitch/features/ui/components/column';
 import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
 import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
@@ -173,13 +172,13 @@ class GettingStarted extends ImmutablePureComponent {
             {multiColumn && <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />}
             {navItems}
             {signedIn && (
-              <Fragment>
+              <>
                 <ColumnSubheading text={intl.formatMessage(messages.lists_subheading)} />
                 {listItems}
                 <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
                 { preferencesLink !== undefined && <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href={preferencesLink} /> }
                 <ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={openSettings} />
-              </Fragment>
+              </>
             )}
           </div>
 
diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
index ba19258779..de975843fd 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { Avatar } from 'flavours/glitch/components/avatar';
@@ -74,10 +73,10 @@ class FollowRequest extends ImmutablePureComponent {
 
     if (hidden) {
       return (
-        <Fragment>
+        <>
           {account.get('display_name')}
           {account.get('username')}
-        </Fragment>
+        </>
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/notifications/components/report.jsx b/app/javascript/flavours/glitch/features/notifications/components/report.jsx
index ef58891077..12f18af23a 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/report.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/report.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
@@ -31,9 +30,9 @@ class Report extends ImmutablePureComponent {
 
     if (hidden) {
       return (
-        <Fragment>
+        <>
           {report.get('id')}
-        </Fragment>
+        </>
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/notifications/index.jsx b/app/javascript/flavours/glitch/features/notifications/index.jsx
index 6a87aff86f..be1df15dfb 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/index.jsx
@@ -323,12 +323,6 @@ class Notifications extends PureComponent {
       </div>
     );
 
-    const extraButton = (
-      <>
-        {extraButtons}
-      </>
-    );
-
     return (
       <Column
         bindToDocument={!multiColumn}
@@ -347,7 +341,7 @@ class Notifications extends PureComponent {
           pinned={pinned}
           multiColumn={multiColumn}
           localSettings={this.props.localSettings}
-          extraButton={extraButton}
+          extraButton={extraButtons}
           appendContent={notifCleaningDrawer}
         >
           <ColumnSettingsContainer />
diff --git a/app/javascript/flavours/glitch/features/report/category.jsx b/app/javascript/flavours/glitch/features/report/category.jsx
index 3f88631866..cd97d5747a 100644
--- a/app/javascript/flavours/glitch/features/report/category.jsx
+++ b/app/javascript/flavours/glitch/features/report/category.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
@@ -72,7 +72,7 @@ class Category extends PureComponent {
     ];
 
     return (
-      <Fragment>
+      <>
         <h3 className='report-dialog-modal__title'><FormattedMessage id='report.category.title' defaultMessage="Tell us what's going on with this {type}" values={{ type: intl.formatMessage(messages[startedFrom]) }} /></h3>
         <p className='report-dialog-modal__lead'><FormattedMessage id='report.category.subtitle' defaultMessage='Choose the best match' /></p>
 
@@ -95,7 +95,7 @@ class Category extends PureComponent {
         <div className='report-dialog-modal__actions'>
           <Button onClick={this.handleNextClick} disabled={category === null}><FormattedMessage id='report.next' defaultMessage='Next' /></Button>
         </div>
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/report/comment.jsx b/app/javascript/flavours/glitch/features/report/comment.jsx
index 507ecdd6e7..d8677b837a 100644
--- a/app/javascript/flavours/glitch/features/report/comment.jsx
+++ b/app/javascript/flavours/glitch/features/report/comment.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import Button from 'flavours/glitch/components/button';
@@ -47,7 +47,7 @@ class Comment extends PureComponent {
     const { comment, isRemote, forward, domain, isSubmitting, intl } = this.props;
 
     return (
-      <Fragment>
+      <>
         <h3 className='report-dialog-modal__title'><FormattedMessage id='report.comment.title' defaultMessage='Is there anything else you think we should know?' /></h3>
 
         <textarea
@@ -60,14 +60,14 @@ class Comment extends PureComponent {
         />
 
         {isRemote && (
-          <Fragment>
+          <>
             <p className='report-dialog-modal__lead'><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
 
             <label className='report-dialog-modal__toggle'>
               <Toggle checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
               <FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} />
             </label>
-          </Fragment>
+          </>
         )}
 
         <div className='flex-spacer' />
@@ -75,7 +75,7 @@ class Comment extends PureComponent {
         <div className='report-dialog-modal__actions'>
           <Button onClick={this.handleClick} disabled={isSubmitting}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button>
         </div>
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/report/rules.jsx b/app/javascript/flavours/glitch/features/report/rules.jsx
index c74e5f485e..8c351b8bda 100644
--- a/app/javascript/flavours/glitch/features/report/rules.jsx
+++ b/app/javascript/flavours/glitch/features/report/rules.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
@@ -33,7 +33,7 @@ class Rules extends PureComponent {
     const { rules, selectedRuleIds } = this.props;
 
     return (
-      <Fragment>
+      <>
         <h3 className='report-dialog-modal__title'><FormattedMessage id='report.rules.title' defaultMessage='Which rules are being violated?' /></h3>
         <p className='report-dialog-modal__lead'><FormattedMessage id='report.rules.subtitle' defaultMessage='Select all that apply' /></p>
 
@@ -56,7 +56,7 @@ class Rules extends PureComponent {
         <div className='report-dialog-modal__actions'>
           <Button onClick={this.handleNextClick} disabled={selectedRuleIds.size < 1}><FormattedMessage id='report.next' defaultMessage='Next' /></Button>
         </div>
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/report/statuses.jsx b/app/javascript/flavours/glitch/features/report/statuses.jsx
index 9e191bd67a..8b7116aee4 100644
--- a/app/javascript/flavours/glitch/features/report/statuses.jsx
+++ b/app/javascript/flavours/glitch/features/report/statuses.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
@@ -33,7 +33,7 @@ class Statuses extends PureComponent {
     const { availableStatusIds, selectedStatusIds, onToggle, isLoading } = this.props;
 
     return (
-      <Fragment>
+      <>
         <h3 className='report-dialog-modal__title'><FormattedMessage id='report.statuses.title' defaultMessage='Are there any posts that back up this report?' /></h3>
         <p className='report-dialog-modal__lead'><FormattedMessage id='report.statuses.subtitle' defaultMessage='Select all that apply' /></p>
 
@@ -53,7 +53,7 @@ class Statuses extends PureComponent {
         <div className='report-dialog-modal__actions'>
           <Button onClick={this.handleNextClick}><FormattedMessage id='report.next' defaultMessage='Next' /></Button>
         </div>
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/report/thanks.jsx b/app/javascript/flavours/glitch/features/report/thanks.jsx
index c742d99930..57520b3457 100644
--- a/app/javascript/flavours/glitch/features/report/thanks.jsx
+++ b/app/javascript/flavours/glitch/features/report/thanks.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
@@ -48,17 +48,17 @@ class Thanks extends PureComponent {
     const { account, submitted } = this.props;
 
     return (
-      <Fragment>
+      <>
         <h3 className='report-dialog-modal__title'>{submitted ? <FormattedMessage id='report.thanks.title_actionable' defaultMessage="Thanks for reporting, we'll look into this." /> : <FormattedMessage id='report.thanks.title' defaultMessage="Don't want to see this?" />}</h3>
         <p className='report-dialog-modal__lead'>{submitted ? <FormattedMessage id='report.thanks.take_action_actionable' defaultMessage='While we review this, you can take action against @{name}:' values={{ name: account.get('username') }} /> : <FormattedMessage id='report.thanks.take_action' defaultMessage='Here are your options for controlling what you see on Mastodon:' />}</p>
 
         {account.getIn(['relationship', 'following']) && (
-          <Fragment>
+          <>
             <h4 className='report-dialog-modal__subtitle'><FormattedMessage id='report.unfollow' defaultMessage='Unfollow @{name}' values={{ name: account.get('username') }} /></h4>
             <p className='report-dialog-modal__lead'><FormattedMessage id='report.unfollow_explanation' defaultMessage='You are following this account. To not see their posts in your home feed anymore, unfollow them.' /></p>
             <Button secondary onClick={this.handleUnfollowClick}><FormattedMessage id='account.unfollow' defaultMessage='Unfollow' /></Button>
             <hr />
-          </Fragment>
+          </>
         )}
 
         <h4 className='report-dialog-modal__subtitle'><FormattedMessage id='account.mute' defaultMessage='Mute @{name}' values={{ name: account.get('username') }} /></h4>
@@ -76,7 +76,7 @@ class Thanks extends PureComponent {
         <div className='report-dialog-modal__actions'>
           <Button onClick={this.handleCloseClick}><FormattedMessage id='report.close' defaultMessage='Done' /></Button>
         </div>
-      </Fragment>
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
index ef48ca0ad2..8356fb40f6 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Avatar } from 'flavours/glitch/components/avatar';
@@ -227,10 +226,10 @@ class DetailedStatus extends ImmutablePureComponent {
     }
 
     if (status.get('application')) {
-      applicationLink = <Fragment> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></Fragment>;
+      applicationLink = <> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></>;
     }
 
-    const visibilityLink = <Fragment> · <VisibilityIcon visibility={status.get('visibility')} /></Fragment>;
+    const visibilityLink = <> · <VisibilityIcon visibility={status.get('visibility')} /></>;
 
     if (status.get('visibility') === 'direct') {
       reblogIcon = 'envelope';
@@ -242,27 +241,27 @@ class DetailedStatus extends ImmutablePureComponent {
       reblogLink = null;
     } else if (this.context.router) {
       reblogLink = (
-        <Fragment>
-          <Fragment> · </Fragment>
+        <>
+           · 
           <Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`} className='detailed-status__link'>
             <Icon id={reblogIcon} />
             <span className='detailed-status__reblogs'>
               <AnimatedNumber value={status.get('reblogs_count')} />
             </span>
           </Link>
-        </Fragment>
+        </>
       );
     } else {
       reblogLink = (
-        <Fragment>
-          <Fragment> · </Fragment>
+        <>
+           · 
           <a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
             <Icon id={reblogIcon} />
             <span className='detailed-status__reblogs'>
               <AnimatedNumber value={status.get('reblogs_count')} />
             </span>
           </a>
-        </Fragment>
+        </>
       );
     }
 
@@ -288,10 +287,10 @@ class DetailedStatus extends ImmutablePureComponent {
 
     if (status.get('edited_at')) {
       edited = (
-        <Fragment>
-          <Fragment> · </Fragment>
+        <>
+           · 
           <EditedTimestamp statusId={status.get('id')} timestamp={status.get('edited_at')} />
-        </Fragment>
+        </>
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx
index 67b47ae550..01bf210fb0 100644
--- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -35,13 +34,13 @@ export default class ActionsModal extends ImmutablePureComponent {
 
     if (!contents) {
       contents = (
-        <Fragment>
+        <>
           {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex={-1} inverted />}
           <div>
             <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
             <div>{meta}</div>
           </div>
-        </Fragment>
+        </>
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
index 44ee5a8958..b6b33ee8d8 100644
--- a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
@@ -65,10 +65,10 @@ class CompareHistoryModal extends PureComponent {
         <div className='compare-history-modal__container'>
           <div className='status__content'>
             {currentVersion.get('spoiler_text').length > 0 && (
-              <Fragment>
+              <>
                 <div className='translate' dangerouslySetInnerHTML={spoilerContent} lang={language} />
                 <hr />
-              </Fragment>
+              </>
             )}
 
             <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} lang={language} />
diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
index e43b3f62cb..a3301cd383 100644
--- a/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import SearchContainer from 'flavours/glitch/features/compose/containers/search_container';
@@ -36,17 +36,17 @@ class ComposePanel extends PureComponent {
         <SearchContainer openInRoute />
 
         {!signedIn && (
-          <Fragment>
+          <>
             <ServerBanner />
             <div className='flex-spacer' />
-          </Fragment>
+          </>
         )}
 
         {signedIn && (
-          <Fragment>
+          <>
             <NavigationContainer />
             <ComposeFormContainer singleColumn />
-          </Fragment>
+          </>
         )}
 
         <LinkFooter />
diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
index 032974441d..f368327bfb 100644
--- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -315,7 +315,7 @@ class FocalPointModal extends ImmutablePureComponent {
             {focals && <p><FormattedMessage id='upload_modal.hint' defaultMessage='Click or drag the circle on the preview to choose the focal point which will always be in view on all thumbnails.' /></p>}
 
             {thumbnailable && (
-              <Fragment>
+              <>
                 <label className='setting-text-label' htmlFor='upload-modal__thumbnail'><FormattedMessage id='upload_form.thumbnail' defaultMessage='Change thumbnail' /></label>
 
                 <Button disabled={isUploadingThumbnail || !media.get('unattached')} text={intl.formatMessage(messages.chooseImage)} onClick={this.handleFileInputClick} />
@@ -335,7 +335,7 @@ class FocalPointModal extends ImmutablePureComponent {
                 </label>
 
                 <hr className='setting-divider' />
-              </Fragment>
+              </>
             )}
 
             <label className='setting-text-label' htmlFor='upload-modal__description'>
diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
index 1ed85fa8e2..b07dd13eff 100644
--- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
@@ -1,4 +1,4 @@
-import { Component, Fragment } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { timelinePreview, showTrends } from 'flavours/glitch/initial_state';
@@ -47,11 +47,11 @@ class NavigationPanel extends Component {
     return (
       <div className='navigation-panel'>
         {signedIn && (
-          <Fragment>
+          <>
             <ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />
             <ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
             <FollowRequestsColumnLink />
-          </Fragment>
+          </>
         )}
 
         {showTrends ? (
@@ -75,7 +75,7 @@ class NavigationPanel extends Component {
         )}
 
         {signedIn && (
-          <Fragment>
+          <>
             <ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} />
             <ColumnLink transparent to='/bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} />
             <ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} />
@@ -87,7 +87,7 @@ class NavigationPanel extends Component {
 
             {!!preferencesLink && <ColumnLink transparent href={preferencesLink} icon='cog' text={intl.formatMessage(messages.preferences)} />}
             <ColumnLink transparent onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} />
-          </Fragment>
+          </>
         )}
 
         <div className='navigation-panel__legal'>
diff --git a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
index b6ccac56b4..ab4842f3d8 100644
--- a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -411,7 +411,7 @@ class ZoomableImage extends PureComponent {
     const zoomButtonTitle = this.state.zoomState === 'compress' ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand);
 
     return (
-      <Fragment>
+      <>
         <IconButton
           className={`media-modal__zoom-button ${zoomButtonShouldHide}`}
           title={zoomButtonTitle}
@@ -445,7 +445,7 @@ class ZoomableImage extends PureComponent {
             onMouseDown={this.handleMouseDown}
           />
         </div>
-      </Fragment>
+      </>
     );
   }