Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-19 11:39:36 +02:00
Code Issues Releases 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
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 axios from 'axios';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { applyAuth } from '../../utility';
import { ActionType } from '../action-types';
import { import {
ApiResponse, ApiResponse,
Bookmark, Bookmark,
@ -8,8 +11,7 @@ import {
NewBookmark, NewBookmark,
NewCategory, NewCategory,
} from '../../interfaces'; } from '../../interfaces';
import { applyAuth } from '../../utility';
import { ActionType } from '../action-types';
import { import {
AddBookmarkAction, AddBookmarkAction,
AddCategoryAction, AddCategoryAction,
@ -17,6 +19,7 @@ import {
DeleteCategoryAction, DeleteCategoryAction,
GetCategoriesAction, GetCategoriesAction,
PinCategoryAction, PinCategoryAction,
ReorderBookmarksAction,
ReorderCategoriesAction, ReorderCategoriesAction,
SetEditBookmarkAction, SetEditBookmarkAction,
SetEditCategoryAction, SetEditCategoryAction,
@ -339,3 +342,38 @@ export const setEditBookmark =
payload: bookmark, 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', deleteBookmark = 'DELETE_BOOKMARK',
updateBookmark = 'UPDATE_BOOKMARK', updateBookmark = 'UPDATE_BOOKMARK',
setEditBookmark = 'SET_EDIT_BOOKMARK', setEditBookmark = 'SET_EDIT_BOOKMARK',
reorderBookmarks = 'REORDER_BOOKMARKS',
// AUTH // AUTH
login = 'LOGIN', login = 'LOGIN',
logout = 'LOGOUT', logout = 'LOGOUT',

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

@ -66,3 +66,11 @@ export interface SetEditBookmarkAction {
type: ActionType.setEditBookmark; type: ActionType.setEditBookmark;
payload: Bookmark | null; 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, UpdateBookmarkAction,
SetEditCategoryAction, SetEditCategoryAction,
SetEditBookmarkAction, SetEditBookmarkAction,
ReorderBookmarksAction,
} from './bookmark'; } from './bookmark';
import { import {
@ -85,6 +86,7 @@ export type Action =
| DeleteBookmarkAction | DeleteBookmarkAction
| UpdateBookmarkAction | UpdateBookmarkAction
| SetEditBookmarkAction | SetEditBookmarkAction
| ReorderBookmarksAction
// Auth // Auth
| LoginAction | LoginAction
| LogoutAction | LogoutAction

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

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