Setting UP the React on Rails with Apollo

apollo.js

// app/javascript/packs/front-end-react/apollo.js
import ApolloClient from "apollo-boost";
import gql from "graphql-tag";



export  const client = new ApolloClient({
  uri: "/graphql",
})


// let's define graphql queries here, similar to what we send using rails Graphiql Engine

export const CREATE_BOOK = gql `
  mutation CreateBook($title: String!, $author: String!, $review: String!, $reviewer: String!){
    createBook(
      input:{
        title: $title
        author: $author
        review: $review
        reviewer: $reviewer
    }){
      book {
        id
        author
        title
      }
    }
  }
`

// get a single book query
export const GET_BOOK = gql`
  query getBook($bookId: ID!){
    book(id: $bookId){
      title
    }
  }
`

App.jsx

//app/javascript/packs/front-end-react/App.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from "react-apollo"
import { client } from "./apollo"
import Book from './src/bookComponent';

class App extends Component {
  render() { 
    return ( 
      <ApolloProvider client={client}>
        <div>
          <header>
            <h1>Books</h1>
          </header>
          <Book />
        </div>
      </ApolloProvider>
     );
  }
}



document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <App />,
    document.body.appendChild(document.createElement('div')),
  )
})

App.scss

// app/javascript/packs/front-end-react/assets/stylesheets/App.scss
html, body {
  display: flex;
  justify-content: center;
  align-items: center;
}


form {
  div {
    padding: 20px;

    input, label {
      width: 100%;
      display: block;
      text-transform: capitalize;
      height: 22px;
    }

    label {
      font-size: 20px;
    }
  }
  button {
    background-color: blue;
    text-transform: uppercase;
    font-size: 11px;
    color: white;
    font-weight: 500;
    line-height: 22px;
  }
}


ul {
  color: #D8000C;
  background-color: #FFD2D2;
  margin:10px 22px;
  font-size: 20px;
}

bookComponent.jsx

// app/javascript/packs/front-end-react/src/bookComponent.jsx
import React, { Component } from 'react';
import { Mutation } from "react-apollo";
import { CREATE_BOOK } from "../apollo"


class Book extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      title: null,
      author: null,
      review: null,
      reviewer: null,
      errors: []
    }
  }

  handleFormSubmit = ( props ) => {
    let { createBook } = props;
    let {
      title,
      author,
      review,
      reviewer
    } = this.state;

    console.log(title, author, review, reviewer)
    createBook({
      variables: {
        title: title,
        author: author,
        review: review,
        reviewer: reviewer
      }
    })
    .then((response) =>{
      alert('Book Details Updated successfully')
      const { data } = response;
      console.log(data)
    })
    .catch((e) => {
      let messages = JSON.parse(e.graphQLErrors[0].message)
      this.setState({
        errors : messages.errors
      })

    })

  }

  handleChange = (event) =>{
    this.setState({
      [event.target.id]: event.target.value
    })

  }

  showErrors = () =>{
    let { errors } = this.state;
    const errorsList = errors.map((error, index)=>(
      <li key={index}>{error}</li>
    ))

    return (
      <ul>
        {errorsList}
      </ul>
    )
  }
  render() { 
    return (
      <Mutation
        mutation={CREATE_BOOK}
      >
      {(createBook) =>(
        <div>
          <h2>Create Book Form</h2>
          <this.showErrors/>
          <form onSubmit={ e =>{
            e.preventDefault()
            this.handleFormSubmit({ createBook })
          }}>
            <div>
              <label>Title</label>
              <input type="text" id="title" onChange={this.handleChange} required/>
            </div>

            <div>
              <label>Author</label>
              <input type="text" id="author" onChange={this.handleChange} required/>
            </div>

            <div>
              <label>Reviewer</label>
              <input type="text" id="reviewer" onChange={this.handleChange} required/>
            </div>

            <div>
              <label>Review</label>
              <textarea rows="10" cols="60" id="review" onChange={this.handleChange} required/>
            </div>
            <button type="submit">SUBMIT</button>
          </form>
        </div>
      )}
      </Mutation>
    );
  }
}
 
export default Book;