yanghun0070 · yanghun0070 · Sep 29, 2020 · Sep 29, 2020
diff --git a/dayco-app/src/App.js b/dayco-app/src/App.js
@@ -12,6 +12,7 @@ import { getCurrentUser } from './actions/user';
 import {  dispatchCreatePostsSuccess, dispatchCreatePostsFail, 
   dispatchEditPostsSuccess, dispatchEditPostsFail,
   dispatchDeletePostsSuccess } from './actions/posts';
+import { dispatchPostsIncreaseLikeSuccess } from './actions/postsLike';
 import { API_BASE_URL } from './constants';
 import SockJsClient from 'react-stomp';
 import Cookies from "js-cookie";
@@ -42,18 +43,19 @@ class App extends Component {
         <SockJsClient 
           ref={(el) => this.clientRef = el}
           url= {API_BASE_URL + "/dayco-websocket"}
-          topics = {["/topic/posts"]}
+          topics = {["/topic/posts", "/topic/posts/like"]}
           headers= {customHeaders}        
           subscribeHeaders={customHeaders}      
           //message 보냈을 때의 callback
           onMessage={(msg) => {
-            console.log(msg)
-            if(this.props.status === 'create') {
+            if(this.props.socketActionStatus === 'postsCreate') {
                 this.props.dispatchCreatePostsSuccess(msg);
-            } else if(this.props.status === 'edit') {
+            } else if(this.props.socketActionStatus === 'postsEdit') {
                 this.props.dispatchEditPostsSuccess(msg);
-            } else {
+            } else if(this.props.socketActionStatus === 'postsDelete') {
                 this.props.dispatchDeletePostsSuccess(msg.id, msg.author);
+            } else if(this.props.socketActionStatus == 'postsLikeIncrease') {
+              this.props.dispatchPostsIncreaseLikeSuccess(msg.id, msg.likeCount)
             }
           }}
           onConnectFailure={(error)=> console.log("Connect Fail : " + error)}
@@ -67,7 +69,7 @@ class App extends Component {
           <Switch>
             <Route path="/login" component={Login} />
             <Route path="/signup" component={SignUp}/>
-            <Route path="/home" component={PostsList} />
+            <Route path="/home" component={() => <PostsList clientRef={this.clientRef}/>} />
             <Route path="/oauth2/redirect" component={OAuth2RedirectHandler}/>
           </Switch>
         </Container>
@@ -80,9 +82,10 @@ class App extends Component {
 const mapStateToProps = (state) => {
 	return {
     user: state.user,
-    status: state.postsEditModal.status,
+    socketActionStatus: state.socket.actionStatus,
 	};
 }
 export default connect(mapStateToProps, {getCurrentUser,
-  dispatchCreatePostsSuccess, dispatchEditPostsSuccess, dispatchDeletePostsSuccess
+  dispatchCreatePostsSuccess, dispatchEditPostsSuccess, dispatchDeletePostsSuccess,
+  dispatchPostsIncreaseLikeSuccess
 })(App);
diff --git a/dayco-app/src/actions/posts.js b/dayco-app/src/actions/posts.js
@@ -254,4 +254,28 @@ export function hidePostsEditModal() {
             type: types.postsEditModal.MODAL_HIDE 
         })
     };
+}
+
+export function dispatchBeforeCreatePosts() {
+    return dispatch => {
+        dispatch({
+            type: types.actionStatus.SOCKET_POST_CREATE
+        })
+    };
+}
+
+export function dispatchBeforeEditPosts() {
+    return dispatch => {
+        dispatch({
+            type: types.actionStatus.SOCKET_POST_EDIT
+        })
+    };
+}
+
+export function dispatchBeforeDelPosts() {
+    return dispatch => {
+        dispatch({
+            type: types.actionStatus.SOCKET_POST_DELETE
+        })
+    };
 }
diff --git a/dayco-app/src/actions/postsLike.js b/dayco-app/src/actions/postsLike.js
@@ -0,0 +1,69 @@
+import * as types from '../constants/types';
+import * as API from '../services/http';
+
+export function getPostsLikeCount(id) {
+  return dispatch => {
+    return API.getPostsLikeCount(id)
+               .then(async(response) => {
+      dispatch({
+        type: types.postsLikeCount.GET_SUCCESS,
+        like: response.data
+      })
+    }).catch(function (error) {
+      dispatch({
+        type: types.postsLikeCount.GET_FAIL
+      })
+    })
+  }
+}
+
+export function increaseLikeCount(id) {
+  return dispatch => {
+    return API.increaseLikeCount(id)
+               .then(async(response) => {
+      dispatch({
+        type: types.postsLikeCount.INCREASE_SUCCESS,
+        id: response.data.id,
+        likeCount: response.data.likeCount
+      });
+    }).catch(function (error) {
+      dispatch({
+        type: types.postsLikeCount.INCREASE_FAIL
+      })
+    })
+  }
+}
+
+export function dispatchPostsIncreaseLikeSuccess(id, likeCount) {
+  return dispatch => {
+    dispatch({
+      type: types.postsLikeCount.INCREASE_SUCCESS,
+      id: id,
+      likeCount: likeCount
+    })
+  }
+}
+
+export function dispatchBeforeIncreaseLike() {
+  return dispatch => {
+    dispatch({
+      type: types.actionStatus.SOCKET_POST_LIKE_INCREASE
+    })
+  }
+}
+
+export function dispatchBeforeDecreaseLike() {
+  return dispatch => {
+    dispatch({
+      type: types.actionStatus.SOCKET_POST_LIKE_DECREASE
+    })
+  }
+}
+
+export function dispatchBeforeGetLike() {
+  return dispatch => {
+    dispatch({
+      type: types.actionStatus.SOCKET_POST_LIKE_GET
+    })
+  }
+}
diff --git a/dayco-app/src/components/posts/PostEditModal.js b/dayco-app/src/components/posts/PostEditModal.js
@@ -2,7 +2,9 @@ import React, { Component } from 'react';
 import { Form, Button,  Modal } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { withRouter } from "react-router";
-import { createPosts, editPosts, deletePosts, hidePostsEditModal } from '../../actions/posts';
+import { createPosts, editPosts, deletePosts, 
+    dispatchBeforeCreatePosts, dispatchBeforeEditPosts, dispatchBeforeDelPosts,
+    hidePostsEditModal } from '../../actions/posts';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSmileBeam, faSms } from '@fortawesome/free-solid-svg-icons'
 import Cookies from "js-cookie";
@@ -17,7 +19,7 @@ class PostsEditModal extends Component {
             requestContent: ''
         }
         this.requestTitleChange = this.requestTitleChange.bind(this);
-		this.requestContentChange = this.requestContentChange.bind(this);
+		    this.requestContentChange = this.requestContentChange.bind(this);
     }
 
     hideModal() {
@@ -34,38 +36,41 @@ class PostsEditModal extends Component {
 
     createPosts = () => {
         if(this.props.isSocket === true) {
+            this.props.dispatchBeforeCreatePosts();
             let jsonStr = JSON.stringify({
                 type: "create", 
                 title: this.state.requestTitle, 
                 content: this.state.requestContent
             })
-            this.sendMessage("/app/dayco-websocket", jsonStr);   
+            this.sendMessage("/app/posts", jsonStr);
         } else {
             this.props.createPosts(this.state.requestTitle, this.state.requestContent);
         }
     }
 
     editPosts = () => {
         if(this.props.isSocket === true) {
+            this.props.dispatchBeforeEditPosts();
             let jsonStr = JSON.stringify({
                 type: "edit", 
                 postsId: this.props.id,
                 title: this.state.requestTitle, 
                 content: this.state.requestContent
             })
-            this.sendMessage("/app/dayco-websocket", jsonStr);        
+            this.sendMessage("/app/posts", jsonStr);
         } else {
             this.props.editPosts(this.props.id, this.state.requestTitle, this.state.requestContent, this.props.author)
         }
     }
 
     deletePosts = () => {
         if(this.props.isSocket === true) {
+            this.props.dispatchBeforeDelPosts();
             let jsonStr = JSON.stringify({
                 type: "delete", 
                 postsId: this.props.id
             })
-            this.sendMessage("/app/dayco-websocket", jsonStr);   
+            this.sendMessage("/app/posts", jsonStr);
         } else {
             this.props.deletePosts(this.props.id, this.props.author);
         }
@@ -159,4 +164,5 @@ const mapStateToProps = (state) => {
 }
 
 export default withRouter(connect(mapStateToProps, {createPosts, editPosts, deletePosts,
+    dispatchBeforeCreatePosts, dispatchBeforeEditPosts, dispatchBeforeDelPosts,
     hidePostsEditModal})(PostsEditModal));
diff --git a/dayco-app/src/components/posts/Posts.js b/dayco-app/src/components/posts/Posts.js
@@ -1,29 +1,67 @@
 import React, { Component } from 'react';
 import { Card, ListGroup, ListGroupItem, Badge, DropdownButton, DropdownItem } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCoffee, faRainbow, faRemoveFormat } from '@fortawesome/free-solid-svg-icons'
-import { showPostsEditModal, showPostsDeleteModal, deletePosts } from '../../actions/posts';
+import { faCoffee, faThumbsUp, faThumbtack, faRainbow, faRemoveFormat, faComment } from '@fortawesome/free-solid-svg-icons'
+import { showPostsEditModal, showPostsDeleteModal } from '../../actions/posts';
+import { getPostsLikeCount, increaseLikeCount,
+  dispatchBeforeIncreaseLike, dispatchBeforeDecreaseLike, dispatchBeforeGetLike } from '../../actions/postsLike';
 import { connect } from 'react-redux';
 import { withRouter } from "react-router";
+import Cookies from "js-cookie";
 
 class Posts extends Component {
 
-    constructor(){
-        super(...arguments);
-        this.handleSelect = this.handleSelect.bind(this);
-    }
+  constructor(){
+      super(...arguments);
+      this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(e) {
+      if(e === 'edit') {
+          this.props.showPostsEditModal(this.props.id, this.props.title, this.props.content, this.props.author);
+      } else if(e === 'delete') {
+          this.props.showPostsDeleteModal(this.props.id, this.props.title, this.props.author);
+      }
+  }
 
-    handleSelect(e) {
-        if(e === 'edit') {
-            this.props.showPostsEditModal(this.props.id, this.props.title, this.props.content, this.props.author);
-        } else if(e === 'delete') {
-            this.props.showPostsDeleteModal(this.props.id, this.props.title, this.props.author);
-        }
+  increaseLikeCnt = (postId) => {
+    if(this.props.isSocket === true) {
+      this.props.dispatchBeforeIncreaseLike();
+      let jsonStr = JSON.stringify({
+        type: "increase",
+        postsId: postId
+      })
+      this.sendMessage("/app/posts/like", jsonStr);
+    } else {
+      this.props.increaseLikeCount(postId);
     }
+  };
+
+  componentDidMount() {
+    this.props.getPostsLikeCount(this.props.id);
+  }
+
+  sendMessage = (topic, jsonStr) => {
+    const token = Cookies.get("token") ? Cookies.get("token") : null;
+    const customHeaders = {
+      "Authorization": token
+    };
+    this.props.clientRef.sendMessage(topic,
+      jsonStr,
+      customHeaders)
+  }
 
     render(){
         const modifiedDateStr = new Date(this.props.modifiedDate);
-		return (
+
+        /**
+         * Like ID 가 일치할 경우, 일치하는 건수를 보여준다.
+         * 없을 경우, 0 으로 보여준다.
+         */
+        const likes = this.props.postsEtc.likes;
+        const filteredLike = likes.filter(like => (like.id == this.props.id));
+        const likeCount = (filteredLike.length > 0) ? filteredLike[0].likeCount : 0;
+        return (
             <Card id={this.props.id}>
                 <Card.Header className="text-right">
                     <DropdownButton size="sm" title={<FontAwesomeIcon icon={faCoffee} />}
@@ -50,18 +88,27 @@ class Posts extends Component {
                     </ListGroupItem>
                 </ListGroup>
                 <Card.Body>
-                    <Card.Link href="#">Like</Card.Link>
-                    <Card.Link href="#">Comment</Card.Link>
+                  <small className="text-muted">
+                    <FontAwesomeIcon icon={faThumbsUp}
+                                     style={{color: "blue"}}
+                                     onClick={() => { this.increaseLikeCnt(this.props.id) }} />&nbsp;
+                    <Badge pill variant="dark">{likeCount}</Badge>
+                    &nbsp;&nbsp;
+                    <FontAwesomeIcon icon={faComment} />
+                  </small>
                 </Card.Body>
             </Card>
         )};
 }
 
 const mapStateToProps = (state) => {
 	return {
-		posts: state.posts
+		posts: state.posts,
+    postsEtc: state.postsEtc,
+    isSocket: state.socket.isSocket
 	};
 }
 
-
-export default withRouter(connect(mapStateToProps, {showPostsEditModal, showPostsDeleteModal, deletePosts})(Posts));
+export default withRouter(connect(mapStateToProps, {showPostsEditModal, showPostsDeleteModal,
+  getPostsLikeCount, increaseLikeCount,
+  dispatchBeforeIncreaseLike, dispatchBeforeDecreaseLike, dispatchBeforeGetLike})(Posts));
diff --git a/dayco-app/src/components/posts/PostsList.js b/dayco-app/src/components/posts/PostsList.js
@@ -26,7 +26,8 @@ class PostsList extends Component {
                 author={info.author}
                 content={info.content}
                 modifiedDate={info.modifiedDate}
-                />;
+                clientRef={this.props.clientRef}
+            />;
         })
 
         return (

diff --git a/dayco-app/src/constants/initialState.js b/dayco-app/src/constants/initialState.js
@@ -16,6 +16,10 @@ export default {
     page: 0,
     rowNum : 0
   },
+  postsEtc: { //posts comment, like 처리
+    likes: [],
+    comment: []
+  },
   postsEditModal: {
     isShow: false,
     id: -1,
@@ -28,6 +32,7 @@ export default {
     list: [], 
   },
   socket: {
-    isSocket: true
+    isSocket: true,
+    actionStatus: ""
   }
 }
diff --git a/dayco-app/src/constants/types.js b/dayco-app/src/constants/types.js
@@ -32,4 +32,22 @@ export const postsEditModal = {
 export const alert = {
     ALERT_CREATE : 'dayco-app/alert/create',
     ALERT_REMOVE : 'dayco-app/alert/remove' 
+}
+
+export const postsLikeCount = {
+    GET_SUCCESS: 'dayco-app/posts/like/get/success',
+    INCREASE_SUCCESS : 'dayco-app/posts/like/increase/success',
+    DECREASE_SUCCESS : 'dayco-app/posts/like/decrease/success',
+    GET_FAIL: 'dayco-app/posts/like/get/fail',
+    INCREASE_FAIL : 'dayco-app/posts/like/increase/fail',
+    DECREASE_FAIL : 'dayco-app/posts/like/decrease/fail'
+}
+
+export const actionStatus = {
+    SOCKET_POST_CREATE : 'dayco-app/socket/posts/create',
+    SOCKET_POST_EDIT : 'dayco-app/socket/posts/edit',
+    SOCKET_POST_DELETE : 'dayco-app/socket/posts/delete',
+    SOCKET_POST_LIKE_GET :'dayco-app/socket/posts/like/get',
+    SOCKET_POST_LIKE_INCREASE :'dayco-app/socket/posts/like/increase',
+    SOCKET_POST_LIKE_DECREASE :'dayco-app/socket/posts/like/decrease'
 }