chore: added some todo's for future code cleanup

This commit is contained in:
Anoop M D 2023-10-02 15:38:50 +05:30
parent ce77d08408
commit cbdd56e577
2 changed files with 37 additions and 26 deletions

View File

@ -1,6 +1,12 @@
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { IconSearch, IconFolders, IconArrowsSort, IconSortAscendingLetters, IconSortDescendingLetters } 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';
@ -9,44 +15,47 @@ import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
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 dispatch = useDispatch();
const { collections } = useSelector((state) => state.collections);
const { collectionSortOrder } = useSelector((state) => state.collections);
const sortCollectionOrder = () => {
let order;
switch (collectionSortOrder) {
case 'default':
order = 'alphabetical'
order = 'alphabetical';
break;
case 'alphabetical':
order = 'reverseAlphabetical'
order = 'reverseAlphabetical';
break;
case 'reverseAlphabetical':
order = 'default'
order = 'default';
break;
}
dispatch(sortCollections({ order }))
}
dispatch(sortCollections({ order }));
};
return (
<div className="items-center mt-2 relative">
<div className='collections-badge flex items-center justify-between px-2' >
<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} />
}
{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>
);
@ -95,12 +104,12 @@ const Collections = () => {
<div className="mt-4 flex flex-col overflow-y-auto absolute top-32 bottom-10 left-0 right-0">
{collections && collections.length
? collections.map((c) => {
return (
<DndProvider backend={HTML5Backend} key={c.uid}>
<Collection searchText={searchText} collection={c} key={c.uid} />
</DndProvider>
);
})
return (
<DndProvider backend={HTML5Backend} key={c.uid}>
<Collection searchText={searchText} collection={c} key={c.uid} />
</DndProvider>
);
})
: null}
</div>
</StyledWrapper>

View File

@ -145,10 +145,12 @@ export const cancelRequest = (cancelTokenUid, item, collection) => (dispatch) =>
})
.catch((err) => console.log(err));
};
// todo: this can be directly put inside the collections/index.js file
// the coding convention is to put only actions that need ipc in this file
export const sortCollections = (order) => (dispatch) => {
console.log("working")
dispatch(_sortCollections(order))
}
dispatch(_sortCollections(order));
};
export const runCollectionFolder = (collectionUid, folderUid, recursive) => (dispatch, getState) => {
const state = getState();
const collection = findCollectionByUid(state.collections.collections, collectionUid);