connect to redux store

src/pages/Post.tsx

@@ -1,22 +1,37 @@
 import React, {FC} from 'react';
-import Post, {dummyPost as post} from '../models/Post';
+// Routing
+import {useParams, Link} from 'react-router-dom';
+// Redux
+import {compose} from '@reduxjs/toolkit';
+import {connect} from 'react-redux';
+import {firestoreConnect} from 'react-redux-firebase';
+import {RootState} from '../store';
+import Collections from '../constants/collections';
+// Typing
+import Post from '../models/Post';
 import Comment from '../types/Comment';
+import Routes from '../constants/routes';
 
+interface IProps {
+  post: Post;
+}
 /**
  * Display a Post and the related comments. Shows a form to add a comment.
  */
-const PostPage: FC<Post> = () => (
+const PostPage: FC<IProps> = ({post}) => {
+  console.log(post);
+  return (
     <section className="container">
-    <a href="posts.html" className="btn btn-light">
+      <Link to={Routes.POSTS} className="btn btn-light">
         Back To Posts
-    </a>
+      </Link>
 
       <div className="post bg-white p-1 my-1">
         <div>
-        <a href="profile.html">
+          <Link to={`${Routes.PROFILE}/${post.userID}`}>
             <img className="round-img" src={post.avatarUrl} alt={post.name} />
             <h4>{post.name}</h4>
-        </a>
+          </Link>
         </div>
         <div>
           <p className="my-1">{post.text}</p>
@@ -38,8 +53,8 @@ const PostPage: FC<Post> = () => (
         </form>
       </div>
 
-    <div className="posts">
+      {/* <div className="posts">
-      {post.comments.map((c: Comment, i: number) => (
+      {post.comments?.map((c: Comment, i: number) => (
         <div className="post bg-white p-1 my-1" key={i}>
           <div>
             <a href="profile.html">
@@ -52,8 +67,24 @@ const PostPage: FC<Post> = () => (
           </div>
         </div>
       ))}
-    </div>
+    </div> */}
     </section>
   );
+};
 
-export default PostPage;
+/**
+ * Container to fetch id params from thr URI and pass it to Profile page
+ */
+const PostPageContainer: FC = () => {
+  const {id} = useParams();
+  const Component = compose<FC>(
+    firestoreConnect(() => [`${Collections.POSTS}/${id}`]),
+    connect(({firestore: {data}}: RootState) => ({
+      post: data.posts && data.posts[id],
+    })),
+  )(PostPage);
+
+  return <Component />;
+};
+
+export default PostPageContainer;