https://github.com/ryelle/wordpress-query-comments

https://github.com/ryelle/wordpress-query-comments

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/ryelle/wordpress-query-comments
• Owner: ryelle
• Created: 2016-10-23T19:24:09.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-08-04T12:28:16.000Z (over 5 years ago)
• Last Synced: 2024-10-04T20:36:42.710Z (3 months ago)
• Language: JavaScript
• Size: 259 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
WordPress Query Comments

========================

This package contains a query component, along with redux state & selectors for posts pulled from a WordPress site. This uses the [`node-wpapi`](https://github.com/WP-API/node-wpapi) package to get your site's data via Query Components ([inspired by calypso](https://github.com/Automattic/wp-calypso/blob/master/docs/our-approach-to-data.md#query-components)). The Query Components call the API, which via actions set your site's data into the state.

To use any of these helpers, you'll need to set your Site URL & nonce in a global (`SiteSettings`), so that the API knows what site to connect to. For example:

```js

window.SiteSettings = {

	endpoint: 'url.com/path-to-wordpress',

	// Nonce is required to identify logged-in comment authors

	nonce: 'generated-nonce' // generated by wp_create_nonce( 'wp_rest' )

};

```

As of version 1.1, the URL should _not_ include `/wp_json` – `wordpress-rest-api-oauth-1` adds that for us.

As of [wp-39327](https://core.trac.wordpress.org/changeset/39327), the nonce is required for submitting comments, as anonymous comments via the API have been disabled by default (a filter can re-enable this).

Query Comments

==============

Query Comments is a React component used in managing the fetching of comments on a post or page.

## Usage

Render the component, passing in the `postId`. It does not accept any children, nor does it render any elements to the page. You can use it adjacent to other sibling components which make use of the fetched data made available through the global application state.

```jsx

import React from 'react';

import QueryComments from 'wordpress-query-comments';

import MyCommentsListItem from './list-item';

export default function MyCommentsList( { comments } ) {

	return (

		


			

			{ comments.map( ( comment ) => {

				return (

					

				);

			} }

		

	);

}

```


## Props

### `postId`

	TypeInteger

	RequiredYes

	Defaultnull

The post (or page) to grab comments from.

Comment Selectors

=================

You can import these into your project by grabbing them from the `selectors` file:

```jsx

import { getCommentsForPost, isRequestingCommentsForPost } from 'wordpress-query-comments/lib/selectors';

```

#### `getComment( state, globalId )`

#### `getCommentsForPost( state, postId )`

#### `isRequestingCommentsForPost( state, postId )`

#### `getTotalCommentsForPost( state, postId )`

#### `isSubmittingCommentOnPost( state, postId )`

Comment State

=============

If you need access to the reducers, action types, or action creators, you can import these from the `state` file. For example, to use this in your global redux state, mix it into your reducer tree like this:

```jsx

import comments from 'wordpress-query-comments/lib/state';

let reducer = combineReducers( { ...otherReducers, comments } );

```

If you need to call an action (the query component should take care of this most of the time), you can pull the action out specifically:

```jsx

import { submitComment } from 'wordpress-query-comments/lib/state';

```

[View the file itself](src/state.js) to see what else is available.