Create Recipes' container folder with own actions, reducerds and services

recipes/.env

@@ -1,2 +1,3 @@
 SASS_PATH=node_modules:src
-NODE_PATH=src/
+NODE_PATH=src/
+REACT_APP_API_RECIPES='http://localhost:3000/recipes/'

recipes/package.json

@@ -21,6 +21,7 @@
     "react-redux": "^7.0.1",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",
+    "react-svg": "^9.0.2",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "typescript": "^3.4.1"

recipes/src/App.tsx

@@ -5,7 +5,6 @@ import CBKDrawer from './components/Drawer';
 import { Grid, Row } from '@material/react-layout-grid';
 import List, { ListItem, ListItemText } from '@material/react-list';
 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';
@@ -53,12 +52,6 @@ class App extends Component<{}, {}> {
                 <RouteWithSubRoutes key={i} {...route} />
               ))
             }
-            {/* <Route path="/recipes" component={Recipes}>
-            </Route>
-            <Route path="/planner">
-            </Route>
-            <Route path="/planner">
-            </Route> */}
           </div>
         </Router>
       </Provider>

recipes/src/components/Button/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Button from '@material/react-button';
+import '@material/react-button/dist/button.css';
+
+type CBKButtonProps = {
+  children: string,
+  className?: string,
+  unelevated?: boolean,
+  raised?: boolean,
+  outlined?: boolean,
+}
+
+export default function CBKButton(props: any) {
+  return (
+    <Button >
+      Click Me!
+    </Button>
+  )
+}

recipes/src/store/recipes/actions.ts

@@ -1,6 +1,6 @@
-// import { Dispatch } from "react";
 import axios from 'axios';
 import IRecipe from 'types/recipes';
+import { getRecipes } from './services';
 
 export const RECEIVE_RECIPES = 'RECEIVE_RECIPES';
 export const REQUEST_RECIPES = 'REQUEST_RECIPES';
@@ -25,12 +25,8 @@ export const selectRecipe = (recipe: IRecipe) => ({
 export function fetchRecipes(query: any) {
   return (dispatch: any) => {
     dispatch(requestRecipes(query))
-    return axios.get('http://localhost:3000/recipes/all')
-    .then(response => {
-      console.log('response', response.data);
-      return response.data
-    })
-    .then(json => dispatch(receiveRecipes(json)))
+    return getRecipes({})
+    .then(data => dispatch(receiveRecipes(data)))
     .catch(error => {
       console.log('error', error);
     })

recipes/src/containers/recipes.tsx

@@ -3,7 +3,7 @@ import {
   fetchIfNeeded as fetch,
   receiveRecipes as receive,
   selectRecipe as select,
-} from "store/recipes/actions";
+} from "containers/Recipes/actions";
 import { connect } from "react-redux";
 import { Grid, Row, Cell } from "@material/react-layout-grid";
 import Card from 'components/Card';

recipes/src/containers/Recipes/services.ts

@@ -0,0 +1,13 @@
+import axios, { AxiosPromise } from 'axios';
+import IRecipe from 'types/recipes';
+
+//@ts-ignore
+const API: string = process.env.REACT_APP_API_RECIPES;
+
+export const getRecipes = (query: any): Promise<IRecipe[]> => 
+  axios.get(`${API}/all`)
+  .then(response => response.data);
+
+export default {
+  getRecipes,
+}

recipes/src/route.config.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import RecipesContainer from 'containers/recipes';
+import RecipesContainer from 'containers/Recipes';
 import { Route } from 'react-router';
 
 const emptyRoute = (title: string) => () => (<h1>{title}</h1>);

recipes/src/store/configureStore.ts

@@ -1,7 +1,7 @@
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import { recipesReducer } from './recipes/reducers';
+import { recipesReducer } from 'containers/Recipes/reducers';
 
 const composeEnhancers = composeWithDevTools({});