Implement basic version of likes

app/javascript/components/Board/BoardP.tsx

@@ -97,16 +97,19 @@ class BoardP extends React.Component<Props> {
         <PostList
           posts={posts.items}
           postStatuses={postStatuses.items}
-          hasMore={posts.haveMore}
           areLoading={posts.areLoading}
           error={posts.error}
-
+          
+          hasMore={posts.haveMore}
           handleLoadMore={() =>
             posts.areLoading ?
               null
             :
               requestPosts(board.id, posts.page + 1, filters.searchQuery, filters.postStatusId)
           }
+
+          isLoggedIn={isLoggedIn}
+          authenticityToken={authenticityToken}
         />
       </div>
     );

app/javascript/components/Board/PostList.tsx

@@ -18,8 +18,11 @@ interface Props {
   areLoading: boolean;
   error: string;
 
-  handleLoadMore(): void;
   hasMore: boolean;
+  handleLoadMore(): void;
+
+  isLoggedIn: boolean;
+  authenticityToken: string;
 }
 
 const PostList = ({
@@ -27,8 +30,10 @@ const PostList = ({
   postStatuses,
   areLoading,
   error,
+  hasMore,
   handleLoadMore,
-  hasMore
+  isLoggedIn,
+  authenticityToken,
 }: Props) => (
   <div className="postList">
     { error ? <DangerText>{error}</DangerText> : null }
@@ -48,8 +53,13 @@ const PostList = ({
               title={post.title}
               description={post.description}
               postStatus={postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
+              likesCount={post.likesCount}
+              liked={post.liked}
               commentsCount={post.commentsCount}
 
+              isLoggedIn={isLoggedIn}
+              authenticityToken={authenticityToken}
+
               key={i}
             />
           ))

app/javascript/components/Board/PostListItem.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import LikeButton from '../../containers/LikeButton';
 import CommentsNumber from '../shared/CommentsNumber';
 import PostStatusLabel from '../shared/PostStatusLabel';
 import { DescriptionText } from '../shared/CustomTexts';
@@ -11,21 +12,46 @@ interface Props {
   title: string;
   description?: string;
   postStatus: IPostStatus;
+  likesCount: number;
+  liked: number;
   commentsCount: number;
+
+  isLoggedIn: boolean;
+  authenticityToken: string;
 }
 
-const PostListItem = ({ id, title, description, postStatus, commentsCount }: Props) => (
-  <a href={`/posts/${id}`} className="postLink">
-    <div className="postListItem">
-      <span className="postTitle">{title}</span>
-      <DescriptionText limit={120}>{description}</DescriptionText>
+const PostListItem = ({
+  id,
+  title,
+  description,
+  postStatus,
+  likesCount,
+  liked,
+  commentsCount,
 
-      <div className="postDetails">
-        <CommentsNumber number={commentsCount} />
-        { postStatus ? <PostStatusLabel {...postStatus} /> : null }
+  isLoggedIn,
+  authenticityToken,
+}: Props) => (
+  <React.Fragment>
+    <LikeButton
+      postId={id}
+      likesCount={likesCount}
+      liked={liked}
+      isLoggedIn={isLoggedIn}
+      authenticityToken={authenticityToken}
+    />
+    <a href={`/posts/${id}`} className="postLink">
+      <div className="postListItem">
+        <span className="postTitle">{title}</span>
+        <DescriptionText limit={120}>{description}</DescriptionText>
+
+        <div className="postDetails">
+          <CommentsNumber number={commentsCount} />
+          { postStatus ? <PostStatusLabel {...postStatus} /> : null }
+        </div>
       </div>
-    </div>
-  </a>
+    </a>
+  </React.Fragment>
 );
 
 export default PostListItem;

app/javascript/components/LikeButton/LikeButtonP.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+interface Props {
+  postId: number;
+  likesCount: number;
+  liked: number;
+  handleLikeSubmit(
+    postId: number,
+    isLike: boolean,
+    authenticityToken: string,
+  ): void;
+  authenticityToken: string;
+  isLoggedIn: boolean;
+}
+
+const LikeButtonP = ({
+  postId,
+  likesCount,
+  liked,
+  handleLikeSubmit,
+  authenticityToken,
+  isLoggedIn,
+}: Props) => (
+  <div className="likeButtonContainer">
+    <button onClick={() =>
+      isLoggedIn ?
+        handleLikeSubmit(postId, !liked, authenticityToken)
+        :
+        window.location.href = `/users/sign_in`
+    }>
+      { liked ? 'down' : 'up' }
+    </button>
+    <span className="likesCountLabel">{likesCount}</span>
+  </div>
+);
+
+export default LikeButtonP;