diff --git a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx index c316f31..bf17c81 100644 --- a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx +++ b/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) { - bookmarks = ( -
- {props.categories.map((category: Category): JSX.Element => )} -
- ); - } else { - if (props.totalCategories) { + if (props.searching && props.categories[0].bookmarks.length === 0) { bookmarks = ( -

There are no pinned categories. You can pin them from the /bookmarks menu

+

+ No bookmarks match your search criteria +

); } else { bookmarks = ( -

You don't have any bookmarks. You can add a new one from /bookmarks menu

+
+ {props.categories.map( + (category: Category): JSX.Element => ( + + ) + )} +
+ ); + } + } else { + if (props.totalCategories) { + bookmarks = ( +

+ There are no pinned categories. You can pin them from the{' '} + /bookmarks menu +

+ ); + } else { + bookmarks = ( +

+ You don't have any bookmarks. You can add a new one from{' '} + /bookmarks menu +

); } } return bookmarks; -} +}; -export default BookmarkGrid; \ No newline at end of file +export default BookmarkGrid; diff --git a/client/src/components/Bookmarks/Bookmarks.tsx b/client/src/components/Bookmarks/Bookmarks.tsx index 7a2deb2..88d9cdb 100644 --- a/client/src/components/Bookmarks/Bookmarks.tsx +++ b/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 { - getCategories, - categories, - loading - } = props; + const { getCategories, categories, loading, searching = false } = 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({ 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({ 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 ( - {!isInUpdate - ? - : formContentType === ContentType.category - ? - : - } + {!isInUpdate ? ( + + ) : formContentType === ContentType.category ? ( + + ) : ( + + )} - Go back)} - /> - + Go back} /> +
addActionHandler(ContentType.category)} /> addActionHandler(ContentType.bookmark)} /> editActionHandler(ContentType.category)} /> editActionHandler(ContentType.bookmark)} />
- {loading - ? - : (!isInEdit - ? - : - ) - } + {loading ? ( + + ) : !isInEdit ? ( + + ) : ( + + )}
- ) -} + ); +}; const mapStateToProps = (state: GlobalState) => { return { loading: state.bookmark.loading, - categories: state.bookmark.categories - } -} + categories: state.bookmark.categories, + }; +}; -export default connect(mapStateToProps, { getCategories })(Bookmarks); \ No newline at end of file +export default connect(mapStateToProps, { getCategories })(Bookmarks); diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx index 12097bf..fd711aa 100644 --- a/client/src/components/Home/Home.tsx +++ b/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 ( {searchConfig('hideSearch', 0) !== 1 ? ( @@ -143,10 +155,13 @@ const Home = (props: ComponentProps): JSX.Element => { ) : ( category.isPinned - )} + categories={ + !localSearch + ? categories.filter(({ isPinned }) => isPinned) + : searchBookmarks(localSearch) + } totalCategories={categories.length} + searching={!!localSearch} /> )} diff --git a/db.js b/db.js index f9cbcfd..6c1eb7c 100644 --- a/db.js +++ b/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, };