Merge pull request #2051 from statisticsnorway/react4xp-entry-fix-exa…

…mple

Dont import directly from entries

docs/React4xp.md

@@ -14,4 +14,6 @@ Hydration is needed for react components with client side interaction. You need
 If we want to make more complex components/containers for react we can create classes that extends the React.Component class. This will open of for the possibility to use [state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) and [lifecycles](https://reactjs.org/docs/react-component.html#the-component-lifecycle). Ref. [Header.jsx](/src/main/resources/react4xp/_entries/Header.jsx)
 
 ## Entries
+It is important that any file in `react4xp/_entries` is not imported into any other file. An entry is a bridge between XP and React, not a reusable React component. They should only be used through the various render methods in `lib-react4xp` in our controllers.
+
 After you've run `enonic project build` or `enonic project deploy` at least once, you'll have a file in your build folder with a list of all react4xp components available. `/build/resources/main/assets/react4xp/entries.json`

src/main/resources/admin/tools/bestbet/bestbet.ts

@@ -92,7 +92,7 @@ function renderPart(req: XP.Request): XP.Response {
   ]
 
   const bestBetComponent = r4XpRender(
-    'bestbet/Bestbet',
+    'Bestbet',
     {
       logoUrl: assetUrl({
         path: 'SSB_logo_black.svg',

src/main/resources/main.es6

@@ -95,10 +95,6 @@ try {
           feature: 'datefns-publication-archive',
           enabled: false,
         },
-        {
-          feature: 'csr-on-table-accordion',
-          enabled: false,
-        },
       ],
     },
   ])

src/main/resources/react4xp/_entries/Accordion.jsx

@@ -1,67 +1,4 @@
 import React from 'react'
-import { Accordion as AccordionComponent, NestedAccordion } from '@statisticsnorway/ssb-component-library'
-
-import PropTypes from 'prop-types'
-
-class Accordion extends React.Component {
-  renderNestedAccordions(items) {
-    return items.map((item, i) => (
-      <NestedAccordion key={i} header={item.title}>
-        {item.body && <div dangerouslySetInnerHTML={this.createMarkup(item.body)} />}
-      </NestedAccordion>
-    ))
-  }
-
-  createMarkup(html) {
-    return {
-      __html: html.replace(/&nbsp;/g, ' '),
-    }
-  }
-
-  render() {
-    const location = window.location
-    const anchor = location && location.hash !== '' ? location.hash.substr(1) : undefined
-
-    const { accordions } = this.props
-
-    return (
-      <section className='xp-part part-accordion container'>
-        <div className='row'>
-          {accordions.map((accordion, index) => (
-            <React.Fragment key={index}>
-              <AccordionComponent
-                className='col-12'
-                id={accordion.id}
-                header={accordion.open}
-                subHeader={accordion.subHeader}
-                openByDefault={anchor && accordion.id && accordion.id === anchor}
-              >
-                {accordion.body && <div dangerouslySetInnerHTML={this.createMarkup(accordion.body)} />}
-                {this.renderNestedAccordions(accordion.items)}
-              </AccordionComponent>
-            </React.Fragment>
-          ))}
-        </div>
-      </section>
-    )
-  }
-}
-
-Accordion.propTypes = {
-  accordions: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      open: PropTypes.string.isRequired,
-      subHeader: PropTypes.string,
-      body: PropTypes.string,
-      items: PropTypes.arrayOf(
-        PropTypes.shape({
-          title: PropTypes.string,
-          body: PropTypes.string,
-        })
-      ),
-    })
-  ),
-}
+import Accordion from '../accordion/Accordion'
 
 export default (props) => <Accordion {...props} />

src/main/resources/react4xp/_entries/AttachmentTablesFigures.jsx

@@ -3,7 +3,7 @@ import { Accordion, Button } from '@statisticsnorway/ssb-component-library'
 import { ChevronDown, ChevronUp } from 'react-feather'
 
 import PropTypes from 'prop-types'
-import Table from './Table'
+import Table from '../table/Table'
 import { addGtagForEvent } from '/react4xp/ReactGA'
 
 function AttachmentTableFigures(props) {

src/main/resources/react4xp/_entries/Bestbet.jsx

@@ -0,0 +1,4 @@
+import React from 'react'
+import Bestbet from '../bestbet/Bestbet'
+
+export default (props) => <Bestbet {...props} />