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;
+  userID?: string;
-  name: 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 React, {FC, useState} from 'react';
-import Post, {dummyPost as post} from '../models/Post';
+// Redux
-import Header from '../components/Header';
+import {compose} from '@reduxjs/toolkit';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {connect, useSelector} from 'react-redux';
-import {faThumbsUp, faThumbsDown} from '@fortawesome/free-solid-svg-icons';
+import {firestoreConnect, WithFirestoreProps} from 'react-redux-firebase';
-import Routes from '../constants/routes';
+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: FC<IProps> = ({posts, firestore, firebase}) => {
-  const posts: Post[] = [post, post];
+  const [text, setText] = useState('');
+  const {avatarUrl, displayName} = useSelector(selectProfile);
+  const id = firebase.auth().currentUser?.uid;
 
-  const removeLike = (e: React.MouseEvent<HTMLButtonElement>) =>
+  const newPost = {
-    new Error('Not implemented yet.');
+    userID: id,
-  const addLike = (e: React.MouseEvent<HTMLButtonElement>) =>
+    name: displayName,
-    new Error('Not implemented yet.');
+    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,11 +72,18 @@ const Posts: FC = () => {
           <h3>Say Something</h3>
         </div>
 
-        <form className="form my-1">
+        <form className="form my-1" onSubmit={handleSubmit}>
-          <textarea cols={30} rows={5} placeholder="Create a post"></textarea>
+          <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>
         <div className="posts">
-            {posts.map((post: Post) => (
+          {posts?.map((post: Post) => (
             <div className="post bg-white p-1 my-1" key={post.id}>
               <div>
                 <Link to={`${Routes.PROFILE}/${post.userID}`}>
@@ -43,12 +97,12 @@ const Posts: FC = () => {
               </div>
               <div>
                 <p className="my-1">{post.text}</p>
-                  <button className="btn btn-light" onClick={addLike}>
+                <button className="btn btn-light" onClick={addLike(post.id)}>
-                    <FontAwesomeIcon icon={faThumbsUp} /> {post.likes.length}
+                  <FontAwesomeIcon icon={faThumbsUp} /> {post.likes?.length}
                 </button>
-                  <button className="btn btn-light" onClick={removeLike}>
+                {/* <button className="btn btn-light" onClick={removeLike}>
     <FontAwesomeIcon icon={faThumbsDown} />
-                  </button>
+  </button> */}
                 <Link
                   to={`${Routes.POST}/${post.id}`}
                   className="btn btn-primary"
@@ -59,10 +113,14 @@ const Posts: FC = () => {
             </div>
           ))}
         </div>
-        </form>
       </div>
     </section>
   );
 };
 
-export default Posts;
+export default compose<FC>(
+  firestoreConnect(() => ['posts']), // or { collection: 'users' }
+  connect((state: RootState) => ({
+    posts: state.firestore.ordered.posts,
+  })),
+)(Posts);