refactor: separate library files

src/App.jsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import './App.scss';
 import HeaderMenu from './components/HeaderMenu';
 import ToolMenu from './components/ToolMenu';
-import Library from './components/Library/Library';
+import Library from './components/Library';
 import TabBar from './components/TabBar';
 import Canvas from './components/Canvas';
 import Popup from './components/Popup';

src/App.scss

@@ -27,20 +27,6 @@ button:focus {
   outline: none;
 }
 
-.btn-24 {
-  // button for an img of 24px x 24px
-  height: 24px;
-  width: 24px;
-  padding: 3px;
-}
-
-.btn-32 {
-  // button for an img of 32px x 32px
-  height: 32px;
-  width: 32px;
-  padding: 4px;
-}
-
 button {
   box-sizing: content-box;
   position: relative;
@@ -62,7 +48,7 @@ button {
     // top: 130%; right: 50%;       <-- tooltip is to the bottom
     // bottom: 150%; left: 25%;     <-- tooltip is to the top
     padding: 3px 8px;
-    border-radius: 12px;
+    border-radius: 6px;
     background-color: #363B4E;
     visibility: hidden;
     z-index: 10000;
@@ -102,5 +88,5 @@ button {
 @font-face {
   font-family: "Roboto";
   src: local("Roboto-Regular"),
-    url("./fonts/Roboto-Regular.ttf") format("truetype");
+    url("./assets/fonts/Roboto-Regular.ttf") format("truetype");
 }

src/components-shared/Dropdowns/ColorDropdown.scss

@@ -1,4 +1,4 @@
-@use "../../components/Card/index.scss" as card;
+@use "../../components/Card/Card.scss" as card;
 
 .color-dropdown {
   position: absolute;

src/components/Canvas/hooks.js

@@ -6,7 +6,7 @@ import * as actions from '../../store/actionIndex';
 import * as fireactions from '../../store/firestoreIndex';
 import { manageUser } from "../../store/firestoreAPI/authTransactions";
 
-import { GRID } from '../../shared/constants';
+import { GRID } from '../../styles/constants';
 import { ANIMATION } from '../Card/hooks';
 
 // TODO separate out the network code into functions data/request or something

src/components/Canvas/index.jsx

@@ -4,16 +4,16 @@ import { Rnd } from 'react-rnd';
 import { CANVAS_STATES, CANVAS_DIMENSIONS, useCanvasHooks } from './hooks';
 import Card from '../Card/Card';
 
-import { GRID } from '../../shared/constants';
+import { GRID } from '../../styles/constants';
 import './index.scss';
-import LibraryIcon from '../../assets/icons/library.svg';
+import BookIcon from '../../assets/icons/book.svg';
 import PlusIcon from '../../assets/icons/plus.svg'
 
 // Canvas is the main portion the user is looking at. This is located in the center of the screen.
 
 const Empty = (createNewProject) => (
   <div className='empty'>
-    <img src={LibraryIcon} />
+    <img src={BookIcon} />
     <div className='container1'>
       <span className='header'>No projects open</span>
       <div className='container2'>

src/components/Card/Card.jsx

@@ -7,7 +7,7 @@ import Title from './Title';
 import Content from './Content';
 
 import './Card.scss';
-import { GRID } from '../../shared/constants';
+import { GRID } from '../../styles/constants';
 
 export const Card = ({
   cardId,

src/components/Library/hooks.js

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+export const FILTER_OPTIONS = {
+  all: 'all',
+  thisTab: 'thisTab',
+  unsorted: 'unsorted',
+};
+
+export const SORT_OPTIONS = {
+  abc: 'abc',
+  zxy: 'zxy',
+  color: 'color',
+  newest: 'newest',
+  oldest: 'oldest',
+};
+
+export const VIEW_OPTIONS = {
+  condensed: 'condensed',
+  expanded: 'expanded',
+};
+
+export const useLibraryHooks = () => {
+  const activeTab = useSelector(state => state.campaignData.present.activeViewId);
+  const tabOrder = useSelector(state => state.campaignData.present.viewOrder);
+  const cardCollection = useSelector(state => state.campaignData.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);
+
+  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;
+      }
+    }
+  }
+
+  return {
+    isOpen,
+    toggleLibrary: () => setIsOpen(!isOpen),
+    setSearchString,
+    setFilterOption,
+    setSortOption,
+    setViewOption,
+    libraryCards,
+  };
+};

src/components/Library/index.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import LibraryCard from '../Card/LibraryCard';
+import LibrarySearch from './LibrarySearch';
+
+import { useLibraryHooks } from './hooks';
+
+import './index.scss';
+import LibraryIcon from '../../assets/icons/library.svg';
+
+const Library = () => {
+  const {
+    isOpen,
+    toggleLibrary,
+    setSearchString,
+    setFilterOption,
+    setSortOption,
+    setViewOption,
+    libraryCards,
+  } = useLibraryHooks();
+
+  let cardComponents = [];
+  for (let id in libraryCards) {
+    cardComponents = [
+      ...cardComponents,
+      <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'>
+          {cardComponents}
+        </div> */}
+      </div>
+      <button className='library-btn' onClick={toggleLibrary}>
+        <img src={LibraryIcon} alt='Library' />
+        <span className='tooltip'>Library</span>
+      </button>
+    </div>
+  );
+};
+
+export default Library;