Skip to content

Commit

Permalink
refactor(request-group-settings-modal): port to typescript
Browse files Browse the repository at this point in the history
  • Loading branch information
@NickHackman
NickHackman committed Jun 18, 2021
1 parent ef6ecde commit ee54114
Show file tree
Hide file tree
Showing 4 changed files with 188 additions and 295 deletions.
3 changes: 1 addition & 2 deletions packages/insomnia-app/app/ui/components/dropdowns/request-group-actions-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,7 @@ interface Props {
activeEnvironment?: Environment | null;
handleCreateRequest: (id: string) => any;
handleDuplicateRequestGroup: (requestGroup: RequestGroup) => any;
// TODO: fix type, more explicit
handleShowSettings: Function,
handleShowSettings: (requestGroup: RequestGroup) => any,
handleMoveRequestGroup: (requestGroup: RequestGroup) => any;
handleCreateRequestGroup: (requestGroup: string) => any;
}
Expand Down
143 changes: 78 additions & 65 deletions ...ts/modals/request-group-settings-modal.js → ...s/modals/request-group-settings-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,61 +9,60 @@ import HelpTooltip from '../help-tooltip';
import * as models from '../../../models';
import DebouncedInput from '../base/debounced-input';
import MarkdownEditor from '../markdown-editor';
import * as db from '../../../common/database';
import { database as db } from '../../../common/database';
import type { Workspace } from '../../../models/workspace';
import type { RequestGroup } from '../../../models/request-group';
import { HandleGetRenderContext, HandleRender } from '../../../common/render';

interface Props {
editorFontSize: number;
editorIndentSize: number;
editorKeyMap: string;
editorLineWrapping: boolean;
nunjucksPowerUserMode: boolean;
isVariableUncovered: boolean;
handleRender: HandleRender;
handleGetRenderContext: HandleGetRenderContext;
workspaces: Workspace[];
}

interface State {
requestGroup: RequestGroup | null;
showDescription: boolean;
defaultPreviewMode: boolean;
activeWorkspaceIdToCopyTo: string | null;
workspace?: Workspace;
workspaces: Workspace[];
justCopied: boolean;
justMoved: boolean;
}

type Props = {
editorFontSize: number,
editorIndentSize: number,
editorKeyMap: string,
editorLineWrapping: boolean,
nunjucksPowerUserMode: boolean,
isVariableUncovered: boolean,
handleRender: Function,
handleGetRenderContext: Function,
workspaces: Array<Workspace>,
};

type State = {
requestGroupGroup: RequestGroup | null,
showDescription: boolean,
defaultPreviewMode: boolean,
activeWorkspaceIdToCopyTo: string | null,
workspace: Workspace | null,
justCopied: boolean,
justMoved: boolean,
};

type RequestGroupSettingsModalOptions = {
requestGroup: RequestGroup,
forceEditMode: boolean,
};
interface RequestGroupSettingsModalOptions {
requestGroup: RequestGroup;
forceEditMode: boolean;
}

@autoBindMethodsForReact(AUTOBIND_CFG)
class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
modal: ?Modal;
_editor: ?MarkdownEditor;

constructor(props: Props) {
super(props);
this.state = {
requestGroup: null,
showDescription: false,
defaultPreviewMode: false,
activeWorkspaceIdToCopyTo: null,
workspace: null,
workspaces: [],
justCopied: false,
justMoved: false,
};
}

_setModalRef(n: ?Modal) {
modal: Modal | null = null;
_editor: MarkdownEditor | null = null;

state: State = {
requestGroup: null,
showDescription: false,
defaultPreviewMode: false,
activeWorkspaceIdToCopyTo: null,
workspace: undefined,
workspaces: [],
justCopied: false,
justMoved: false,
};

_setModalRef(n: Modal) {
this.modal = n;
}

_setEditorRef(n: ?MarkdownEditor) {
_setEditorRef(n: MarkdownEditor) {
this._editor = n;
}

Expand All @@ -75,25 +74,31 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
}
const patch = { name };

const updatedRequestGroup = models.requestGroup.update(originalRequestGroup, patch);
const updatedRequestGroup = await models.requestGroup.update(
originalRequestGroup,
patch,
);
this.setState({ requestGroup: updatedRequestGroup });
}

async _handleDescriptionChange(description: string) {
if (!this.state.requestGroup) {
return;
}
const requestGroup = await models.requestGroup.update(this.state.requestGroup, {
description,
});
const requestGroup = await models.requestGroup.update(
this.state.requestGroup,
{
description,
},
);
this.setState({ requestGroup, defaultPreviewMode: false });
}

_handleAddDescription() {
this.setState({ showDescription: true });
}

_handleUpdateMoveCopyWorkspace(e: SyntheticEvent<HTMLSelectElement>) {
_handleUpdateMoveCopyWorkspace(e: React.SyntheticEvent<HTMLSelectElement>) {
const { value } = e.currentTarget;
const workspaceId = value === '__NULL__' ? null : value;
this.setState({ activeWorkspaceIdToCopyTo: workspaceId });
Expand Down Expand Up @@ -154,16 +159,19 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
models.stats.incrementCreatedRequests();
}

async show({ requestGroup, forceEditMode }: RequestGroupSettingsModalOptions) {
async show({
requestGroup,
forceEditMode,
}: RequestGroupSettingsModalOptions) {
const { workspaces } = this.props;

const hasDescription = !!requestGroup.description;

// Find workspaces for use with moving workspace
const ancestors = await db.withAncestors(requestGroup);
const doc = ancestors.find(doc => doc.type === models.workspace.type);
const doc = ancestors.find((doc) => doc.type === models.workspace.type);
const workspaceId = doc ? doc._id : 'should-never-happen';
const workspace = workspaces.find(w => w._id === workspaceId);
const workspace = workspaces.find((w) => w._id === workspaceId);

this.setState(
{
Expand All @@ -189,7 +197,7 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
this.modal && this.modal.hide();
}

_renderDescription(): React.Node {
_renderDescription() {
const {
editorLineWrapping,
editorFontSize,
Expand Down Expand Up @@ -227,13 +235,14 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
) : (
<button
onClick={this._handleAddDescription}
className="btn btn--outlined btn--super-duper-compact">
className="btn btn--outlined btn--super-duper-compact"
>
Add Description
</button>
);
}

_renderMoveCopy(): React.Node {
_renderMoveCopy() {
const { workspaces } = this.props;

const {
Expand All @@ -254,14 +263,15 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
<label>
Move/Copy to Workspace
<HelpTooltip position="top" className="space-left">
Copy or move the current folder to a new workspace. It will be placed at the root of
the new workspace's folder structure.
Copy or move the current folder to a new workspace. It will be
placed at the root of the new workspace's folder structure.
</HelpTooltip>
<select
value={activeWorkspaceIdToCopyTo || '__NULL__'}
onChange={this._handleUpdateMoveCopyWorkspace}>
onChange={this._handleUpdateMoveCopyWorkspace}
>
<option value="__NULL__">-- Select Workspace --</option>
{workspaces.map(w => {
{workspaces.map((w) => {
if (workspace && workspace._id === w._id) {
return null;
}
Expand All @@ -279,23 +289,25 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
<button
disabled={justCopied || !activeWorkspaceIdToCopyTo}
className="btn btn--clicky"
onClick={this._handleCopyToWorkspace}>
onClick={this._handleCopyToWorkspace}
>
{justCopied ? 'Copied!' : 'Copy'}
</button>
</div>
<div className="form-control form-control--no-label width-auto">
<button
disabled={justMoved || !activeWorkspaceIdToCopyTo}
className="btn btn--clicky"
onClick={this._handleMoveToWorkspace}>
onClick={this._handleMoveToWorkspace}
>
{justMoved ? 'Moved!' : 'Move'}
</button>
</div>
</div>
);
}

renderModalBody(): React.Node {
renderModalBody() {
const { requestGroup } = this.state;

if (!requestGroup) {
Expand All @@ -309,8 +321,9 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
Name
<DebouncedInput
delay={500}
// @ts-expect-error -- TSCONVERSION props expand into an input but are difficult to type
type="text"
placeholder={requestGroup.url || 'My Folder'}
placeholder={requestGroup.name || 'My Folder'}
defaultValue={requestGroup.name}
onChange={this._handleNameChange}
/>
Expand Down
42 changes: 10 additions & 32 deletions packages/insomnia-app/app/ui/components/sidebar/sidebar-request-group-row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ interface State {
class SidebarRequestGroupRow extends PureComponent<Props, State> {
state: State = {
dragDirection: 0,
};
}

_requestGroupActionsDropdown: RequestGroupActionsDropdown | null = null;
_expandTag: HTMLDivElement | null = null;
Expand All @@ -63,11 +63,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
}

_handleCollapse() {
const {
requestGroup,
handleSetRequestGroupCollapsed,
isCollapsed,
} = this.props;
const { requestGroup, handleSetRequestGroupCollapsed, isCollapsed } = this.props;
handleSetRequestGroupCollapsed(requestGroup._id, !isCollapsed);
}

Expand Down Expand Up @@ -125,10 +121,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
const button = connectDragSource(
// @ts-expect-error -- TSCONVERSION
connectDropTarget(
<button
onClick={this._handleCollapse}
onContextMenu={this._handleShowActions}
>
<button onClick={this._handleCollapse} onContextMenu={this._handleShowActions}>
<div className="sidebar__clickable">
<i
className={classnames(
Expand All @@ -143,8 +136,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
ref={this._setExpandTagRef}
className={classnames('sidebar__expand', {
'sidebar__expand-hint': isDraggingOver && isCollapsed,
})}
>
})}>
<div className="tag tag--no-bg tag--small">
<span className="tag__inner">OPEN</span>
</div>
Expand All @@ -158,8 +150,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
<div
className={classnames('sidebar__item sidebar__item--big', {
'sidebar__item--active': isActive,
})}
>
})}>
{button}
<div className="sidebar__actions">
<RequestGroupActionsDropdown
Expand All @@ -181,8 +172,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
<ul
className={classnames('sidebar__list', {
'sidebar__list--collapsed': isCollapsed,
})}
>
})}>
{!isCollapsed && React.Children.count(children) > 0 ? (
children
) : (
Expand Down Expand Up @@ -241,8 +231,7 @@ function isOnExpandTag(monitor, component) {

const dragTarget = {
drop(props, monitor, component) {
const movingDoc =
monitor.getItem().requestGroup || monitor.getItem().request;
const movingDoc = monitor.getItem().requestGroup || monitor.getItem().request;
const parentId = props.requestGroup.parentId;
const targetId = props.requestGroup._id;

Expand All @@ -255,10 +244,7 @@ const dragTarget = {

hover(props, monitor, component) {
if (props.isCollapsed && isOnExpandTag(monitor, component)) {
component.props.handleSetRequestGroupCollapsed(
props.requestGroup._id,
false,
);
component.props.handleSetRequestGroupCollapsed(props.requestGroup._id, false);
component.setDragDirection(0);
} else if (isAbove(monitor, component)) {
component.setDragDirection(1);
Expand All @@ -282,13 +268,5 @@ function targetCollect(connect, monitor) {
};
}

const source = DragSource(
'SIDEBAR_REQUEST_ROW',
dragSource,
sourceCollect,
)(SidebarRequestGroupRow);
export default DropTarget(
'SIDEBAR_REQUEST_ROW',
dragTarget,
targetCollect,
)(source);
const source = DragSource('SIDEBAR_REQUEST_ROW', dragSource, sourceCollect)(SidebarRequestGroupRow);
export default DropTarget('SIDEBAR_REQUEST_ROW', dragTarget, targetCollect)(source);
Loading

0 comments on commit ee54114

Please sign in to comment.