Add Post Comments in single post page

Add Post Comment
Right now post comments are not available (until v1.0 launch).

Create new file called Comments.js in my-app/packages/mars-theme/src/html/components

Check https://smitpatadiya.com/2019/05/27/add-post-comment-in-frontity/ for Comments.js file

add below two line in post.js (please check link for, how new post.js look like)

import Comments from “./Comment”;
<Comments post={post} />

Make a :clap::clap::clap: or :heart: if you found this useful.

4 Likes

Wow @smit.soni22 great job, thanks a lot for contributing :blush: :

@Reyes take a look, I think this could be shared on the newsletter!

1 Like

Amazing work @smit.soni22. Really good code.

Would you be interested in creating the official @frontity/wp-comments package? I can explain you everything you need to know in a video call.

1 Like

Hi @smit.soni22!

Great job! :clap::clap::clap:

I just wanted to point something out that I think may help you to better understand how Frontity packages are intended to be used.

I saw that you looked inside the code and found the library doing the requests to WP, and used it as below:

import WpSource from "@frontity/wp-source/src";

class Comments extends React.Component {
  [...]
  componentDidMount() {
    [...]
    WpSource.libraries.source.api.get({ ... })
    [...]
  }
  [...]
}

export default Comments;

Ideally, even if in this case nothing breaks, you would use the state, actions and libraries from Frontity packages through the store, so I’d implement it in the following way:

import React, { useEffect } from 'react';
import { connect } from 'frontity';

const Comments = ({ libraries }) => (
  // Just using hooks instead of classes and `componentDidMount`. 
  useEffect(() => {
    // Here is the real change, we are using the source library
    // from the store.
    libraries.source.api.get({ ... });
  }, []);

  return ( ... );
);

// Here we are using `connect` to pass the store that
// includes `libraries` to our component.
export default connect(Comments);

With this way of using the libraries exposed by the different packages there is an attempt to ensure that even if the code structure changes, the packages that depend on those libraries are not affected because the store exposed is exactly the same.

Also, for some extensions like wp-source there is a basic structure that needs to be respected in order to ensure compatibility between packages. This happens mostly with actions and state, but sometimes libraries are also affected by this decision. This is to ensure that, for example, mars-theme can still use actions.source.fetch(...) even if the package installed is not wp-source but another one like wp-graphql-source, because fetch is a required action to any package exposing an implementation of source.

I hope I made sense :smile:

If you have any doubt don’t hesitate to ask! :slight_smile:

1 Like

sure will do video call. let me know your schdule so we can fix time.

Thank you very much for drow my attention.

I will definitely implement it by the way you suggested & convert it to funcational component. I’m also arranging a video call with luisherranz so can better understand frontity code base.

1 Like

I’ll send you a DM :slight_smile:

Before starting with this, we need to figure out how to include comments inside wp-source first. We haven’t done it yet.

Most probably they are going to live in state.source.comments[post_id] and you are going to be able to do things like actions.source.fetch("comments/my-post") but as I said, we need to figure this out.

I can work on this with @David tomorrow and get back to you.

Once the support for storing comments in wp-source is implemented it’s going to be really easy to retrieve comments from WordPress.

This is the old implementation called wp-org-comments.

Don’t worry about the logic that stored the comments, all that is going to be much easier now and stored inside wp-source.

But you can take a look at the components we had for showing the comments and creating new comments. That part is going to be quite similar I think.

@David any other input here?

Sure I will wait for your response. In the meanwhile, I will have a look at ‘wp-pwa/wp-org-comments’.

1 Like

Hi again Smit!

Quick question just to be sure, is it ok for you if I share your post (https://smitpatadiya.com/2019/05/27/add-post-comment-in-frontity/) in our newsletter? :slight_smile:

Yes sure, you can use this post or content in your newslatter.

I’m also changing the code for comment section based on a suggestion from luisherranz. (But no worries I will add in a separate post.

1 Like

No worries, there’s no rush. We still have to prepare the newsletter and it will probably take us a few days.

Hi @orballo!

Code updated on the same link (https://smitpatadiya.com/2019/05/27/add-post-comment-in-frontity/). Please let me know if any changes.

3 Likes

It’s great! :smiley:

1 Like

I have not added much functionality in that, because v1.0 is coming with wp-comments. So instead of this, I’m focusing on other things like theme.

3 Likes

Would this work with the update to 1.0 and with the twenty nineteen theme?

@smit.soni22 please update your code. use const postId = state.source.get(state.router.link).id; to get post ID.