From 336ad38cb9f4126de0ddfa5bfdc652876be2c485 Mon Sep 17 00:00:00 2001 From: not-known-person Date: Mon, 2 Oct 2023 08:34:39 -0400 Subject: [PATCH] Improved feat-/#220 --- .../components/Sidebar/Collections/index.js | 32 ++++++++++++++++--- .../ReduxStore/slices/collections/actions.js | 10 +++--- .../ReduxStore/slices/collections/index.js | 21 +++++++++--- 3 files changed, 50 insertions(+), 13 deletions(-) diff --git a/packages/bruno-app/src/components/Sidebar/Collections/index.js b/packages/bruno-app/src/components/Sidebar/Collections/index.js index 57b14a0d7..4d427ee35 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/index.js +++ b/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 (
@@ -20,9 +37,16 @@ const CollectionsBadge = () => { Collections
- + { + collections.length >= 1 && + } +
); 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 b91c7c8fe..856431e9b 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js +++ b/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); 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 8227efc6b..24ad23a8d 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js +++ b/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;