Create route config file for subrouting and components. TG-10 #in-progress

recipes/src/App.tsx

@@ -8,6 +8,7 @@ import configureStore from 'store/configureStore';
 import Recipes from "containers/recipes";
 import './styles/app.scss';
 import "@material/react-layout-grid/dist/layout-grid.min.css";
+import Routes, { RouteWithSubRoutes } from 'route.config';
 
 function Index() {
   return <h2>Home</h2>;
@@ -47,12 +48,17 @@ class App extends Component<{}, {}> {
             }
           </CBKDrawer>
           <div className="cbk-main">
-            <Route path="/recipes" component={Recipes}>
+            {
+              Routes.map((route, i) => (
+                <RouteWithSubRoutes key={i} {...route} />
+              ))
+            }
+            {/* <Route path="/recipes" component={Recipes}>
             </Route>
             <Route path="/planner">
             </Route>
             <Route path="/planner">
-            </Route>
+            </Route> */}
           </div>
         </Router>
       </Provider>

recipes/src/route.config.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import RecipesContainer from 'containers/recipes';
+import { Route } from 'react-router';
+
+const emptyRoute = (title: string) => () => (<h1>{title}</h1>);
+
+const routes = [
+  {
+    path: '/recipes',
+    component: RecipesContainer,
+    routes: [{
+      path: '/recipes/create',
+      component: emptyRoute('create recipe'),
+    },
+    {
+      path: '/recipes/edit',
+      component: emptyRoute('edit recipe'),
+    }]
+  }, {
+    path: '/planner',
+    component: emptyRoute('planner'),
+  }, {
+    path: '/shoplist',
+    component: emptyRoute('shopping list'),
+  }
+];
+
+export const RouteWithSubRoutes = (route: any) => (
+  <Route
+    path={route.path}
+    render={props => (
+      <route.component {...props} routes={route.routes} />
+    )}
+  />
+);
+
+export default routes;