Add Recipe View route

recipes/src/containers/Recipes/List/index.tsx

@@ -26,7 +26,7 @@ class RecipeList extends Component<RecipeListProps, {phoneDisplay: boolean}> {
   constructor(props: RecipeListProps) {
     super(props);
     this.state = {
-      phoneDisplay: window.innerWidth < 600
+      phoneDisplay: window.innerWidth < 840
     }
   }
 
@@ -98,7 +98,7 @@ class RecipeList extends Component<RecipeListProps, {phoneDisplay: boolean}> {
                 })
               }
             </Cell>
-            <Cell columns={6}>
+            <Cell columns={6} phoneColumns={4} tabletColumns={8}>
               { selectedRecipe !== undefined && 
                 <RecipeCard 
                   recipe={selectedRecipe}

recipes/src/containers/Recipes/View/index.tsx

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+import { getRecipeById } from './../services';
+import { RouteComponentProps } from 'react-router';
+
+import RecipeCard from 'components/RecipeCard';
+import { _recipe } from 'types/recipes';
+
+interface ViewRecipeProps extends RouteComponentProps<{id: string}>{
+
+}
+
+const ViewRecipe = (props: ViewRecipeProps) => {
+  const [ recipe, setRecipe ] = useState({..._recipe});
+
+  useEffect(() => {
+    getRecipeById(props.match.params.id).then(recipe => setRecipe(recipe))
+  });
+
+  return (
+    <div className='cbk-recipe-viewer'>
+      <RecipeCard recipe={recipe}/>
+    </div>
+  )
+}
+
+export default ViewRecipe;

recipes/src/containers/Recipes/index.tsx

@@ -1,10 +1,24 @@
-import React from "react";
+import React, { ReactType } from "react";
 
 import { Route, RouteComponentProps } from 'react-router-dom';
 import RecipeList from './List';
 import Create from './Create';
 
-const RecipesContainer = (props: RouteComponentProps) => {
+
+const view = (props: any) => (
+  <div>
+    <h1>id {props.match}</h1>
+  </div>
+)
+
+interface RecipeContainerProp extends RouteComponentProps {
+  routes: {
+    path: string,
+    component: ReactType<any>
+  }[]
+};
+
+const RecipesContainer = (props: RecipeContainerProp) => {
   return (
     <div>
       <Route
@@ -12,11 +26,15 @@ const RecipesContainer = (props: RouteComponentProps) => {
         path={props.match.path}
         component={RecipeList}
       />
-  
-      <Route
-        path='/recipes/create'
-        component={Create}
-      />
+      {
+        props.routes.map((route: any, i: number) => (
+          <Route
+            key={i}
+            path={route.path}
+            component={route.component}
+          />
+        ))
+      }
     </div>
   )
 }

recipes/src/containers/Recipes/services.ts

@@ -8,8 +8,12 @@ export const getRecipes = (query: any): Promise<Recipe[]> =>
   axios.get(`${API}/all`)
   .then(response => response.data);
 
-  export const saveRecipe = (recipe: Recipe): Promise<any> => 
-    axios.post(`${API}`, recipe)
+export const saveRecipe = (recipe: Recipe): Promise<any> => 
+  axios.post(`${API}`, recipe)
+
+export const getRecipeById = (id: string): Promise<Recipe> =>
+  axios.get(`${API}/id/${id}`)
+  .then(response => response.data)
 
 export const scrapeRecipe = (url: string): Promise<Recipe> => 
   axios.post(
@@ -19,6 +23,7 @@ export const scrapeRecipe = (url: string): Promise<Recipe> =>
 
 export default {
   getRecipes,
+  getRecipeById,
   scrapeRecipe,
   saveRecipe
 }

recipes/src/route.config.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Route } from 'react-router';
 import RecipesContainer from 'containers/Recipes';
+import CreateRecipe from 'containers/Recipes/Create';
+import ViewRecipe from 'containers/Recipes/View';
 
-const emptyRoute = (title: string) => () => {
-  return (<h1>{title}</h1>);
+const emptyRoute = (title: string) => (props: any) => {
+  console.log(props);
+  return (<h1>{title} {props.match.params && props.match.params.id}</h1>);
 };
 
 const routes = [
@@ -12,7 +15,10 @@ const routes = [
     component: RecipesContainer,
     routes: [{
       path: '/recipes/create',
-      component: emptyRoute('create recipe'),
+      component: CreateRecipe,
+    }, {
+      path: '/recipes/view/:id',
+      component: ViewRecipe
     },
     {
       path: '/recipes/edit',

recipes/src/styles/app.scss

@@ -60,6 +60,7 @@ code {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
+  height: 100vh;
 }
 
 .cbk-app-drawer {
@@ -120,7 +121,7 @@ textarea
   ##Device = Low Resolution Tablets, Mobiles 
 */
 
-@media (max-width: 840px) {
+@media (max-width: 839px) {
   
   #root {
     flex-direction: column;