import React from 'react'
import ReactDOM from 'react-dom'
import MainRouter from 'react-router-ext'
/** Example AuthHOC **/
const AuthHOC = (AuthLogic) => (Component) => AuthLogic()
        ? <Component>
        : <div> Not Authorized </div>
/** Component Pages **/
const Home = () => <div> Welcome in my home 🈴 </div>
const BedRoom = () => <div> My BedRoom is Private ❌ </div>
const Room = () => <div> Happy </div>
/** Config route list in Array **/
const routeList = [
    {
        path: '/',
        component: Home,
        exact: true
    },
    {
        path: '/room',
        component: Room,
        exact: true,
        routes: [
            {
                path: '/bedroom',
                component: BedRoom,
                wrapper: AuthHOC(() => false)
            }
        ]
    }
]
// Render
ReactDOM.render(
    <MainRouter routes={routeList} />, 
    document.getElementById('app')
)

const routeList = [
 // Basic 
 {
   path: '/',
   component: Home,
   exact: true,
 },
 
 // With Wrapper Component
 {
   path: '/',
   component: Home,
   exact: true,
   wrapper: AuthComponent,
 },
// With Routes
 {
   path: '/',
   component: Home,
   exact: true,
   wrapper: AuthComponent,
   routes: [
     {
       path: '/article',
       component: Article,
       exact: true,
       routes: [
         {
           path: '/categories',
           component: Category,
         },
       ]
     },
   ]
 }
]
// Render
ReactDOM.render(<MainRoute routes={routeList}/>, node)