fetch posts from db, can post and like posts

src/models/Post.ts

@@ -5,10 +5,10 @@ import Comment from '../types/Comment';
  */
 interface Post {
   id: string;
-  userID: string;
-  name: string;
+  userID?: string;
+  name?: string;
   text: string;
-  avatarUrl: string;
+  avatarUrl?: string;
   likes: string[];
   comments: Comment[];
   //   date: Date;

src/pages/Posts.tsx

@@ -1,21 +1,68 @@
-import React, {FC} from 'react';
-import Post, {dummyPost as post} from '../models/Post';
-import Header from '../components/Header';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faThumbsUp, faThumbsDown} from '@fortawesome/free-solid-svg-icons';
-import Routes from '../constants/routes';
+import React, {FC, useState} from 'react';
+// Redux
+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';
+// Style
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faThumbsUp} from '@fortawesome/free-solid-svg-icons';
+import Header from '../components/Header';
+// Typing
+import Post, {dummyPost as post} from '../models/Post';
+import Collections from '../constants/collections';
 
+interface IProps extends WithFirestoreProps {
+  posts: Post[];
+}
 /**
  * A Dev's Posts list
  */
-const Posts: FC = () => {
-  const posts: Post[] = [post, post];
+const Posts: FC<IProps> = ({posts, firestore, firebase}) => {
+  const [text, setText] = useState('');
+  const {avatarUrl, displayName} = useSelector(selectProfile);
+  const id = firebase.auth().currentUser?.uid;
 
-  const removeLike = (e: React.MouseEvent<HTMLButtonElement>) =>
-    new Error('Not implemented yet.');
-  const addLike = (e: React.MouseEvent<HTMLButtonElement>) =>
-    new Error('Not implemented yet.');
+  const newPost = {
+    userID: id,
+    name: displayName,
+    text,
+    avatarUrl,
+    likes: [] as string[],
+    comments: [],
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+    setText(e.target.value);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    firestore
+      .add(Collections.POSTS, newPost)
+      .then(res => {
+        console.log(res);
+        setText('');
+      })
+      .catch(err => console.error(err));
+  };
+  // const removeLike = (e: React.MouseEvent<HTMLButtonElement>) =>
+  //   new Error('Not implemented yet.');
+  const addLike = (postID: string) => (
+    e: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    e.preventDefault();
+    const post = posts.find(p => p.id === postID);
+
+    if (post) {
+      firestore
+        .update(`${Collections.POSTS}/${post.id}`, {likes: [...post.likes, id]})
+        .catch(err => console.error(err));
+    }
+  };
 
   return (
     <section className="container">
@@ -25,44 +72,55 @@ const Posts: FC = () => {
           <h3>Say Something</h3>
         </div>
 
-        <form className="form my-1">
-          <textarea cols={30} rows={5} placeholder="Create a post"></textarea>
+        <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" />
-          <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}>
-                    <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>
-            ))}
-          </div>
         </form>
+        <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>
+          ))}
+        </div>
       </div>
     </section>
   );
 };
 
-export default Posts;
+export default compose<FC>(
+  firestoreConnect(() => ['posts']), // or { collection: 'users' }
+  connect((state: RootState) => ({
+    posts: state.firestore.ordered.posts,
+  })),
+)(Posts);