Normal and live search for bookmarks

client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx

@@ -9,30 +9,49 @@ import BookmarkCard from '../BookmarkCard/BookmarkCard';
 interface ComponentProps {
   categories: Category[];
   totalCategories?: number;
+  searching: boolean;
 }
 
 const BookmarkGrid = (props: ComponentProps): JSX.Element => {
   let bookmarks: JSX.Element;
 
   if (props.categories.length > 0) {
+    if (props.searching && props.categories[0].bookmarks.length === 0) {
+      bookmarks = (
+        <p className={classes.BookmarksMessage}>
+          No bookmarks match your search criteria
+        </p>
+      );
+    } else {
       bookmarks = (
         <div className={classes.BookmarkGrid}>
-        {props.categories.map((category: Category): JSX.Element => <BookmarkCard category={category} key={category.id} />)}
+          {props.categories.map(
+            (category: Category): JSX.Element => (
+              <BookmarkCard category={category} key={category.id} />
+            )
+          )}
         </div>
       );
+    }
   } else {
     if (props.totalCategories) {
       bookmarks = (
-        <p className={classes.BookmarksMessage}>There are no pinned categories. You can pin them from the <Link to='/bookmarks'>/bookmarks</Link> menu</p>
+        <p className={classes.BookmarksMessage}>
+          There are no pinned categories. You can pin them from the{' '}
+          <Link to="/bookmarks">/bookmarks</Link> menu
+        </p>
       );
     } else {
       bookmarks = (
-        <p className={classes.BookmarksMessage}>You don't have any bookmarks. You can add a new one from <Link to='/bookmarks'>/bookmarks</Link> menu</p>
+        <p className={classes.BookmarksMessage}>
+          You don't have any bookmarks. You can add a new one from{' '}
+          <Link to="/bookmarks">/bookmarks</Link> menu
+        </p>
       );
     }
   }
 
   return bookmarks;
-}
+};
 
 export default BookmarkGrid;

client/src/components/Bookmarks/Bookmarks.tsx

@@ -20,24 +20,23 @@ interface ComponentProps {
   loading: boolean;
   categories: Category[];
   getCategories: () => void;
+  searching: boolean;
 }
 
 export enum ContentType {
   category,
-  bookmark
+  bookmark,
 }
 
 const Bookmarks = (props: ComponentProps): JSX.Element => {
-  const {
+  const { getCategories, categories, loading, searching = false } = props;
-    getCategories,
-    categories,
-    loading
-  } = props;
 
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [formContentType, setFormContentType] = useState(ContentType.category);
   const [isInEdit, setIsInEdit] = useState(false);
-  const [tableContentType, setTableContentType] = useState(ContentType.category);
+  const [tableContentType, setTableContentType] = useState(
+    ContentType.category
+  );
   const [isInUpdate, setIsInUpdate] = useState(false);
   const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
     name: '',
@@ -46,8 +45,8 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
     orderId: 0,
     bookmarks: [],
     createdAt: new Date(),
-    updatedAt: new Date()
+    updatedAt: new Date(),
-  })
+  });
   const [bookmarkInUpdate, setBookmarkInUpdate] = useState<Bookmark>({
     name: '',
     url: '',
@@ -55,24 +54,24 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
     icon: '',
     id: -1,
     createdAt: new Date(),
-    updatedAt: new Date()
+    updatedAt: new Date(),
-  })
+  });
 
   useEffect(() => {
     if (categories.length === 0) {
       getCategories();
     }
-  }, [getCategories])
+  }, [getCategories]);
 
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
-  }
+  };
 
   const addActionHandler = (contentType: ContentType) => {
     setFormContentType(contentType);
     setIsInUpdate(false);
     toggleModal();
-  }
+  };
 
   const editActionHandler = (contentType: ContentType) => {
     // We're in the edit mode and the same button was clicked - go back to list
@@ -82,11 +81,11 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
       setIsInEdit(true);
       setTableContentType(contentType);
     }
-  }
+  };
 
   const instanceOfCategory = (object: any): object is Category => {
     return 'bookmarks' in object;
-  }
+  };
 
   const goToUpdateMode = (data: Category | Bookmark): void => {
     setIsInUpdate(true);
@@ -98,67 +97,76 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
       setBookmarkInUpdate(data);
     }
     toggleModal();
-  }
+  };
 
   return (
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
-        {!isInUpdate
+        {!isInUpdate ? (
-          ? <BookmarkForm modalHandler={toggleModal} contentType={formContentType} />
+          <BookmarkForm
-          : formContentType === ContentType.category
+            modalHandler={toggleModal}
-            ? <BookmarkForm modalHandler={toggleModal} contentType={formContentType} category={categoryInUpdate} />
+            contentType={formContentType}
-            : <BookmarkForm modalHandler={toggleModal} contentType={formContentType} bookmark={bookmarkInUpdate} />
+          />
-        }
+        ) : formContentType === ContentType.category ? (
+          <BookmarkForm
+            modalHandler={toggleModal}
+            contentType={formContentType}
+            category={categoryInUpdate}
+          />
+        ) : (
+          <BookmarkForm
+            modalHandler={toggleModal}
+            contentType={formContentType}
+            bookmark={bookmarkInUpdate}
+          />
+        )}
       </Modal>
 
-      <Headline
+      <Headline title="All Bookmarks" subtitle={<Link to="/">Go back</Link>} />
-        title='All Bookmarks'
-        subtitle={(<Link to='/'>Go back</Link>)}
-      />
 
       <div className={classes.ActionsContainer}>
         <ActionButton
-          name='Add Category'
+          name="Add Category"
-          icon='mdiPlusBox'
+          icon="mdiPlusBox"
           handler={() => addActionHandler(ContentType.category)}
         />
         <ActionButton
-          name='Add Bookmark'
+          name="Add Bookmark"
-          icon='mdiPlusBox'
+          icon="mdiPlusBox"
           handler={() => addActionHandler(ContentType.bookmark)}
         />
         <ActionButton
-          name='Edit Categories'
+          name="Edit Categories"
-          icon='mdiPencil'
+          icon="mdiPencil"
           handler={() => editActionHandler(ContentType.category)}
         />
         <ActionButton
-          name='Edit Bookmarks'
+          name="Edit Bookmarks"
-          icon='mdiPencil'
+          icon="mdiPencil"
           handler={() => editActionHandler(ContentType.bookmark)}
         />
       </div>
 
-      {loading
+      {loading ? (
-        ? <Spinner />
+        <Spinner />
-        : (!isInEdit
+      ) : !isInEdit ? (
-          ? <BookmarkGrid categories={categories} />
+        <BookmarkGrid categories={categories} searching />
-          : <BookmarkTable
+      ) : (
+        <BookmarkTable
           contentType={tableContentType}
           categories={categories}
           updateHandler={goToUpdateMode}
         />
-          )
+      )}
-      }
     </Container>
-  )
+  );
-}
+};
 
 const mapStateToProps = (state: GlobalState) => {
   return {
     loading: state.bookmark.loading,
-    categories: state.bookmark.categories
+    categories: state.bookmark.categories,
-  }
+  };
-}
+};
 
 export default connect(mapStateToProps, { getCategories })(Bookmarks);

client/src/components/Home/Home.tsx

@@ -89,6 +89,18 @@ const Home = (props: ComponentProps): JSX.Element => {
     return () => clearInterval(interval);
   }, []);
 
+  // Search bookmarks
+  const searchBookmarks = (query: string): Category[] => {
+    const category = { ...categories[0] };
+    category.name = 'Search Results';
+    category.bookmarks = categories
+      .map(({ bookmarks }) => bookmarks)
+      .flat()
+      .filter(({ name }) => new RegExp(query, 'i').test(name));
+
+    return [category];
+  };
+
   return (
     <Container>
       {searchConfig('hideSearch', 0) !== 1 ? (
@@ -143,10 +155,13 @@ const Home = (props: ComponentProps): JSX.Element => {
             <Spinner />
           ) : (
             <BookmarkGrid
-              categories={categories.filter(
+              categories={
-                (category: Category) => category.isPinned
+                !localSearch
-              )}
+                  ? categories.filter(({ isPinned }) => isPinned)
+                  : searchBookmarks(localSearch)
+              }
               totalCategories={categories.length}
+              searching={!!localSearch}
             />
           )}
         </Fragment>

db.js

@@ -5,7 +5,7 @@ const logger = new Logger();
 const sequelize = new Sequelize({
   dialect: 'sqlite',
   storage: './data/db.sqlite',
-  logging: false
+  logging: false,
 });
 
 const connectDB = async () => {
@@ -28,5 +28,5 @@ const connectDB = async () => {
 
 module.exports = {
   connectDB,
-  sequelize
+  sequelize,
 };