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,
};