From 08c769b630eb103e7369edbd7db51e6267a483c3 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 5 Jun 2021 15:48:43 +0200 Subject: [PATCH] Changing bookmark category --- .gitignore | 4 +- .../Bookmarks/BookmarkForm/BookmarkForm.tsx | 4 +- client/src/store/actions/bookmark.ts | 39 ++++++++---- client/src/store/reducers/bookmark.ts | 61 +++++++++---------- db.js | 4 +- 5 files changed, 64 insertions(+), 48 deletions(-) diff --git a/.gitignore b/.gitignore index d4d4f0e..477ae0c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ node_modules/ -.env -*.sqlite \ No newline at end of file +data/ +.env \ No newline at end of file diff --git a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx index 9579b7c..0365d29 100644 --- a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx +++ b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx @@ -17,7 +17,7 @@ interface ComponentProps { addCategory: (formData: NewCategory) => void; addBookmark: (formData: NewBookmark) => void; updateCategory: (id: number, formData: NewCategory) => void; - updateBookmark: (id: number, formData: NewBookmark, categoryWasChanged: boolean) => void; + updateBookmark: (id: number, formData: NewBookmark, previousCategoryId: number) => void; createNotification: (notification: NewNotification) => void; } @@ -90,7 +90,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { setCategoryName({ name: '' }); } else if (props.contentType === ContentType.bookmark && props.bookmark) { // Update bookmark - props.updateBookmark(props.bookmark.id, formData, props.bookmark.categoryId !== formData.categoryId); + props.updateBookmark(props.bookmark.id, formData, props.bookmark.categoryId); setFormData({ name: '', url: '', diff --git a/client/src/store/actions/bookmark.ts b/client/src/store/actions/bookmark.ts index f65eec2..11a8909 100644 --- a/client/src/store/actions/bookmark.ts +++ b/client/src/store/actions/bookmark.ts @@ -218,13 +218,10 @@ export const deleteBookmark = (bookmarkId: number, categoryId: number) => async */ export interface UpdateBookmarkAction { type: ActionTypes.updateBookmark, - payload: { - bookmark: Bookmark, - categoryWasChanged: boolean - } + payload: Bookmark } -export const updateBookmark = (bookmarkId: number, formData: NewBookmark, categoryWasChanged: boolean) => async (dispatch: Dispatch) => { +export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previousCategoryId: number) => async (dispatch: Dispatch) => { try { const res = await axios.put>(`/api/bookmarks/${bookmarkId}`, formData); @@ -236,13 +233,31 @@ export const updateBookmark = (bookmarkId: number, formData: NewBookmark, catego } }) - dispatch({ - type: ActionTypes.updateBookmark, - payload: { - bookmark: res.data.data, - categoryWasChanged - } - }) + // Check if category was changed + const categoryWasChanged = formData.categoryId !== previousCategoryId; + + if (categoryWasChanged) { + // Delete bookmark from old category + dispatch({ + type: ActionTypes.deleteBookmark, + payload: { + bookmarkId, + categoryId: previousCategoryId + } + }) + + // Add bookmark to the new category + dispatch({ + type: ActionTypes.addBookmark, + payload: res.data.data + }) + } else { + // Else update only name/url + dispatch({ + type: ActionTypes.updateBookmark, + payload: res.data.data + }) + } } catch (err) { console.log(err); } diff --git a/client/src/store/reducers/bookmark.ts b/client/src/store/reducers/bookmark.ts index b39abbb..2c1d5f0 100644 --- a/client/src/store/reducers/bookmark.ts +++ b/client/src/store/reducers/bookmark.ts @@ -30,28 +30,36 @@ const getCategoriesSuccess = (state: State, action: Action): State => { } const addCategory = (state: State, action: Action): State => { - const tmpCategories = [...state.categories, { - ...action.payload, - bookmarks: [] - }]; - return { ...state, - categories: tmpCategories + categories: [ + ...state.categories, + { + ...action.payload, + bookmarks: [] + } + ] } } const addBookmark = (state: State, action: Action): State => { - const tmpCategories = [...state.categories]; - const tmpCategory = tmpCategories.find((category: Category) => category.id === action.payload.categoryId); - - if (tmpCategory) { - tmpCategory.bookmarks.push(action.payload); - } + const categoryIndex = state.categories.findIndex((category: Category) => category.id === action.payload.categoryId); return { ...state, - categories: tmpCategories + categories: [ + ...state.categories.slice(0, categoryIndex), + { + ...state.categories[categoryIndex], + bookmarks: [ + ...state.categories[categoryIndex].bookmarks, + { + ...action.payload + } + ] + }, + ...state.categories.slice(categoryIndex + 1) + ] } } @@ -70,11 +78,14 @@ const pinCategory = (state: State, action: Action): State => { } const deleteCategory = (state: State, action: Action): State => { - const tmpCategories = [...state.categories].filter((category: Category) => category.id !== action.payload); + const categoryIndex = state.categories.findIndex((category: Category) => category.id === action.payload); return { ...state, - categories: tmpCategories + categories: [ + ...state.categories.slice(0, categoryIndex), + ...state.categories.slice(categoryIndex + 1) + ] } } @@ -100,6 +111,7 @@ const deleteBookmark = (state: State, action: Action): State => { categoryInUpdate.bookmarks = categoryInUpdate.bookmarks.filter((bookmark: Bookmark) => bookmark.id !== action.payload.bookmarkId); } + return { ...state, categories: tmpCategories @@ -107,21 +119,8 @@ const deleteBookmark = (state: State, action: Action): State => { } const updateBookmark = (state: State, action: Action): State => { - const { bookmark, categoryWasChanged } = action.payload; - const tmpCategories = [...state.categories]; - - let categoryIndex = state.categories.findIndex((category: Category) => category.id === bookmark.categoryId); - let bookmarkIndex = state.categories[categoryIndex].bookmarks.findIndex((bookmark: Bookmark) => bookmark.id === bookmark.id); - - // if (categoryWasChanged) { - // const categoryInUpdate = tmpCategories.find((category: Category) => category.id === bookmark.categoryId); - - // if (categoryInUpdate) { - // categoryInUpdate.bookmarks = categoryInUpdate.bookmarks.filter((_bookmark: Bookmark) => _bookmark.id === bookmark.id); - // } - - // console.log(categoryInUpdate); - // } + let categoryIndex = state.categories.findIndex((category: Category) => category.id === action.payload.categoryId); + let bookmarkIndex = state.categories[categoryIndex].bookmarks.findIndex((bookmark: Bookmark) => bookmark.id === action.payload.id); return { ...state, @@ -132,7 +131,7 @@ const updateBookmark = (state: State, action: Action): State => { bookmarks: [ ...state.categories[categoryIndex].bookmarks.slice(0, bookmarkIndex), { - ...bookmark + ...action.payload }, ...state.categories[categoryIndex].bookmarks.slice(bookmarkIndex + 1) ] diff --git a/db.js b/db.js index 58d4051..9d1420e 100644 --- a/db.js +++ b/db.js @@ -2,13 +2,15 @@ const { Sequelize } = require('sequelize'); const sequelize = new Sequelize({ dialect: 'sqlite', - storage: './db.sqlite' + storage: './data/db.sqlite', + logging: false }); const connectDB = async () => { try { await sequelize.authenticate({ logging: false }); console.log('Connected to database'.cyan.underline); + await sequelize.sync({ // alter: true, logging: false