From 1512e1a20f4e8ad61333b4a40c03e1c449f7ba92 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Tue, 2 Jun 2020 20:26:35 +0200
Subject: [PATCH] refactor: Posts folder

---
 src/pages/Posts/Form.tsx                 | 22 ++++++++
 src/pages/Posts/Item.tsx                 | 41 +++++++++++++++
 src/pages/{Posts.tsx => Posts/index.tsx} | 64 ++++++------------------
 3 files changed, 79 insertions(+), 48 deletions(-)
 create mode 100644 src/pages/Posts/Form.tsx
 create mode 100644 src/pages/Posts/Item.tsx
 rename src/pages/{Posts.tsx => Posts/index.tsx} (51%)

diff --git a/src/pages/Posts/Form.tsx b/src/pages/Posts/Form.tsx
new file mode 100644
index 0000000..8b685bd
--- /dev/null
+++ b/src/pages/Posts/Form.tsx
@@ -0,0 +1,22 @@
+import React, {FC} from 'react';
+
+interface IProps {
+  text: string;
+  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  handleChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+const PostsForm: FC<IProps> = ({text, handleSubmit, handleChange}) => (
+  <form className="form my-1" onSubmit={handleSubmit}>
+    <textarea
+      cols={30}
+      rows={5}
+      placeholder="Create a post"
+      value={text}
+      onChange={handleChange}
+    />
+    <input type="submit" value="Submit" className="btn btn-dark my-1" />
+  </form>
+);
+
+export default PostsForm;
diff --git a/src/pages/Posts/Item.tsx b/src/pages/Posts/Item.tsx
new file mode 100644
index 0000000..9b13f5b
--- /dev/null
+++ b/src/pages/Posts/Item.tsx
@@ -0,0 +1,41 @@
+import React, {FC} from 'react';
+// Routing
+import {Link} from 'react-router-dom';
+import Routes from '../../constants/routes';
+// Styling
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faThumbsUp} from '@fortawesome/free-solid-svg-icons';
+
+import Post from '../../models/Post';
+
+interface IProps {
+  post: Post;
+  addLike: (
+    postID: string,
+  ) => (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+const PostsItem: FC<IProps> = ({post, addLike}) => (
+  <div className="post bg-white p-1 my-1">
+    <div>
+      <Link to={`${Routes.PROFILE}/${post.userID}`}>
+        <img src={post.avatarUrl} alt={post.name} className="round-img" />
+        <h4>{post.name}</h4>
+      </Link>
+    </div>
+    <div>
+      <p className="my-1">{post.text}</p>
+      <button className="btn btn-light" onClick={addLike(post.id)}>
+        <FontAwesomeIcon icon={faThumbsUp} /> {post.likes?.length}
+      </button>
+      {/* <button className="btn btn-light" onClick={removeLike}>
+    <FontAwesomeIcon icon={faThumbsDown} />
+  </button> */}
+      <Link to={`${Routes.POST}/${post.id}`} className="btn btn-primary">
+        Discussion
+      </Link>
+    </div>
+  </div>
+);
+
+export default React.memo(PostsItem);
diff --git a/src/pages/Posts.tsx b/src/pages/Posts/index.tsx
similarity index 51%
rename from src/pages/Posts.tsx
rename to src/pages/Posts/index.tsx
index f8639ba..7ff791a 100644
--- a/src/pages/Posts.tsx
+++ b/src/pages/Posts/index.tsx
@@ -3,18 +3,16 @@ import React, {FC, useState} from 'react';
 import {compose} from '@reduxjs/toolkit';
 import {connect, useSelector} from 'react-redux';
 import {firestoreConnect, WithFirestoreProps} from 'react-redux-firebase';
-import {RootState} from '../store';
-import {selectProfile} from '../store/firebase';
-// Routing
-import {Link} from 'react-router-dom';
-import Routes from '../constants/routes';
+import {RootState} from '../../store';
+import {selectProfile} from '../../store/firebase';
 // Style
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faThumbsUp} from '@fortawesome/free-solid-svg-icons';
-import Header from '../components/Header';
+import Header from '../../components/Header';
 // Typing
-import Post from '../models/Post';
-import Collections from '../constants/collections';
+import Post from '../../models/Post';
+import Collections from '../../constants/collections';
+
+import PostsForm from './Form';
+import PostsItem from './Item';
 
 interface IProps extends WithFirestoreProps {
   posts: Post[];
@@ -69,45 +67,15 @@ const Posts: FC<IProps> = ({posts, firestore, firebase}) => {
           <h3>Say Something</h3>
         </div>
 
-        <form className="form my-1" onSubmit={handleSubmit}>
-          <textarea
-            cols={30}
-            rows={5}
-            placeholder="Create a post"
-            value={text}
-            onChange={handleChange}
-          />
-          <input type="submit" value="Submit" className="btn btn-dark my-1" />
-        </form>
+        <PostsForm
+          text={text}
+          handleChange={handleChange}
+          handleSubmit={handleSubmit}
+        />
+
         <div className="posts">
           {posts?.map((post: Post) => (
-            <div className="post bg-white p-1 my-1" key={post.id}>
-              <div>
-                <Link to={`${Routes.PROFILE}/${post.userID}`}>
-                  <img
-                    src={post.avatarUrl}
-                    alt={post.name}
-                    className="round-img"
-                  />
-                  <h4>{post.name}</h4>
-                </Link>
-              </div>
-              <div>
-                <p className="my-1">{post.text}</p>
-                <button className="btn btn-light" onClick={addLike(post.id)}>
-                  <FontAwesomeIcon icon={faThumbsUp} /> {post.likes?.length}
-                </button>
-                {/* <button className="btn btn-light" onClick={removeLike}>
-    <FontAwesomeIcon icon={faThumbsDown} />
-  </button> */}
-                <Link
-                  to={`${Routes.POST}/${post.id}`}
-                  className="btn btn-primary"
-                >
-                  Discussion
-                </Link>
-              </div>
-            </div>
+            <PostsItem post={post} addLike={addLike} key={post.id} />
           ))}
         </div>
       </div>
@@ -116,7 +84,7 @@ const Posts: FC<IProps> = ({posts, firestore, firebase}) => {
 };
 
 export default compose<FC>(
-  firestoreConnect(() => ['posts']), // or { collection: 'users' }
+  firestoreConnect(() => [Collections.POSTS]), // or { collection: 'users' }
   connect((state: RootState) => ({
     posts: state.firestore.ordered.posts,
   })),