From 9ac5aafe1096dce5a071a3bb6fac59beac683c81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Tue, 22 May 2018 16:22:16 +0200
Subject: [PATCH] react: remove custom Fragment

Fragment now works on both React and React Native, so use it.
---
 react/features/app/components/AbstractApp.js  |  6 ++--
 .../base/react/components/Fragment.js         | 30 -------------------
 react/features/base/react/components/index.js |  1 -
 .../base/sounds/components/SoundCollection.js |  9 +-----
 .../testing/components/TestConnectionInfo.js  |  4 +--
 .../toolbox/components/ToolboxItem.web.js     |  8 ++---
 6 files changed, 8 insertions(+), 50 deletions(-)
 delete mode 100644 react/features/base/react/components/Fragment.js

diff --git a/react/features/app/components/AbstractApp.js b/react/features/app/components/AbstractApp.js
index af7991cbb..5b07b41f4 100644
--- a/react/features/app/components/AbstractApp.js
+++ b/react/features/app/components/AbstractApp.js
@@ -1,7 +1,7 @@
 /* global APP */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { compose, createStore } from 'redux';
@@ -9,7 +9,7 @@ import Thunk from 'redux-thunk';
 
 import { i18next } from '../../base/i18n';
 import { localParticipantLeft } from '../../base/participants';
-import { Fragment, RouteRegistry } from '../../base/react';
+import { RouteRegistry } from '../../base/react';
 import {
     MiddlewareRegistry,
     ReducerRegistry,
@@ -131,7 +131,7 @@ export class AbstractApp extends Component {
 
             dispatch(appWillMount(this));
 
-            // We set the initialized state here and not in the contructor to
+            // We set the initialized state here and not in the constructor to
             // make sure that {@code componentWillMount} gets invoked before
             // the app tries to render the actual app content.
             this.setState({
diff --git a/react/features/base/react/components/Fragment.js b/react/features/base/react/components/Fragment.js
deleted file mode 100644
index 660c57da4..000000000
--- a/react/features/base/react/components/Fragment.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// @flow
-
-import { Component } from 'react';
-
-/**
- * {@code Fragment} component's property types.
- *
- * @static
- */
-type Props = {
-    children: React$Node
-};
-
-/**
- * react-redux's {@code Provider} component only accepts a single child, so use
- * a simple wrapper component in order to pass more than 1 child components.
- *
- * TODO Remove once React Native supports Fragment (0.52 probably).
- */
-export default class Fragment extends Component<Props> {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {React$Node}
-     */
-    render() {
-        return this.props.children;
-    }
-}
diff --git a/react/features/base/react/components/index.js b/react/features/base/react/components/index.js
index 68451b1e4..cda61441e 100644
--- a/react/features/base/react/components/index.js
+++ b/react/features/base/react/components/index.js
@@ -1,2 +1 @@
 export * from './_';
-export { default as Fragment } from './Fragment';
diff --git a/react/features/base/sounds/components/SoundCollection.js b/react/features/base/sounds/components/SoundCollection.js
index 228761cb3..36676625d 100644
--- a/react/features/base/sounds/components/SoundCollection.js
+++ b/react/features/base/sounds/components/SoundCollection.js
@@ -5,7 +5,6 @@ import { connect } from 'react-redux';
 
 import { Audio } from '../../media';
 import type { AudioElement } from '../../media';
-import { Fragment } from '../../react';
 
 import { _addAudioElement, _removeAudioElement } from '../actions';
 import type { Sound } from '../reducer';
@@ -68,13 +67,7 @@ class SoundCollection extends Component<Props> {
             key += 1;
         }
 
-        return (
-            <Fragment>
-                {
-                    sounds
-                }
-            </Fragment>
-        );
+        return sounds;
     }
 
     /**
diff --git a/react/features/base/testing/components/TestConnectionInfo.js b/react/features/base/testing/components/TestConnectionInfo.js
index 6d4a61b63..be1d4ec57 100644
--- a/react/features/base/testing/components/TestConnectionInfo.js
+++ b/react/features/base/testing/components/TestConnectionInfo.js
@@ -1,10 +1,8 @@
 // @flow
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 
-
-import { Fragment } from '../../react';
 import { getLocalParticipant } from '../../participants';
 
 // FIXME this imports feature to 'base'
diff --git a/react/features/base/toolbox/components/ToolboxItem.web.js b/react/features/base/toolbox/components/ToolboxItem.web.js
index 25b7c3ab8..1c2596e67 100644
--- a/react/features/base/toolbox/components/ToolboxItem.web.js
+++ b/react/features/base/toolbox/components/ToolboxItem.web.js
@@ -1,7 +1,7 @@
 // @flow
 
 import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import AbstractToolboxItem from './AbstractToolboxItem';
 import type { Props } from './AbstractToolboxItem';
@@ -33,12 +33,10 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
         const elementType = showLabel ? 'li' : 'div';
         // eslint-disable-next-line no-extra-parens
         const children = (
-
-            // $FlowFixMe
-            <React.Fragment>
+            <Fragment>
                 { this._renderIcon() }
                 { showLabel && this.label }
-            </React.Fragment>
+            </Fragment>
         );
 
         return React.createElement(elementType, props, children);