filter and sort

src/components-shared/Dropdowns/ColorDropdown.jsx

@@ -7,10 +7,10 @@ import useOutsideClick from '../../utils/useOutsideClick';
 
 export const ColorDropdown = ({
  btnRef,
- cardColor,
  isOpen,
  onClose,
  onUpdateColor,
+ selectedColor,
 }) => {
  const dropdownRef = useRef();
 
@@ -21,7 +21,7 @@ export const ColorDropdown = ({
  let colorList = [];
  Object.values(CARD_COLOR_KEYS).forEach(color => {
  let className = 'item ' + color;
- if (cardColor === color) {
+ if (selectedColor === color) {
  className += ' selected';
  }
  colorList = [

src/components/Card/LibraryTitle.jsx

@@ -78,12 +78,11 @@ const LibraryTitle = ({
  <img src={isLightColor ? OpenColorBlackIcon : OpenColorWhiteIcon} />
  </button>
  <ColorDropdown
- cardId={cardId}
  btnRef={colorDropdownBtnRef}
- cardColor={color}
  isOpen={isColorDropdownOpen}
  onClose={closeColorDropdown}
  onUpdateColor={updateColor}
+ selectedColor={color}
  />
  <button
  className='dropdown-btn'

src/components/Card/Title.jsx

@@ -78,12 +78,11 @@ const Title = ({
  <img src={isLightColor ? OpenColorBlackIcon : OpenColorWhiteIcon} />
  </button>
  <ColorDropdown
- cardId={cardId}
  btnRef={colorDropdownBtnRef}
- cardColor={color}
  isOpen={isColorDropdownOpen}
  onClose={closeColorDropdown}
  onUpdateColor={updateColor}
+ selectedColor={color}
  />
  <button
  className='dropdown-btn'

src/components/Library/FilterBar.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import ColorDropdown from '../../components-shared/Dropdowns/ColorDropdown';
+import { FILTER_OPTIONS, useColorDropdownHooks } from './hooks';
+import './index.scss';
+import '../../styles/colors.scss';
+import { CARD_COLOR_KEYS } from '../../styles/colors';
+
+const FilterBar = ({
+ filterOption,
+ setFilterOption,
+ filterColor,
+ setFilterColor,
+}) => {
+ const {
+ colorDropdownBtnRef,
+ isColorDropdownOpen,
+ openColorDropdown,
+ closeColorDropdown,
+ } = useColorDropdownHooks();
+
+ return (
+ <div className='selection-row'>
+ <div className='title'>
+ <span>Filter</span>
+ </div>
+ <div className='selections'>
+ <button
+ className={`option ${filterOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
+ onClick={() => setFilterOption(FILTER_OPTIONS.thisTab)}
+ >
+ <span>Cards in this Tab</span>
+ </button>
+ <button
+ className={`option ${filterOption === FILTER_OPTIONS.all ? 'selected' : null}`}
+ onClick={() => setFilterOption(FILTER_OPTIONS.all)}
+ >
+ <span>All Cards</span>
+ </button>
+ <div className='color-selection'>
+ <button
+ className={`option ${filterOption === FILTER_OPTIONS.color ? 'selected' : null}`}
+ onClick={() => setFilterOption(FILTER_OPTIONS.color)}
+ >
+ <span>Color</span>
+ <button className={`color-display ${CARD_COLOR_KEYS[filterColor] ?? '#F4F4F4'}`} onClick={() => openColorDropdown()} ref={colorDropdownBtnRef} />
+ </button>
+ <ColorDropdown
+ btnRef={colorDropdownBtnRef}
+ selectedColor={filterColor}
+ isOpen={isColorDropdownOpen}
+ onClose={closeColorDropdown}
+ onUpdateColor={setFilterColor}
+ />
+ </div>
+ <button
+ className={`option ${filterOption === FILTER_OPTIONS.unsorted ? 'selected' : null}`}
+ onClick={() => setFilterOption(FILTER_OPTIONS.unsorted)}
+ >
+ <span>Unsorted</span>
+ </button>
+ </div>
+ </div>
+ );
+};
+
+export default FilterBar;

src/components/Library/SortBar.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { SORT_OPTIONS } from './hooks';
+
+import './index.scss';
+
+const SortBar = ({
+ sortOption,
+ setSortOption,
+}) => {
+
+ return (
+ <div className='selection-row'>
+ <div className='title'>
+ <span>Sort</span>
+ </div>
+ <div className='selections'>
+ <button
+ className={`option ${sortOption === SORT_OPTIONS.abc ? 'selected' : null}`}
+ onClick={() => setSortOption(SORT_OPTIONS.abc)}
+ >
+ <span>ABC</span>
+ </button>
+ <button
+ className={`option ${sortOption === SORT_OPTIONS.zxy ? 'selected' : null}`}
+ onClick={() => setSortOption(SORT_OPTIONS.zxy)}
+ >
+ <span>ZXY</span>
+ </button>
+ <button
+ className={`option ${sortOption === SORT_OPTIONS.newest ? 'selected' : null}`}
+ onClick={() => setSortOption(SORT_OPTIONS.newest)}
+ >
+ <span>Newest</span>
+ </button>
+ <button
+ className={`option ${sortOption === SORT_OPTIONS.oldest ? 'selected' : null}`}
+ onClick={() => setSortOption(SORT_OPTIONS.oldest)}
+ >
+ <span>Oldest</span>
+ </button>
+ </div>
+ </div>
+ );
+};
+
+export default SortBar;

src/components/Library/hooks.js

@@ -1,16 +1,17 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { useSelector } from 'react-redux';
+import { CARD_COLOR_KEYS } from '../../styles/colors';
 
 export const FILTER_OPTIONS = {
  all: 'all',
+ color: 'color',
  thisTab: 'thisTab',
  unsorted: 'unsorted',
 };
 
 export const SORT_OPTIONS = {
  abc: 'abc',
  zxy: 'zxy',
- color: 'color',
  newest: 'newest',
  oldest: 'oldest',
 };
@@ -20,50 +21,109 @@ export const VIEW_OPTIONS = {
  expanded: 'expanded',
 };
 
+const hasSearch = (card, search) => {
+ const title = card?.title ?? '';
+ if (title.toLowerCase().includes(search.toLowerCase())) {
+ return true;
+ }
+ const text = card?.content?.text ?? '';
+ if (text.toLowerCase().includes(search.toLowerCase())) {
+ return true;
+ }
+ return false;
+};
+
+const hasFilter = (card, filter, color, tab, allTabs) => {
+ switch(filter) {
+ case FILTER_OPTIONS.thisTab:
+ return !!card?.views?.[tab];
+ case FILTER_OPTIONS.all:
+ return true;
+ case FILTER_OPTIONS.color:
+ return CARD_COLOR_KEYS[color] === card?.color;
+ case FILTER_OPTIONS.unsorted:
+ const cardTabs = Object.keys(card?.views);
+ const intersection = allTabs.filter(tab => cardTabs.includes(tab));
+ return intersection.length === 0;
+ }
+ return false;
+};
+
+const sortCards = (cards, sort, cardData) => {
+ switch(sort) {
+ case SORT_OPTIONS.abc:
+ return cards.sort((a, b) => {
+ const aTitle = cardData[a]?.title ?? '';
+ const bTitle = cardData[b]?.title ?? '';
+ return aTitle.localeCompare(bTitle);
+ });
+ case SORT_OPTIONS.zxy:
+ return cards.sort((a, b) => {
+ const aTitle = cardData[a]?.title ?? '';
+ const bTitle = cardData[b]?.title ?? '';
+ return bTitle.localeCompare(aTitle);
+
+ });
+ case SORT_OPTIONS.newest:
+ return cards.sort((a, b) => {
+ const aTime = cardData[a]?.editedOn ?? 0;
+ const bTime = cardData[b]?.editedOn ?? 0;
+ return bTime - aTime;
+ });
+ case SORT_OPTIONS.oldest:
+ return cards.sort((a, b) => {
+ const aTime = cardData[a]?.editedOn ?? 0;
+ const bTime = cardData[b]?.editedOn ?? 0;
+ return aTime - bTime;
+ });
+ }
+};
+
 export const useLibraryHooks = () => {
  const activeTab = useSelector(state => state.project.present.activeViewId);
  const tabOrder = useSelector(state => state.project.present.viewOrder);
  const cardCollection = useSelector(state => state.project.present.cards);
 
- const [isOpen, setIsOpen] = useState(false);
- const [searchString, setSearchString] = useState('');
- const [filterOption, setFilterOption] = useState(FILTER_OPTIONS.all);
- const [sortOption, setSortOption] = useState(SORT_OPTIONS.abc);
- const [viewOption, setViewOption] = useState(VIEW_OPTIONS.condensed);
+ const [ isOpen, setIsOpen ] = useState(false);
+ const [ searchString, setSearchString ] = useState('');
+ const [ filterOption, setFilterOption ] = useState(FILTER_OPTIONS.all);
+ const [ filterColor, setFilterColor ] = useState(null);
+ const [ sortOption, setSortOption ] = useState(SORT_OPTIONS.abc);
+ const [ viewOption, setViewOption ] = useState(VIEW_OPTIONS.condensed);
 
  let libraryCards = [];
- const search = searchString.toLowerCase();
  for (let id in cardCollection) {
- const title = cardCollection[id].title ?? '';
- const text = cardCollection[id].content?.text ?? '';
- if (title.toLowerCase().includes(search) || text.toLowerCase().includes(search)) {
- switch (filterOption) {
- case FILTER_OPTIONS.all:
- libraryCards = [ ...libraryCards, id ];
- break;
- case FILTER_OPTIONS.thisTab:
- if (cardCollection[id].views?.[activeTab]) {
- libraryCards = [ ...libraryCards, id ];
- }
- break;
- case FILTER_OPTIONS.unsorted:
- const tabsOfCard = Object.keys(cardCollection[id].views);
- const intersection = tabOrder.filter(tab => tabsOfCard.includes(tab))
- if (intersection.length === 0) {
- libraryCards = [ ...libraryCards, id ];
- }
- break;
- }
+ const card = cardCollection[id];
+ if (hasSearch(card, searchString) && hasFilter(card, filterOption, filterColor, activeTab, tabOrder)) {
+ libraryCards = [ ...libraryCards, id ];
  }
  }
+ libraryCards = sortCards(libraryCards, sortOption, cardCollection);
 
  return {
  isOpen,
  toggleLibrary: () => setIsOpen(!isOpen),
  setSearchString,
+ filterOption,
  setFilterOption,
+ filterColor,
+ setFilterColor,
+ sortOption,
  setSortOption,
+ viewOption,
  setViewOption,
  libraryCards,
  };
 };
+
+export const useColorDropdownHooks = () => {
+ const [ isColorDropdownOpen, setIsColorDropdownOpen ] = useState(false);
+ const colorDropdownBtnRef = useRef();
+
+ return {
+ colorDropdownBtnRef,
+ isColorDropdownOpen,
+ openColorDropdown: () => setIsColorDropdownOpen(!isColorDropdownOpen),
+ closeColorDropdown: () => setIsColorDropdownOpen(false),
+ };
+};

src/components/Library/index.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import FilterBar from './FilterBar';
+import SortBar from './SortBar';
 import LibraryCard from '../Card/LibraryCard';
 import LibrarySearch from './LibrarySearch';
 
@@ -13,36 +15,39 @@ const Library = () => {
  isOpen,
  toggleLibrary,
  setSearchString,
+ filterOption,
  setFilterOption,
+ filterColor,
+ setFilterColor,
+ sortOption,
  setSortOption,
+ viewOption,
  setViewOption,
  libraryCards,
  } = useLibraryHooks();
 
- let cardComponents = [];
- for (let id in libraryCards) {
- cardComponents = [
- ...cardComponents,
- <LibraryCard key={id} cardId={id} />,
- ];
- }
+ const cardComponents = libraryCards.map(id => <LibraryCard key={id} cardId={id} />);
 
  return (
  <div className={`library ${isOpen ? 'open': 'close'}`}>
  <div className='library-panel'>
- <LibrarySearch />
  {/* 
  TODO remove LibrarySearch and expand out its functionality to the following.
  Make changes to the hooks file to change filtering and sorting
  Change names of components if need be
  */}
  {/* <SearchBar setSearchString={setSearchString} /> */}
- {/* <FilterBar setFilterOption={setFilterOption} /> */}
- {/* <SortBar setSortOption={setSortOption} /> */}
- {/* <ViewBar setViewOption={setViewOption} /> */}
- {/* <div className='library-card-container'>
+ <FilterBar
+ filterOption={filterOption} setFilterOption={setFilterOption}
+ filterColor={filterColor} setFilterColor={setFilterColor}
+ />
+ <SortBar sortOption={sortOption} setSortOption={setSortOption} />
+ {/* <ViewBar viewOption={viewOption} setViewOption={setViewOption} /> */}
+ <div className='library-card-container'>
  {cardComponents}
- </div> */}
+ </div>
+
+ <LibrarySearch />
  </div>
  <button className='library-btn' onClick={toggleLibrary}>
  <img src={LibraryIcon} alt='Library' />