Layout HOC

event

	class Event extends Component<EventProps & RouteProps> {
		public componentDidMount() {
			const {selectedEvent, eventList, fetchEvent, setSelectedEvent, match} = this.props;
			const teId = match.params.teId;
			if (selectedEvent && selectedEvent.id === teId) {
				// The selected event has already been fetched
				return;
			}
			let event;
			if (eventList) {
				// See if it is in the event list already. If so, save it as the selected event
				event = eventList.find(e => e.id === teId);
				if (event) {
					setSelectedEvent(event);
					return;
				}
			}
			if (!event) {
				// We need to fetch the selected event
				fetchEvent(teId);
			}
		}

		public render() {
                   const {selectedEvent} = this.props;
                   const EventDetailComponent = Layout({Main: EventHero, Panel: EventDetail}, null, {primary: selectedEvent.name});
                   return <EventDetailComponent event={selectedEvent} />;
		}
	}

layout

function Layout(components, mainHeader, panelHeader) {
  const { Main, Panel } = components;

  class Component extends React.Component{
    constructor(props){
      super(props);
    }

    getPanel(){
      if(!Panel){
        return null;
      }

      return (
        <div>
          <div className="pts-panel-header mb-4">
             <h1>{panelHeader.primary}</h1>
             <h2>{panelHeader.secondary}</h2>
          </div>
          <Panel {...this.props} />
        </div>
      );
    }

    getMainPanel() {
       return (
          <div>
            <div className="pts-main-content-header mb-4">
               <h1>mainHeader</h1>
            </div>
            <Main {...this.props} />
          </div>
       );
    }
    
    render() {
      const panel = getPanel();
      if (panel) {
         return (
            <Row>
               <Col md="8">
                  {getMain()}
               </Col>
               <Col md="4">
                  {panel}
               </Col>
            </Row>
         );
      }
      return (
         <Row>
             <Col>
                {getMain()}
             </Col>
         </Row>
      );
    }
  }
  return Component;
}