Added option to reorder bookmarks

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css

@@ -10,7 +10,7 @@
   text-transform: uppercase;
 }
 
-.BookmarkCard h3:hover {
+.BookmarkHeader:hover {
   cursor: pointer;
 }
 

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -16,9 +16,12 @@ import { iconParser, isImage, isSvg, isUrl, urlParser } from '../../../utility';
 
 interface Props {
   category: Category;
+  fromHomepage?: boolean;
 }
 
 export const BookmarkCard = (props: Props): JSX.Element => {
+  const { category, fromHomepage = false } = props;
+
   const { config } = useSelector((state: State) => state.config);
 
   const dispatch = useDispatch();
@@ -27,15 +30,18 @@ export const BookmarkCard = (props: Props): JSX.Element => {
   return (
     <div className={classes.BookmarkCard}>
       <h3
+        className={fromHomepage ? '' : classes.BookmarkHeader}
         onClick={() => {
-          setEditCategory(props.category);
+          if (!fromHomepage) {
+            setEditCategory(category);
+          }
         }}
       >
-        {props.category.name}
+        {category.name}
       </h3>
 
       <div className={classes.Bookmarks}>
-        {props.category.bookmarks.map((bookmark: Bookmark) => {
+        {category.bookmarks.map((bookmark: Bookmark) => {
           const redirectUrl = urlParser(bookmark.url)[1];
 
           let iconEl: JSX.Element = <Fragment></Fragment>;

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

@@ -11,27 +11,39 @@ interface Props {
   categories: Category[];
   totalCategories?: number;
   searching: boolean;
+  fromHomepage?: boolean;
 }
 
 export const BookmarkGrid = (props: Props): JSX.Element => {
+  const {
+    categories,
+    totalCategories,
+    searching,
+    fromHomepage = false,
+  } = props;
+
   let bookmarks: JSX.Element;
 
-  if (props.categories.length) {
+  if (categories.length) {
-    if (props.searching && !props.categories[0].bookmarks.length) {
+    if (searching && !categories[0].bookmarks.length) {
       bookmarks = <Message>No bookmarks match your search criteria</Message>;
     } else {
       bookmarks = (
         <div className={classes.BookmarkGrid}>
-          {props.categories.map(
+          {categories.map(
             (category: Category): JSX.Element => (
-              <BookmarkCard category={category} key={category.id} />
+              <BookmarkCard
+                category={category}
+                fromHomepage={fromHomepage}
+                key={category.id}
+              />
             )
           )}
         </div>
       );
     }
   } else {
-    if (props.totalCategories) {
+    if (totalCategories) {
       bookmarks = (
         <Message>
           There are no pinned categories. You can pin them from the{' '}

client/src/components/Bookmarks/Bookmarks.tsx

@@ -69,12 +69,17 @@ export const Bookmarks = (props: Props): JSX.Element => {
   }, [isAuthenticated]);
 
   useEffect(() => {
-    if (categoryInEdit && !showTable) {
+    if (categoryInEdit) {
       setTableContentType(ContentType.bookmark);
       setShowTable(true);
     }
   }, [categoryInEdit]);
 
+  useEffect(() => {
+    setShowTable(false);
+    setEditCategory(null);
+  }, []);
+
   // Form actions
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
@@ -108,6 +113,7 @@ export const Bookmarks = (props: Props): JSX.Element => {
   const showTableForEditing = (contentType: ContentType) => {
     // We're in the edit mode and the same button was clicked - go back to list
     if (showTable && contentType === tableContentType) {
+      setEditCategory(null);
       setShowTable(false);
     } else {
       setShowTable(true);

client/src/components/Home/Home.tsx

@@ -151,6 +151,7 @@ export const Home = (): JSX.Element => {
               }
               totalCategories={categories.length}
               searching={!!localSearch}
+              fromHomepage={true}
             />
           )}
         </Fragment>