Skip to content

Commit cd9b3a9

Browse files
bellasimibellasimi
authored
merge: 게시물 삭제, 댓글 수정 시 userContext 갱신
Refactor: 게시물 삭제, 댓글 수정 시 userContext 갱신
2 parents 41d682b + e1e60db commit cd9b3a9

12 files changed

Lines changed: 171 additions & 116 deletions

File tree

‎src/App.jsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
1-
import { ThemeProvider } from '@emotion/react';
21
import ContextProviders from 'contexts';
3-
import theme from 'styles/theme';
42
import DefaultTemplate from 'template/DefaultTemplate';
53
import Router from 'routes/Router';
64

75
const App = () => {
86
return (
9-
<ThemeProvider theme={theme}>
10-
<ContextProviders>
11-
<DefaultTemplate>
12-
<Router />
13-
</DefaultTemplate>
14-
</ContextProviders>
15-
</ThemeProvider>
7+
<ContextProviders>
8+
<DefaultTemplate>
9+
<Router />
10+
</DefaultTemplate>
11+
</ContextProviders>
1612
);
1713
};
1814

‎src/components/basic/Button/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import PropTypes from 'prop-types';
22
import styled from '@emotion/styled';
3-
import colors from 'utils/constants/colors';
3+
import theme from 'styles/theme';
44

5-
const { mainGreen } = colors;
5+
const { mainGreen } = theme.color;
66

77
const StyledButton = styled.button`
88
border-radius: ${({ borderRadius }) => borderRadius};

‎src/contexts/UserContext/handles.jsx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,15 @@ import {
1313
unFollow,
1414
setNotification,
1515
} from 'utils/apis/userApi';
16-
17-
import { channelId, addPost, updatePost, getUserPosts } from 'utils/apis/postApi';
16+
import {
17+
channelId,
18+
addPost,
19+
updatePost,
20+
deletePost,
21+
getUserPosts,
22+
addComment,
23+
deleteComment,
24+
} from 'utils/apis/postApi';
1825
import { objectToForm } from 'utils/functions/converter';
1926

2027
const useHandles = () => {
@@ -160,6 +167,27 @@ const useHandles = () => {
160167
[localToken],
161168
);
162169

170+
const handleDeletePost = useCallback(
171+
async (postId) => {
172+
return await deletePost(localToken, postId).then((res) => res.data);
173+
},
174+
[localToken],
175+
);
176+
177+
const handleAddComment = useCallback(
178+
async (postId, value) => {
179+
return await addComment(localToken, postId, value).then((res) => res.data);
180+
},
181+
[localToken],
182+
);
183+
184+
const handleDeleteComment = useCallback(
185+
async (commentId) => {
186+
return await deleteComment(localToken, commentId);
187+
},
188+
[localToken],
189+
);
190+
163191
return {
164192
handleGetCurrentUser,
165193
handleLogin,
@@ -172,6 +200,9 @@ const useHandles = () => {
172200
handleUnFollow,
173201
handleAddPost,
174202
handleEditPost,
203+
handleDeletePost,
204+
handleAddComment,
205+
handleDeleteComment,
175206
};
176207
};
177208

‎src/contexts/UserContext/index.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ import {
1717
DISLIKE,
1818
ADD_POST,
1919
EDIT_POST,
20+
DELETE_POST,
21+
ADD_COMMENT,
22+
DELETE_COMMENT,
2023
} from './types';
2124

2225
export const UserContext = createContext(initialUserData);
@@ -37,6 +40,9 @@ const UserProvider = ({ children }) => {
3740
handleUnFollow,
3841
handleAddPost,
3942
handleEditPost,
43+
handleDeletePost,
44+
handleAddComment,
45+
handleDeleteComment,
4046
} = useHandles();
4147

4248
const onLogin = useCallback(
@@ -144,6 +150,31 @@ const UserProvider = ({ children }) => {
144150
[handleEditPost],
145151
);
146152

153+
const onDeletePost = useCallback(
154+
async (postId) => {
155+
const posts = await handleDeletePost(postId);
156+
dispatch({ type: DELETE_POST, payload: posts });
157+
},
158+
[handleDeletePost],
159+
);
160+
161+
const onAddComment = useCallback(
162+
async (postId, value) => {
163+
const comment = await handleAddComment(postId, value);
164+
dispatch({ type: ADD_COMMENT, payload: comment._id });
165+
return comment;
166+
},
167+
[handleAddComment],
168+
);
169+
170+
const onDeleteComment = useCallback(
171+
async (commentId) => {
172+
await handleDeleteComment(commentId);
173+
dispatch({ type: DELETE_COMMENT, payload: commentId });
174+
},
175+
[handleDeleteComment],
176+
);
177+
147178
const value = useMemo(() => {
148179
return {
149180
currentUser,
@@ -161,6 +192,9 @@ const UserProvider = ({ children }) => {
161192
onKeepLoggedIn,
162193
onAddPost,
163194
onEditPost,
195+
onDeletePost,
196+
onAddComment,
197+
onDeleteComment,
164198
};
165199
}, [
166200
currentUser,
@@ -178,6 +212,9 @@ const UserProvider = ({ children }) => {
178212
onKeepLoggedIn,
179213
onAddPost,
180214
onEditPost,
215+
onDeletePost,
216+
onAddComment,
217+
onDeleteComment,
181218
]);
182219

183220
return <UserContext.Provider value={value}>{children}</UserContext.Provider>;

‎src/contexts/UserContext/reducer.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ import {
1414
DISLIKE,
1515
ADD_POST,
1616
EDIT_POST,
17+
DELETE_POST,
18+
ADD_COMMENT,
19+
DELETE_COMMENT,
1720
} from './types';
1821

1922
export const initialUserData = {
@@ -27,6 +30,7 @@ export const initialUserData = {
2730
followers: [],
2831
following: [],
2932
notifications: [],
33+
comments: [],
3034
},
3135
isLoading: false,
3236
};
@@ -47,6 +51,7 @@ export const reducer = (state, { type, payload }) => {
4751
following: payload.following,
4852
notifications: payload.notifications,
4953
likes: payload.likes,
54+
comments: payload.comments,
5055
},
5156
};
5257
}
@@ -65,6 +70,7 @@ export const reducer = (state, { type, payload }) => {
6570
following: payload.following,
6671
notifications: payload.notifications,
6772
likes: payload.likes,
73+
comments: payload.comments,
6874
},
6975
};
7076
}
@@ -184,5 +190,32 @@ export const reducer = (state, { type, payload }) => {
184190
},
185191
};
186192
}
193+
case DELETE_POST: {
194+
return {
195+
...state,
196+
currentUser: {
197+
...state.currentUser,
198+
posts: state.currentUser.posts.filter((post) => post._id !== payload._id),
199+
},
200+
};
201+
}
202+
case ADD_COMMENT: {
203+
return {
204+
...state,
205+
currentUser: {
206+
...state.currentUser,
207+
comments: [...state.currentUser.comments, payload],
208+
},
209+
};
210+
}
211+
case DELETE_COMMENT: {
212+
return {
213+
...state,
214+
currentUser: {
215+
...state.currentUser,
216+
comments: state.currentUser.comments.filter((comment) => comment !== payload),
217+
},
218+
};
219+
}
187220
}
188221
};

‎src/contexts/UserContext/types.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,6 @@ export const LIKE = 'LIKE';
1313
export const DISLIKE = 'DISLIKE';
1414
export const ADD_POST = 'ADD_POST';
1515
export const EDIT_POST = 'EDIT_POST';
16+
export const DELETE_POST = 'DELETE_POST';
17+
export const ADD_COMMENT = 'ADD_COMMENT';
18+
export const DELETE_COMMENT = 'DELETE_COMMENT';

‎src/pages/MainPage/PostBody.jsx‎

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { jsx, css } from '@emotion/react';
33
import { useCallback, useState, useEffect } from 'react';
44
import { useNavigate } from 'react-router-dom';
55
import styled from '@emotion/styled';
6-
import { Image, Text, Icon } from 'components';
6+
import { Image, Text } from 'components';
77
import theme from 'styles/theme';
88
import { setLike, setDisLike } from 'utils/apis/postApi';
99
import { setNotification } from 'utils/apis/userApi';
@@ -12,6 +12,7 @@ import useScrollPosition from 'hooks/useScrollPosition';
1212
import { useUserContext } from 'contexts/UserContext';
1313
import { IMAGE_URLS } from 'utils/constants/images';
1414
import displayedAt from 'utils/functions/displayedAt';
15+
import IconButton from 'components/basic/Icon/IconButton';
1516

1617
const PostBody = ({ index, post, isDetailPage = false }) => {
1718
const { _id: postId, image, likes, comments, createdAt, author } = post || {};
@@ -103,12 +104,18 @@ const PostBody = ({ index, post, isDetailPage = false }) => {
103104
<IconButtons>
104105
<IconButton
105106
name={onHeart ? 'HEART_RED' : 'HEART'} // Todo: 상수화
107+
size={22}
108+
style={IconButtonStyle}
106109
onClick={handleClickHeart}
107110
>
108-
<IconButtonText>{heartCount}</IconButtonText>
111+
<Text fontSize={16} style={IconButtonTextStyle}>
112+
{heartCount}
113+
</Text>
109114
</IconButton>
110-
<IconButton name="COMMENT" onClick={navigateToDetailPage}>
111-
<IconButtonText>{comments.length}</IconButtonText>
115+
<IconButton name="COMMENT" size={22} onClick={navigateToDetailPage}>
116+
<Text fontSize={16} style={IconButtonTextStyle}>
117+
{comments.length}
118+
</Text>
112119
</IconButton>
113120
</IconButtons>
114121
<TextContainer>
@@ -158,38 +165,18 @@ const IconButtons = styled.div`
158165
display: flex;
159166
`;
160167

161-
const IconButton = ({ name, children, onClick }) => {
162-
const style = {
163-
padding: 0,
164-
borderRadius: '0',
165-
marginRight: '16px',
166-
display: 'flex',
167-
alignItems: 'center',
168-
justifyContent: 'center',
169-
backgroundColor: 'transparent',
170-
color: theme.color.fontBlack,
171-
};
172-
return (
173-
<button style={style} onClick={onClick}>
174-
<Icon name={name} size={22} />
175-
{children}
176-
</button>
177-
);
168+
const IconButtonStyle = {
169+
marginRight: '16px',
170+
color: theme.color.fontBlack,
178171
};
179172

180-
const IconButtonText = ({ children, ...props }) => {
181-
const style = {
182-
color: theme.color.fontBlack,
183-
marginLeft: '8px',
184-
PointerEvent: 'none',
185-
lineHeight: '19px',
186-
transform: 'translateY(-1px)',
187-
};
188-
return (
189-
<Text fontSize={16} style={style} {...props}>
190-
{children}
191-
</Text>
192-
);
173+
const IconButtonTextStyle = {
174+
fontSize: '16px',
175+
color: theme.color.fontBlack,
176+
marginLeft: '8px',
177+
PointerEvent: 'none',
178+
lineHeight: '19px',
179+
transform: 'translateY(-1px)',
193180
};
194181

195182
const TextContainer = styled.div`

0 commit comments

Comments
 (0)