Use the JSON API Resources gem to handle api

Gemfile

@@ -13,6 +13,7 @@ gem 'skylight' # application performance monitoring
 gem 'sprockets', '>= 3.0.0'
 gem 'uglifier'
 gem 'graph_matching' # max-weight matching algorithm used to pair
+gem 'jsonapi-resources' # API is build around this gem
 
 # front-end libraries
 gem 'react_on_rails'

Gemfile.lock

@@ -109,6 +109,9 @@ GEM
     hashdiff (0.3.2)
     i18n (0.8.1)
     json (2.1.0)
+    jsonapi-resources (0.8.3)
+      concurrent-ruby
+      rails (>= 4.0)
     lazy_priority_queue (0.1.1)
     libv8 (5.3.332.38.5)
     listen (3.1.5)
@@ -300,6 +303,7 @@ DEPENDENCIES
   faker
   formulaic
   graph_matching
+  jsonapi-resources
   listen
   mini_racer
   normalize-rails

app/controllers/api/application_controller.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+module Api
+  class ApplicationController < JSONAPI::ResourceController
+    skip_before_action :ensure_correct_media_type
+    skip_before_action :ensure_valid_accept_media_type
+    protect_from_forgery with: :null_session
+  end
+end

app/controllers/api/debaters_controller.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+module Api
+  class DebatersController < ApplicationController
+  end
+end

app/controllers/api/schools_controller.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+module Api
+  class SchoolsController < ApplicationController
+  end
+end

app/controllers/schools_controller.rb

@@ -2,50 +2,9 @@
 class SchoolsController < ApplicationController
   def index
     @schools = School.order(:name).map(&:as_json)
-    respond_to do |format|
-      format.html { render :index }
-      format.json { render json: @schools }
-    end
-  end
-
-  def create
-    @school = School.new(school_params)
-    if @school.save
-      render json: @school
-    else
-      render json: @school.errors, status: :unprocessable
-    end
   end
 
   def show
     @school = School.find(params[:id]).as_json
-    respond_to do |format|
-      format.html { render :show }
-      format.json { render json: @school }
-    end
-  end
-
-  def update
-    @school = School.find(params[:id])
-    if @school.update(school_params)
-      render json: @school
-    else
-      render json: @school.errors, status: :unprocessable
-    end
-  end
-
-  def destroy
-    @school = School.find(params[:id])
-    if @school.destroy
-      render json: {}, status: 200
-    else
-      render json: {}, status: :unprocessable
-    end
-  end
-
-  private
-
-  def school_params
-    params.require(:school).permit(:name)
   end
 end

app/resoucres/api/debater_resource.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+module Api
+  class DebaterResource < JSONAPI::Resource
+    attributes :name, :novice
+    belongs_to :team
+    belongs_to :school
+  end
+end

app/resoucres/api/school_resource.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+module Api
+  class SchoolResource < JSONAPI::Resource
+    attributes :name
+  end
+end

app/resoucres/api/team_resource.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+module Api
+  class TeamResource < JSONAPI::Resource
+    attributes :name, :seed
+    has_many :debaters
+    belongs_to :school
+  end
+end

client/app/components/debaters/DebaterContainer.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Button} from 'react-bootstrap'
 import {DebaterForm, DebaterDetail} from './index'
-import Debater from '../../resources/Debater'
+import {Debater, ApiDebater} from '../../resources/Debater'
 
 export class DebaterContainer extends React.Component {
   static propTypes = {
@@ -35,11 +35,11 @@ export class DebaterContainer extends React.Component {
   handleEditClick = () => this.setState({ isEditing: true })
 
   handleDeleteClick = () =>  {
-    const debater = new Debater(this.state.debater.id)
+    const debater = new ApiDebater(this.state.debater.id)
     const confirmed = confirm('Are you sure? This will delete all of this debaters stats and affect their team speaks')
     if (confirmed) {
       debater.destroy()
-        .then(() => window.location = debater.pathTo().index)
+        .then(() => window.location = new Debater().pathTo(false).index)
         .catch(() => this.setState({ message: 'Could not delete this debater' }))
     }
   }

client/app/components/debaters/DebaterDetail.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import School from '../../resources/School'
+import {School} from '../../resources/School'
 
 export const DebaterDetail = (props) => {
   const school = new School(props.school.id)

client/app/components/debaters/DebaterForm.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {FormControl, ControlLabel, FormGroup, Button} from 'react-bootstrap'
-import Debater from '../../resources/Debater'
+import {ApiDebater} from '../../resources/Debater'
 import SchoolSelectField from '../schools/SchoolSelectField'
 
 export class DebaterForm extends React.Component {
@@ -27,7 +27,7 @@ export class DebaterForm extends React.Component {
 
   handleSubmit = (event) => {
     event.preventDefault()
-    const debater = new Debater(this.props.id)
+    const debater = new ApiDebater(this.props.id)
     let request = this.props.id ? debater.update : debater.create
     request(this.paramsToSubmit())
       .then((response) => this.props.handleSuccessfulSubmit(response))

client/app/components/debaters/DebaterItem.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Debater from '../../resources/Debater'
+import {Debater} from '../../resources/Debater'
 
 export const DebaterItem = (props) => {
   const debater = new Debater(props.id)

client/app/components/schools/SchoolDetail.js

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react'
 import {Button} from 'react-bootstrap'
 import EditableText from '../shared/EditableText'
-import School from '../../resources/School'
+import {School, ApiSchool} from '../../resources/School'
 
 class SchoolDetail extends React.Component {
   state = {
@@ -16,17 +16,16 @@ class SchoolDetail extends React.Component {
   deleteSchool = (event) => {
     event.preventDefault()
     let confirmed = confirm('Are you sure? This will delete all of the debaters and judges')
-    const school = this.getSchoolObject()
     if (confirmed) {
-      school.destroy()
-        .then((response) => window.location = school.pathTo().index)
+      new ApiSchool(this.state.school.id).destroy()
+        .then((response) => window.location = new School.pathTo().index)
         .catch(() => this.setState({message: 'Could not delete school.'}))
     }
   }
 
   handleNameUpdate = (name) => {
     if (name.trim() !== this.state.school.name) {
-      this.getSchoolObject().update({name})
+      new ApiSchool(this.state.school.id).update({name})
         .then((response) => {
           this.flashMessage('School updated!')
           this.setState({school: response.data})
@@ -40,10 +39,6 @@ class SchoolDetail extends React.Component {
     setTimeout(() => this.setState({message: ''}), 2500)
   }
 
-  getSchoolObject () {
-    return new School(this.state.school.id)
-  }
-
   render () {
     return (
       <div className="school">

client/app/components/schools/SchoolItem.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import School from '../../resources/School'
+import {School} from '../../resources/School'
 
 export const SchoolItem = (props) => {
   return (

client/app/components/schools/SchoolListContainer.js

@@ -2,7 +2,7 @@ import React from 'react'
 import _ from 'lodash'
 import {SchoolList} from './SchoolList'
 import {CreateSchool} from './CreateSchool'
-import School from '../../resources/School'
+import {ApiSchool} from '../../resources/School'
 
 export class SchoolListContainer extends React.Component {
   static propTypes = {
@@ -17,7 +17,7 @@ export class SchoolListContainer extends React.Component {
 
   handleAddSchool = (event) => {
     event.preventDefault()
-    new School().create({name: this.state.newSchool})
+    new ApiSchool().create({name: this.state.newSchool})
       .then((response) => {
         const newSchool = response.data
         this.setState({

client/app/components/schools/SchoolSelectField.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Autosuggest from 'react-autosuggest'
 import {ControlLabel, FormGroup} from 'react-bootstrap'
-import School from '../../resources/School'
+import {ApiSchool} from '../../resources/School'
 
 const preprocessName = (name) => name.trim().toLowerCase()
 
@@ -41,8 +41,8 @@ export default class SchoolSelectField extends React.Component {
   }
 
   componentDidMount() {
-    new School().index('json')
-      .then((response) => this.setState({schools: response.data}))
+    new ApiSchool().index()
+      .then((response) => this.setState({schools: response.data.data}))
   }
 
   onSuggestionsClearRequested = () => {

client/app/resources/ApiResource.js

@@ -0,0 +1,21 @@
+import Resource from './Resource'
+
+export default class ApiResource extends Resource {
+  constructor(name, id) {
+    super(name, id)
+  }
+
+  pathTo = () => {
+    const listPath = `/api/${this.name}s`
+    const individualPath = `${listPath}/${this.id}`
+    return {
+      index: listPath,
+      new: `${listPath}/new`,
+      create: listPath,
+      show: individualPath,
+      edit: `${individualPath}/edit`,
+      update: individualPath,
+      destroy: individualPath
+    }
+  }
+}

client/app/resources/Debater.js

@@ -1,6 +1,13 @@
 import Resource from './Resource'
+import ApiResource from './ApiResource'
 
-export default class Debater extends Resource {
+export class Debater extends Resource {
+  constructor (id) {
+    super('debater', id)
+  }
+}
+
+export class ApiDebater extends ApiResource {
   constructor (id) {
     super('debater', id)
   }

client/app/resources/Resource.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 import ReactOnRails from 'react-on-rails'
 
 export default class Resource {
-  constructor (name, id) {
+  constructor(name, id) {
     this.name = name
     this.id = id
   }
@@ -25,49 +25,41 @@ export default class Resource {
     return {authenticity_token: ReactOnRails.authenticityToken()}
   }
 
-  index = (ext) => {
-    return axios.get(this.pathTo().index + this._extension(ext), this.authenticityTokenObject())
+  index = () => {
+    return axios.get(this.pathTo().index, this.authenticityTokenObject())
   }
 
-  new = (ext) => {
-    return axios.get(this.pathTo().new + this._extension(ext), this.authenticityTokenObject())
+  new = () => {
+    return axios.get(this.pathTo().new, this.authenticityTokenObject())
   }
 
   create = (resourceData, ext) => {
     let data = {}
     data[this.name] = resourceData
     return axios
-      .post(this.pathTo().create + this._extension(ext), {...data, ...this.authenticityTokenObject()})
+      .post(this.pathTo().create, {...data, ...this.authenticityTokenObject()})
   }
 
-  show = (ext) => {
-    return axios.get(this.pathTo().show + this._extension(ext), this.authenticityTokenObject())
+  show = () => {
+    return axios.get(this.pathTo().show, this.authenticityTokenObject())
   }
 
-  edit = (ext) => {
-    return axios.get(this.pathTo().edit + this._extension(ext), this.authenticityTokenObject())
+  edit = () => {
+    return axios.get(this.pathTo().edit, this.authenticityTokenObject())
   }
 
   update = (resourceData, ext) => {
     let data = {}
     data[this.name] = resourceData
     return axios
-      .put(this.pathTo().update + this._extension(ext), {...data, ...this.authenticityTokenObject()})
+      .put(this.pathTo().update, {...data, ...this.authenticityTokenObject()})
   }
 
-  destroy = (ext) => {
+  destroy = () => {
     return axios.request({
-      url: this.pathTo().destroy + this._extension(ext),
+      url: this.pathTo().destroy,
       method: 'DELETE',
       data: this.authenticityTokenObject()
     })
   }
-
-  _extension(extension) {
-    if (extension) {
-      return `.${extension}`
-    } else {
-      return ''
-    }
-  }
 }

client/app/resources/School.js

@@ -1,6 +1,13 @@
 import Resource from './Resource'
+import ApiResource from './ApiResource'
 
-export default class School extends Resource {
+export class School extends Resource {
+  constructor (id) {
+    super('school', id)
+  }
+}
+
+export class ApiSchool extends ApiResource {
   constructor (id) {
     super('school', id)
   }