next_on_rails 0.1.1

data/lib/generators/nor/frontend/templates/frontend/stylesheets/application.scss

@@ -0,0 +1,2 @@
+@import '~bootstrap/scss/bootstrap';
+@import '~nprogress/nprogress.css';

data/lib/generators/nor/install/USAGE

@@ -0,0 +1,30 @@
+Description:
+  This generator will install all the necessary configuration and migration
+  files for the Next On Rails gem. See
+  https://github.com/Uqido/next-on-rails for more information.
+
+Arguments:
+  USER_CLASS # The name of the class to use for user authentication. Default is
+             # 'User'
+  MOUNT_PATH # The path at which to mount the authentication routes. Default is
+             # 'auth'.
+
+Example:
+  rails generate nor:install User auth
+
+  This will create:
+      config/initializers/devise_token_auth.rb
+      db/migrate/<%= Time.zone.now.utc.strftime("%Y%m%d%H%M%S") %>_create_devise_token_auth_create_users.rb
+      app/models/user.rb
+
+  If 'app/models/user.rb' already exists, the following line will be inserted
+  after the class definition:
+      include DeviseTokenAuth::Concerns::User
+
+  The following line will be inserted into your application controller at
+  app/controllers/application_controller.rb:
+      include DeviseTokenAuth::Concerns::SetUserByToken
+
+  The following line will be inserted at the top of 'config/routes.rb' if it
+  does not already exist:
+      mount_devise_token_auth_for 'User', at: 'auth'

data/lib/generators/nor/install/install_generator.rb

@@ -0,0 +1,8 @@
+module Nor
+  class InstallGenerator < Rails::Generators::Base
+    def install
+      generate 'nor:backend'
+      generate 'nor:frontend'
+    end
+  end
+end

data/lib/generators/nor/scaffold/USAGE

@@ -0,0 +1,10 @@
+Description:
+  This generator create a scaffold for a resource. It will setup a model, a
+  controller and a React page component for the Next.js frontend. See
+  https://github.com/Uqido/next-on-rails for more information.
+
+Arguments:
+  RESOURCE_CLASS # The name of the resource class
+
+Example:
+  rails generate nor:scaffold Post

data/lib/generators/nor/scaffold/scaffold_generator.rb

@@ -0,0 +1,53 @@
+module Nor
+  class ScaffoldGenerator < Rails::Generators::NamedBase
+    include Rails::Generators::ResourceHelpers
+
+    source_root File.expand_path('templates', __dir__)
+
+    argument :attributes, type: :array, default: [], banner: 'field:type field:type'
+
+    def rails_scaffold
+      generate 'model', class_name, *attributes.map { |attribute| "#{attribute.name}:#{attribute.type}" }
+      template 'controller.rb', File.join('app', 'controllers', "#{plural_table_name}_controller.rb")
+      generate 'serializer', class_name
+      gsub_file File.join('app', 'serializers', "#{singular_table_name}_serializer.rb"), 'attributes ', "attributes #{attributes_list_string}"
+      route "resources :#{plural_name}"
+    end
+
+    def react_page_component
+      directory 'frontend/pages', File.join('frontend', 'pages', plural_table_name)
+      directory 'frontend/components', File.join('frontend', 'components', plural_table_name)
+    end
+
+    def add_server_js_get
+      code = <<~CODE
+        \s\s\s\sserver.get('/#{plural_table_name}/:id(\\\\\\\\d+)', (req, res) => {
+        \s\s\s\s  app.render(req, res, '/#{plural_table_name}/show', { id: req.params.id })
+        \s\s\s\s})
+
+        \s\s\s\sserver.get('/#{plural_table_name}/:id(\\\\\\\\d+)/edit', (req, res) => {
+        \s\s\s\s  app.render(req, res, '/#{plural_table_name}/edit', { id: req.params.id })
+        \s\s\s\s})
+
+      CODE
+      insert_into_file File.join('frontend', 'server.js'), code, before: "    server.get('*'"
+    end
+
+    private
+
+      def input_type(attribute)
+        case attribute.type
+        when :boolean
+          return 'CheckBox'
+        when :text
+          return 'TextArea'
+        else
+          return 'Input'
+        end
+      end
+
+      def attributes_list_string
+        (['id'] + attributes_names).map { |attribute_name| ":#{attribute_name}" }.join(', ')
+      end
+  end
+end

data/lib/generators/nor/scaffold/templates/controller.rb.tt

@@ -0,0 +1,40 @@
+class <%= controller_class_name %>Controller < ApplicationController
+  before_action :set_<%= singular_table_name %>, only: [:show, :update, :destroy]
+
+  def index
+    @<%= plural_table_name %> = <%= class_name %>.all
+    render json: <%= class_name %>Serializer.new(@<%= plural_table_name %>)
+  end
+
+  def show
+    render_resource @<%= singular_table_name %>
+  end
+
+  def create
+    @<%= singular_table_name %> = <%= class_name %>.new(<%= singular_table_name %>_params)
+    @<%= singular_table_name %>.save
+    render_resource @<%= singular_table_name %>, status: :created, location: @<%= singular_table_name %>
+  end
+
+  def update
+    @<%= singular_table_name %>.update(<%= singular_table_name %>_params)
+    render_resource @<%= singular_table_name %>
+  end
+
+  def destroy
+    @<%= singular_table_name %>.destroy
+    render head: :ok
+  end
+
+  private
+
+    # Use callbacks to share common setup or constraints between actions.
+    def set_<%= singular_table_name %>
+      @<%= singular_table_name %> = <%= class_name %>.find(params[:id])
+    end
+
+    # Only allow a trusted parameter "white list" through.
+    def <%= singular_table_name %>_params
+      params.permit(<%= attributes_list_string %>)
+    end
+end

data/lib/generators/nor/scaffold/templates/frontend/components/details.js.tt

@@ -0,0 +1,20 @@
+const <%= controller_class_name %>Details = ({ <%= singular_table_name.camelize(:lower) %> }) => (
+  <dl>
+<% attributes_names.each do |attribute_name| -%>
+    <dt>
+      <b><%= attribute_name.titleize %></b>
+    </dt>
+    <dd>{<%= singular_table_name.camelize(:lower) %>.<%= attribute_name.camelize(:lower) %>}</dd>
+<% end -%>
+    <dt>
+      <b>Created At</b>
+    </dt>
+    <dd>{<%= singular_table_name.camelize(:lower) %>.createdAt}</dd>
+    <dt>
+      <b>Updated At</b>
+    </dt>
+    <dd>{<%= singular_table_name.camelize(:lower) %>.updatedAt}</dd>
+  </dl>
+)
+
+export default <%= controller_class_name %>Details

data/lib/generators/nor/scaffold/templates/frontend/components/form.js.tt

@@ -0,0 +1,17 @@
+import { Input, TextArea, CheckBox, Select, HiddenIdField } from '../inputs'
+
+const <%= controller_class_name %>Form = ({ <%= singular_table_name.camelize(:lower) %> = {}, submit, getError }) => {
+  return (
+    <form onSubmit={submit}>
+      <HiddenIdField id={<%= singular_table_name.camelize(:lower) %>.id} />
+<% attributes.each do |attribute| -%>
+      <<%= input_type(attribute) %> name="<%= attribute.name %>" value={<%= singular_table_name.camelize(:lower) %>.<%= attribute.name.camelize(:lower) %>} error={getError('<%= attribute.name %>')} />
+<% end -%>
+      <button type="submit" className="btn btn-primary">
+        Save
+      </button>
+    </form>
+  )
+}
+
+export default <%= controller_class_name %>Form

data/lib/generators/nor/scaffold/templates/frontend/pages/crud.js.tt

@@ -0,0 +1,123 @@
+import Link from 'next/link'
+import { useState } from 'react'
+import { useLoading } from 'next-on-rails/utils'
+import { getInitialResources, useResources, useResourceForm } from 'next-on-rails/resources'
+
+import <%= controller_class_name %>Details from '../../components/<%= plural_table_name %>/details'
+import <%= controller_class_name %>Form from '../../components/<%= plural_table_name %>/form'
+
+const <%= controller_class_name %>Crud = props => {
+  const [editMode, setEditMode] = useState(false)
+  const loading = useLoading()
+  const [<%= plural_table_name.camelize(:lower) %>, <%= singular_table_name.camelize(:lower) %>, { show, create, update, destroy }, dispatch] = useResources(
+    '<%= plural_table_name.camelize(:lower) %>',
+    props.<%= plural_table_name.camelize(:lower) %>,
+    props.<%= plural_table_name.camelize(:lower) %>[0]
+  )
+  const clickShow = id => event => {
+    show(id)
+    setEditMode(false)
+  }
+  const clickEdit = id => event => {
+    show(id)
+    setEditMode(true)
+  }
+  const [submitForCreateAction, getCreateActionError] = useResourceForm(create)
+  const [submitForUpdateAction, getUpdateActionError] = useResourceForm(update)
+  const clickDestroy = id => event => destroy(id)
+  const rowBg = id => (<%= singular_table_name.camelize(:lower) %> && <%= singular_table_name.camelize(:lower) %>.id === id ? 'bg-light' : '')
+
+  return (
+    <div>
+      <div className="position-absolute">{loading ? 'Loading...' : null}</div>
+      <div className="container pt-4">
+        <h1 className="mb-5"><%= controller_class_name.titleize %></h1>
+
+        <div className="row">
+          <div className="col">
+            <h3>List <%= controller_class_name.titleize %></h3>
+            {<%= plural_table_name.camelize(:lower) %>.length > 0 ? (
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>ID</th>
+<% attributes_names.each do |attribute_name| -%>
+                    <th><%= attribute_name.titleize %></th>
+<% end -%>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {<%= plural_table_name.camelize(:lower) %>.map(<%= singular_table_name.camelize(:lower) %> => (
+                    <tr key={<%= singular_table_name.camelize(:lower) %>.id} className={rowBg(<%= singular_table_name.camelize(:lower) %>.id)}>
+                      <td>{<%= singular_table_name.camelize(:lower) %>.id}</td>
+<% attributes_names.each do |attribute_name| -%>
+                      <td>{<%= singular_table_name.camelize(:lower) %>.<%= attribute_name.camelize(:lower) %>}</td>
+<% end -%>
+                      <td className="text-right">
+                        <div className="btn-group">
+                          <button onClick={clickShow(<%= singular_table_name.camelize(:lower) %>.id)} className="btn btn-sm btn-info">
+                            Show
+                          </button>
+                          <button onClick={clickEdit(<%= singular_table_name.camelize(:lower) %>.id)} className="btn btn-sm btn-info">
+                            Edit
+                          </button>
+                          <button className="btn btn-sm btn-danger" onClick={clickDestroy(<%= singular_table_name.camelize(:lower) %>.id)}>
+                            Delete
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              <p>No <%= controller_class_name.titleize %> Found</p>
+            )}
+          </div>
+
+          <div className="col">
+            {<%= singular_table_name.camelize(:lower) %> ? (
+              <React.Fragment>
+                <h3>{`<%= class_name %> #${<%= singular_table_name.camelize(:lower) %>.id}`}</h3>
+                {editMode ? (
+                  <<%= controller_class_name %>Form key={<%= singular_table_name.camelize(:lower) %>.id} <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} submit={submitForUpdateAction} getError={getUpdateActionError} />
+                ) : (
+                  <<%= controller_class_name %>Details <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} />
+                )}
+              </React.Fragment>
+            ) : (
+              <p>No <%= class_name.titleize %> Selected</p>
+            )}
+          </div>
+        </div>
+
+        <hr />
+
+        <div>
+          <h3>Create New <%= class_name.titleize %></h3>
+          <<%= controller_class_name %>Form submit={submitForCreateAction} getError={getCreateActionError} />
+        </div>
+
+        <hr />
+
+        <ul className="nav">
+          <li className="nav-item">
+            <Link href="/<%= plural_table_name %>">
+              <a className="nav-link">List <%= controller_class_name.titleize %></a>
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link href="/">
+              <a className="nav-link">Go to Home</a>
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+<%= controller_class_name %>Crud.getInitialProps = getInitialResources('<%= plural_table_name.camelize(:lower) %>')
+
+export default <%= controller_class_name %>Crud

data/lib/generators/nor/scaffold/templates/frontend/pages/edit.js.tt

@@ -0,0 +1,55 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import Router from 'next/router'
+import { useLoading, useFlash, getDetailFromResponseError } from 'next-on-rails/utils'
+import { getInitialResource, useResources, useResourceForm } from 'next-on-rails/resources'
+
+import <%= controller_class_name %>Form from '../../components/<%= plural_table_name %>/form'
+
+const <%= controller_class_name %>Edit = props => {
+  const loading = useLoading()
+  const { setFlash } = useFlash()
+  const [, <%= singular_table_name.camelize(:lower) %>, { update }] = useResources('<%= plural_table_name.camelize(:lower) %>', props.<%= plural_table_name.camelize(:lower) %>, props.<%= singular_table_name.camelize(:lower) %>)
+
+  const [submit, getError] = useResourceForm(
+    update,
+    <%= singular_table_name %> => {
+      Router.push(`/<%= plural_table_name %>/show?id=${<%= singular_table_name.camelize(:lower) %>.id}`, `/<%= plural_table_name %>/${<%= singular_table_name.camelize(:lower) %>.id}`).then(() =>
+        setFlash({ notice: '<%= class_name.titleize %> updated successfully' })
+      )
+    },
+    error => {
+      setFlash({ alert: getDetailFromResponseError(error) })
+    }
+  )
+
+  return (
+    <div>
+      <div className="position-absolute">{loading ? 'Loading...' : null}</div>
+      <div className="container pt-4">
+        <h1 className="mb-5">Update <%= class_name.titleize %> #{<%= singular_table_name.camelize(:lower) %>.id}</h1>
+
+        <<%= controller_class_name %>Form <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} submit={submit} getError={getError} />
+
+        <hr />
+
+        <ul className="nav">
+          <li className="nav-item">
+            <Link href="/<%= plural_table_name %>">
+              <a className="nav-link">List <%= controller_class_name.titleize %></a>
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link href={`/<%= plural_table_name %>/show?id=${<%= singular_table_name.camelize(:lower) %>.id}`} as={`/<%= plural_table_name %>/${<%= singular_table_name.camelize(:lower) %>.id}`}>
+              <a className="nav-link">Show <%= class_name.titleize %></a>
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+<%= controller_class_name %>Edit.getInitialProps = getInitialResource('<%= singular_table_name.camelize(:lower) %>')
+
+export default <%= controller_class_name %>Edit

data/lib/generators/nor/scaffold/templates/frontend/pages/index.js.tt

@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import { useLoading, useFlash } from 'next-on-rails/utils'
+import { getInitialResources, useResources } from 'next-on-rails/resources'
+
+import Flash from '../../components/flash'
+
+const <%= controller_class_name %>Index = props => {
+  const loading = useLoading()
+  const { setFlash } = useFlash()
+
+  const [<%= plural_table_name.camelize(:lower) %>, _, { destroy }] = useResources('<%= plural_table_name.camelize(:lower) %>', props.<%= plural_table_name.camelize(:lower) %>, props.<%= singular_table_name.camelize(:lower) %>)
+
+  const clickDestroy = id => event => destroy(id).then(() => setFlash({ notice: '<%= class_name.titleize %> deleted successfully' }))
+
+  return (
+    <div>
+      <div className="position-absolute">{loading ? 'Loading...' : null}</div>
+      <div className="container pt-4">
+        <Flash />
+        <h1 className="mb-5"><%= controller_class_name.titleize %></h1>
+
+        {<%= plural_table_name.camelize(:lower) %>.length > 0 ? (
+          <table className="table">
+            <thead>
+              <tr>
+                <th>ID</th>
+<% attributes_names.each do |attribute_name| -%>
+                <th><%= attribute_name.titleize %></th>
+<% end -%>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {<%= plural_table_name.camelize(:lower) %>.map(<%= singular_table_name.camelize(:lower) %> => (
+                <tr key={<%= singular_table_name.camelize(:lower) %>.id}>
+                  <td>{<%= singular_table_name.camelize(:lower) %>.id}</td>
+<% attributes_names.each do |attribute_name| -%>
+                  <td>{<%= singular_table_name.camelize(:lower) %>.<%= attribute_name.camelize(:lower) %>}</td>
+<% end -%>
+                  <td className="text-right">
+                    <div className="btn-group">
+                      <Link href={`/<%= plural_table_name %>/show?id=${<%= singular_table_name.camelize(:lower) %>.id}`} as={`/<%= plural_table_name %>/${<%= singular_table_name.camelize(:lower) %>.id}`}>
+                        <a className="btn btn-sm btn-info">Show</a>
+                      </Link>
+                      <Link href={`/<%= plural_table_name %>/edit?id=${<%= singular_table_name.camelize(:lower) %>.id}`} as={`/<%= plural_table_name %>/${<%= singular_table_name.camelize(:lower) %>.id}/edit`}>
+                        <a className="btn btn-sm btn-info">Edit</a>
+                      </Link>
+                      <button className="btn btn-sm btn-danger" onClick={clickDestroy(<%= singular_table_name.camelize(:lower) %>.id)}>
+                        Delete
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <p>No <%= controller_class_name.titleize %> Found</p>
+        )}
+
+        <hr />
+
+        <ul className="nav">
+          <li className="nav-item">
+            <Link href="/<%= plural_table_name %>/new">
+              <a className="nav-link">New <%= class_name.titleize %></a>
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link href="/<%= plural_table_name %>/crud">
+              <a className="nav-link">One Page CRUD</a>
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link href="/">
+              <a className="nav-link">Go to Home</a>
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+<%= controller_class_name %>Index.getInitialProps = getInitialResources('<%= plural_table_name.camelize(:lower) %>')
+
+export default <%= controller_class_name %>Index