maintain folder sort when app is re-opened

Kong · May 4, 2024 · 96768e4 · 96768e4
1 parent bcf5504
commit 96768e4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/packages/insomnia/src/common/constants.ts b/packages/insomnia/src/common/constants.ts
@@ -348,6 +348,36 @@ export const sortOrderName: Record<SortOrder, string> = {
   [SORT_TYPE_ASC]: 'Requests First',
 };
 
+export type CollectionSortOrder =
+  | 'name-asc'
+  | 'name-desc'
+  | 'created-asc'
+  | 'created-desc'
+  | 'http-method'
+  | 'type-desc'
+  | 'type-asc'
+  | 'type-manual';
+export const COLLECTION_SORT_ORDERS = [
+  SORT_TYPE_MANUAL,
+  SORT_NAME_ASC,
+  SORT_NAME_DESC,
+  SORT_CREATED_ASC,
+  SORT_CREATED_DESC,
+  SORT_HTTP_METHOD,
+  SORT_TYPE_DESC,
+  SORT_TYPE_ASC,
+] as const;
+export const collectionSortOrderName: Record<CollectionSortOrder, string> = {
+  [SORT_TYPE_MANUAL]: 'Manual',
+  [SORT_NAME_ASC]: 'Name Ascending (A-Z)',
+  [SORT_NAME_DESC]: 'Name Descending (Z-A)',
+  [SORT_CREATED_ASC]: 'Oldest First',
+  [SORT_CREATED_DESC]: 'Newest First',
+  [SORT_HTTP_METHOD]: 'HTTP Method',
+  [SORT_TYPE_DESC]: 'Folders First',
+  [SORT_TYPE_ASC]: 'Requests First',
+};
+
 export type DashboardSortOrder =
   | 'name-asc'
   | 'name-desc'

diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx
@@ -32,11 +32,13 @@ import {
   useRouteLoaderData,
   useSearchParams,
 } from 'react-router-dom';
+import { useLocalStorage } from 'react-use';
 
-import { DEFAULT_SIDEBAR_SIZE, SORT_ORDERS, SortOrder, sortOrderName } from '../../common/constants';
+import { DEFAULT_SIDEBAR_SIZE, CollectionSortOrder, collectionSortOrderName, SORT_NAME_ASC, SORT_ORDERS } from '../../common/constants';
 import { ChangeBufferEvent, database as db } from '../../common/database';
 import { generateId } from '../../common/misc';
 import { PlatformKeyCombinations } from '../../common/settings';
+import { sortMethodMap } from '../../common/sorting';
 import type { GrpcMethodInfo } from '../../main/ipc/grpc';
 import * as models from '../../models';
 import { Environment } from '../../models/environment';
@@ -435,7 +437,7 @@ export const Debug: FC = () => {
   const setActiveEnvironmentFetcher = useFetcher();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const sortOrder = searchParams.get('sortOrder') as SortOrder || 'type-manual';
+  const [sortOrder, setSortOrder] = useLocalStorage(`${projectId}:collection-sort-order`, SORT_NAME_ASC);
   const { hotKeyRegistry } = settings;
 
   const createRequest = ({ requestType, parentId, req }: { requestType: CreateRequestType; parentId: string; req?: Partial<Request> }) =>
@@ -649,7 +651,7 @@ export const Debug: FC = () => {
     ...environment,
   }));
 
-  const visibleCollection = collection.filter(item => !item.hidden);
+  const visibleCollection = collection.filter(item => !item.hidden).sort((a, b) => sortMethodMap[sortOrder as CollectionSortOrder](a.doc, b.doc));;
 
   const parentRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer<HTMLDivElement, Element>({
@@ -867,12 +869,7 @@ export const Debug: FC = () => {
                 aria-label="Sort order"
                 className="h-full aspect-square"
                 selectedKey={sortOrder}
-                onSelectionChange={order =>
-                  setSearchParams({
-                    ...Object.fromEntries(searchParams.entries()),
-                    sortOrder: order.toString(),
-                  })
-                }
+                onSelectionChange={order => setSortOrder(order as CollectionSortOrder)}
               >
                 <Button
                   aria-label="Select sort order"
@@ -885,7 +882,7 @@ export const Debug: FC = () => {
                     items={SORT_ORDERS.map(order => {
                       return {
                         id: order,
-                        name: sortOrderName[order],
+                        name: collectionSortOrderName[order],
                       };
                     })}
                     className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"