view options (#48)

src/components-shared/Dropdowns/ActionDropdown.jsx

@@ -6,7 +6,7 @@ import useOutsideClick from '../../utils/useOutsideClick';
 /*
   Each item in the items array should be similar to the following object:
   {
-    title: 'Move to unsorted',
+    title: 'Move to library',
     type: ACTION_TYPE.danger,
     callback: () => dispatch(actions.project.unlinkCardFromView({ id: cardId })),
     icon: LibraryIcon,

src/components/Card/LibraryCard.jsx

@@ -7,7 +7,10 @@ import LibraryContent from './LibraryContent';
 
 import './LibraryCard.scss';
 
-const LibraryCard = ({ cardId }) => {
+const LibraryCard = ({
+  cardId,
+  isExpanded,
+}) => {
   const {
     libraryCardRef,
     isActive,
@@ -20,7 +23,7 @@ const LibraryCard = ({ cardId }) => {
     onAnimationEnd,
     onClick,
   } = useLibraryCardHooks({
-    cardId
+    cardId,
   });
 
   return (
@@ -42,6 +45,7 @@ const LibraryCard = ({ cardId }) => {
         <LibraryContent
           cardId={cardId}
           setEditingCard={setIsEditing}
+          isExpanded={isExpanded}
           isSelected={isSelected}
         />
       {/* </div> */}

src/components/Card/LibraryContent.jsx

@@ -6,6 +6,7 @@ import './LibraryCard.scss';
 
 const LibraryContent = ({
   cardId,
+  isExpanded,
   isSelected,
   setEditingCard,
 }) => {
@@ -36,10 +37,10 @@ const LibraryContent = ({
   return (
     <div
       className='library-card-content-container'
-      style={isSelected ? expandedStyle : condensedStyle}
+      style={(isSelected || isExpanded) ? expandedStyle : condensedStyle}
     >
       <textarea
-        className={`library-card-textarea ${isSelected ? "selected" : ""}`}
+        className={`library-card-textarea ${(isSelected || isExpanded) ? "selected" : ""}`}
         onBlur={endContentEdit}
         onChange={(e) => changeContentValue(e.target.value)}
         onClick={beginContentEdit}

src/components/Library/FilterBar.jsx

@@ -6,10 +6,12 @@ import '../../styles/colors.scss';
 import { CARD_COLOR_KEYS } from '../../styles/colors';
 
 const FilterBar = ({
-  filterOption,
-  setFilterOption,
-  filterColor,
-  setFilterColor,
+  isColorFiltered,
+  setIsColorFiltered,
+  filterColorOption,
+  setFilterColorOption,
+  filterTabOption,
+  setFilterTabOption,
 }) => {
   const {
     colorDropdownBtnRef,
@@ -26,37 +28,41 @@ const FilterBar = ({
       <div className='selections'>
         <div className='color-selection'>
           <button
-            className={`option ${filterOption === FILTER_OPTIONS.color ? 'selected' : null}`}
-            onClick={() => setFilterOption(FILTER_OPTIONS.color)}
+            className={`option ${isColorFiltered ? 'selected' : null}`}
+            onClick={() => setIsColorFiltered(!isColorFiltered)}
           >
             <span>Color</span>
-            <button className={`color-display ${CARD_COLOR_KEYS[filterColor] ?? '#F4F4F4'}`} onClick={() => openColorDropdown()} ref={colorDropdownBtnRef} />
+            <button
+              className={`color-display ${CARD_COLOR_KEYS[filterColorOption] ?? '#F4F4F4'}`}
+              onClick={(event) => openColorDropdown(event)}
+              ref={colorDropdownBtnRef}
+            />
           </button>
           <ColorDropdown
             btnRef={colorDropdownBtnRef}
             isOpen={isColorDropdownOpen}
             message="Filter by card color"
             onClose={closeColorDropdown}
-            onUpdateColor={setFilterColor}
-            selectedColor={filterColor}
+            onUpdateColor={setFilterColorOption}
+            selectedColor={filterColorOption}
           />
         </div>
         <div className='divider' />
         <button
-          className={`option ${filterOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
-          onClick={() => setFilterOption(FILTER_OPTIONS.thisTab)}
+          className={`option ${filterTabOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
+          onClick={() => setFilterTabOption(FILTER_OPTIONS.thisTab)}
         >
           <span>In this tab</span>
         </button>
         <button
-          className={`option ${filterOption === FILTER_OPTIONS.all ? 'selected' : null}`}
-          onClick={() => setFilterOption(FILTER_OPTIONS.all)}
+          className={`option ${filterTabOption === FILTER_OPTIONS.allTab ? 'selected' : null}`}
+          onClick={() => setFilterTabOption(FILTER_OPTIONS.allTab)}
         >
           <span>In all tabs</span>
         </button>
         <button
-          className={`option ${filterOption === FILTER_OPTIONS.unsorted ? 'selected' : null}`}
-          onClick={() => setFilterOption(FILTER_OPTIONS.unsorted)}
+          className={`option ${filterTabOption === FILTER_OPTIONS.noTab ? 'selected' : null}`}
+          onClick={() => setFilterTabOption(FILTER_OPTIONS.noTab)}
         >
           <span>In no tabs</span>
         </button>

src/components/Library/ViewBar.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { VIEW_OPTIONS } from './hooks';
+
+import './index.scss';
+import EnabledCondenseIcon from '../../assets/icons/condense-enabled.svg';
+import DisabledCondenseIcon from '../../assets/icons/condense-disabled.svg';
+import EnabledExpandIcon from '../../assets/icons/expand-enabled.svg';
+import DisabledExpandIcon from '../../assets/icons/expand-disabled.svg';
+
+const ViewBar = ({
+  viewOption,
+  setViewOption,
+}) => {
+
+  return (
+    <div className='option-row'>
+      <div className='horizontal-bar' />
+      <button
+        className='option'
+        onClick={() => setViewOption(VIEW_OPTIONS.condensed)}
+      >
+        <img src={viewOption === VIEW_OPTIONS.condensed ? DisabledCondenseIcon : EnabledCondenseIcon} />
+      </button>
+      <button
+        className='option'
+        onClick={() => setViewOption(VIEW_OPTIONS.expanded)}
+      >
+        <img src={viewOption === VIEW_OPTIONS.expanded ? DisabledExpandIcon : EnabledExpandIcon} />
+      </button>
+      {/* <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 ViewBar;

src/components/Library/hooks.js

@@ -3,10 +3,9 @@ import { useSelector } from 'react-redux';
 import { CARD_COLOR_KEYS } from '../../styles/colors';
 
 export const FILTER_OPTIONS = {
-  all: 'all',
-  color: 'color',
+  allTab: 'allTab',
+  noTab: 'noTab',
   thisTab: 'thisTab',
-  unsorted: 'unsorted',
 };
 
 export const SORT_OPTIONS = {
@@ -33,15 +32,20 @@ const hasSearch = (card, search) => {
   return false;
 };
 
-const hasFilter = (card, filter, color, tab, allTabs) => {
+const hasColor = (card, isFiltered, color) => {
+  if (isFiltered) {
+    return CARD_COLOR_KEYS[color] === card?.color;
+  }
+  return true;
+};
+
+const hasTab = (card, filter, tab, allTabs) => {
   switch(filter) {
     case FILTER_OPTIONS.thisTab:
       return !!card?.views?.[tab];
-    case FILTER_OPTIONS.all:
+    case FILTER_OPTIONS.allTab:
       return true;
-    case FILTER_OPTIONS.color:
-      return CARD_COLOR_KEYS[color] === card?.color;
-    case FILTER_OPTIONS.unsorted:
+    case FILTER_OPTIONS.noTab:
       const cardTabs = Object.keys(card?.views);
       const intersection = allTabs.filter(tab => cardTabs.includes(tab));
       return intersection.length === 0;
@@ -86,15 +90,19 @@ export const useLibraryHooks = () => {
 
   const [ isOpen, setIsOpen ] = useState(false);
   const [ searchString, setSearchString ] = useState('');
-  const [ filterOption, setFilterOption ] = useState(FILTER_OPTIONS.all);
-  const [ filterColor, setFilterColor ] = useState('');
+  const [ isColorFiltered, setIsColorFiltered ] = useState(false);
+  const [ filterColorOption, setFilterColorOption ] = useState(CARD_COLOR_KEYS.gray);
+  const [ filterTabOption, setFilterTabOption ] = useState(FILTER_OPTIONS.allTab);
   const [ sortOption, setSortOption ] = useState(SORT_OPTIONS.abc);
   const [ viewOption, setViewOption ] = useState(VIEW_OPTIONS.condensed);
 
   let libraryCards = [];
   for (let id in cardCollection) {
     const card = cardCollection[id];
-    if (hasSearch(card, searchString) && hasFilter(card, filterOption, filterColor, activeTab, tabOrder)) {
+    if (hasSearch(card, searchString)
+      && hasColor(card, isColorFiltered, filterColorOption)
+      && hasTab(card, filterTabOption, activeTab, tabOrder)
+    ) {
       libraryCards = [ ...libraryCards, id ];
     }
   }
@@ -104,10 +112,12 @@ export const useLibraryHooks = () => {
     isOpen,
     toggleLibrary: () => setIsOpen(!isOpen),
     setSearchString,
-    filterOption,
-    setFilterOption,
-    filterColor,
-    setFilterColor,
+    isColorFiltered,
+    setIsColorFiltered,
+    filterColorOption,
+    setFilterColorOption,
+    filterTabOption,
+    setFilterTabOption,
     sortOption,
     setSortOption,
     viewOption,
@@ -123,7 +133,10 @@ export const useColorDropdownHooks = () => {
   return {
     colorDropdownBtnRef,
     isColorDropdownOpen,
-    openColorDropdown: () => setIsColorDropdownOpen(!isColorDropdownOpen),
+    openColorDropdown: (event) => {
+      event.stopPropagation();
+      setIsColorDropdownOpen(!isColorDropdownOpen);
+    },
     closeColorDropdown: () => setIsColorDropdownOpen(false),
   };
 };