import { useState } from 'react' import Link from 'next/link' import { useLoading } from 'next-on-rails/utils' import { getInitialResource, useResources } from 'next-on-rails/resources'
import Flash from '../../components/flash' import <%= controller_class_name %>Details from '../../components/<%= plural_table_name %>/details'
const <%= controller_class_name %>Show = props => {
const loading = useLoading() const [, <%= singular_table_name.camelize(:lower) %>] = useResources('<%= plural_table_name.camelize(:lower) %>', props.<%= plural_table_name.camelize(:lower) %>, props.<%= singular_table_name.camelize(:lower) %>) return ( <div> <div className="position-absolute">{loading ? 'Loading...' : null}</div> <div className="container pt-4"> <Flash /> <h1 className="mb-5"><%= class_name.titleize %> #{<%= singular_table_name.camelize(:lower) %>.id}</h1> <<%= controller_class_name %>Details <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} /> <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 %>/edit?id=${<%= singular_table_name.camelize(:lower) %>.id}`} as={`/<%= plural_table_name %>/${<%= singular_table_name.camelize(:lower) %>.id}/edit`}> <a className="nav-link">Edit</a> </Link> </li> </ul> </div> </div> )
}
<%= controller_class_name %>Show.getInitialProps = getInitialResource('<%= singular_table_name.camelize(:lower) %>')
export default <%= controller_class_name %>Show