Update chatper 26

Author: velopert

26/blog/blog-frontend/package.json

@@ -7,11 +7,11 @@
     "immer": "^3.1.3",
     "qs": "^6.7.0",
     "quill": "^1.3.6",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-redux": "^7.1.0",
-    "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "^5.0.0",
     "redux": "^4.0.1",
     "redux-actions": "^2.6.5",
     "redux-devtools-extension": "^2.13.8",

26/blog/blog-frontend/src/App.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import PostListPage from './pages/PostListPage';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
@@ -8,13 +7,16 @@ import PostPage from './pages/PostPage';
 
 const App = () => {
   return (
-    <>
-      <Route component={PostListPage} path={['/@:username', '/']} exact />
-      <Route component={LoginPage} path="/login" />
-      <Route component={RegisterPage} path="/register" />
-      <Route component={WritePage} path="/write" />
-      <Route component={PostPage} path="/@:username/:postId" />
-    </>
+    <Routes>
+      <Route path="/" element={<PostListPage />} />
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/register" element={<RegisterPage />} />
+      <Route path="/write" element={<WritePage />} />
+      <Route path="/@:username">
+        <Route index element={<PostListPage />} />
+        <Route path=":postId" element={<PostPage />} />
+      </Route>
+    </Routes>
   );
 };
 export default App;

26/blog/blog-frontend/src/containers/auth/LoginForm.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { changeField, initializeForm, login } from '../../modules/auth';
 import AuthForm from '../../components/auth/AuthForm';
 import { check } from '../../modules/user';
 
-const LoginForm = ({ history }) => {
+const LoginForm = () => {
+  const navigate = useNavigate();
   const [error, setError] = useState(null);
   const dispatch = useDispatch();
   const { form, auth, authError, user } = useSelector(({ auth, user }) => ({
@@ -15,7 +16,7 @@ const LoginForm = ({ history }) => {
     user: user.user,
   }));
   // 인풋 변경 이벤트 핸들러
-  const onChange = e => {
+  const onChange = (e) => {
     const { value, name } = e.target;
     dispatch(
       changeField({
@@ -27,7 +28,7 @@ const LoginForm = ({ history }) => {
   };
 
   // 폼 등록 이벤트 핸들러
-  const onSubmit = e => {
+  const onSubmit = (e) => {
     e.preventDefault();
     const { username, password } = form;
     dispatch(login({ username, password }));
@@ -53,14 +54,14 @@ const LoginForm = ({ history }) => {
 
   useEffect(() => {
     if (user) {
-      history.push('/');
+      navigate('/');
       try {
         localStorage.setItem('user', JSON.stringify(user));
       } catch (e) {
         console.log('localStorage is not working');
       }
     }
-  }, [history, user]);
+  }, [navigate, user]);
 
   return (
     <AuthForm
@@ -73,4 +74,4 @@ const LoginForm = ({ history }) => {
   );
 };
 
-export default withRouter(LoginForm);
+export default LoginForm;

26/blog/blog-frontend/src/containers/auth/RegisterForm.js

@@ -3,9 +3,10 @@ import { useDispatch, useSelector } from 'react-redux';
 import { changeField, initializeForm, register } from '../../modules/auth';
 import AuthForm from '../../components/auth/AuthForm';
 import { check } from '../../modules/user';
-import { withRouter } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const RegisterForm = ({ history }) => {
+  const navigate = useNavigate();
   const [error, setError] = useState(null);
   const dispatch = useDispatch();
   const { form, auth, authError, user } = useSelector(({ auth, user }) => ({
@@ -15,7 +16,7 @@ const RegisterForm = ({ history }) => {
     user: user.user,
   }));
   // 인풋 변경 이벤트 핸들러
-  const onChange = e => {
+  const onChange = (e) => {
     const { value, name } = e.target;
     dispatch(
       changeField({
@@ -27,7 +28,7 @@ const RegisterForm = ({ history }) => {
   };
 
   // 폼 등록 이벤트 핸들러
-  const onSubmit = e => {
+  const onSubmit = (e) => {
     e.preventDefault();
     const { username, password, passwordConfirm } = form;
     // 하나라도 비어있다면
@@ -75,14 +76,14 @@ const RegisterForm = ({ history }) => {
   // user 값이 잘 설정되었는지 확인
   useEffect(() => {
     if (user) {
-      history.push('/'); // 홈 화면으로 이동
+      navigate('/'); // 홈 화면으로 이동
       try {
         localStorage.setItem('user', JSON.stringify(user));
       } catch (e) {
         console.log('localStorage is not working');
       }
     }
-  }, [history, user]);
+  }, [navigate, user]);
 
   return (
     <AuthForm
@@ -95,4 +96,4 @@ const RegisterForm = ({ history }) => {
   );
 };
 
-export default withRouter(RegisterForm);
+export default RegisterForm;

26/blog/blog-frontend/src/containers/post/PostViewerContainer.js

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { readPost, unloadPost } from '../../modules/post';
 import PostViewer from '../../components/post/PostViewer';
 
-const PostViewerContainer = ({ match }) => {
+const PostViewerContainer = () => {
   // 처음 마운트될 때 포스트 읽기 API 요청
-  const { postId } = match.params;
+  const { postId } = useParams();
   const dispatch = useDispatch();
   const { post, error, loading } = useSelector(({ post, loading }) => ({
     post: post.post,
@@ -25,4 +25,4 @@ const PostViewerContainer = ({ match }) => {
   return <PostViewer post={post} loading={loading} error={error} />;
 };
 
-export default withRouter(PostViewerContainer);
+export default PostViewerContainer;

26/blog/blog-frontend/src/containers/posts/PaginationContainer.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import Pagination from '../../components/posts/Pagination';
 import { useSelector } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import qs from 'qs';
+import { useParams, useSearchParams } from 'react-router-dom';
+
+const PaginationContainer = () => {
+  const [searchParams] = useSearchParams();
+
+  const { username } = useParams();
+  const tag = searchParams.get('tag');
+  // page가 없으면 1을 기본값으로 사용
+  const page = parseInt(searchParams.get('page'), 10) || 1;
 
-const PaginationContainer = ({ location }) => {
   const { lastPage, posts, loading } = useSelector(({ posts, loading }) => ({
     lastPage: posts.lastPage,
     posts: posts.posts,
@@ -14,11 +20,6 @@ const PaginationContainer = ({ location }) => {
   // 포스트 데이터가 없거나 로딩 중이면 아무것도 보여주지 않음
   if (!posts || loading) return null;
 
-  // page가 없으면 1을 기본값으로 사용
-  const { tag, username, page = 1 } = qs.parse(location.search, {
-    ignoreQueryPrefix: true,
-  });
-
   return (
     <Pagination
       tag={tag}
@@ -29,4 +30,4 @@ const PaginationContainer = ({ location }) => {
   );
 };
 
-export default withRouter(PaginationContainer);
+export default PaginationContainer;

26/blog/blog-frontend/src/containers/posts/PostListContainer.js

@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react';
-import qs from 'qs';
-import { withRouter } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import PostList from '../../components/posts/PostList';
 import { listPosts } from '../../modules/posts';
+import { useParams, useSearchParams } from 'react-router-dom';
 
-const PostListContainer = ({ location }) => {
+const PostListContainer = () => {
+  const { username } = useParams();
+  const [searchParams] = useSearchParams();
   const dispatch = useDispatch();
   const { posts, error, loading, user } = useSelector(
     ({ posts, loading, user }) => ({
@@ -16,11 +17,11 @@ const PostListContainer = ({ location }) => {
     }),
   );
   useEffect(() => {
-    const { tag, username, page } = qs.parse(location.search, {
-      ignoreQueryPrefix: true,
-    });
+    const tag = searchParams.get('tag');
+    // page가 없으면 1을 기본값으로 사용
+    const page = parseInt(searchParams.get('page'), 10) || 1;
     dispatch(listPosts({ tag, username, page }));
-  }, [dispatch, location.search]);
+  }, [dispatch, searchParams, username]);
 
   return (
     <PostList
@@ -32,4 +33,4 @@ const PostListContainer = ({ location }) => {
   );
 };
 
-export default withRouter(PostListContainer);
+export default PostListContainer;

26/blog/blog-frontend/src/containers/write/WriteActionButtonsContainer.js

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 import WriteActionButtons from '../../components/write/WriteActionButtons';
 import { useSelector, useDispatch } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { writePost } from '../../modules/write';
 
-const WriteActionButtonsContainer = ({ history }) => {
+const WriteActionButtonsContainer = () => {
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const { title, body, tags, post, postError } = useSelector(({ write }) => ({
     title: write.title,
@@ -27,20 +28,20 @@ const WriteActionButtonsContainer = ({ history }) => {
 
   // 취소
   const onCancel = () => {
-    history.goBack();
+    navigate(-1);
   };
 
   // 성공 혹은 실패시 할 작업
   useEffect(() => {
     if (post) {
       const { _id, user } = post;
-      history.push(`/@${user.username}/${_id}`);
+      navigate(`/@${user.username}/${_id}`);
     }
     if (postError) {
       console.log(postError);
     }
-  }, [history, post, postError]);
+  }, [navigate, post, postError]);
   return <WriteActionButtons onPublish={onPublish} onCancel={onCancel} />;
 };
 
-export default withRouter(WriteActionButtonsContainer);
+export default WriteActionButtonsContainer;

26/blog/blog-frontend/src/lib/api/posts.js

@@ -1,16 +1,12 @@
-import qs from 'qs';
 import client from './client';
 
 export const writePost = ({ title, body, tags }) =>
   client.post('/api/posts', { title, body, tags });
 
-export const readPost = id => client.get(`/api/posts/${id}`);
+export const readPost = (id) => client.get(`/api/posts/${id}`);
 
 export const listPosts = ({ page, username, tag }) => {
-  const queryString = qs.stringify({
-    page,
-    username,
-    tag,
+  return client.get(`/api/posts`, {
+    params: { page, username, tag },
   });
-  return client.get(`/api/posts?${queryString}`);
 };