Skip to content

Commit 34aa27a

Browse files
gatzjamesgatzjames
authored
add react-router and split on activity paths (#4767)
1 parent 70f8e7f commit 34aa27a

File tree

6 files changed

+152
-64
lines changed

6 files changed

+152
-64
lines changed

‎packages/insomnia/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@
187187
"react-dom": "^17.0.2",
188188
"react-hook-form": "^7.12.1",
189189
"react-redux": "^7.2.6",
190+
"react-router-dom": "^6.3.0",
190191
"react-sortable-hoc": "^2.0.0",
191192
"react-tabs": "^3.2.3",
192193
"react-use": "^17.2.4",

‎packages/insomnia/src/ui/components/wrapper-debug.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,4 +348,4 @@ const mapStateToProps = (state: RootState) => ({
348348
sidebarFilter: selectSidebarFilter(state),
349349
});
350350

351-
export const WrapperDebug = connect(mapStateToProps)(UnconnectedWrapperDebug);
351+
export default connect(mapStateToProps)(UnconnectedWrapperDebug);

‎packages/insomnia/src/ui/components/wrapper-design.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,3 +337,5 @@ export const WrapperDesign: FC<Props> = ({
337337
/>
338338
);
339339
};
340+
341+
export default WrapperDesign;

‎packages/insomnia/src/ui/components/wrapper-unit-test.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -595,3 +595,5 @@ const mapStateToProps = (state: RootState) => ({
595595
});
596596

597597
export const WrapperUnitTest = connect(mapStateToProps)(UnconnectedWrapperUnitTest);
598+
599+
export default WrapperUnitTest;

‎packages/insomnia/src/ui/components/wrapper.tsx‎

Lines changed: 142 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { autoBindMethodsForReact } from 'class-autobind-decorator';
22
import * as importers from 'insomnia-importers';
3-
import React, { Fragment, PureComponent, Ref } from 'react';
3+
import React, { Fragment, lazy, PureComponent, Ref, Suspense } from 'react';
4+
import { useSelector } from 'react-redux';
5+
import { Route, Routes, useNavigate } from 'react-router-dom';
46

57
import type { GlobalActivity } from '../../common/constants';
68
import {
@@ -31,6 +33,7 @@ import { VCS } from '../../sync/vcs/vcs';
3133
import { CookieModifyModal } from '../components/modals/cookie-modify-modal';
3234
import { AppProps } from '../containers/app';
3335
import { GrpcDispatchModalWrapper } from '../context/grpc';
36+
import { selectActiveActivity } from '../redux/selectors';
3437
import { DropdownButton } from './base/dropdown/dropdown-button';
3538
import GitSyncDropdown from './dropdowns/git-sync-dropdown';
3639
import { ErrorBoundary } from './error-boundary';
@@ -72,10 +75,51 @@ import { WorkspaceDuplicateModal } from './modals/workspace-duplicate-modal';
7275
import { WorkspaceEnvironmentsEditModal } from './modals/workspace-environments-edit-modal';
7376
import { WorkspaceSettingsModal } from './modals/workspace-settings-modal';
7477
import { WrapperModal } from './modals/wrapper-modal';
75-
import { WrapperDebug } from './wrapper-debug';
76-
import { WrapperDesign } from './wrapper-design';
77-
import WrapperHome from './wrapper-home';
78-
import { WrapperUnitTest } from './wrapper-unit-test';
78+
79+
const lazyWithPreload = (
80+
importFn: () => Promise<{ default: React.ComponentType<any> }>
81+
): [
82+
React.LazyExoticComponent<React.ComponentType<any>>,
83+
() => Promise<{
84+
default: React.ComponentType<any>;
85+
}>
86+
] => {
87+
const LazyComponent = lazy(importFn);
88+
const preload = () => importFn();
89+
90+
return [LazyComponent, preload];
91+
};
92+
93+
const [WrapperHome, preloadWrapperHome] = lazyWithPreload(
94+
() => import('./wrapper-home')
95+
);
96+
const [WrapperDebug, preloadWrapperDebug] = lazyWithPreload(
97+
() => import('./wrapper-debug')
98+
);
99+
const [WrapperDesign, preloadWrapperDesign] = lazyWithPreload(
100+
() => import('./wrapper-design')
101+
);
102+
const [WrapperUnitTest, preloadWrapperUnitTest] = lazyWithPreload(
103+
() => import('./wrapper-unit-test')
104+
);
105+
106+
preloadWrapperHome();
107+
preloadWrapperDebug();
108+
preloadWrapperDesign();
109+
preloadWrapperUnitTest();
110+
111+
const ActivityRouter = () => {
112+
const activity = useSelector(selectActiveActivity);
113+
const navigate = useNavigate();
114+
115+
React.useEffect(() => {
116+
if (activity) {
117+
navigate(activity);
118+
}
119+
}, [activity, navigate]);
120+
121+
return null;
122+
};
79123

80124
const spectral = initializeSpectral();
81125

@@ -442,7 +486,6 @@ export class Wrapper extends PureComponent<WrapperProps, State> {
442486
activeWorkspace,
443487
activeApiSpec,
444488
activeWorkspaceClientCertificates,
445-
activeActivity,
446489
gitVCS,
447490
handleActivateRequest,
448491
handleExportRequestsToFile,
@@ -589,63 +632,100 @@ export class Wrapper extends PureComponent<WrapperProps, State> {
589632
</GrpcDispatchModalWrapper>
590633
</ErrorBoundary>
591634
</div>
592-
<Fragment key={`views::${this.state.activeGitBranch}`}>
593-
{(activeActivity === ACTIVITY_HOME || !activeWorkspace) && (
594-
<WrapperHome
595-
wrapperProps={this.props}
596-
/>
597-
)}
598-
599-
{activeActivity === ACTIVITY_SPEC && (
600-
<WrapperDesign
601-
gitSyncDropdown={gitSyncDropdown}
602-
handleActivityChange={this._handleWorkspaceActivityChange}
603-
wrapperProps={this.props}
604-
/>
605-
)}
606635

607-
{activeActivity === ACTIVITY_UNIT_TEST && (
608-
<WrapperUnitTest
609-
gitSyncDropdown={gitSyncDropdown}
610-
wrapperProps={this.props}
611-
handleActivityChange={this._handleWorkspaceActivityChange}
612-
>
613-
{sidebarChildren}
614-
</WrapperUnitTest>
615-
)}
616-
617-
{activeActivity === ACTIVITY_DEBUG && (
618-
<WrapperDebug
619-
forceRefreshKey={this.state.forceRefreshKey}
620-
gitSyncDropdown={gitSyncDropdown}
621-
handleActivityChange={this._handleWorkspaceActivityChange}
622-
handleChangeEnvironment={this._handleChangeEnvironment}
623-
handleDeleteResponse={this._handleDeleteResponse}
624-
handleDeleteResponses={this._handleDeleteResponses}
625-
handleForceUpdateRequest={this._handleForceUpdateRequest}
626-
handleForceUpdateRequestHeaders={this._handleForceUpdateRequestHeaders}
627-
handleImport={this._handleImport}
628-
handleRequestCreate={this._handleCreateRequestInWorkspace}
629-
handleRequestGroupCreate={this._handleCreateRequestGroupInWorkspace}
630-
handleSendAndDownloadRequestWithActiveEnvironment={this._handleSendAndDownloadRequestWithActiveEnvironment}
631-
handleSendRequestWithActiveEnvironment={this._handleSendRequestWithActiveEnvironment}
632-
handleSetActiveResponse={this._handleSetActiveResponse}
633-
handleSetPreviewMode={this._handleSetPreviewMode}
634-
handleSetResponseFilter={this._handleSetResponseFilter}
635-
handleShowRequestSettingsModal={this._handleShowRequestSettingsModal}
636-
handleSidebarSort={handleSidebarSort}
637-
handleUpdateRequestAuthentication={Wrapper._handleUpdateRequestAuthentication}
638-
handleUpdateRequestBody={Wrapper._handleUpdateRequestBody}
639-
handleUpdateRequestHeaders={Wrapper._handleUpdateRequestHeaders}
640-
handleUpdateRequestMethod={Wrapper._handleUpdateRequestMethod}
641-
handleUpdateRequestParameters={Wrapper._handleUpdateRequestParameters}
642-
handleUpdateRequestUrl={Wrapper._handleUpdateRequestUrl}
643-
handleUpdateSettingsUseBulkHeaderEditor={this._handleUpdateSettingsUseBulkHeaderEditor}
644-
handleUpdateSettingsUseBulkParametersEditor={this._handleUpdateSettingsUseBulkParametersEditor}
645-
wrapperProps={this.props}
646-
/>
647-
)}
648-
</Fragment>
636+
<Routes>
637+
<Route
638+
path="*"
639+
element={
640+
<Suspense fallback={<div />}>
641+
<WrapperHome wrapperProps={this.props} />
642+
</Suspense>
643+
}
644+
/>
645+
<Route
646+
path={ACTIVITY_UNIT_TEST}
647+
element={
648+
<Suspense fallback={<div />}>
649+
<WrapperUnitTest
650+
gitSyncDropdown={gitSyncDropdown}
651+
wrapperProps={this.props}
652+
handleActivityChange={this._handleWorkspaceActivityChange}
653+
>
654+
{sidebarChildren}
655+
</WrapperUnitTest>
656+
</Suspense>
657+
}
658+
/>
659+
<Route
660+
path={ACTIVITY_SPEC}
661+
element={
662+
<Suspense fallback={<div />}>
663+
<WrapperDesign
664+
gitSyncDropdown={gitSyncDropdown}
665+
handleActivityChange={this._handleWorkspaceActivityChange}
666+
wrapperProps={this.props}
667+
/>
668+
</Suspense>
669+
}
670+
/>
671+
<Route
672+
path={ACTIVITY_DEBUG}
673+
element={
674+
<Suspense fallback={<div />}>
675+
<WrapperDebug
676+
forceRefreshKey={this.state.forceRefreshKey}
677+
gitSyncDropdown={gitSyncDropdown}
678+
handleActivityChange={this._handleWorkspaceActivityChange}
679+
handleChangeEnvironment={this._handleChangeEnvironment}
680+
handleDeleteResponse={this._handleDeleteResponse}
681+
handleDeleteResponses={this._handleDeleteResponses}
682+
handleForceUpdateRequest={this._handleForceUpdateRequest}
683+
handleForceUpdateRequestHeaders={
684+
this._handleForceUpdateRequestHeaders
685+
}
686+
handleImport={this._handleImport}
687+
handleRequestCreate={this._handleCreateRequestInWorkspace}
688+
handleRequestGroupCreate={
689+
this._handleCreateRequestGroupInWorkspace
690+
}
691+
handleSendAndDownloadRequestWithActiveEnvironment={
692+
this._handleSendAndDownloadRequestWithActiveEnvironment
693+
}
694+
handleSendRequestWithActiveEnvironment={
695+
this._handleSendRequestWithActiveEnvironment
696+
}
697+
handleSetActiveResponse={this._handleSetActiveResponse}
698+
handleSetPreviewMode={this._handleSetPreviewMode}
699+
handleSetResponseFilter={this._handleSetResponseFilter}
700+
handleShowRequestSettingsModal={
701+
this._handleShowRequestSettingsModal
702+
}
703+
handleSidebarSort={handleSidebarSort}
704+
handleUpdateRequestAuthentication={
705+
Wrapper._handleUpdateRequestAuthentication
706+
}
707+
handleUpdateRequestBody={Wrapper._handleUpdateRequestBody}
708+
handleUpdateRequestHeaders={
709+
Wrapper._handleUpdateRequestHeaders
710+
}
711+
handleUpdateRequestMethod={Wrapper._handleUpdateRequestMethod}
712+
handleUpdateRequestParameters={
713+
Wrapper._handleUpdateRequestParameters
714+
}
715+
handleUpdateRequestUrl={Wrapper._handleUpdateRequestUrl}
716+
handleUpdateSettingsUseBulkHeaderEditor={
717+
this._handleUpdateSettingsUseBulkHeaderEditor
718+
}
719+
handleUpdateSettingsUseBulkParametersEditor={
720+
this._handleUpdateSettingsUseBulkParametersEditor
721+
}
722+
wrapperProps={this.props}
723+
/>
724+
</Suspense>
725+
}
726+
/>
727+
</Routes>
728+
<ActivityRouter />
649729
</Fragment>
650730
);
651731
}

‎packages/insomnia/src/ui/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { applyColorScheme } from '../plugins/misc';
1414
import App from './containers/app';
1515
import { init as initStore } from './redux/modules';
1616
import { initializeSentry } from './sentry';
17+
import { MemoryRouter as Router } from 'react-router-dom';
1718

1819
import './css/index.less'; // this import must come after `App`. the reason is not yet known.
1920

@@ -42,7 +43,9 @@ document.title = getProductName();
4243
const render = App => {
4344
ReactDOM.render(
4445
<Provider store={store}>
45-
<App />
46+
<Router>
47+
<App />
48+
</Router>
4649
</Provider>,
4750
document.getElementById('root'),
4851
);

0 commit comments

Comments
 (0)