refactor: use new React context API (#1948)

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);
  }
  }
 

src/dashboard/Analytics/Performance/Performance.react.js

@@ -102,7 +102,7 @@ export default class Performance extends DashboardView {
  }
 
  componentWillMount() {
- this.handleRunQuery(this.context.currentApp);
+ this.handleRunQuery(this.context);
  }
 
  componentWillUnmount() {
@@ -111,7 +111,7 @@ export default class Performance extends DashboardView {
 
  componentWillReceiveProps(nextProps, nextContext) {
  if (this.context !== nextContext) {
- this.handleRunQuery(nextContext.currentApp);
+ this.handleRunQuery(nextContext);
  }
  }
 
@@ -187,7 +187,7 @@ export default class Performance extends DashboardView {
  <Button
  primary={true}
  disabled={!this.state.mutated}
- onClick={this.handleRunQuery.bind(this, this.context.currentApp)}
+ onClick={this.handleRunQuery.bind(this, this.context)}
  value='Run query' />
  </div>
  </div>

src/dashboard/Analytics/Retention/Retention.react.js

@@ -53,7 +53,7 @@ export default class Retention extends DashboardView {
  }
 
  componentWillMount() {
- this.fetchRetention(this.context.currentApp);
+ this.fetchRetention(this.context);
  }
 
  componentWillUnmount() {
@@ -62,7 +62,7 @@ export default class Retention extends DashboardView {
 
  componentWillReceiveProps(nextProps, nextContext) {
  if (this.context !== nextContext) {
- this.fetchRetention(nextContext.currentApp);
+ this.fetchRetention(nextContext);
  }
  }
 
@@ -233,7 +233,7 @@ export default class Retention extends DashboardView {
  <Button
  primary={true}
  disabled={!this.state.mutated}
- onClick={this.fetchRetention.bind(this, this.context.currentApp)}
+ onClick={this.fetchRetention.bind(this, this.context)}
  value='Refresh chart' />
  </div>
  </div>

src/dashboard/Analytics/SlowQueries/SlowQueries.react.js

@@ -67,7 +67,7 @@ class SlowQueries extends TableView {
 
  componentWillMount() {
  this.fetchDropdownData(this.props);
- this.fetchSlowQueries(this.context.currentApp);
+ this.fetchSlowQueries(this.context);
  }
 
  componentWillUnmount() {
@@ -77,7 +77,7 @@ class SlowQueries extends TableView {
  componentWillReceiveProps(nextProps, nextContext) {
  if (this.context !== nextContext) {
  this.fetchDropdownData(nextProps);
- this.fetchSlowQueries(nextContext.currentApp);
+ this.fetchSlowQueries(nextContext);
  }
  }
 
@@ -231,7 +231,7 @@ class SlowQueries extends TableView {
  <Button
  primary={true}
  disabled={!this.state.mutated}
- onClick={this.fetchSlowQueries.bind(this, this.context.currentApp)}
+ onClick={this.fetchSlowQueries.bind(this, this.context)}
  value='Run query' />
  )}
  />