Improved feat-/#220

packages/bruno-app/src/components/Sidebar/Collections/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { IconSearch, IconFolders, IconSortAZ } from '@tabler/icons';
+import { IconSearch, IconFolders, IconArrowsSort, IconSortAscendingLetters, IconSortDescendingLetters } from '@tabler/icons';
 import Collection from '../Collections/Collection';
 import CreateCollection from '../CreateCollection';
 import StyledWrapper from './StyledWrapper';
@@ -11,6 +11,23 @@ import { sortCollections } from 'providers/ReduxStore/slices/collections/actions
 
 const CollectionsBadge = () => {
   const dispatch = useDispatch()
+  const { collections } = useSelector((state) => state.collections);
+  const { collectionSortOrder } = useSelector((state) => state.collections);
+  const sortCollectionOrder = () => {
+    let order;
+    switch (collectionSortOrder) {
+      case 'default':
+        order = 'alphabetical'
+        break;
+      case 'alphabetical':
+        order = 'reverseAlphabetical'
+        break;
+      case 'reverseAlphabetical':
+        order = 'default'
+        break;
+    }
+    dispatch(sortCollections({ order }))
+  }
   return (
     <div className="items-center mt-2 relative">
       <div className='collections-badge flex items-center justify-between px-2'  >
@@ -20,9 +37,16 @@ const CollectionsBadge = () => {
           </span>
           <span>Collections</span>
         </div>
-        <button onClick={() => dispatch(sortCollections())} >
-          <IconSortAZ size={18} strokeWidth={1.5} />
-        </button>
+        {
+          collections.length >= 1 && <button onClick={() => sortCollectionOrder()} >
+            {
+              collectionSortOrder == 'default' ? <IconArrowsSort size={18} strokeWidth={1.5} /> : collectionSortOrder == 'alphabetical' ?
+                <IconSortAscendingLetters size={18} strokeWidth={1.5} /> : <IconSortDescendingLetters size={18} strokeWidth={1.5} />
+            }
+
+          </button>
+        }
+
       </div>
     </div>
   );

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -34,12 +34,12 @@ import {
   renameItem as _renameItem,
   cloneItem as _cloneItem,
   deleteItem as _deleteItem,
-  sortCollections as _sortCollections,
   saveRequest as _saveRequest,
   selectEnvironment as _selectEnvironment,
   createCollection as _createCollection,
   renameCollection as _renameCollection,
   removeCollection as _removeCollection,
+  sortCollections as _sortCollections,
   collectionAddEnvFileEvent as _collectionAddEnvFileEvent
 } from './index';
 
@@ -145,7 +145,10 @@ export const cancelRequest = (cancelTokenUid, item, collection) => (dispatch) =>
     })
     .catch((err) => console.log(err));
 };
-
+export const sortCollections = (order) => (dispatch) => {
+  console.log("working")
+  dispatch(_sortCollections(order))
+}
 export const runCollectionFolder = (collectionUid, folderUid, recursive) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);
@@ -375,9 +378,6 @@ export const deleteItem = (itemUid, collectionUid) => (dispatch, getState) => {
   });
 };
 
-export const sortCollections = () => (dispatch) => {
-  dispatch(_sortCollections());
-};
 export const moveItem = (collectionUid, draggedItemUid, targetItemUid) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -28,7 +28,8 @@ import { getSubdirectoriesFromRoot, getDirectoryName } from 'utils/common/platfo
 const PATH_SEPARATOR = path.sep;
 
 const initialState = {
-  collections: []
+  collections: [],
+  collectionSortOrder: 'default'
 };
 
 export const collectionsSlice = createSlice({
@@ -38,13 +39,14 @@ export const collectionsSlice = createSlice({
     createCollection: (state, action) => {
       const collectionUids = map(state.collections, (c) => c.uid);
       const collection = action.payload;
-
       // last action is used to track the last action performed on the collection
       // this is optional
       // this is used in scenarios where we want to know the last action performed on the collection
       // and take some extra action based on that
       // for example, when a env is created, we want to auto select it the env modal
+      collection.importedAt = new Date().getTime()
       collection.lastAction = null;
+      console.log(collection)
 
       collapseCollection(collection);
       addDepth(collection.items);
@@ -70,8 +72,19 @@ export const collectionsSlice = createSlice({
     removeCollection: (state, action) => {
       state.collections = filter(state.collections, (c) => c.uid !== action.payload.collectionUid);
     },
-    sortCollections: (state) => {
-      state.collections = state.collections.sort((a, b) => a.name.localeCompare(b.name))
+    sortCollections: (state, action) => {
+      state.collectionSortOrder = action.payload.order
+      switch (action.payload.order) {
+        case 'default':
+          state.collections = state.collections.sort((a, b) => a.importedAt - b.importedAt)
+          break;
+        case 'alphabetical':
+          state.collections = state.collections.sort((a, b) => a.name.localeCompare(b.name))
+          break;
+        case 'reverseAlphabetical':
+          state.collections = state.collections.sort((a, b) => b.name.localeCompare(a.name))
+          break;
+      }
     },
     updateLastAction: (state, action) => {
       const { collectionUid, lastAction } = action.payload;