diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx index 9bfbeab..58ec6e4 100644 --- a/src/pages/Post.tsx +++ b/src/pages/Post.tsx @@ -1,25 +1,46 @@ import React, {FC} from 'react'; // Routing import {useParams, Link} from 'react-router-dom'; +import Routes from '../constants/routes'; // Redux import {compose} from '@reduxjs/toolkit'; import {connect} from 'react-redux'; -import {firestoreConnect} from 'react-redux-firebase'; +import {firestoreConnect, WithFirestoreProps} 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'; +// Form +import useForm from '../hooks'; -interface IProps { +interface IProps extends WithFirestoreProps { post: Post; } + /** * Display a Post and the related comments. Shows a form to add a comment. */ -const PostPage: FC = ({post}) => { - console.log(post); +const PostPage: FC = ({post, firestore}) => { + const newComment: Comment = { + name: post.name ?? 'error', + avatarUrl: post.avatarUrl ?? 'error', + text: '', + }; + + const {formData, handleChange, resetForm} = useForm(newComment); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + firestore + .update(`${Collections.POSTS}/${post.id}`, { + comments: [...post.comments, formData], + }) + .then(() => resetForm()) + .catch(err => console.error(err)); + }; + return (
@@ -42,32 +63,34 @@ const PostPage: FC = ({post}) => {

Leave A Comment

-
+
- {/*
- {post.comments?.map((c: Comment, i: number) => ( -
-
- - {c.name} -

{c.name}

-
+
+ {post.comments?.map((c: Comment, i: number) => ( +
+ +
+

{c.text}

+
-
-

{c.text}

-
-
- ))} -
*/} + ))} +
); }; @@ -80,7 +103,7 @@ const PostPageContainer: FC = () => { const Component = compose( firestoreConnect(() => [`${Collections.POSTS}/${id}`]), connect(({firestore: {data}}: RootState) => ({ - post: data.posts && data.posts[id], + post: data.posts && {...data.posts[id], id}, })), )(PostPage); diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx index a2e03d6..4b4557e 100644 --- a/src/pages/Posts.tsx +++ b/src/pages/Posts.tsx @@ -43,10 +43,7 @@ const Posts: FC = ({posts, firestore, firebase}) => { e.preventDefault(); firestore .add(Collections.POSTS, newPost) - .then(res => { - console.log(res); - setText(''); - }) + .then(() => setText('')) .catch(err => console.error(err)); }; // const removeLike = (e: React.MouseEvent) =>