Reconfiguring routes for Recipes

ktchn/src/server.ts

@@ -56,11 +56,11 @@ class App {
     this.app.use(bodyParser.urlencoded({ extended: false }));
     this.app.use(cookieParser());
     this.app.use(express.static(path.join(__dirname, "public")));
-    // this.app.use((req, res, next)=> {
-    //   res.header("Access-Control-Allow-Origin", "*");
-    //   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
-    //   next();
-    // })
+    this.app.use((req, res, next)=> {
+      res.header("Access-Control-Allow-Origin", "*");
+      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+      next();
+    })
   }
 
   private connectDB(): Promise<MongoClient.Db> {

package.json

@@ -23,6 +23,7 @@
     "dotenv": "^6.2.0",
     "express": "^4.16.4",
     "material-components-web": "^1.1.1",
+    "moment": "^2.24.0",
     "nano": "^8.0.0",
     "ramda": "^0.26.1",
     "redux-thunk": "^2.3.0",

recipes/src/components/Navbar/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import Button from '@material/react-button';
 import './styles.scss';
 
@@ -7,7 +7,8 @@ type NavbarProps = {
   actions?: {
     label: string,
     onClick: () => void,
-  }[]
+  }[],
+  children?: ReactElement,
 }
 export default function Navbar(props: NavbarProps){
   return (
@@ -26,6 +27,9 @@ export default function Navbar(props: NavbarProps){
           </div>
         ) : null
       }
+      {
+        props.children
+      }
     </div>
   );
 };

recipes/src/containers/Recipes/Create.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Create = (props: any) => {
+  return (
+    <div>
+      <h2>Create Recipe</h2>
+    </div>
+  )
+};
+
+export default Create;

recipes/src/containers/Recipes/List.tsx

@@ -0,0 +1,123 @@
+import React, { Component } from "react";
+import {
+  fetchIfNeeded as fetch,
+  receiveRecipes as receive,
+  selectRecipe as select,
+} from "containers/Recipes/actions";
+import { connect } from "react-redux";
+import { Grid, Row, Cell } from "@material/react-layout-grid";
+import Card from 'components/Card';
+import RecipeCard from 'components/RecipeCard';
+import IRecipe from 'types/recipes';
+import Navbar from 'components/Navbar';
+import { Link } from 'react-router-dom';
+
+type RecipeListProps = {
+  data: IRecipe[],
+  isFetching: boolean,
+  selectedRecipe: any | undefined,
+  fetchRecipes: (query: any) => undefined,
+  receiveRecipes: (recipes: IRecipe[]) => undefined,
+  selectRecipe: (recipe: IRecipe) => undefined,
+};
+
+class RecipeList extends Component<RecipeListProps> {
+  constructor(props: any) {
+    super(props);
+  }
+
+  componentDidMount() {
+    const { fetchRecipes } = this.props;
+    fetchRecipes({});
+  }
+
+  componentDidUpdate(prevProps: any) {
+    const { data, receiveRecipes, isFetching } = this.props;
+    if (isFetching === false && data.length !== prevProps.data.length) {
+      receiveRecipes(data);
+    }
+  }
+
+  handleRecipeSelection(recipe: any) {
+    return (event: React.MouseEvent) => this.props.selectRecipe(recipe);
+  }
+
+  handler(event: React.MouseEvent) {
+    console.log('click');
+  }
+
+  render() {
+    const {data, selectedRecipe, selectRecipe} = this.props;
+    const actions = [{
+      label: 'edit',
+      handler: this.handler,
+    }, {
+      label: 'shopping',
+      handler: this.handler
+    }];
+    const navbarActions = [{
+      label: 'create recipe',
+      onClick: () => {}
+    }];
+
+    return(
+      <div>
+        <Navbar
+          title="Recipes"
+        >
+          <Link to='/recipes/create'>Create Recipe</Link>
+        </Navbar>
+
+        <Grid>
+          <Row>
+            <Cell columns={6}>
+              {
+                data.map((recipe: any, i: number) => {
+                  return (
+                    <Card
+                      key={i}
+                      title={recipe.name}
+                      onClick={this.handleRecipeSelection(recipe)}
+                      summary={recipe.summary}
+                      actions={actions}
+                    />
+                  )
+                })
+              }
+            </Cell>
+            <Cell columns={6}>
+              { selectedRecipe !== undefined && 
+                <RecipeCard 
+                  recipe={selectedRecipe}
+                />
+              }
+            </Cell>
+          </Row>
+        </Grid>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = ({ recipes }: any, ownProps: any) => {
+  return recipes;
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    fetchRecipes: (query: any) => {
+      dispatch(fetch(query))
+    },
+    receiveRecipes: (recipes: IRecipe[]) => {
+      dispatch(receive(recipes))
+    },
+    selectRecipe: (recipe: IRecipe) => {
+      dispatch(select(recipe))
+    }
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RecipeList);

recipes/src/containers/Recipes/index.tsx

@@ -1,120 +1,25 @@
 import React, { Component } from "react";
-import {
-  fetchIfNeeded as fetch,
-  receiveRecipes as receive,
-  selectRecipe as select,
-} from "containers/Recipes/actions";
-import { connect } from "react-redux";
-import { Grid, Row, Cell } from "@material/react-layout-grid";
-import Card from 'components/Card';
-import RecipeCard from 'components/RecipeCard';
-import IRecipe from 'types/recipes';
-import Navbar from 'components/Navbar';
 
-type RecipesContainerProps = {
-  data: IRecipe[],
-  isFetching: boolean,
-  selectedRecipe: any | undefined,
-  fetchRecipes: (query: any) => undefined,
-  receiveRecipes: (recipes: IRecipe[]) => undefined,
-  selectRecipe: (recipe: IRecipe) => undefined,
-};
-
-class Recipes extends Component<RecipesContainerProps> {
-  constructor(props: any) {
-    super(props);
-  }
-
-  componentDidMount() {
-    const { fetchRecipes } = this.props;
-    fetchRecipes({});
-  }
-
-  componentDidUpdate(prevProps: any) {
-    const { data, receiveRecipes, isFetching } = this.props;
-    if (isFetching === false && data.length !== prevProps.data.length) {
-      receiveRecipes(data);
-    }
-  }
-
-  handleRecipeSelection(recipe: any) {
-    return (event: React.MouseEvent) => this.props.selectRecipe(recipe);
-  }
-
-  handler(event: React.MouseEvent) {
-    console.log('click');
-  }
-
-  render() {
-    const {data, selectedRecipe, selectRecipe} = this.props;
-    const actions = [{
-      label: 'edit',
-      handler: this.handler,
-    }, {
-      label: 'shopping',
-      handler: this.handler
-    }];
-    const navbarActions = [{
-      label: 'create recipe',
-      onClick: () => {}
-    }];
-
-    return(
-      <div>
-        <Navbar
-          title="Recipes"
-          actions={navbarActions}
-        />
-        <Grid>
-          <Row>
-            <Cell columns={6}>
-              {
-                data.map((recipe: any, i: number) => {
-                  return (
-                    <Card
-                      key={i}
-                      title={recipe.name}
-                      onClick={this.handleRecipeSelection(recipe)}
-                      summary={recipe.summary}
-                      actions={actions}
-                    />
-                  )
-                })
-              }
-            </Cell>
-            <Cell columns={6}>
-              { selectedRecipe !== undefined && 
-                <RecipeCard 
-                  recipe={selectedRecipe}
-                />
-              }
-            </Cell>
-          </Row>
-        </Grid>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = ({ recipes }: any, ownProps: any) => {
-  return recipes;
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    fetchRecipes: (query: any) => {
-      dispatch(fetch(query))
-    },
-    receiveRecipes: (recipes: IRecipe[]) => {
-      dispatch(receive(recipes))
-    },
-    selectRecipe: (recipe: IRecipe) => {
-      dispatch(select(recipe))
-    }
-  }
+import { Route, RouteComponentProps } from 'react-router-dom';
+import RecipeList from './List';
+import Create from './Create';
+
+const RecipesContainer = (props: RouteComponentProps) => {
+  console.log('props', props);
+  return (
+    <div>
+      <Route
+        exact
+        path={props.match.path}
+        component={RecipeList}
+      />
+  
+      <Route
+        path='/recipes/create'
+        component={Create}
+      />
+    </div>
+  )
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Recipes);
+export default RecipesContainer;

recipes/src/route.config.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import RecipesContainer from 'containers/Recipes';
 import { Route } from 'react-router';
+import RecipesContainer from 'containers/Recipes';
 
-const emptyRoute = (title: string) => () => (<h1>{title}</h1>);
+const emptyRoute = (title: string) => () => {
+  debugger;
+  return (<h1>{title}</h1>);
+};
 
 const routes = [
   {
@@ -19,6 +22,10 @@ const routes = [
   }, {
     path: '/planner',
     component: emptyRoute('planner'),
+    routes: [{
+      path: '/planner/lala',
+      component: emptyRoute('planner lala'),
+    }]
   }, {
     path: '/shoplist',
     component: emptyRoute('shopping list'),
@@ -29,7 +36,7 @@ export const RouteWithSubRoutes = (route: any) => (
   <Route
     path={route.path}
     render={props => (
-      <route.component {...props} routes={route.routes} />
+      <route.component location={props.location} routes={route.routes} {...props} />
     )}
   />
 );