0ct0pu5/flame
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Reorder bookmarks action. Small refactor of state reducers

Browse source
This commit is contained in:
Paweł Malak 2021-11-22 17:15:01 +01:00
parent f1f7b698f8
commit e15c2a2f07
5 changed files with 126 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
client/src/store/action-creators/bookmark.ts
View file

@ -1,5 +1,8 @@
import axios from 'axios';
import { Dispatch } from 'redux';
import { applyAuth } from '../../utility';
import { ActionType } from '../action-types';
import {
ApiResponse,
Bookmark,
@ -8,8 +11,7 @@ import {
NewBookmark,
NewCategory,
} from '../../interfaces';
import { applyAuth } from '../../utility';
import { ActionType } from '../action-types';
import {
AddBookmarkAction,
AddCategoryAction,
@ -17,6 +19,7 @@ import {
DeleteCategoryAction,
GetCategoriesAction,
PinCategoryAction,
ReorderBookmarksAction,
ReorderCategoriesAction,
SetEditBookmarkAction,
SetEditCategoryAction,
@ -339,3 +342,38 @@ export const setEditBookmark =
payload: bookmark,
});
};
export const reorderBookmarks =
(bookmarks: Bookmark[], categoryId: number) =>
async (dispatch: Dispatch<ReorderBookmarksAction>) => {
interface ReorderQuery {
bookmarks: {
id: number;
orderId: number;
}[];
}
try {
const updateQuery: ReorderQuery = { bookmarks: [] };
bookmarks.forEach((bookmark, index) =>
updateQuery.bookmarks.push({
id: bookmark.id,
orderId: index + 1,
})
);
await axios.put<ApiResponse<{}>>(
'/api/bookmarks/0/reorder',
updateQuery,
{ headers: applyAuth() }
);
dispatch({
type: ActionType.reorderBookmarks,
payload: { bookmarks, categoryId },
});
} catch (err) {
console.log(err);
}
};

1
client/src/store/action-types/index.ts
View file

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

8
client/src/store/actions/bookmark.ts
View file

@ -66,3 +66,11 @@ export interface SetEditBookmarkAction {
type: ActionType.setEditBookmark;
payload: Bookmark | null;
}
export interface ReorderBookmarksAction {
type: ActionType.reorderBookmarks;
payload: {
bookmarks: Bookmark[];
categoryId: number;
};
}

2
client/src/store/actions/index.ts
View file

@ -40,6 +40,7 @@ import {
UpdateBookmarkAction,
SetEditCategoryAction,
SetEditBookmarkAction,
ReorderBookmarksAction,
} from './bookmark';
import {
@ -85,6 +86,7 @@ export type Action =
| DeleteBookmarkAction
| UpdateBookmarkAction
| SetEditBookmarkAction
| ReorderBookmarksAction
// Auth
| LoginAction
| LogoutAction

124
client/src/store/reducers/bookmark.ts
View file

@ -24,32 +24,35 @@ export const bookmarksReducer = (
action: Action
): BookmarksState => {
switch (action.type) {
case ActionType.getCategories:
case ActionType.getCategories: {
return {
...state,
loading: true,
errors: undefined,
};
}
case ActionType.getCategoriesSuccess:
case ActionType.getCategoriesSuccess: {
return {
...state,
loading: false,
categories: action.payload,
};
}
case ActionType.addCategory:
case ActionType.addCategory: {
return {
...state,
categories: [...state.categories, { ...action.payload, bookmarks: [] }],
};
}
case ActionType.addBookmark:
case ActionType.addBookmark: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
);
const categoryWithNewBookmark = {
const targetCategory = {
...state.categories[categoryIdx],
bookmarks: [...state.categories[categoryIdx].bookmarks, action.payload],
};
@ -58,67 +61,71 @@ export const bookmarksReducer = (
...state,
categories: [
...state.categories.slice(0, categoryIdx),
categoryWithNewBookmark,
targetCategory,
...state.categories.slice(categoryIdx + 1),
],
categoryInEdit: categoryWithNewBookmark,
categoryInEdit: targetCategory,
};
}
case ActionType.pinCategory:
const pinnedCategoryIdx = state.categories.findIndex(
case ActionType.pinCategory: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.id
);
return {
...state,
categories: [
...state.categories.slice(0, pinnedCategoryIdx),
...state.categories.slice(0, categoryIdx),
{
...action.payload,
bookmarks: [...state.categories[pinnedCategoryIdx].bookmarks],
bookmarks: [...state.categories[categoryIdx].bookmarks],
},
...state.categories.slice(pinnedCategoryIdx + 1),
...state.categories.slice(categoryIdx + 1),
],
};
}
case ActionType.deleteCategory:
const deletedCategoryIdx = state.categories.findIndex(
case ActionType.deleteCategory: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload
);
return {
...state,
categories: [
...state.categories.slice(0, deletedCategoryIdx),
...state.categories.slice(deletedCategoryIdx + 1),
...state.categories.slice(0, categoryIdx),
...state.categories.slice(categoryIdx + 1),
],
};
}
case ActionType.updateCategory:
const updatedCategoryIdx = state.categories.findIndex(
case ActionType.updateCategory: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.id
);
return {
...state,
categories: [
...state.categories.slice(0, updatedCategoryIdx),
...state.categories.slice(0, categoryIdx),
{
...action.payload,
bookmarks: [...state.categories[updatedCategoryIdx].bookmarks],
bookmarks: [...state.categories[categoryIdx].bookmarks],
},
...state.categories.slice(updatedCategoryIdx + 1),
...state.categories.slice(categoryIdx + 1),
],
};
}
case ActionType.deleteBookmark:
const categoryInUpdateIdx = state.categories.findIndex(
case ActionType.deleteBookmark: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
);
const targetCategory = {
...state.categories[categoryInUpdateIdx],
bookmarks: state.categories[categoryInUpdateIdx].bookmarks.filter(
...state.categories[categoryIdx],
bookmarks: state.categories[categoryIdx].bookmarks.filter(
(bookmark) => bookmark.id !== action.payload.bookmarkId
),
};
@ -126,69 +133,88 @@ export const bookmarksReducer = (
return {
...state,
categories: [
...state.categories.slice(0, categoryInUpdateIdx),
...state.categories.slice(0, categoryIdx),
targetCategory,
...state.categories.slice(categoryInUpdateIdx + 1),
...state.categories.slice(categoryIdx + 1),
],
categoryInEdit: targetCategory,
};
}
case ActionType.updateBookmark:
const parentCategoryIdx = state.categories.findIndex(
case ActionType.updateBookmark: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
);
const updatedBookmarkIdx = state.categories[
parentCategoryIdx
].bookmarks.findIndex((bookmark) => bookmark.id === action.payload.id);
const bookmarkIdx = state.categories[categoryIdx].bookmarks.findIndex(
(bookmark) => bookmark.id === action.payload.id
);
const categoryWithUpdatedBookmark = {
...state.categories[parentCategoryIdx],
const targetCategory = {
...state.categories[categoryIdx],
bookmarks: [
...state.categories[parentCategoryIdx].bookmarks.slice(
0,
updatedBookmarkIdx
),
...state.categories[categoryIdx].bookmarks.slice(0, bookmarkIdx),
action.payload,
...state.categories[parentCategoryIdx].bookmarks.slice(
updatedBookmarkIdx + 1
),
...state.categories[categoryIdx].bookmarks.slice(bookmarkIdx + 1),
],
};
return {
...state,
categories: [
...state.categories.slice(0, parentCategoryIdx),
categoryWithUpdatedBookmark,
...state.categories.slice(parentCategoryIdx + 1),
...state.categories.slice(0, categoryIdx),
targetCategory,
...state.categories.slice(categoryIdx + 1),
],
categoryInEdit: categoryWithUpdatedBookmark,
categoryInEdit: targetCategory,
};
}
case ActionType.sortCategories:
case ActionType.sortCategories: {
return {
...state,
categories: sortData<Category>(state.categories, action.payload),
};
}
case ActionType.reorderCategories:
case ActionType.reorderCategories: {
return {
...state,
categories: action.payload,
};
}
case ActionType.setEditCategory:
case ActionType.setEditCategory: {
return {
...state,
categoryInEdit: action.payload,
};
}
case ActionType.setEditBookmark:
case ActionType.setEditBookmark: {
return {
...state,
bookmarkInEdit: action.payload,
};
}
case ActionType.reorderBookmarks: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
);
return {
...state,
categories: [
...state.categories.slice(0, categoryIdx),
{
...state.categories[categoryIdx],
bookmarks: action.payload.bookmarks,
},
...state.categories.slice(categoryIdx + 1),
],
};
}
default:
return state;