refactor: use new React context API (#1948)

Author: visualfanatic

src/components/CategoryList/CategoryList.react.js

@@ -5,12 +5,15 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import PropTypes from 'lib/PropTypes';
-import React     from 'react';
-import styles    from 'components/CategoryList/CategoryList.scss';
-import { Link }  from 'react-router-dom';
+import PropTypes      from 'lib/PropTypes';
+import React          from 'react';
+import styles         from 'components/CategoryList/CategoryList.scss';
+import { Link }       from 'react-router-dom';
+import generatePath   from 'lib/generatePath';
+import { CurrentApp } from 'context/currentApp';
 
 export default class CategoryList extends React.Component {
+  static contextType = CurrentApp;
   constructor() {
     super();
     this.listWrapperRef = React.createRef();
@@ -64,7 +67,8 @@ export default class CategoryList extends React.Component {
           }
           let count = c.count;
           let className = id === this.props.current ? styles.active : '';
-          let link = this.context.generatePath(
+          let link = generatePath(
+            this.context,
             (this.props.linkPrefix || '') + (c.link || id)
           );
           return (
@@ -84,7 +88,3 @@ CategoryList.propTypes = {
   current: PropTypes.string.describe('Id of current category to be highlighted.'),
   linkPrefix: PropTypes.string.describe('Link prefix used to generate link path.'),
 };
-
-CategoryList.contextTypes = {
-  generatePath: PropTypes.func
-};

src/components/Filter/Filter.react.js

@@ -5,12 +5,12 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import * as Filters  from 'lib/Filters';
-import { List, Map } from 'immutable';
-import PropTypes     from 'lib/PropTypes';
-import React         from 'react';
-import stringCompare from 'lib/stringCompare';
-import ParseApp      from 'lib/ParseApp';
+import * as Filters   from 'lib/Filters';
+import { List, Map }  from 'immutable';
+import PropTypes      from 'lib/PropTypes';
+import React          from 'react';
+import stringCompare  from 'lib/stringCompare';
+import { CurrentApp } from 'context/currentApp';
 
 function changeField(schema, filters, index, newField) {
   let newFilter = new Map({
@@ -44,7 +44,8 @@ function deleteRow(filters, index) {
   return filters.delete(index);
 }
 
-let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }, context) => {
+let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }) => {
+  const currentApp = React.useContext(CurrentApp);
   blacklist = blacklist || [];
   let available = Filters.availableFilters(schema, filters);
   return (
@@ -60,7 +61,7 @@ let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }, co
         }
 
         // Get the column preference of the current class.
-        const currentColumnPreference = context.currentApp.columnPreference[className];
+        const currentColumnPreference = currentApp.columnPreference[className];
 
         // Check if the preference exists.
         if (currentColumnPreference) {
@@ -137,7 +138,3 @@ Filter.propTypes = {
     'A function for rendering a row of a filter.'
   )
 };
-
-Filter.contextTypes = {
-  currentApp: PropTypes.instanceOf(ParseApp)
-};

src/components/Popover/Popover.react.js

@@ -5,11 +5,9 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import PropTypes        from 'lib/PropTypes';
 import hasAncestor      from 'lib/hasAncestor';
 import React            from 'react';
 import styles           from 'components/Popover/Popover.scss';
-import ParseApp         from 'lib/ParseApp';
 import { createPortal } from 'react-dom';
 
 // We use this component to proxy the current tree's context
@@ -94,9 +92,3 @@ export default class Popover extends React.Component {
     return createPortal(this.props.children, this._popoverLayer);
   }
 }
-
-Popover.contextTypes = {
-  history: PropTypes.object,
-  router: PropTypes.object,
-  currentApp: PropTypes.instanceOf(ParseApp)
-};

src/components/PushAudienceDialog/PushAudienceDialog.react.js

@@ -17,14 +17,14 @@ import Label                 from 'components/Label/Label.react';
 import Modal                 from 'components/Modal/Modal.react';
 import MultiSelect           from 'components/MultiSelect/MultiSelect.react';
 import MultiSelectOption     from 'components/MultiSelect/MultiSelectOption.react';
-import ParseApp              from 'lib/ParseApp';
 import PropTypes             from 'lib/PropTypes';
 import queryFromFilters      from 'lib/queryFromFilters';
 import React                 from 'react';
 import styles                from 'components/PushAudienceDialog/PushAudienceDialog.scss';
 import TextInput             from 'components/TextInput/TextInput.react';
 import Toggle                from 'components/Toggle/Toggle.react';
 import { List, Map }         from 'immutable';
+import { CurrentApp }        from 'context/currentApp';
 
 const PARSE_SERVER_SUPPORTS_SAVED_AUDIENCES = true;
 const AUDIENCE_SIZE_FETCHING_ENABLED = true;
@@ -44,6 +44,7 @@ let filterFormatter = (filters, schema) => {
 }
 
 export default class PushAudienceDialog extends React.Component {
+  static contextType = CurrentApp;
   constructor() {
     super();
     this.xhrHandle = null;
@@ -113,7 +114,7 @@ export default class PushAudienceDialog extends React.Component {
   }
 
   fetchAudienceSize() {
-    if (!this.context || !this.context.currentApp) { //so we don't break the PIG demo
+    if (!this.context) { //so we don't break the PIG demo
       return;
     }
 
@@ -124,7 +125,7 @@ export default class PushAudienceDialog extends React.Component {
       query = parseQuery.toJSON().where || {};
     }
     query.deviceType = { $in: this.state.platforms };
-    let {xhr, promise} = this.context.currentApp.fetchPushSubscriberCount(PushConstants.NEW_SEGMENT_ID, query);
+    let {xhr, promise} = this.context.fetchPushSubscriberCount(PushConstants.NEW_SEGMENT_ID, query);
     if (this.xhrHandle) { //cancel existing xhr - prevent from stacking
       this.xhrHandle.abort();
     }
@@ -272,10 +273,6 @@ export default class PushAudienceDialog extends React.Component {
   }
 }
 
-PushAudienceDialog.contextTypes = {
-  currentApp: PropTypes.instanceOf(ParseApp)
-};
-
 PushAudienceDialog.propTypes = {
   editMode: PropTypes.bool.describe(
     'Flag if true to be edit mode of dialog.'

src/components/PushAudiencesSelector/PushAudiencesBaseRow.react.js

@@ -5,12 +5,12 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import PropTypes          from 'lib/PropTypes';
-import ParseApp           from 'lib/ParseApp';
 import React              from 'react';
 import { NEW_SEGMENT_ID } from 'dashboard/Push/PushConstants';
+import { CurrentApp }     from 'context/currentApp';
 
 export default class PushAudiencesBaseRow extends React.Component {
+  static contextType = CurrentApp;
   constructor() {
     super();
     this.xhrHandle = null;
@@ -31,12 +31,12 @@ export default class PushAudiencesBaseRow extends React.Component {
   }
 
   fetchPushSubscriberCount(context) {
-    if (!context || !context.currentApp) { //so we don't break the PIG demo
+    if (!context) { //so we don't break the PIG demo
       return;
     }
     let query = this.props.id === NEW_SEGMENT_ID ? this.props.query : null;
     //Added count fetch logic directly to component
-    let {xhr, promise} = context.currentApp.fetchPushSubscriberCount(this.props.id, query);
+    let {xhr, promise} = context.fetchPushSubscriberCount(this.props.id, query);
     this.xhrHandle = xhr;
     promise.then(({ approximate, count }) => {
       this.setState({ approximate, count });
@@ -62,7 +62,3 @@ export default class PushAudiencesBaseRow extends React.Component {
     }
   }
 }
-
-PushAudiencesBaseRow.contextTypes = {
-  currentApp: PropTypes.instanceOf(ParseApp)
-};

src/components/PushPreview/PushPreview.react.js

@@ -11,6 +11,7 @@ import React              from 'react';
 import SegmentSelect      from 'components/SegmentSelect/SegmentSelect.react';
 import styles             from 'components/PushPreview/PushPreview.scss';
 import VisiblePreview     from 'components/PushPreview/VisiblePreview.react';
+import { CurrentApp }     from 'context/currentApp';
 import {
          getDateMethod,
          MONTHS,
@@ -37,6 +38,7 @@ let timeString = (time, isLocal) => {
 }
 
 export default class PushPreview extends React.Component {
+  static contextType = CurrentApp;
   constructor(props) {
     super(props);
 
@@ -134,7 +136,7 @@ export default class PushPreview extends React.Component {
         type={this.state.currentPreview.toLowerCase().replace(/\s/, '')}
         message={previewMessage}
         time={previewTime || new Date()}
-        appName={this.context.currentApp.name}
+        appName={this.context.name}
         fade={isExperiment} />
     );
     if (!isExperiment && pushState.data_type === 'json') {
@@ -177,7 +179,3 @@ export default class PushPreview extends React.Component {
     );
   }
 }
-
-PushPreview.contextTypes = {
-  currentApp: PropTypes.instanceOf(ParseApp)
-};

src/components/Sidebar/Sidebar.react.js

@@ -5,19 +5,18 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import PropTypes   from 'lib/PropTypes';
 import AppsManager    from 'lib/AppsManager';
 import AppsMenu       from 'components/Sidebar/AppsMenu.react';
 import AppName        from 'components/Sidebar/AppName.react';
 import FooterMenu     from 'components/Sidebar/FooterMenu.react';
 import isInsidePopover from 'lib/isInsidePopover';
-import ParseApp       from 'lib/ParseApp';
 import Pin            from 'components/Sidebar/Pin.react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import SidebarHeader  from 'components/Sidebar/SidebarHeader.react';
 import SidebarSection from 'components/Sidebar/SidebarSection.react';
 import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react';
 import styles         from 'components/Sidebar/Sidebar.scss';
+import { CurrentApp } from 'context/currentApp';
 
 const Sidebar = ({
   prefix,
@@ -30,7 +29,8 @@ const Sidebar = ({
   appSelector,
   primaryBackgroundColor,
   secondaryBackgroundColor
-}, { currentApp }) => {
+}) => {
+  const currentApp = useContext(CurrentApp);
   const collapseWidth = 980;
   const [ appsMenuOpen, setAppsMenuOpen ] = useState(false);
   const [ collapsed, setCollapsed ] = useState(false);
@@ -192,8 +192,4 @@ const Sidebar = ({
   );
 }
 
-Sidebar.contextTypes = {
-  currentApp: PropTypes.instanceOf(ParseApp)
-};
-
 export default Sidebar;

src/context/currentApp.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const CurrentApp = React.createContext(null);

src/dashboard/Analytics/Explorer/Explorer.react.js

@@ -85,11 +85,9 @@ class Explorer extends DashboardView {
     this.xhrHandles.forEach(xhr => xhr && xhr.abort());
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
-    if (this.context !== nextContext) {
-      if (this.props.params.displayType !== nextProps.params.displayType) {
-        this.setState({ activeQueries: [], mutated: false });
-      }
+  componentWillReceiveProps(nextProps) {
+    if (this.props.params.displayType !== nextProps.params.displayType) {
+      this.setState({ activeQueries: [], mutated: false });
       nextProps.customQueries.dispatch(ActionTypes.LIST);
       nextProps.customQueries.dispatch(ActionTypes.LIST_RECENT);
     }
@@ -173,7 +171,7 @@ class Explorer extends DashboardView {
           to: this.state.dateRange.end.getTime() / 1000
         };
 
-        let abortableRequest = this.context.currentApp.getAnalyticsTimeSeries(payload);
+        let abortableRequest = this.context.getAnalyticsTimeSeries(payload);
         promise = abortableRequest.promise.then((result) => {
           let activeQueries = this.state.activeQueries;
           activeQueries[i].result = result.map((point) => (

src/dashboard/Analytics/Overview/Overview.react.js

@@ -100,12 +100,12 @@ export default class Overview extends DashboardView {
   }
 
   componentWillMount() {
-    this.fetchOverview(this.context.currentApp);
+    this.fetchOverview(this.context);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
-      this.fetchOverview(nextContext.currentApp);
+      this.fetchOverview(nextContext);
     }
   }