props.updateAppHandler(app)}
+ onClick={() => props.updateCategoryHandler(category)}
// onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
tabIndex={0}>
diff --git a/client/src/components/Bookmarks/Bookmarks.tsx b/client/src/components/Bookmarks/Bookmarks.tsx
index 6e39cc3..9346262 100644
--- a/client/src/components/Bookmarks/Bookmarks.tsx
+++ b/client/src/components/Bookmarks/Bookmarks.tsx
@@ -32,6 +32,15 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
const [formContentType, setFormContentType] = useState(ContentType.category);
const [isInEdit, setIsInEdit] = useState(false);
const [tableContentType, setTableContentType] = useState(ContentType.category);
+ const [isInUpdate, setIsInUpdate] = useState(false);
+ const [categoryInUpdate, setCategoryInUpdate] = useState
({
+ name: '',
+ id: -1,
+ isPinned: false,
+ bookmarks: [],
+ createdAt: new Date(),
+ updatedAt: new Date()
+ })
useEffect(() => {
if (props.categories.length === 0) {
@@ -45,6 +54,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
const addActionHandler = (contentType: ContentType) => {
setFormContentType(contentType);
+ setIsInUpdate(false);
toggleModal();
}
@@ -62,10 +72,21 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
}
}
+ const goToUpdateMode = (category: Category): void => {
+ setIsInUpdate(true);
+ setCategoryInUpdate(category);
+ toggleModal();
+ }
+
+ let modalForm: JSX.Element;
+
return (
-
+ {!isInUpdate
+ ?
+ :
+ }
{
: (!isInEdit
? props.categories.length > 0
?
- : You don't have any bookmarks. You can a new one from /bookmarks menu
- : )
+ : You don't have any bookmarks. You can add a new one from /bookmarks menu
+ : ()
+ )
}
)
diff --git a/client/src/components/UI/Buttons/Button/Button.module.css b/client/src/components/UI/Buttons/Button/Button.module.css
new file mode 100644
index 0000000..b9874e1
--- /dev/null
+++ b/client/src/components/UI/Buttons/Button/Button.module.css
@@ -0,0 +1,14 @@
+.Button {
+ padding: 8px 15px;
+ border: 1px solid var(--color-accent);
+ background-color: var(--color-background);
+ color: var(--color-primary);
+ border-radius: 4px;
+}
+
+.Button:hover,
+.Button:focus {
+ cursor: pointer;
+ background-color: var(--color-accent);
+ color: var(--color-background);
+}
\ No newline at end of file
diff --git a/client/src/components/UI/Buttons/Button/Button.tsx b/client/src/components/UI/Buttons/Button/Button.tsx
new file mode 100644
index 0000000..321e993
--- /dev/null
+++ b/client/src/components/UI/Buttons/Button/Button.tsx
@@ -0,0 +1,11 @@
+import classes from './Button.module.css';
+
+interface ComponentProps {
+ children: string;
+}
+
+const Button = (props: ComponentProps): JSX.Element => {
+ return
+}
+
+export default Button;
\ No newline at end of file
diff --git a/client/src/store/actions/actionTypes.ts b/client/src/store/actions/actionTypes.ts
index db5f344..8b8b523 100644
--- a/client/src/store/actions/actionTypes.ts
+++ b/client/src/store/actions/actionTypes.ts
@@ -13,6 +13,7 @@ import {
AddBookmarkAction,
PinCategoryAction,
DeleteCategoryAction,
+ UpdateCategoryAction,
// Notifications
CreateNotificationAction,
ClearNotificationAction
@@ -38,6 +39,7 @@ export enum ActionTypes {
addBookmark = 'ADD_BOOKMARK',
pinCategory = 'PIN_CATEGORY',
deleteCategory = 'DELETE_CATEGORY',
+ updateCategory = 'UPDATE_CATEGORY',
// Notifications
createNotification = 'CREATE_NOTIFICATION',
clearNotification = 'CLEAR_NOTIFICATION'
@@ -58,6 +60,7 @@ export type Action =
AddBookmarkAction |
PinCategoryAction |
DeleteCategoryAction |
+ UpdateCategoryAction |
// Notifications
CreateNotificationAction |
ClearNotificationAction;
\ No newline at end of file
diff --git a/client/src/store/actions/bookmark.ts b/client/src/store/actions/bookmark.ts
index 933be1b..279d740 100644
--- a/client/src/store/actions/bookmark.ts
+++ b/client/src/store/actions/bookmark.ts
@@ -147,4 +147,33 @@ export const deleteCategory = (id: number) => async (dispatch: Dispatch) => {
} catch (err) {
console.log(err);
}
+}
+
+/**
+ * UPDATE CATEGORY
+ */
+export interface UpdateCategoryAction {
+ type: ActionTypes.updateCategory,
+ payload: Category
+}
+
+export const updateCategory = (id: number, formData: NewCategory) => async (dispatch: Dispatch) => {
+ try {
+ const res = await axios.put>(`/api/categories/${id}`, formData);
+
+ dispatch({
+ type: ActionTypes.createNotification,
+ payload: {
+ title: 'Success',
+ message: `Category ${formData.name} updated`
+ }
+ })
+
+ dispatch({
+ type: ActionTypes.updateCategory,
+ payload: res.data.data
+ })
+ } catch (err) {
+ console.log(err);
+ }
}
\ No newline at end of file
diff --git a/client/src/store/reducers/bookmark.ts b/client/src/store/reducers/bookmark.ts
index 997d880..4a75491 100644
--- a/client/src/store/reducers/bookmark.ts
+++ b/client/src/store/reducers/bookmark.ts
@@ -78,6 +78,20 @@ const deleteCategory = (state: State, action: Action): State => {
}
}
+const updateCategory = (state: State, action: Action): State => {
+ const tmpCategories = [...state.categories];
+ const categoryInUpdate = tmpCategories.find((category: Category) => category.id === action.payload.id);
+
+ if (categoryInUpdate) {
+ categoryInUpdate.name = action.payload.name;
+ }
+
+ return {
+ ...state,
+ categories: tmpCategories
+ }
+}
+
const bookmarkReducer = (state = initialState, action: Action) => {
switch (action.type) {
case ActionTypes.getCategories: return getCategories(state, action);
@@ -86,6 +100,7 @@ const bookmarkReducer = (state = initialState, action: Action) => {
case ActionTypes.addBookmark: return addBookmark(state, action);
case ActionTypes.pinCategory: return pinCategory(state, action);
case ActionTypes.deleteCategory: return deleteCategory(state, action);
+ case ActionTypes.updateCategory: return updateCategory(state, action);
default: return state;
}
}