@@ -88,7 +90,8 @@ let AppCard = ({
}
-export default class AppsIndex extends React.Component {
+@withRouter
+class AppsIndex extends React.Component {
constructor() {
super();
this.state = { search: '' };
@@ -99,7 +102,7 @@ export default class AppsIndex extends React.Component {
componentWillMount() {
if (AppsManager.apps().length === 1) {
const [app] = AppsManager.apps();
- history.push(`/apps/${app.slug}/browser`);
+ this.props.navigate(`/apps/${app.slug}/browser`);
return;
}
document.body.addEventListener('keydown', this.focusField);
@@ -169,3 +172,5 @@ export default class AppsIndex extends React.Component {
);
}
}
+
+export default AppsIndex;
diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index ebde1004f4..3a639cdb79 100644
--- a/src/dashboard/Dashboard.js
+++ b/src/dashboard/Dashboard.js
@@ -19,7 +19,6 @@ import Explorer from './Analytics/Explorer/Explorer.react';
import FourOhFour from 'components/FourOhFour/FourOhFour.react';
import GeneralSettings from './Settings/GeneralSettings.react';
import GraphQLConsole from './Data/ApiConsole/GraphQLConsole.react';
-import history from 'dashboard/history';
import HostingSettings from './Settings/HostingSettings.react';
import Icon from 'components/Icon/Icon.react';
import JobEdit from 'dashboard/Data/Jobs/JobEdit.react';
@@ -49,11 +48,7 @@ import { AsyncStatus } from 'lib/Constants';
import baseStyles from 'stylesheets/base.scss';
import { get } from 'lib/AJAX';
import { setBasePath } from 'lib/AJAX';
-import {
- Router,
- Switch,
-} from 'react-router';
-import { Route, Redirect } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import Playground from './Data/Playground/Playground.react';
@@ -202,146 +197,121 @@ export default class Dashboard extends React.Component {
);
- const SettingsRoute = ({ match }) => (
-
-
-
-
-
-
-
-
-
+ const SettingsRoute = (
+
}>
+
} />
+
} />
+
} />
+
} />
+
} />
+
} />
+
)
- const JobsRoute = (props) => (
-
- (
-
-
-
- )} />
- (
-
-
-
- )} />
- (
-
-
-
- )} />
-
-
+ const JobsRoute = (
+
}>
+
} />
+
} />
+
} />
+
} />
+
)
- const AnalyticsRoute = ({ match }) => (
-
-
-
-
-
-
-
-
- );
+ const AnalyticsRoute = (
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ )
- const BrowserRoute = (props) => {
- if (ShowSchemaOverview) {
- return
- }
- return
- }
+ const BrowserRoute = ShowSchemaOverview ? SchemaOverview : Browser;
- const ApiConsoleRoute = (props) => (
-
- (
-
-
-
- )} />
- (
-
-
-
- )} />
- (
-
-
-
- )} />
-
-
+ const ApiConsoleRoute = (
+
}>
+
} />
+
} />
+
} />
+
} />
+
)
- const AppRoute = ({ match }) => (
-
-
-
-
-
-
-
-
-
+ const AppRoute = (
+ }>
+ } />
+
+ } />
+
+ } />
+ } />
+ } />
+
+ } />
+ } />
+ } />
-
+
+ {JobsRoute}
+
- (
-
- )} />
-
+ } />
+ } />
-
-
-
+ } />
+
+ {ApiConsoleRoute}
+
-
-
+ } />
- (
-
- )} />
-
-
- (
-
- )} />
+ } />
+ } />
- {/* Unused routes... */}
-
-
-
-
-
-
+
} />
+
} />
+
} />
+
} />
+
+ {/* Unused routes... */}
+
+ {AnalyticsRoute}
+
+
+
+ {SettingsRoute}
+
+
)
- const Index = () => (
-
-
-
-
-
-
-
+ const Index = (
+
+ } />
+
+ {AppRoute}
+
+
)
+
return (
-
-
-
- Parse Dashboard
-
-
-
-
-
-
-
-
-
-
+
+
+ Parse Dashboard
+
+
+
+ {Index}
+
+ } />
+ } />
+ } />
+ } />
+
+
);
}
}
diff --git a/src/dashboard/Data/ApiConsole/ApiConsole.react.js b/src/dashboard/Data/ApiConsole/ApiConsole.react.js
index 46ab64cef9..513e26c683 100644
--- a/src/dashboard/Data/ApiConsole/ApiConsole.react.js
+++ b/src/dashboard/Data/ApiConsole/ApiConsole.react.js
@@ -8,8 +8,11 @@
import React from 'react';
import CategoryList from 'components/CategoryList/CategoryList.react';
import DashboardView from 'dashboard/DashboardView.react';
+import { Outlet } from 'react-router-dom';
+import { withRouter } from 'lib/withRouter';
-export default class ApiConsole extends DashboardView {
+@withRouter
+class ApiConsole extends DashboardView {
constructor() {
super();
this.section = 'Core';
@@ -17,8 +20,8 @@ export default class ApiConsole extends DashboardView {
}
renderSidebar() {
- const { path } = this.props.match;
- const current = path.substr(path.lastIndexOf('/') + 1, path.length - 1);
+ const { pathname } = this.props.location;
+ const current = pathname.substr(pathname.lastIndexOf('/') + 1, pathname.length - 1);
return (
;
}
}
+
+export default ApiConsole;
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 23702a7419..9cfecb36ba 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -21,7 +21,6 @@ import AttachSelectedRowsDialog from 'dashboard/Data/Browser/AttachSel
import CloneSelectedRowsDialog from 'dashboard/Data/Browser/CloneSelectedRowsDialog.react';
import EditRowDialog from 'dashboard/Data/Browser/EditRowDialog.react';
import ExportSelectedRowsDialog from 'dashboard/Data/Browser/ExportSelectedRowsDialog.react';
-import history from 'dashboard/history';
import { List, Map } from 'immutable';
import Notification from 'dashboard/Data/Browser/Notification.react';
import Parse from 'parse';
@@ -37,12 +36,13 @@ import subscribeTo from 'lib/subscribeTo';
import * as ColumnPreferences from 'lib/ColumnPreferences';
import { Helmet } from 'react-helmet';
import generatePath from 'lib/generatePath';
+import { withRouter } from 'lib/withRouter';
// The initial and max amount of rows fetched by lazy loading
const MAX_ROWS_FETCHED = 200;
-export default
@subscribeTo('Schema', 'schema')
+@withRouter
class Browser extends DashboardView {
constructor() {
super();
@@ -147,6 +147,7 @@ class Browser extends DashboardView {
this.saveEditCloneRow = this.saveEditCloneRow.bind(this);
this.abortEditCloneRow = this.abortEditCloneRow.bind(this);
this.cancelPendingEditRows = this.cancelPendingEditRows.bind(this);
+ this.redirectToFirstClass = this.redirectToFirstClass.bind(this);
this.dataBrowserRef = React.createRef();
window.addEventListener('popstate', () => {
@@ -246,7 +247,7 @@ class Browser extends DashboardView {
}
return a.toUpperCase() < b.toUpperCase() ? -1 : 1;
});
- history.replace(generatePath(context || this.context, 'browser/' + classes[0]));
+ this.props.navigate(generatePath(context || this.context, 'browser/' + classes[0]), { replace: true });
}
}
@@ -299,7 +300,7 @@ class Browser extends DashboardView {
createClass(className) {
this.props.schema.dispatch(ActionTypes.CREATE_CLASS, { className }).then(() => {
this.state.counts[className] = 0;
- history.push(generatePath(this.context, 'browser/' + className));
+ this.props.navigate(generatePath(this.context, 'browser/' + className));
}).finally(() => {
this.setState({ showCreateClassDialog: false });
});
@@ -309,7 +310,7 @@ class Browser extends DashboardView {
this.props.schema.dispatch(ActionTypes.DROP_CLASS, { className }).then(() => {
this.setState({showDropClassDialog: false });
delete this.state.counts[className];
- history.push(generatePath(this.context, 'browser'));
+ this.props.navigate(generatePath(this.context, 'browser'));
}, (error) => {
let msg = typeof error === 'string' ? error : error.message;
if (msg) {
@@ -802,7 +803,7 @@ class Browser extends DashboardView {
const _filters = JSON.stringify(filters.toJSON());
const url = `browser/${source}${(filters.size === 0 ? '' : `?filters=${(encodeURIComponent(_filters))}`)}`;
// filters param change is making the fetch call
- history.push(generatePath(this.context, url));
+ this.props.navigate(generatePath(this.context, url));
}
}
@@ -837,7 +838,7 @@ class Browser extends DashboardView {
filterQueryString = encodeURIComponent(JSON.stringify(filters.toJSON()));
}
const url = `${this.getRelationURL()}${filterQueryString ? `?filters=${filterQueryString}` : ''}`;
- history.push(url);
+ this.props.navigate(url);
});
this.fetchRelation(relation, filters);
}
@@ -848,7 +849,7 @@ class Browser extends DashboardView {
constraint: 'eq',
compareTo: id
}]);
- history.push(generatePath(this.context, `browser/${className}?filters=${encodeURIComponent(filters)}`));
+ this.props.navigate(generatePath(this.context, `browser/${className}?filters=${encodeURIComponent(filters)}`));
}
handlePointerCmdClick({ className, id, field = 'objectId' }) {
@@ -1784,3 +1785,5 @@ class Browser extends DashboardView {
);
}
}
+
+export default Browser;
diff --git a/src/dashboard/Data/Browser/CreateClassDialog.react.js b/src/dashboard/Data/Browser/CreateClassDialog.react.js
index e54f345157..9c2747bccf 100644
--- a/src/dashboard/Data/Browser/CreateClassDialog.react.js
+++ b/src/dashboard/Data/Browser/CreateClassDialog.react.js
@@ -13,13 +13,14 @@ import Option from 'components/Dropdown/Option.react';
import React from 'react';
import { SpecialClasses } from 'lib/Constants';
import TextInput from 'components/TextInput/TextInput.react';
-import history from 'dashboard/history';
+import { withRouter } from 'lib/withRouter';
function validClassName(name) {
return !!name.match(/^[a-zA-Z][_a-zA-Z0-9]*$/);
}
-export default class CreateClassDialog extends React.Component {
+@withRouter
+class CreateClassDialog extends React.Component {
constructor() {
super();
this.state = {
@@ -76,7 +77,7 @@ export default class CreateClassDialog extends React.Component {
let type = this.state.type;
let className = type === 'Custom' ? this.state.name : type;
await this.props.onConfirm(className);
- history.push(`/apps/${this.props.currentAppSlug}/browser/${className}`);
+ this.props.navigate(`/apps/${this.props.currentAppSlug}/browser/${className}`);
this.props.onAddColumn();
}}
onConfirm={() => {
@@ -101,3 +102,5 @@ export default class CreateClassDialog extends React.Component {
);
}
}
+
+export default CreateClassDialog;
diff --git a/src/dashboard/Data/CloudCode/CloudCode.react.js b/src/dashboard/Data/CloudCode/CloudCode.react.js
index e75324db7f..8af0698389 100644
--- a/src/dashboard/Data/CloudCode/CloudCode.react.js
+++ b/src/dashboard/Data/CloudCode/CloudCode.react.js
@@ -9,17 +9,18 @@ import CodeSnippet from 'components/CodeSnippet/CodeSnippet.react';
import DashboardView from 'dashboard/DashboardView.react';
import EmptyState from 'components/EmptyState/EmptyState.react';
import FileTree from 'components/FileTree/FileTree.react';
-import history from 'dashboard/history';
import React from 'react';
import styles from 'dashboard/Data/CloudCode/CloudCode.scss';
import Toolbar from 'components/Toolbar/Toolbar.react';
import generatePath from 'lib/generatePath';
+import { withRouter } from 'lib/withRouter';
function getPath(params) {
return params.splat;
}
-export default class CloudCode extends DashboardView {
+@withRouter
+class CloudCode extends DashboardView {
constructor() {
super();
this.section = 'Core';
@@ -53,7 +54,7 @@ export default class CloudCode extends DashboardView {
if (!fileName || release.files[fileName] === undefined) {
// Means we're still in /cloud_code/. Let's redirect to /cloud_code/main.js
- history.replace(generatePath(this.context, 'cloud_code/main.js'))
+ this.props.navigate(generatePath(this.context, 'cloud_code/main.js'), { replace: true });
} else {
// Means we can load /cloud_code/
app.getSource(fileName).then(
@@ -129,3 +130,5 @@ export default class CloudCode extends DashboardView {
);
}
}
+
+export default CloudCode;
diff --git a/src/dashboard/Data/Jobs/JobEdit.react.js b/src/dashboard/Data/Jobs/JobEdit.react.js
index 1c7008156c..6e1111ffe4 100644
--- a/src/dashboard/Data/Jobs/JobEdit.react.js
+++ b/src/dashboard/Data/Jobs/JobEdit.react.js
@@ -6,14 +6,15 @@
* the root directory of this source tree.
*/
import { ActionTypes } from 'lib/stores/JobsStore';
-import history from 'dashboard/history';
import JobsForm from 'dashboard/Data/Jobs/JobsForm.react';
import React from 'react';
import subscribeTo from 'lib/subscribeTo';
import generatePath from 'lib/generatePath';
import { CurrentApp } from 'context/currentApp';
+import { withRouter } from 'lib/withRouter';
@subscribeTo('Jobs', 'jobs')
+@withRouter
class JobEdit extends React.Component {
static contextType = CurrentApp;
@@ -51,7 +52,7 @@ class JobEdit extends React.Component {
let promise = this.props.params.jobId ?
this.props.jobs.dispatch(ActionTypes.EDIT, { jobId: this.props.params.jobId, updates: schedule }) :
this.props.jobs.dispatch(ActionTypes.CREATE, { schedule });
- promise.then(() => {history.push(generatePath(this.context, 'jobs/scheduled'))});
+ promise.then(() => {this.props.navigate(generatePath(this.context, 'jobs/scheduled'))});
return promise;
}
diff --git a/src/dashboard/Data/Jobs/Jobs.react.js b/src/dashboard/Data/Jobs/Jobs.react.js
index 5d1521f9fd..d163847db8 100644
--- a/src/dashboard/Data/Jobs/Jobs.react.js
+++ b/src/dashboard/Data/Jobs/Jobs.react.js
@@ -10,7 +10,6 @@ import Button from 'components/Button/Button.react';
import * as DateUtils from 'lib/DateUtils';
import CategoryList from 'components/CategoryList/CategoryList.react';
import EmptyState from 'components/EmptyState/EmptyState.react';
-import history from 'dashboard/history';
import Icon from 'components/Icon/Icon.react';
import JobScheduleReminder from 'dashboard/Data/Jobs/JobScheduleReminder.react';
import Modal from 'components/Modal/Modal.react';
@@ -26,6 +25,7 @@ import TableHeader from 'components/Table/TableHeader.react';
import TableView from 'dashboard/TableView.react';
import Toolbar from 'components/Toolbar/Toolbar.react';
import generatePath from 'lib/generatePath';
+import { withRouter } from 'lib/withRouter';
let subsections = {
all: 'All Jobs',
@@ -61,8 +61,8 @@ function scheduleString(data) {
}
// TODO: create scrollable view component that handles lazy fetch container on scroll
-export default
@subscribeTo('Jobs', 'jobs')
+@withRouter
class Jobs extends TableView {
constructor() {
super();
@@ -92,11 +92,11 @@ class Jobs extends TableView {
}
navigateToNew() {
- history.push(generatePath(this.context, 'jobs/new'));
+ this.props.navigate(generatePath(this.context, 'jobs/new'));
}
navigateToJob(jobId) {
- history.push(generatePath(this.context, `jobs/edit/${jobId}`))
+ this.props.navigate(generatePath(this.context, `jobs/edit/${jobId}`))
}
loadData() {
@@ -300,3 +300,5 @@ class Jobs extends TableView {
return null;
}
}
+
+export default Jobs;
diff --git a/src/dashboard/Data/Jobs/JobsData.react.js b/src/dashboard/Data/Jobs/JobsData.react.js
index 574ba5453c..441dd7c25b 100644
--- a/src/dashboard/Data/Jobs/JobsData.react.js
+++ b/src/dashboard/Data/Jobs/JobsData.react.js
@@ -7,6 +7,7 @@
*/
import React from 'react';
import { CurrentApp } from 'context/currentApp';
+import { Outlet } from 'react-router-dom';
export default class JobsData extends React.Component {
static contextType = CurrentApp;
@@ -58,15 +59,14 @@ export default class JobsData extends React.Component {
}
render() {
- let child = React.Children.only(this.props.children);
- return React.cloneElement(
- child,
- {
- ...child.props,
- availableJobs: this.state.jobs,
- jobsInUse: this.state.inUse,
- release: this.state.release
- }
+ return (
+
);
}
}
diff --git a/src/dashboard/Data/Logs/Logs.react.js b/src/dashboard/Data/Logs/Logs.react.js
index 2e2a5c5027..27ce8eb8f6 100644
--- a/src/dashboard/Data/Logs/Logs.react.js
+++ b/src/dashboard/Data/Logs/Logs.react.js
@@ -15,13 +15,15 @@ import ReleaseInfo from 'components/ReleaseInfo/ReleaseInfo';
import Toolbar from 'components/Toolbar/Toolbar.react';
import styles from 'dashboard/Data/Logs/Logs.scss';
+import { withRouter } from 'lib/withRouter';
let subsections = {
info: 'Info',
error: 'Error'
};
-export default class Logs extends DashboardView {
+@withRouter
+class Logs extends DashboardView {
constructor() {
super();
this.section = 'Core';
@@ -120,3 +122,5 @@ export default class Logs extends DashboardView {
);
}
}
+
+export default Logs;
diff --git a/src/dashboard/Push/PushAudiencesIndex.react.js b/src/dashboard/Push/PushAudiencesIndex.react.js
index 9168f0ea69..1120719f29 100644
--- a/src/dashboard/Push/PushAudiencesIndex.react.js
+++ b/src/dashboard/Push/PushAudiencesIndex.react.js
@@ -12,7 +12,6 @@ import Button from 'components/Button/Button.react';
import DashboardView from 'dashboard/DashboardView.react';
import EmptyState from 'components/EmptyState/EmptyState.react';
import FormModal from 'components/FormModal/FormModal.react';
-import history from 'dashboard/history';
import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
import Modal from 'components/Modal/Modal.react';
import PushAudienceDialog from 'components/PushAudienceDialog/PushAudienceDialog.react';
@@ -27,12 +26,13 @@ import Toolbar from 'components/Toolbar/Toolbar.react';
import { formatAudienceSchema } from 'lib/PushUtils';
import { List } from 'immutable';
import generatePath from 'lib/generatePath';
+import { withRouter } from 'lib/withRouter';
const XHR_KEY = 'PushAudiencesIndex';
-export default
@subscribeTo('Schema', 'schema')
@subscribeTo('PushAudiences', 'pushaudiences')
+@withRouter
class PushAudiencesIndex extends DashboardView {
constructor() {
super();
@@ -111,7 +111,7 @@ class PushAudiencesIndex extends DashboardView {
}
handleSendPush(objectId) {
- history.push(generatePath(this.context, `push/new?audienceId=${objectId}`));
+ this.props.navigate(generatePath(this.context, `push/new?audienceId=${objectId}`));
}
renderRow(audience) {
@@ -276,3 +276,5 @@ class PushAudiencesIndex extends DashboardView {
);
}
}
+
+export default PushAudiencesIndex;
diff --git a/src/dashboard/Push/PushDetails.react.js b/src/dashboard/Push/PushDetails.react.js
index cc022301b7..3ab30046bc 100644
--- a/src/dashboard/Push/PushDetails.react.js
+++ b/src/dashboard/Push/PushDetails.react.js
@@ -15,7 +15,6 @@ import Field from 'components/Field/Field.react';
import Fieldset from 'components/Fieldset/Fieldset.react';
import FieldStyles from 'components/Field/Field.scss';
import FlowView from 'components/FlowView/FlowView.react';
-import history from 'dashboard/history';
import Label from 'components/Label/Label.react';
import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
import Parse from 'parse';
@@ -33,6 +32,7 @@ import { Directions } from 'lib/Constants';
import { Link } from 'react-router-dom';
import { tableInfoBuilder } from 'lib/PushUtils';
import generatePath from 'lib/generatePath';
+import { withRouter } from 'lib/withRouter';
const EXP_STATS_URL = 'http://docs.parseplatform.org/ios/guide/#push-experiments';
@@ -200,8 +200,8 @@ const COLOR_MAP = {
const DROPDOWN_KEY_GROUP_A = 'Group A';
const DROPDOWN_KEY_GROUP_B = 'Group B';
-export default
@subscribeTo('Schema', 'schema')
+@withRouter
class PushDetails extends DashboardView {
constructor() {
super();
@@ -472,7 +472,7 @@ class PushDetails extends DashboardView {
prevLaunchGroup = (
- This push is the Launch Group for a previous experiment.
+ This push is the Launch Group for a previous experiment.
);
@@ -586,7 +586,7 @@ class PushDetails extends DashboardView {
if (error) {
promise.reject({ error });
} else {
- history.push(generatePath(this.context, 'push/activity'));
+ this.props.navigate(generatePath(this.context, 'push/activity'));
}
}, (error) => {
promise.reject({ error });
@@ -744,3 +744,5 @@ class PushDetails extends DashboardView {
);
}
}
+
+export default PushDetails;
diff --git a/src/dashboard/Push/PushIndex.react.js b/src/dashboard/Push/PushIndex.react.js
index 5e025fb0b6..79f39d55ff 100644
--- a/src/dashboard/Push/PushIndex.react.js
+++ b/src/dashboard/Push/PushIndex.react.js
@@ -11,7 +11,6 @@ import Button from 'components/Button/Button.react';
import CategoryList from 'components/CategoryList/CategoryList.react';
import DashboardView from 'dashboard/DashboardView.react';
import EmptyState from 'components/EmptyState/EmptyState.react';
-import history from 'dashboard/history';
import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
import LoaderDots from 'components/LoaderDots/LoaderDots.react';
import React from 'react';
@@ -22,6 +21,7 @@ import stylesTable from 'dashboard/TableView.scss';
import TableHeader from 'components/Table/TableHeader.react';
import Toolbar from 'components/Toolbar/Toolbar.react';
import generatePath from 'lib/generatePath';
+import { withRouter } from 'lib/withRouter';
const PUSH_TYPE_ALL = 'all';
const PUSH_TYPE_CAMPAIGN = 'campaign';
@@ -227,7 +227,8 @@ let getPushTime = (pushTime, updatedAt) => {
return result;
}
-export default class PushIndex extends DashboardView {
+@withRouter
+class PushIndex extends DashboardView {
constructor() {
super();
this.section = 'Push';
@@ -294,11 +295,11 @@ export default class PushIndex extends DashboardView {
}
navigateToNew() {
- history.push(generatePath(this.context, 'push/new'));
+ this.props.navigate(generatePath(this.context, 'push/new'));
}
navigateToDetails(objectId) {
- history.push(generatePath(this.context, `push/${objectId}`));
+ this.props.navigate(generatePath(this.context, `push/${objectId}`));
}
handleShowMore(page) {
@@ -447,3 +448,5 @@ export default class PushIndex extends DashboardView {
);
}
}
+
+export default PushIndex;
diff --git a/src/dashboard/Push/PushNew.react.js b/src/dashboard/Push/PushNew.react.js
index 3c964a161c..48b056f5dd 100644
--- a/src/dashboard/Push/PushNew.react.js
+++ b/src/dashboard/Push/PushNew.react.js
@@ -17,7 +17,6 @@ import Field from 'components/Field/Field.react';
import Fieldset from 'components/Fieldset/Fieldset.react';
import FieldStyles from 'components/Field/Field.scss';
import FlowView from 'components/FlowView/FlowView.react';
-import history from 'dashboard/history';
import joinWithFinal from 'lib/joinWithFinal';
import Label from 'components/Label/Label.react';
import Option from 'components/Dropdown/Option.react';
@@ -37,6 +36,7 @@ import Toolbar from 'components/Toolbar/Toolbar.react';
import { Directions } from 'lib/Constants';
import { extractExpiration, extractPushTime } from 'lib/extractTime';
import generatePath from 'lib/generatePath';
+import { withRouter } from 'lib/withRouter';
const PARSE_SERVER_SUPPORTS_AB_TESTING = false;
@@ -121,9 +121,9 @@ let LocalizedMessageField = ({
const XHR_KEY = 'PushNew';
-export default
@subscribeTo('Schema', 'schema')
@subscribeTo('PushAudiences', 'pushaudiences')
+@withRouter
class PushNew extends DashboardView {
constructor() {
super();
@@ -230,7 +230,7 @@ class PushNew extends DashboardView {
//TODO: global success message banner for passing successful creation - store should also be cleared
const PARSE_SERVER_SUPPORTS_PUSH_INDEX = false;
if (PARSE_SERVER_SUPPORTS_PUSH_INDEX) {
- history.push(generatePath(this.context, 'push/activity'));
+ this.props.navigate(generatePath(this.context, 'push/activity'));
} else {
return;
}
@@ -895,3 +895,5 @@ class PushNew extends DashboardView {
}}/>;
}
}
+
+export default PushNew;
diff --git a/src/dashboard/Settings/GeneralSettings.react.js b/src/dashboard/Settings/GeneralSettings.react.js
index 8cff83780a..9a9981ab54 100644
--- a/src/dashboard/Settings/GeneralSettings.react.js
+++ b/src/dashboard/Settings/GeneralSettings.react.js
@@ -18,7 +18,6 @@ import FormButton from 'components/FormButton/FormButton.
import FormModal from 'components/FormModal/FormModal.react';
import FormNote from 'components/FormNote/FormNote.react';
import getSiteDomain from 'lib/getSiteDomain';
-import history from 'dashboard/history';
import joinWithFinal from 'lib/joinWithFinal';
import KeyField from 'components/KeyField/KeyField.react';
import Label from 'components/Label/Label.react';
@@ -37,7 +36,8 @@ import Toolbar from 'components/Toolbar/Toolbar.react'
import unique from 'lib/unique';
import validateAndSubmitConnectionString from 'lib/validateAndSubmitConnectionString';
import styles from 'dashboard/Settings/GeneralSettings.scss';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { withRouter } from 'lib/withRouter';
const DEFAULT_SETTINGS_LABEL_WIDTH = 62;
@@ -204,6 +204,7 @@ let ManageAppFields = ({
transferAppMessage,
deleteApp,
}) => {
+ const navigate = useNavigate();
let migrateAppField = null;
if (!mongoURL && !hasInProgressMigration) {
migrateAppField = }
input={ history.push(`/apps/${appSlug}/migration`)}
+ onClick={() => navigate(`/apps/${appSlug}/migration`)}
value='View progress' />} />
} else {
migrateAppField = [
- {cloneAppMessage} Check out the progress on your apps page!
+ {cloneAppMessage} Check out the progress on your apps page!
: null}
{!isCollaborator ? );
}
-export default class GeneralSettings extends DashboardView {
+@withRouter
+class GeneralSettings extends DashboardView {
constructor() {
super();
this.section = 'App Settings';
@@ -424,7 +426,7 @@ export default class GeneralSettings extends DashboardView {
return promise;
}}
onClose={closeModalWithConnectionString}
- onSuccess={() => history.push(`/apps/${this.context.slug}/migration`)}
+ onSuccess={() => this.props.navigate(`/apps/${this.context.slug}/migration`)}
clearFields={() => this.setState({
migrationMongoURL: '',
migrationWarnings: [],
@@ -535,7 +537,7 @@ export default class GeneralSettings extends DashboardView {
inProgressText={'Deleting\u2026'}
enabled={this.state.password.length > 0}
onSubmit={() => AppsManager.deleteApp(this.context.slug, this.state.password)}
- onSuccess={() => history.push('/apps')}
+ onSuccess={() => this.props.navigate('/apps')}
onClose={() => this.setState({showDeleteAppModal: false})}
clearFields={() => this.setState({password: ''})}>
{passwordField}
@@ -797,3 +799,5 @@ let generalFieldsOptions = {
friendlyName: 'other URL',
},
};
+
+export default GeneralSettings;
diff --git a/src/dashboard/Settings/SettingsData.react.js b/src/dashboard/Settings/SettingsData.react.js
index 4b2a37e931..161ea0614b 100644
--- a/src/dashboard/Settings/SettingsData.react.js
+++ b/src/dashboard/Settings/SettingsData.react.js
@@ -7,6 +7,7 @@
*/
import React from 'react';
import { CurrentApp } from 'context/currentApp';
+import { Outlet } from 'react-router-dom';
export default class SettingsData extends React.Component {
static contextType = CurrentApp;
@@ -43,14 +44,13 @@ export default class SettingsData extends React.Component {
}
render() {
- let child = React.Children.only(this.props.children);
- return React.cloneElement(
- child,
- {
- ...child.props,
- initialFields: this.state.fields,
- saveChanges: this.saveChanges.bind(this)
- }
+ return (
+
);
}
}
diff --git a/src/dashboard/history.js b/src/dashboard/history.js
deleted file mode 100644
index 35dd81d965..0000000000
--- a/src/dashboard/history.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * Copyright (c) 2016-present, Parse, LLC
- * All rights reserved.
- *
- * This source code is licensed under the license found in the LICENSE file in
- * the root directory of this source tree.
- */
-
-import { createBrowserHistory } from 'history';
-
-const path = window.PARSE_DASHBOARD_PATH || '/';
-export default createBrowserHistory({ basename: path });
diff --git a/src/lib/withRouter.js b/src/lib/withRouter.js
new file mode 100644
index 0000000000..707c1a6e6e
--- /dev/null
+++ b/src/lib/withRouter.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useParams, useNavigate, useOutletContext, useLocation } from 'react-router-dom';
+
+export function withRouter(Component) {
+ function render(props) {
+ const params = useParams();
+ const navigate = useNavigate();
+ const outletContext = useOutletContext();
+ const location = useLocation();
+
+ return ;
+ }
+
+ const name = Component.displayName || Component.name;
+ render.displayName = `withRouter(${name})`;
+
+ return render;
+}
diff --git a/src/parse-interface-guide/PIG.react.js b/src/parse-interface-guide/PIG.react.js
index 15a009dc8a..800ef521b1 100644
--- a/src/parse-interface-guide/PIG.react.js
+++ b/src/parse-interface-guide/PIG.react.js
@@ -6,20 +6,22 @@
* the root directory of this source tree.
*/
import * as ComponentsMap from 'parse-interface-guide/ComponentsMap';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
import Icon from 'components/Icon/Icon.react';
import PropsTable from 'parse-interface-guide/PropsTable.react';
import React from 'react';
import styles from 'parse-interface-guide/PIG.scss';
import beautify from 'js-beautify';
import CodeSnippet from 'components/CodeSnippet/CodeSnippet.react';
+import { withRouter } from 'lib/withRouter';
let PIGRow = ({ title, children }) => ;
-export default class PIG extends React.Component {
+@withRouter
+class PIG extends React.Component {
constructor() {
super();
@@ -46,7 +48,7 @@ export default class PIG extends React.Component {
}}/>
{components.map((name) => {
return name.toLowerCase().indexOf(this.state.query.toLowerCase()) !== -1
- ? {name}
+ ? isActive ? styles.active : undefined} key={name} to={`/${name}`}>{name}
: null;
})}