Skip to content

Commit 8cf491a

Browse files
gschiergschier
authored
Much better sidebar sorting (#308)
1 parent 4e61c69 commit 8cf491a

File tree

8 files changed

+62
-138
lines changed

8 files changed

+62
-138
lines changed

Diff for: ‎app/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"name": "insomnia",
4-
"version": "5.3.0",
4+
"version": "5.3.1",
55
"productName": "Insomnia",
66
"longName": "Insomnia REST Client",
77
"description": "Debug APIs like a human, not a robot",

Diff for: ‎app/ui/components/sidebar/sidebar-children.js

+4-7
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ class SidebarChildren extends PureComponent {
1111
handleDuplicateRequest,
1212
handleDuplicateRequestGroup,
1313
handleGenerateCode,
14-
moveRequest,
15-
moveRequestGroup,
14+
moveDoc,
1615
handleActivateRequest,
1716
activeRequest,
1817
workspace
@@ -29,7 +28,7 @@ class SidebarChildren extends PureComponent {
2928
return (
3029
<SidebarRequestRow
3130
key={child.doc._id}
32-
moveRequest={moveRequest}
31+
moveDoc={moveDoc}
3332
handleActivateRequest={handleActivateRequest}
3433
handleDuplicateRequest={handleDuplicateRequest}
3534
handleGenerateCode={handleGenerateCode}
@@ -66,8 +65,7 @@ class SidebarChildren extends PureComponent {
6665
handleActivateRequest={handleActivateRequest}
6766
key={requestGroup._id}
6867
isActive={isActive}
69-
moveRequestGroup={moveRequestGroup}
70-
moveRequest={moveRequest}
68+
moveDoc={moveDoc}
7169
handleSetRequestGroupCollapsed={handleSetRequestGroupCollapsed}
7270
handleDuplicateRequestGroup={handleDuplicateRequestGroup}
7371
isCollapsed={child.collapsed}
@@ -102,8 +100,7 @@ SidebarChildren.propTypes = {
102100
handleDuplicateRequest: PropTypes.func.isRequired,
103101
handleDuplicateRequestGroup: PropTypes.func.isRequired,
104102
handleGenerateCode: PropTypes.func.isRequired,
105-
moveRequest: PropTypes.func.isRequired,
106-
moveRequestGroup: PropTypes.func.isRequired,
103+
moveDoc: PropTypes.func.isRequired,
107104
childObjects: PropTypes.arrayOf(PropTypes.object).isRequired,
108105
workspace: PropTypes.object.isRequired,
109106

Diff for: ‎app/ui/components/sidebar/sidebar-request-group-row.js

+22-19
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ class SidebarRequestGroupRow extends PureComponent {
4242
const {
4343
connectDragSource,
4444
connectDropTarget,
45-
moveRequest,
45+
moveDoc,
4646
children,
4747
requestGroup,
4848
isCollapsed,
@@ -100,18 +100,18 @@ class SidebarRequestGroupRow extends PureComponent {
100100

101101
<ul className={classnames('sidebar__list', {'sidebar__list--collapsed': isCollapsed})}>
102102
{children.length > 0 ? children : (
103-
<SidebarRequestRow
104-
handleActivateRequest={misc.nullFn}
105-
handleDuplicateRequest={misc.nullFn}
106-
handleGenerateCode={misc.nullFn}
107-
moveRequest={moveRequest}
108-
isActive={false}
109-
request={null}
110-
requestGroup={requestGroup}
111-
workspace={workspace}
112-
requestCreate={handleCreateRequest}
113-
/>
114-
)}
103+
<SidebarRequestRow
104+
handleActivateRequest={misc.nullFn}
105+
handleDuplicateRequest={misc.nullFn}
106+
handleGenerateCode={misc.nullFn}
107+
moveDoc={moveDoc}
108+
isActive={false}
109+
request={null}
110+
requestGroup={requestGroup}
111+
workspace={workspace}
112+
requestCreate={handleCreateRequest}
113+
/>
114+
)}
115115
</ul>
116116
</li>
117117
);
@@ -122,8 +122,7 @@ SidebarRequestGroupRow.propTypes = {
122122
// Functions
123123
handleSetRequestGroupCollapsed: PropTypes.func.isRequired,
124124
handleDuplicateRequestGroup: PropTypes.func.isRequired,
125-
moveRequestGroup: PropTypes.func.isRequired,
126-
moveRequest: PropTypes.func.isRequired,
125+
moveDoc: PropTypes.func.isRequired,
127126
handleActivateRequest: PropTypes.func.isRequired,
128127
handleCreateRequest: PropTypes.func.isRequired,
129128
handleCreateRequestGroup: PropTypes.func.isRequired,
@@ -167,10 +166,14 @@ function isAbove (monitor, component) {
167166

168167
const dragTarget = {
169168
drop (props, monitor, component) {
169+
const movingDoc = monitor.getItem().requestGroup || monitor.getItem().request;
170+
const parentId = props.requestGroup.parentId;
171+
const targetId = props.requestGroup._id;
172+
170173
if (isAbove(monitor, component)) {
171-
props.moveRequestGroup(monitor.getItem().requestGroup, props.requestGroup, 1);
174+
props.moveDoc(movingDoc, parentId, targetId, 1);
172175
} else {
173-
props.moveRequestGroup(monitor.getItem().requestGroup, props.requestGroup, -1);
176+
props.moveDoc(movingDoc, parentId, targetId, -1);
174177
}
175178
},
176179
hover (props, monitor, component) {
@@ -196,5 +199,5 @@ function targetCollect (connect, monitor) {
196199
};
197200
}
198201

199-
const source = DragSource('SIDEBAR_REQUEST_GROUP_ROW', dragSource, sourceCollect)(SidebarRequestGroupRow);
200-
export default DropTarget('SIDEBAR_REQUEST_GROUP_ROW', dragTarget, targetCollect)(source);
202+
const source = DragSource('SIDEBAR_REQUEST_ROW', dragSource, sourceCollect)(SidebarRequestGroupRow);
203+
export default DropTarget('SIDEBAR_REQUEST_ROW', dragTarget, targetCollect)(source);

Diff for: ‎app/ui/components/sidebar/sidebar-request-row.js

+6-9
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ SidebarRequestRow.propTypes = {
163163
handleDuplicateRequest: PropTypes.func.isRequired,
164164
handleGenerateCode: PropTypes.func.isRequired,
165165
requestCreate: PropTypes.func.isRequired,
166-
moveRequest: PropTypes.func.isRequired,
166+
moveDoc: PropTypes.func.isRequired,
167167

168168
// Other
169169
isActive: PropTypes.bool.isRequired,
@@ -197,18 +197,15 @@ function isAbove (monitor, component) {
197197

198198
const dragTarget = {
199199
drop (props, monitor, component) {
200-
const {request} = monitor.getItem();
201-
const targetRequest = props.request;
200+
const movingDoc = monitor.getItem().requestGroup || monitor.getItem().request;
202201

203-
const {requestGroup} = props;
204-
const requestGroupId = requestGroup ? requestGroup._id : null;
205-
const parentId = targetRequest ? targetRequest.parentId : requestGroupId;
206-
const targetId = targetRequest ? targetRequest._id : null;
202+
const parentId = props.requestGroup ? props.requestGroup._id : props.request.parentId;
203+
const targetId = props.request ? props.request._id : null;
207204

208205
if (isAbove(monitor, component)) {
209-
props.moveRequest(request, parentId, targetId, 1);
206+
props.moveDoc(movingDoc, parentId, targetId, 1);
210207
} else {
211-
props.moveRequest(request, parentId, targetId, -1);
208+
props.moveDoc(movingDoc, parentId, targetId, -1);
212209
}
213210
},
214211
hover (props, monitor, component) {

Diff for: ‎app/ui/components/sidebar/sidebar.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@ class Sidebar extends PureComponent {
4747
handleGenerateCode,
4848
handleCreateRequestGroup,
4949
handleSetRequestGroupCollapsed,
50-
moveRequest,
51-
moveRequestGroup,
50+
moveDoc,
5251
handleActivateRequest,
5352
activeRequest
5453
} = this.props;
@@ -99,8 +98,7 @@ class Sidebar extends PureComponent {
9998
handleDuplicateRequest={handleDuplicateRequest}
10099
handleDuplicateRequestGroup={handleDuplicateRequestGroup}
101100
handleGenerateCode={handleGenerateCode}
102-
moveRequest={moveRequest}
103-
moveRequestGroup={moveRequestGroup}
101+
moveDoc={moveDoc}
104102
workspace={workspace}
105103
activeRequest={activeRequest}
106104
/>
@@ -124,8 +122,7 @@ Sidebar.propTypes = {
124122
handleExportFile: PropTypes.func.isRequired,
125123
handleSetActiveWorkspace: PropTypes.func.isRequired,
126124
handleSetActiveEnvironment: PropTypes.func.isRequired,
127-
moveRequest: PropTypes.func.isRequired,
128-
moveRequestGroup: PropTypes.func.isRequired,
125+
moveDoc: PropTypes.func.isRequired,
129126
handleCreateRequest: PropTypes.func.isRequired,
130127
handleCreateRequestGroup: PropTypes.func.isRequired,
131128
handleDuplicateRequest: PropTypes.func.isRequired,

Diff for: ‎app/ui/components/wrapper.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -252,8 +252,7 @@ class Wrapper extends PureComponent {
252252
handleDuplicateRequest,
253253
handleDuplicateRequestGroup,
254254
handleExportFile,
255-
handleMoveRequest,
256-
handleMoveRequestGroup,
255+
handleMoveDoc,
257256
handleResetDragPaneHorizontal,
258257
handleResetDragPaneVertical,
259258
handleResetDragSidebar,
@@ -312,8 +311,7 @@ class Wrapper extends PureComponent {
312311
handleGenerateCode={handleGenerateCode}
313312
handleDuplicateRequestGroup={handleDuplicateRequestGroup}
314313
handleSetActiveEnvironment={handleSetActiveEnvironment}
315-
moveRequest={handleMoveRequest}
316-
moveRequestGroup={handleMoveRequestGroup}
314+
moveDoc={handleMoveDoc}
317315
handleSetRequestGroupCollapsed={handleSetRequestGroupCollapsed}
318316
activeRequest={activeRequest}
319317
activeEnvironment={activeEnvironment}
@@ -523,8 +521,7 @@ Wrapper.propTypes = {
523521
handleExportFile: PropTypes.func.isRequired,
524522
handleSetActiveWorkspace: PropTypes.func.isRequired,
525523
handleSetActiveEnvironment: PropTypes.func.isRequired,
526-
handleMoveRequest: PropTypes.func.isRequired,
527-
handleMoveRequestGroup: PropTypes.func.isRequired,
524+
handleMoveDoc: PropTypes.func.isRequired,
528525
handleCreateRequest: PropTypes.func.isRequired,
529526
handleDuplicateRequest: PropTypes.func.isRequired,
530527
handleDuplicateRequestGroup: PropTypes.func.isRequired,

Diff for: ‎app/ui/containers/app.js

+23-79
Original file line numberDiff line numberDiff line change
@@ -928,104 +928,50 @@ function mapDispatchToProps (dispatch) {
928928
handleImportUriToWorkspace: global.importUri,
929929
handleCommand: global.newCommand,
930930
handleExportFile: global.exportFile,
931-
handleMoveRequest: _moveRequest,
932-
handleMoveRequestGroup: _moveRequestGroup
931+
handleMoveDoc: _moveDoc
933932
};
934933
}
935934

936-
async function _moveRequestGroup (requestGroupToMove, requestGroupToTarget, targetOffset) {
937-
// Oh God, this function is awful...
938-
939-
if (requestGroupToMove._id === requestGroupToTarget._id) {
940-
// Nothing to do
935+
async function _moveDoc (docToMove, parentId, targetId, targetOffset) {
936+
if (docToMove._id === targetId) {
937+
// Nothing to do. We are in the same spot as we started
941938
return;
942939
}
943940

944-
// NOTE: using requestToTarget's parentId so we can switch parents!
945-
let requestGroups = await models.requestGroup.findByParentId(requestGroupToTarget.parentId);
946-
requestGroups = requestGroups.sort((a, b) => a.metaSortKey < b.metaSortKey ? -1 : 1);
947-
948-
// Find the index of request B so we can re-order and save everything
949-
for (let i = 0; i < requestGroups.length; i++) {
950-
const request = requestGroups[i];
951-
952-
if (request._id === requestGroupToTarget._id) {
953-
let before, after;
954-
if (targetOffset < 0) {
955-
// We're moving to below
956-
before = requestGroups[i];
957-
after = requestGroups[i + 1];
958-
} else {
959-
// We're moving to above
960-
before = requestGroups[i - 1];
961-
after = requestGroups[i];
962-
}
963-
964-
const beforeKey = before ? before.metaSortKey : requestGroups[0].metaSortKey - 100;
965-
const afterKey = after ? after.metaSortKey : requestGroups[requestGroups.length - 1].metaSortKey + 100;
966-
967-
if (Math.abs(afterKey - beforeKey) < 0.000001) {
968-
// If sort keys get too close together, we need to redistribute the list. This is
969-
// not performant at all (need to update all siblings in DB), but it is extremely rare
970-
// anyway
971-
console.log(`-- Recreating Sort Keys ${beforeKey} ${afterKey} --`);
972-
973-
db.bufferChanges(300);
974-
requestGroups.map((r, i) => {
975-
models.requestGroup.update(r, {
976-
metaSortKey: i * 100,
977-
parentId: requestGroupToTarget.parentId
978-
});
979-
});
980-
} else {
981-
const metaSortKey = afterKey - ((afterKey - beforeKey) / 2);
982-
models.requestGroup.update(requestGroupToMove, {
983-
metaSortKey,
984-
parentId: requestGroupToTarget.parentId
985-
});
986-
}
987-
988-
break;
989-
}
990-
}
991-
}
992-
993-
async function _moveRequest (requestToMove, parentId, targetId, targetOffset) {
994-
// Oh God, this function is awful...
995-
996-
if (requestToMove._id === targetId) {
997-
// Nothing to do. We are in the same spot as we started
998-
return;
941+
function __updateDoc (doc, patch) {
942+
models.getModel(docToMove.type).update(doc, patch);
999943
}
1000944

1001945
if (targetId === null) {
1002946
// We are moving to an empty area. No sorting required
1003-
models.request.update(requestToMove, {parentId});
947+
await __updateDoc(docToMove, {parentId});
1004948
return;
1005949
}
1006950

1007951
// NOTE: using requestToTarget's parentId so we can switch parents!
1008-
let requests = await models.request.findByParentId(parentId);
1009-
requests = requests.sort((a, b) => a.metaSortKey < b.metaSortKey ? -1 : 1);
952+
let docs = [
953+
...await models.request.findByParentId(parentId),
954+
...await models.requestGroup.findByParentId(parentId)
955+
].sort((a, b) => a.metaSortKey < b.metaSortKey ? -1 : 1);
1010956

1011-
// Find the index of request B so we can re-order and save everything
1012-
for (let i = 0; i < requests.length; i++) {
1013-
const request = requests[i];
957+
// Find the index of doc B so we can re-order and save everything
958+
for (let i = 0; i < docs.length; i++) {
959+
const doc = docs[i];
1014960

1015-
if (request._id === targetId) {
961+
if (doc._id === targetId) {
1016962
let before, after;
1017963
if (targetOffset < 0) {
1018964
// We're moving to below
1019-
before = requests[i];
1020-
after = requests[i + 1];
965+
before = docs[i];
966+
after = docs[i + 1];
1021967
} else {
1022968
// We're moving to above
1023-
before = requests[i - 1];
1024-
after = requests[i];
969+
before = docs[i - 1];
970+
after = docs[i];
1025971
}
1026972

1027-
const beforeKey = before ? before.metaSortKey : requests[0].metaSortKey - 100;
1028-
const afterKey = after ? after.metaSortKey : requests[requests.length - 1].metaSortKey + 100;
973+
const beforeKey = before ? before.metaSortKey : docs[0].metaSortKey - 100;
974+
const afterKey = after ? after.metaSortKey : docs[docs.length - 1].metaSortKey + 100;
1029975

1030976
if (Math.abs(afterKey - beforeKey) < 0.000001) {
1031977
// If sort keys get too close together, we need to redistribute the list. This is
@@ -1034,12 +980,10 @@ async function _moveRequest (requestToMove, parentId, targetId, targetOffset) {
1034980
console.log(`-- Recreating Sort Keys ${beforeKey} ${afterKey} --`);
1035981

1036982
db.bufferChanges(300);
1037-
requests.map((r, i) => {
1038-
models.request.update(r, {metaSortKey: i * 100, parentId});
1039-
});
983+
docs.map((r, i) => __updateDoc(r, {metaSortKey: i * 100, parentId}));
1040984
} else {
1041985
const metaSortKey = afterKey - ((afterKey - beforeKey) / 2);
1042-
models.request.update(requestToMove, {metaSortKey, parentId});
986+
__updateDoc(docToMove, {metaSortKey, parentId});
1043987
}
1044988

1045989
break;

Diff for: ‎app/ui/redux/selectors.js

-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {createSelector} from 'reselect';
2-
import * as models from '../../models/index';
32

43
// ~~~~~~~~~ //
54
// Selectors //
@@ -67,16 +66,6 @@ export const selectSidebarChildren = createSelector(
6766
const children = requestsAndRequestGroups
6867
.filter(e => e.parentId === parentId)
6968
.sort((a, b) => {
70-
// Always sort folders above
71-
if (a.type === models.requestGroup.type && b.type !== models.requestGroup.type) {
72-
return -1;
73-
}
74-
75-
// Always sort folders above
76-
if (b.type === models.requestGroup.type && a.type !== models.requestGroup.type) {
77-
return 1;
78-
}
79-
8069
if (a.metaSortKey === b.metaSortKey) {
8170
return a._id > b._id ? -1 : 1;
8271
} else {

0 commit comments

Comments
 (0)