refactor: move CollectionsBadge to a dedicaced folder

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

@@ -0,0 +1,72 @@
+import {
+  IconArrowsSort,
+  IconFolders,
+  IconSortAscendingLetters,
+  IconSortDescendingLetters,
+  IconX,
+} from '@tabler/icons';
+import { sortCollections } from 'providers/ReduxStore/slices/collections/index';
+import { useDispatch, useSelector } from 'react-redux';
+
+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 }));
+  };
+
+  let sortIcon;
+  if (collectionSortOrder === 'default') {
+    sortIcon = <IconArrowsSort size={18} strokeWidth={1.5} />;
+  } else if (collectionSortOrder === 'alphabetical') {
+    sortIcon = <IconSortAscendingLetters size={18} strokeWidth={1.5} />;
+  } else {
+    sortIcon = <IconSortDescendingLetters size={18} strokeWidth={1.5} />;
+  }
+
+  return (
+    <div className="items-center mt-2 relative">
+      <div className="collections-badge flex items-center justify-between px-2">
+        <div className="flex items-center  py-1 select-none">
+          <span className="mr-2">
+            <IconFolders size={18} strokeWidth={1.5} />
+          </span>
+          <span>Collections</span>
+        </div>
+        {collections.length >= 1 && (
+          <div className="flex items-center">
+            <button className="me-1" onClick={() => sortCollectionOrder()}>
+              {sortIcon}
+            </button>
+            <button
+              onClick={() => {
+                alert('toto');
+              }}
+            >
+              <IconX
+                size={16}
+                strokeWidth={1.5}
+                className="cursor-pointer"
+              />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CollectionsBadge;

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

@@ -1,64 +1,14 @@
-import React, { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import {
   IconSearch,
-  IconFolders,
-  IconArrowsSort,
-  IconSortAscendingLetters,
-  IconSortDescendingLetters,
-  IconX
+  IconX,
 } from '@tabler/icons';
-import Collection from './Collection';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import CreateCollection from '../CreateCollection';
-import StyledWrapper from './StyledWrapper';
+import Collection from './Collection';
+import CollectionsBadge from './CollectionsBadge/index';
 import CreateOrOpenCollection from './CreateOrOpenCollection';
-import { sortCollections } from 'providers/ReduxStore/slices/collections/actions';
-
-// todo: move this to a separate folder
-// the coding convention is to keep all the components in a folder named after the component
-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">
-        <div className="flex items-center  py-1 select-none">
-          <span className="mr-2">
-            <IconFolders size={18} strokeWidth={1.5} />
-          </span>
-          <span>Collections</span>
-        </div>
-        {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>
-  );
-};
+import StyledWrapper from './StyledWrapper';
 
 const Collections = () => {
   const [searchText, setSearchText] = useState('');