diff --git a/client/src/components/Bookmarks/Bookmarks.tsx b/client/src/components/Bookmarks/Bookmarks.tsx index 5bbe324..a708995 100644 --- a/client/src/components/Bookmarks/Bookmarks.tsx +++ b/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); } diff --git a/client/src/components/Bookmarks/Form/BookmarksForm.tsx b/client/src/components/Bookmarks/Form/BookmarksForm.tsx index 60cfb5c..65f658d 100644 --- a/client/src/components/Bookmarks/Form/BookmarksForm.tsx +++ b/client/src/components/Bookmarks/Form/BookmarksForm.tsx @@ -137,11 +137,11 @@ export const BookmarksForm = ({ } modalHandler(); - - setFormData(newBookmarkTemplate); - - setCustomIcon(null); } + + setFormData(newBookmarkTemplate); + + setCustomIcon(null); }; return ( diff --git a/client/src/components/Bookmarks/Form/CategoryForm.tsx b/client/src/components/Bookmarks/Form/CategoryForm.tsx index c7e0105..b7ffb58 100644 --- a/client/src/components/Bookmarks/Form/CategoryForm.tsx +++ b/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 ( diff --git a/client/src/components/Settings/UISettings/UISettings.tsx b/client/src/components/Settings/UISettings/UISettings.tsx index 1e2b42b..075a427 100644 --- a/client/src/components/Settings/UISettings/UISettings.tsx +++ b/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( @@ -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 diff --git a/client/src/interfaces/Bookmark.ts b/client/src/interfaces/Bookmark.ts index db10380..858101c 100644 --- a/client/src/interfaces/Bookmark.ts +++ b/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; +} diff --git a/client/src/store/action-creators/bookmark.ts b/client/src/store/action-creators/bookmark.ts index f2a17e5..5f077a6 100644 --- a/client/src/store/action-creators/bookmark.ts +++ b/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(sortBookmarks(res.data.data.categoryId)); } catch (err) { console.log(err); } @@ -271,6 +274,8 @@ export const updateBookmark = payload: res.data.data, }); } + + dispatch(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) => { + try { + const res = await axios.get>('/api/config'); + + dispatch({ + type: ActionType.sortBookmarks, + payload: { + orderType: res.data.data.useOrdering, + categoryId, + }, + }); + } catch (err) { + console.log(err); + } + }; diff --git a/client/src/store/action-types/index.ts b/client/src/store/action-types/index.ts index 80853c4..4be159f 100644 --- a/client/src/store/action-types/index.ts +++ b/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', diff --git a/client/src/store/actions/bookmark.ts b/client/src/store/actions/bookmark.ts index d9c89e8..7c9e1f2 100644 --- a/client/src/store/actions/bookmark.ts +++ b/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; + }; +} diff --git a/client/src/store/actions/index.ts b/client/src/store/actions/index.ts index 22d33d3..bd0b360 100644 --- a/client/src/store/actions/index.ts +++ b/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 diff --git a/client/src/store/reducers/bookmark.ts b/client/src/store/reducers/bookmark.ts index 3c069f0..7f2510c 100644 --- a/client/src/store/reducers/bookmark.ts +++ b/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( + 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; } diff --git a/client/src/utility/templateObjects/bookmarkTemplate.ts b/client/src/utility/templateObjects/bookmarkTemplate.ts index d2b1749..a359392 100644 --- a/client/src/utility/templateObjects/bookmarkTemplate.ts +++ b/client/src/utility/templateObjects/bookmarkTemplate.ts @@ -13,4 +13,5 @@ export const bookmarkTemplate: Bookmark = { id: -1, createdAt: new Date(), updatedAt: new Date(), + orderId: 0, }; diff --git a/controllers/categories/getAllCategories.js b/controllers/categories/getAllCategories.js index eb0eb24..7bde6ba 100644 --- a/controllers/categories/getAllCategories.js +++ b/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: [