Fixed bug with alphabetical order not working for bookmarks. Minor changes related to bookmarks form

Author: pawelmalak

client/src/components/Bookmarks/Bookmarks.tsx

@@ -69,7 +69,7 @@ export const Bookmarks = (props: Props): JSX.Element => {
   }, [isAuthenticated]);
 
   useEffect(() => {
-    if (categoryInEdit) {
+    if (categoryInEdit && !modalIsOpen) {
       setTableContentType(ContentType.bookmark);
       setShowTable(true);
     }

client/src/components/Bookmarks/Form/BookmarksForm.tsx

@@ -137,11 +137,11 @@ export const BookmarksForm = ({
       }
 
       modalHandler();
+    }
 
-      setFormData(newBookmarkTemplate);
+    setFormData(newBookmarkTemplate);
 
-      setCustomIcon(null);
-    }
+    setCustomIcon(null);
   };
 
   return (

client/src/components/Bookmarks/Form/CategoryForm.tsx

@@ -60,10 +60,10 @@ export const CategoryForm = ({
       addCategory(formData);
     } else {
       updateCategory(category.id, formData);
+      modalHandler();
     }
 
     setFormData(newCategoryTemplate);
-    modalHandler();
   };
 
   return (

client/src/components/Settings/UISettings/UISettings.tsx

@@ -16,13 +16,14 @@ import { InputGroup, Button, SettingsHeadline } from '../../UI';
 import { otherSettingsTemplate, inputHandler } from '../../../utility';
 
 export const UISettings = (): JSX.Element => {
-  const { loading, config } = useSelector((state: State) => state.config);
+  const {
+    config: { loading, config },
+    bookmarks: { categories },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { updateConfig, sortApps, sortCategories } = bindActionCreators(
-    actionCreators,
-    dispatch
-  );
+  const { updateConfig, sortApps, sortCategories, sortBookmarks } =
+    bindActionCreators(actionCreators, dispatch);
 
   // Initial state
   const [formData, setFormData] = useState<OtherSettingsForm>(
@@ -46,9 +47,15 @@ export const UISettings = (): JSX.Element => {
     // Update local page title
     document.title = formData.customTitle;
 
-    // Sort apps and categories with new settings
-    sortApps();
-    sortCategories();
+    // Sort entities with new settings
+    if (formData.useOrdering !== config.useOrdering) {
+      sortApps();
+      sortCategories();
+
+      for (let { id } of categories) {
+        sortBookmarks(id);
+      }
+    }
   };
 
   // Input handler

client/src/interfaces/Bookmark.ts

@@ -8,4 +8,6 @@ export interface NewBookmark {
   isPublic: boolean;
 }
 
-export interface Bookmark extends Model, NewBookmark {}
+export interface Bookmark extends Model, NewBookmark {
+  orderId: number;
+}

client/src/store/action-creators/bookmark.ts

@@ -23,6 +23,7 @@ import {
   ReorderCategoriesAction,
   SetEditBookmarkAction,
   SetEditCategoryAction,
+  SortBookmarksAction,
   SortCategoriesAction,
   UpdateBookmarkAction,
   UpdateCategoryAction,
@@ -100,6 +101,8 @@ export const addBookmark =
         type: ActionType.addBookmark,
         payload: res.data.data,
       });
+
+      dispatch<any>(sortBookmarks(res.data.data.categoryId));
     } catch (err) {
       console.log(err);
     }
@@ -271,6 +274,8 @@ export const updateBookmark =
           payload: res.data.data,
         });
       }
+
+      dispatch<any>(sortBookmarks(res.data.data.categoryId));
     } catch (err) {
       console.log(err);
     }
@@ -377,3 +382,20 @@ export const reorderBookmarks =
       console.log(err);
     }
   };
+
+export const sortBookmarks =
+  (categoryId: number) => async (dispatch: Dispatch<SortBookmarksAction>) => {
+    try {
+      const res = await axios.get<ApiResponse<Config>>('/api/config');
+
+      dispatch({
+        type: ActionType.sortBookmarks,
+        payload: {
+          orderType: res.data.data.useOrdering,
+          categoryId,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };

client/src/store/action-types/index.ts

@@ -41,6 +41,7 @@ export enum ActionType {
   updateBookmark = 'UPDATE_BOOKMARK',
   setEditBookmark = 'SET_EDIT_BOOKMARK',
   reorderBookmarks = 'REORDER_BOOKMARKS',
+  sortBookmarks = 'SORT_BOOKMARKS',
   // AUTH
   login = 'LOGIN',
   logout = 'LOGOUT',

client/src/store/actions/bookmark.ts

@@ -74,3 +74,11 @@ export interface ReorderBookmarksAction {
     categoryId: number;
   };
 }
+
+export interface SortBookmarksAction {
+  type: ActionType.sortBookmarks;
+  payload: {
+    orderType: string;
+    categoryId: number;
+  };
+}

client/src/store/actions/index.ts

@@ -41,6 +41,7 @@ import {
   SetEditCategoryAction,
   SetEditBookmarkAction,
   ReorderBookmarksAction,
+  SortBookmarksAction,
 } from './bookmark';
 
 import {
@@ -87,6 +88,7 @@ export type Action =
   | UpdateBookmarkAction
   | SetEditBookmarkAction
   | ReorderBookmarksAction
+  | SortBookmarksAction
   // Auth
   | LoginAction
   | LogoutAction

client/src/store/reducers/bookmark.ts

@@ -216,6 +216,29 @@ export const bookmarksReducer = (
       };
     }
 
+    case ActionType.sortBookmarks: {
+      const categoryIdx = state.categories.findIndex(
+        (category) => category.id === action.payload.categoryId
+      );
+
+      const sortedBookmarks = sortData<Bookmark>(
+        state.categories[categoryIdx].bookmarks,
+        action.payload.orderType
+      );
+
+      return {
+        ...state,
+        categories: [
+          ...state.categories.slice(0, categoryIdx),
+          {
+            ...state.categories[categoryIdx],
+            bookmarks: sortedBookmarks,
+          },
+          ...state.categories.slice(categoryIdx + 1),
+        ],
+      };
+    }
+
     default:
       return state;
   }

client/src/utility/templateObjects/bookmarkTemplate.ts

@@ -13,4 +13,5 @@ export const bookmarkTemplate: Bookmark = {
   id: -1,
   createdAt: new Date(),
   updatedAt: new Date(),
+  orderId: 0,
 };

controllers/categories/getAllCategories.js

@@ -18,8 +18,14 @@ const getAllCategories = asyncWrapper(async (req, res, next) => {
 
   const order =
     orderType == 'name'
-      ? [[Sequelize.fn('lower', Sequelize.col('bookmarks.name')), 'ASC']]
-      : [[{ model: Bookmark, as: 'bookmarks' }, orderType, 'ASC']];
+      ? [
+          [Sequelize.fn('lower', Sequelize.col('Category.name')), 'ASC'],
+          [Sequelize.fn('lower', Sequelize.col('bookmarks.name')), 'ASC'],
+        ]
+      : [
+          [orderType, 'ASC'],
+          [{ model: Bookmark, as: 'bookmarks' }, orderType, 'ASC'],
+        ];
 
   categories = categories = await Category.findAll({
     include: [