feat: sort requests and folders, resolves #9

This commit is contained in:
Anoop M D 2022-10-02 03:49:04 +05:30
parent b08ed62378
commit 6e926f0ba6
2 changed files with 28 additions and 2 deletions

View File

@ -1,5 +1,6 @@
import React, { useState, useRef, forwardRef, useEffect } from 'react'; import React, { useState, useRef, forwardRef, useEffect } from 'react';
import range from 'lodash/range'; import range from 'lodash/range';
import filter from 'lodash/filter';
import classnames from 'classnames'; import classnames from 'classnames';
import { IconChevronRight, IconDots } from '@tabler/icons'; import { IconChevronRight, IconDots } from '@tabler/icons';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
@ -95,6 +96,9 @@ const CollectionItem = ({item, collection, searchText}) => {
} }
} }
const requestItems = filter(item.items, (i) => isItemARequest(i));
const folderItems = filter(item.items, (i) => isItemAFolder(i));
return ( return (
<StyledWrapper className={className}> <StyledWrapper className={className}>
{renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)}/>} {renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)}/>}
@ -183,7 +187,15 @@ const CollectionItem = ({item, collection, searchText}) => {
{!itemIsCollapsed ? ( {!itemIsCollapsed ? (
<div> <div>
{item.items && item.items.length ? item.items.map((i) => { {requestItems && requestItems.length ? requestItems.map((i) => {
return <CollectionItem
key={i.uid}
item={i}
collection={collection}
searchText={searchText}
/>
}) : null}
{folderItems && folderItems.length ? folderItems.map((i) => {
return <CollectionItem return <CollectionItem
key={i.uid} key={i.uid}
item={i} item={i}

View File

@ -1,5 +1,6 @@
import React, { useState, forwardRef, useRef, useEffect } from 'react'; import React, { useState, forwardRef, useRef, useEffect } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import filter from 'lodash/filter';
import { IconChevronRight, IconDots } from '@tabler/icons'; import { IconChevronRight, IconDots } from '@tabler/icons';
import Dropdown from 'components/Dropdown'; import Dropdown from 'components/Dropdown';
import { collectionClicked, removeCollection } from 'providers/ReduxStore/slices/collections'; import { collectionClicked, removeCollection } from 'providers/ReduxStore/slices/collections';
@ -8,6 +9,7 @@ import NewRequest from 'components/Sidebar/NewRequest';
import NewFolder from 'components/Sidebar/NewFolder'; import NewFolder from 'components/Sidebar/NewFolder';
import CollectionItem from './CollectionItem'; import CollectionItem from './CollectionItem';
import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search'; import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
import { isItemAFolder, isItemARequest } from 'utils/collections';
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
@ -49,6 +51,9 @@ const Collection = ({collection, searchText}) => {
} }
} }
const requestItems = filter(collection.items, (i) => isItemARequest(i));
const folderItems = filter(collection.items, (i) => isItemAFolder(i));
return ( return (
<StyledWrapper className="flex flex-col"> <StyledWrapper className="flex flex-col">
{showNewRequestModal && <NewRequest collection={collection} onClose={() => setShowNewRequestModal(false)}/>} {showNewRequestModal && <NewRequest collection={collection} onClose={() => setShowNewRequestModal(false)}/>}
@ -89,7 +94,16 @@ const Collection = ({collection, searchText}) => {
<div> <div>
{!collectionIsCollapsed ? ( {!collectionIsCollapsed ? (
<div> <div>
{collection.items && collection.items.length ? collection.items.map((i) => { {requestItems && requestItems.length ? requestItems.map((i) => {
return <CollectionItem
key={i.uid}
item={i}
collection={collection}
searchText={searchText}
/>
}) : null}
{folderItems && folderItems.length ? folderItems.map((i) => {
return <CollectionItem return <CollectionItem
key={i.uid} key={i.uid}
item={i} item={i}