Post Component in React

This is the sixth part of Create react app with GraphQL in WordPress

In this part, we will mainly develop Post component for out application. But, before dive in main part, we will develop Loading component for see landing or search status in our application. Let’s dive in Loading component development.

Create a file named styled.js in components directory. In this file first import styled and keyframes class from styled-components package. Styled class is familiar to us. It helps us to style component efficient way. Beside, keyframes helper class will help us to develop animation. Keyframes in this package works as CSS3 @keyframes rule.

import styled, { keyframes } from "styled-components";

Then, assign styled in a exported constant named LoadingState. In this constant first declare some general properties and in after psuedo element define animation-name loading in special way. So, create a constant variable named loading. In this variable, we use keyframes and define animation as usual. Finally, styled.js is look like this

import styled, { keyframes } from "styled-components";

const loading = keyframes`
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.5);
    }
`;

const LoadingState = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  &:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #dedede;
    opacity: 0.4;
    animation: ${loading} 1s linear 0.1s infinite alternate;
  }
`;

export default LoadingState;

Now, we can import LoadingState both in App.js and Post.js. Awesome way to reuse.
Open src/components/App.js and delete styled-component import lines and related code. Just import LoadingState from styled.js file and use it second return in render method. Now src/components/App.js looks like this-

import React from "react";
import styled from "styled-components";
import Posts from "./Posts";
import PostWidget from "./PostWidget";
import LoadingState from "./styled";

const Widget = styled.div`
  border: 1px solid gray;
  padding: 10px;
  p {
    margin-bottom: 0;
    border-top: 1px solid gray;
    }
  }
`;

class App extends React.Component {
  render() {
    if (this.props.state.length) {
      return (
        <div className="row">
          <div className="column column-80">
            {this.props.state.map(post => (
              <Posts key={post.node.id} post={post} />
            ))}
          </div>
          <div className="column column-20">
            <Widget>
              <h3>Recent posts</h3>
              {this.props.state.slice(0, 2).map(post => (
                <PostWidget key={post.node.id} post={post} />
              ))}
            </Widget>
          </div>
        </div>
      );
    }
    return <LoadingState>Loading...</LoadingState>;
  }
}
export default App;

Let’s dive in Post component development.

Post component development

Open src/components/post.js. First import React from react package, Dompurify from dompurify package and LoadingState from styled.js which we developed just.

import React from "react";
import DOMPurify from "dompurify";
import LoadingState from "./styled";

Then, in our Post’s render method, we have to write a little bit complex (for me) code block.

  • Check component have state in its props.
  • During the checking time render LoadingState component.
  • Get post ID from props match object.
  • Loop every state and check this node id is equal to post id.
  • If found, store this state objecte in a predefined variable postInfo.
  • If not found, just render Post Not Found
  • When postInfo found, return post tiltle, body in defined format.

In code, this algorithm will be,

if (this.props.state.length) {
      let postInfo = {};
      const state = this.props.state;
      const postID = this.props.match.params.postID;
      state.forEach(function(post, index) {
        if (post.node.id === postID) {
          postInfo = post;
        }
      });
      if (postInfo.node) {
        return (
          <div className="column">
            <h2
              dangerouslySetInnerHTML={{
                __html: DOMPurify.sanitize(postInfo.node.title)
              }}
            />
            <p
              dangerouslySetInnerHTML={{
                __html: DOMPurify.sanitize(postInfo.node.content)
              }}
            />
          </div>
        );
      } else {
        return <div>Post Not Found</div>;
      }
    }
    return <LoadingState>Searching...</LoadingState>;

So, final code of src/component/post.js

import React from "react";
import DOMPurify from "dompurify";
import LoadingState from "./styled";

class Post extends React.Component {
  render() {
    if (this.props.state.length) {
      let postInfo = {};
      const state = this.props.state;
      const postID = this.props.match.params.postID;
      state.forEach(function(post, index) {
        if (post.node.id === postID) {
          postInfo = post;
        }
      });
      if (postInfo.node) {
        return (
          <div className="column">
            <h2
              dangerouslySetInnerHTML={{
                __html: DOMPurify.sanitize(postInfo.node.title)
              }}
            />
            <p
              dangerouslySetInnerHTML={{
                __html: DOMPurify.sanitize(postInfo.node.content)
              }}
            />
          </div>
        );
      } else {
        return <div>Post Not Found</div>;
      }
    }
    return <LoadingState>Searching...</LoadingState>;
  }
}
export default Post;

App Component in React

This is the third part of Create react app with GraphQL in WordPress

In this part, we will build App component in src/components/App.js

Here kick on styled-components. And we use Posts and PostWidget component here. For that, we can introduce with props.

First, import CSS library, styled-componets. After that, we will import two components- Posts and PostWidget component from respective file. So, let’s write

import styled from "styled-components";
import Posts from "./components/Posts";
import PostWidget from "./components/PostWidget";

In App component, we will use render method. Here, return our defined JSX. Firstly, we design as simple. Two area in page. Details of grid can find here, https://milligram.io/#grids. So, we write here,

render() {
    return(
        <div className="row">
          <div className="column column-80">Post Archive</div>
          <div className="column column-20">Widget</div>
        </div>
    );
  }

At our App component, we will use two return. One return is used before state has any post. After return it return main component. So, our render function will be,

render() {
   if (this.props.state.length) {
    return(
        <div className="row">
          <div className="column column-80">Post Archive</div>
          <div className="column column-20">Widget</div>
        </div>
    );
  }
  return <p>Loading...</p>;
  }

At post archive, we will use posts array of state of this component. posts array map every items with render Posts. We render Posts component with props name state in this map. For clear about array map, we will read this.

However, in code it will be

{this.props.state.map(post => (
  <Posts key={post.node.id} post={post} />
))}

At Widget, we use same code. But, before array map, we will slice this array for that only first two posts render here. In code

{this.props.state.slice(0, 2).map(post => (
  <PostWidget key={post.node.id} post={post} />
))}

Lets, try styled-components.
Define Widget with styled. styled create an div tag and it styled as our defined style.

const Widget = styled.div`
  border: 1px solid gray;
  padding: 10px;
  p {
    margin-bottom: 0;
    border-top: 1px solid gray;
    }
  }
`;

Use this Widget component like this

<Widget>
   <h3>Recent posts</h3>
     {this.props.state.slice(0, 2).map(post => (
       <PostWidget key={post.node.id} post={post} />
     ))}
</Widget>

So, the final code is-

import React from "react";
import styled from "styled-components";
import Posts from "./Posts";
import PostWidget from "./PostWidget";

const Widget = styled.div`
  border: 1px solid gray;
  padding: 10px;
  p {
    margin-bottom: 0;
    border-top: 1px solid gray;
    }
  }
`;

class App extends React.Component {
  render() {
    if (this.props.state.length) {
      return (
          <div className="row">
            <div className="column column-80">
              {this.props.state.map(post => (
                <Posts key={post.node.id} post={post} />
              ))}
            </div>
            <div className="column column-20">
              <Widget>
                <h3>Recent posts</h3>
                {this.props.state.slice(0, 2).map(post => (
                  <PostWidget key={post.node.id} post={post} />
                ))}
              </Widget>
            </div>
          </div>
      );
    }
    return <div>Loading...</div>;
  }
}
export default App;

Screenshot at this point will be

Setup for React front-end with GraphQL to Fetch WordPress back-end

This is first part of Create react app with GraphQL in WordPress

Download WP-GraphQL from https://github.com/wp-graphql/wp-graphql and rename it wp-graphql. Install it in WordPress and active this plugin as usual. Then, visit

domain.name/?graphql

If it show a page of error, then confirmed wp-graphql plugin works.

Let’s create a brand new react app by

npx create-react-app apollographql

After npm finishes setup new react app. Go to apollographql project folder and start this app.

cd apollographql && npm start

We need to install three packages to use graphQL in React. Apollo makes possible to write query in GraphQL.

We will take a shot on small CSS framework https://milligram.io/ for quick style. We will also try styled component also.
To use pagination system in one page application we will use react-router. Also, for safe DOM render in react application we will use dompurify. Install these packages with this command. By default these packages install for development only.

npm i apollo-boost react-apollo graphql react-router-dom milligram styled-components dompurify

Here, i command is shorthand for install command. After these package installed, we have total 10 packages to use.

We will create some components. These are:

  • AppRouter
  • App
  • Posts
  • PostWidget
  • Post
  • NotFound

Open src/index.js, because it application start. Remove index.css and in App import. At last, use AppRouter in ReactDom. So the final code at src/index.js

import React from "react";
import ReactDOM from "react-dom";
import AppRouter from "./AppRouter";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<AppRouter />, document.getElementById("root"));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

AppRouter component is defined App, Post and NotFound. App is mixed up with Posts and PostWidget.
Posts and a PostWidget componts will use in App component, Post component for single post and NotFound component for wrong URL enter in our application. Let’s, create these components.

First create a file in src named AppRouter.js. Be sure about naming convention. React follow camel casing for both filename and class name.
Open src/AppRouter.js. We know, for every react component we have to import React from react package. For first sight, we will define AppRouter in this file.

import React from "react";

class AppRouter extends React.Component {
  render() {
    return <div>Router</div>;
  }
}
export default AppRouter;

In this Application we will take advantage of ES6 and JSX. If you are interest about what does mean default export and named export, take a look on this.
After these package, we will also use five custom components.
Delete src/App.js. Create a folder components. In this folder, create App.js, Posts.js, PostWidget.js, Post.js, NotFound.js. Here, just declare component class for now.

Open src/components/App.js and write some code.

import React from "react";

class App extends React.Component {
  render() {
    return <div>App</div>;
  }
}
export default App;

In src/Posts.js

import React from "react";

class Posts extends React.Component {
  render() {
    return <div>Post Archive</div>;
  }
}
export default Posts;

In src/components/Post.js

import React from "react";

class Post extends React.Component {
  render() {
    return <div>Single Post</div>;
  }
}
export default Post;

In src/components/PostWidget.js

import React from "react";

class PostWidget extends React.Component {
  render() {
    return <div>Post Widget</div>;
  }
}
export default PostWidget;

In src/components/NotFound.js

import React from "react";

class NotFound extends React.Component {
  render() {
    return <div>Not Found!!!</div>;
  }
}
export default NotFound;