Skip to content

Commit 8b4d5e1

Browse files
gatzjamesgatzjames
committed
add react-router and split on activity paths
1 parent 53c4c10 commit 8b4d5e1

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
@@ -182,6 +182,7 @@
182182
"react-dom": "^17.0.2",
183183
"react-hook-form": "^7.12.1",
184184
"react-redux": "^7.2.6",
185+
"react-router-dom": "^6.3.0",
185186
"react-sortable-hoc": "^2.0.0",
186187
"react-tabs": "^3.2.3",
187188
"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
@@ -331,3 +331,5 @@ export const WrapperDesign: FC<Props> = ({
331331
/>
332332
);
333333
};
334+
335+
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';
@@ -74,10 +77,51 @@ import { WorkspaceDuplicateModal } from './modals/workspace-duplicate-modal';
7477
import { WorkspaceEnvironmentsEditModal } from './modals/workspace-environments-edit-modal';
7578
import { WorkspaceSettingsModal } from './modals/workspace-settings-modal';
7679
import { WrapperModal } from './modals/wrapper-modal';
77-
import { WrapperDebug } from './wrapper-debug';
78-
import { WrapperDesign } from './wrapper-design';
79-
import WrapperHome from './wrapper-home';
80-
import { WrapperUnitTest } from './wrapper-unit-test';
80+
81+
const lazyWithPreload = (
82+
importFn: () => Promise<{ default: React.ComponentType<any> }>
83+
): [
84+
React.LazyExoticComponent<React.ComponentType<any>>,
85+
() => Promise<{
86+
default: React.ComponentType<any>;
87+
}>
88+
] => {
89+
const LazyComponent = lazy(importFn);
90+
const preload = () => importFn();
91+
92+
return [LazyComponent, preload];
93+
};
94+
95+
const [WrapperHome, preloadWrapperHome] = lazyWithPreload(
96+
() => import('./wrapper-home')
97+
);
98+
const [WrapperDebug, preloadWrapperDebug] = lazyWithPreload(
99+
() => import('./wrapper-debug')
100+
);
101+
const [WrapperDesign, preloadWrapperDesign] = lazyWithPreload(
102+
() => import('./wrapper-design')
103+
);
104+
const [WrapperUnitTest, preloadWrapperUnitTest] = lazyWithPreload(
105+
() => import('./wrapper-unit-test')
106+
);
107+
108+
preloadWrapperHome();
109+
preloadWrapperDebug();
110+
preloadWrapperDesign();
111+
preloadWrapperUnitTest();
112+
113+
const ActivityRouter = () => {
114+
const activity = useSelector(selectActiveActivity);
115+
const navigate = useNavigate();
116+
117+
React.useEffect(() => {
118+
if (activity) {
119+
navigate(activity);
120+
}
121+
}, [activity, navigate]);
122+
123+
return null;
124+
};
81125

82126
const spectral = initializeSpectral();
83127

@@ -444,7 +488,6 @@ export class Wrapper extends PureComponent<WrapperProps, State> {
444488
activeWorkspace,
445489
activeApiSpec,
446490
activeWorkspaceClientCertificates,
447-
activeActivity,
448491
gitVCS,
449492
handleActivateRequest,
450493
handleExportRequestsToFile,
@@ -593,63 +636,100 @@ export class Wrapper extends PureComponent<WrapperProps, State> {
593636
</GrpcDispatchModalWrapper>
594637
</ErrorBoundary>
595638
</div>
596-
<Fragment key={`views::${this.state.activeGitBranch}`}>
597-
{(activeActivity === ACTIVITY_HOME || !activeWorkspace) && (
598-
<WrapperHome
599-
wrapperProps={this.props}
600-
/>
601-
)}
602-
603-
{activeActivity === ACTIVITY_SPEC && (
604-
<WrapperDesign
605-
gitSyncDropdown={gitSyncDropdown}
606-
handleActivityChange={this._handleWorkspaceActivityChange}
607-
wrapperProps={this.props}
608-
/>
609-
)}
610639

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

‎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 { init as initPlugins } from '../plugins';
1414
import { applyColorScheme } from '../plugins/misc';
1515
import App from './containers/app';
1616
import { init as initStore } from './redux/modules';
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

@@ -39,7 +40,9 @@ document.title = getProductName();
3940
const render = App => {
4041
ReactDOM.render(
4142
<Provider store={store}>
42-
<App />
43+
<Router>
44+
<App />
45+
</Router>
4346
</Provider>,
4447
document.getElementById('root'),
4548
);

0 commit comments

Comments
 (0)