Use class instead of function on ResourceView
authorFrank Bessou <frank.bessou@logilab.fr>
Wed, 14 Jun 2017 11:06:21 +0200
changeset 229 584564700959
parent 228 9c2cc723db97
child 230 737cba398b88
Use class instead of function on ResourceView This change is intended to prepare for the next changeset which adds an instance variable to ResourceView.
src/components/Resource.js
--- a/src/components/Resource.js	Wed Jun 07 14:18:32 2017 +0200
+++ b/src/components/Resource.js	Wed Jun 14 11:06:21 2017 +0200
@@ -151,56 +151,53 @@
     entity: PropTypeJsonaryWrapper.isRequired,
 };
 
-export function ResourceView(props) {
-    const data = props.resource.data;
-    function renderUpLink() {
+export class ResourceView extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const data = this.props.resource.data;
         const upLink = data.getLink('up');
+
+        let breadcrumb = null;
         if (upLink) {
-            return (
-                <span>
-                    <Link to={upLink.href}>
-                        {upLink.title}
-                    </Link>
-                    &nbsp;/&nbsp;
-                </span>
-            );
+            breadcrumb = (<span>
+                <Link to={upLink.href}>
+                    {upLink.title}
+                </Link>
+                &nbsp;/&nbsp;
+            </span>);
         }
-        return null;
-    }
-    function renderTitle() {
+
         const selfLink = data.getLink('self');
+        let title = data.schemas().title();
         if (selfLink) {
-            return (
-                <Link to={selfLink.href}>
-                    <strong>{selfLink.title}</strong>
-                </Link>
-            );
+            title = (<Link to={selfLink.href}>
+                <strong>{selfLink.title}</strong>
+            </Link>);
         }
-        return data.schemas().title();
-    }
-    function renderHeader() {
+
+        const header = (
+            <div>
+                <ActionsDropDown target={this.props.resource} ignore={['view']}/>
+                <div className="clearfix" />
+                <h3>{ breadcrumb }{ title }</h3>
+            </div>
+        );
+
+        const isCollection = data.schemas().basicTypes()[0] === 'array';
+        let actualView = <ResourceEntityView entity={data} />;
+        if (isCollection) {
+            actualView = <ResourceCollectionView resource={this.props.resource} />;
+        }
         return (
             <div>
-                <ActionsDropDown target={props.resource} ignore={['view']}/>
-                <div className="clearfix" />
-                <h3>{ renderUpLink() }{ renderTitle() }</h3>
+                { header }
+                { actualView }
             </div>
         );
     }
-    function renderData() {
-        const isCollection = data.schemas().basicTypes()[0] === 'array';
-        if (isCollection) {
-            return <ResourceCollectionView resource={props.resource} />;
-        } else {
-            return <ResourceEntityView entity={data} />;
-        }
-    }
-    return (
-        <div>
-            { renderHeader() }
-            { renderData() }
-        </div>
-    );
 }
 ResourceView.propTypes = {
     resource: PropTypesResourceModel.isRequired,