Fixed state bug while updating categories. Fixed bug with bookmarks not being displayed under categories.

client/src/components/Apps/Apps.tsx

@@ -40,10 +40,10 @@ export const Apps = (props: Props): JSX.Element => {
   const [appInUpdate, setAppInUpdate] = useState<App>(appTemplate);
 
   useEffect(() => {
-    if (apps.length === 0) {
+    if (!apps.length) {
       getApps();
     }
-  }, [getApps]);
+  }, []);
 
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
@@ -85,7 +85,7 @@ export const Apps = (props: Props): JSX.Element => {
         {loading ? (
           <Spinner />
         ) : !isInEdit ? (
-          <AppGrid apps={apps} searching />
+          <AppGrid apps={apps} searching={props.searching} />
         ) : (
           <AppTable updateAppHandler={toggleUpdate} />
         )}

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

@@ -15,8 +15,8 @@ interface Props {
 export const BookmarkGrid = (props: Props): JSX.Element => {
   let bookmarks: JSX.Element;
 
-  if (props.categories.length > 0) {
-    if (props.searching && props.categories[0].bookmarks.length === 0) {
+  if (props.categories.length) {
+    if (props.searching && !props.categories[0].bookmarks.length) {
       bookmarks = (
         <p className={classes.BookmarksMessage}>
           No bookmarks match your search criteria

client/src/components/Bookmarks/Bookmarks.tsx

@@ -41,8 +41,6 @@ export const Bookmarks = (props: Props): JSX.Element => {
   const dispatch = useDispatch();
   const { getCategories } = bindActionCreators(actionCreators, dispatch);
 
-  const { searching = false } = props;
-
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [formContentType, setFormContentType] = useState(ContentType.category);
   const [isInEdit, setIsInEdit] = useState(false);
@@ -56,10 +54,10 @@ export const Bookmarks = (props: Props): JSX.Element => {
     useState<Bookmark>(bookmarkTemplate);
 
   useEffect(() => {
-    if (categories.length === 0) {
+    if (!categories.length) {
       getCategories();
     }
-  }, [getCategories]);
+  }, []);
 
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
@@ -148,7 +146,7 @@ export const Bookmarks = (props: Props): JSX.Element => {
       {loading ? (
         <Spinner />
       ) : !isInEdit ? (
-        <BookmarkGrid categories={categories} searching />
+        <BookmarkGrid categories={categories} searching={props.searching} />
       ) : (
         <BookmarkTable
           contentType={tableContentType}

client/src/components/Home/Home.tsx

@@ -47,14 +47,14 @@ export const Home = (): JSX.Element => {
     if (!apps.length) {
       getApps();
     }
-  }, [getApps]);
+  }, []);
 
   // Load bookmark categories
   useEffect(() => {
     if (!categories.length) {
       getCategories();
     }
-  }, [getCategories]);
+  }, []);
 
   useEffect(() => {
     if (localSearch) {

client/src/store/reducers/bookmark.ts

@@ -69,7 +69,10 @@ export const bookmarksReducer = (
         ...state,
         categories: [
           ...state.categories.slice(0, pinnedCategoryIdx),
-          action.payload,
+          {
+            ...action.payload,
+            bookmarks: [...state.categories[pinnedCategoryIdx].bookmarks],
+          },
           ...state.categories.slice(pinnedCategoryIdx + 1),
         ],
       };
@@ -96,7 +99,10 @@ export const bookmarksReducer = (
         ...state,
         categories: [
           ...state.categories.slice(0, updatedCategoryIdx),
-          action.payload,
+          {
+            ...action.payload,
+            bookmarks: [...state.categories[updatedCategoryIdx].bookmarks],
+          },
           ...state.categories.slice(updatedCategoryIdx + 1),
         ],
       };