Fix routes typings

recipes/src/App.tsx

@@ -5,7 +5,7 @@ import Toast from 'components/Toast';
 import configureStore from 'store/configureStore';
 import './styles/app.scss';
 import TopBar from 'components/TopAppBar';
-import Routes from 'route.config';
+import Routes, { navbarRoutes } from 'route.config';
 import { Display } from "./types/ui";
 
 
@@ -29,18 +29,16 @@ const RouteWithSubRoutes = (route: any) => {
     <Route
       path={route.path}
       render={props => (
-        <route.component location={props.location} routes={route.routes} {...props} />
+        <route.component routes={route.routes} {...props} />
       )}
     />
   );
 }
 
 const AppRouterConf: React.FunctionComponent<{ display: Display }> = () => {
-  const routes = Routes.filter(route => !!route.title);
-
+  const routes = navbarRoutes;
   return (
     <>
-      //@ts-ignore
       <TopBar routes={routes}/>
       <div className="cbk-app-content">
         <Switch>

recipes/src/components/List/index.tsx

@@ -6,7 +6,7 @@ import './styles.scss';
 
 type ItemProps = { focused?: boolean } ;
 
-type ListProps<T> = {
+type ListProps<T extends any> = {
   nonInteractive?: boolean,
   focusOnClick?: boolean,
   dense?: boolean,
@@ -33,7 +33,7 @@ const CBKList = <T extends any>({onClick = () => {}, ...props}: ListProps<T>) =>
             className={
               classnames({
                 'cbk-list__item': true,
-                'cbk-list__item--focus': index === props.focus || item.focused || (props.focusMultiple && includes(item, props.focusMultiple))
+                'cbk-list__item--focus': index === props.focus || (props.focusMultiple && includes(item, props.focusMultiple))
               })
             }
             onClick={() => onClick(item, index)}

recipes/src/route.config.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, FunctionComponent } from 'react';
 import { Route } from 'react-router';
 import RecipesContainer from 'containers/Recipes';
 import CreateRecipe from 'containers/Recipes/Create';
@@ -6,46 +6,58 @@ import ViewRecipe from 'containers/Recipes/View';
 import EditRecipe from 'containers/Recipes/Edit';
 import ShoppingList from 'containers/ShoppingCart/List';
 import PlannerContainer from 'containers/Planner';
-import { Redirect } from 'react-router-dom';
+import { Redirect, RouteComponentProps } from 'react-router-dom';
 
 const emptyRoute = (title: string) => (props: any) => {
   return (<h1>{title} {props.match.params && props.match.params.id}</h1>);
 };
 
+type RouteType = {
+  path: string,
+  component: any
+}
+
+interface NavbarRoutesType extends RouteType {
+  routes?: RouteType[],
+  title: string
+}
+
+export const navbarRoutes: NavbarRoutesType[] = [{
+  path: '/recipes',
+  title: 'recipes',
+  component: RecipesContainer,
+  routes: [{
+    path: '/recipes/create',
+    component: CreateRecipe,
+  }, {
+    path: '/recipes/view/:id',
+    component: ViewRecipe
+  },
+  {
+    path: '/recipes/edit/:id',
+    component: EditRecipe,
+  }],
+}, {
+  path: '/planner',
+  title: 'planner',
+  component: PlannerContainer,
+  routes: [{
+    path: '/planner/lala',
+    component: emptyRoute('planner lala'),
+  }],
+}, {
+  title: 'shoplist',
+  path: '/shoplist',
+  component: ShoppingList,
+}];
+
 const routes = [
   {
     path: '/',
     exact: true,
     component: () => (<Redirect to='/recipes'/>)
   },
-  {
-    path: '/recipes',
-    component: RecipesContainer,
-    routes: [{
-      path: '/recipes/create',
-      component: CreateRecipe,
-    }, {
-      path: '/recipes/view/:id',
-      component: ViewRecipe
-    },
-    {
-      path: '/recipes/edit/:id',
-      component: EditRecipe,
-    }],
-    title: 'recipes'
-  }, {
-    path: '/planner',
-    component: PlannerContainer,
-    routes: [{
-      path: '/planner/lala',
-      component: emptyRoute('planner lala'),
-    }],
-    title: 'planner'
-  }, {
-    path: '/shoplist',
-    component: ShoppingList,
-    title: 'shoplist'
-  }
+  ...navbarRoutes
 ];
 
 export const RouteWithSubRoutes = (route: any) => {
@@ -53,7 +65,7 @@ export const RouteWithSubRoutes = (route: any) => {
     <Route
       path={route.path}
       render={props => (
-        <route.component location={props.location} routes={route.routes} {...props} />
+        <route.component routes={route.routes} {...props} />
       )}
     />
   );