diff --git a/packages/bruno-app/src/components/Sidebar/Collections/index.js b/packages/bruno-app/src/components/Sidebar/Collections/index.js index 496f01456..57b14a0d7 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/index.js @@ -1,21 +1,28 @@ import React, { useState } from 'react'; -import { useSelector } from 'react-redux'; -import { IconSearch, IconFolders } from '@tabler/icons'; +import { useDispatch, useSelector } from 'react-redux'; +import { IconSearch, IconFolders, IconSortAZ } from '@tabler/icons'; import Collection from '../Collections/Collection'; import CreateCollection from '../CreateCollection'; import StyledWrapper from './StyledWrapper'; import CreateOrOpenCollection from './CreateOrOpenCollection'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; +import { sortCollections } from 'providers/ReduxStore/slices/collections/actions'; const CollectionsBadge = () => { + const dispatch = useDispatch() return (
-
- - - - Collections +
+
+ + + + Collections +
+
); @@ -64,12 +71,12 @@ const Collections = () => {
{collections && collections.length ? collections.map((c) => { - return ( - - - - ); - }) + return ( + + + + ); + }) : null}
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js index cfede2a40..9cd588e31 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js @@ -34,6 +34,7 @@ import { renameItem as _renameItem, cloneItem as _cloneItem, deleteItem as _deleteItem, + sortCollections as _sortCollections, saveRequest as _saveRequest, selectEnvironment as _selectEnvironment, createCollection as _createCollection, @@ -353,6 +354,9 @@ 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); diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js index 495989eb1..8227efc6b 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js @@ -70,6 +70,9 @@ 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)) + }, updateLastAction: (state, action) => { const { collectionUid, lastAction } = action.payload; const collection = findCollectionByUid(state.collections, collectionUid); @@ -1141,6 +1144,7 @@ export const { brunoConfigUpdateEvent, renameCollection, removeCollection, + sortCollections, updateLastAction, collectionUnlinkEnvFileEvent, saveEnvironment,