Move Recipe Store types to it's own file

recipes/src/containers/Recipes/List/actions.ts

@@ -1,8 +1,8 @@
 import { ThunkAction } from 'redux-thunk';
-import Recipe from 'types/recipes';
-import { Layout } from 'types/ui';
+import { DBRecipe } from 'types/recipes';
 import { getRecipes, deleteRecipe } from '../services';
-import { Action, ActionCreator, Dispatch } from 'redux';
+import { ActionCreator, Dispatch } from 'redux';
+import { RecipeListActionTypes, Layout } from './types';
 
 export const RECEIVE_RECIPES = 'RECEIVE_RECIPES';
 export const REQUEST_RECIPES = 'REQUEST_RECIPES';
@@ -14,51 +14,18 @@ export const REJECT_DELETE_RECIPE = 'REJECT_DELETE_RECIPE';
 
 export const CHANGE_LAYOUT = 'CHANGE_LAYOUT';
 
-export interface ReceiveRecipeAction extends Action<'RECEIVE_RECIPES'> {
-  isFetching: boolean,
-  payload: Recipe[]
-}
-
-export interface RequestRecipeAction extends Action<'REQUEST_RECIPES'> {
-  isFetching: boolean
-}
-
-export interface SelectRecipeAction extends Action<'SELECT_RECIPE'> {
-  payload: Recipe
-}
-
-export interface DeleteRecipeAction extends Action<'DELETE_RECIPE'> {
-  id: string,
-}
-
-export interface ResultDeleteRecipeAction extends Action<'CONFIRM_DELETE_RECIPE'|'REJECT_DELETE_RECIPE'> {
-  result: any
-}
-
-export interface ChangeLayoutAction extends Action<'CHANGE_LAYOUT'> {
-  layout: Layout
-}
-
-export type RecipeListActionTypes =
-  ReceiveRecipeAction |
-  RequestRecipeAction |
-  SelectRecipeAction |
-  DeleteRecipeAction |
-  ResultDeleteRecipeAction |
-  ChangeLayoutAction;
-
 export const requestRecipes = (query: string): RecipeListActionTypes => ({
   type: REQUEST_RECIPES,
   isFetching: true,
 });
 
-export const receiveRecipes = (json: Recipe[]): RecipeListActionTypes => ({
+export const receiveRecipes = (json: DBRecipe[]): RecipeListActionTypes => ({
   type: RECEIVE_RECIPES,
   isFetching: false,
   payload: json,
 });
 
-export const selectRecipe = (recipe: Recipe): RecipeListActionTypes => ({
+export const selectRecipe = (recipe?: DBRecipe): RecipeListActionTypes => ({
   type: SELECT_RECIPE,
   payload: recipe,
 });
@@ -114,7 +81,7 @@ export function fetchRecipes(query: string) {
   }
 }
 
-function shouldFetch(recipes: Recipe[]) {
+function shouldFetch(recipes: DBRecipe[]) {
   return recipes.length ? false : true;
 }
 

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

@@ -1,9 +1,14 @@
 import React, { Component } from "react";
+import { Link, RouteComponentProps } from 'react-router-dom';
+import { throttle } from 'throttle-debounce';
+import { connect } from "react-redux";
+
 import {
   fetchIfNeeded as fetch,
   receiveRecipes as receive,
   selectRecipe as select,
   deleteRecipeActionCreator as deleteRecipe,
+  changeLayout,
 } from "containers/Recipes/List/actions";
 import {
   addRecipeToCart,
@@ -11,7 +16,6 @@ import {
 } from 'containers/ShoppingCart/actions';
 import plannerActions from 'containers/Planner/actions';
 
-import { connect } from "react-redux";
 import {
   Grid,
   GridCell as Cell,
@@ -21,37 +25,34 @@ import {
 import Button from "components/Button";
 import Card from 'components/Card';
 import RecipeCard from 'components/RecipeCard';
-import { DBRecipe } from 'types/recipes';
 import Navbar from 'components/Navbar';
-import { Link, RouteComponentProps } from 'react-router-dom';
 import Input from 'components/Input';
-import { throttle } from 'throttle-debounce';
 import Spinner from 'components/Spinner';
 
+import { DBRecipe } from 'types/recipes';
+import { UiState, Display } from "types/ui";
+import { Layout } from './types';
+import { AppState } from "store/configureStore";
+
 import '@rmwc/grid/styles';
 import './styles.scss';
-import { UiState, Display } from "types/ui";
 
 interface RecipeListProps extends RouteComponentProps {
   data: DBRecipe[],
   isFetching: boolean,
-  selectedRecipe: DBRecipe | undefined,
+  selectedRecipe?: DBRecipe,
   ui: UiState,
-  fetchRecipes: (query: string) => undefined,
-  receiveRecipes: (recipes: DBRecipe[]) => undefined,
-  selectRecipe: (recipe?: DBRecipe) => undefined,
-  removeFromCart: (recipe: DBRecipe) => undefined,
-  addRecipeToCart: (recipe: DBRecipe) => undefined,
-  addRecipeToPlanner: (recipe: DBRecipe) => undefined,
-  deleteRecipe: (id: string) => undefined
+  layout: Layout,
+  fetchRecipes: (query: string) => void,
+  receiveRecipes: (recipes: DBRecipe[]) => void,
+  selectRecipe: (recipe?: DBRecipe) => void,
+  removeFromCart: (recipe: DBRecipe) => void,
+  addRecipeToCart: (recipe: DBRecipe) => void,
+  addRecipeToPlanner: (recipe: DBRecipe) => void,
+  deleteRecipe: (id: string) => void,
+  changeLayout: (layout: Layout) => void
 };
 
-enum Layout {
-  VerticalSplit,
-  Module,
-  List
-}
-
 type RecipeListState = {
   phoneDisplay: boolean,
   search: string,
@@ -59,6 +60,10 @@ type RecipeListState = {
 }
 
 class RecipeList extends Component<RecipeListProps, RecipeListState> {
+  layoutButtons: {
+    icon: string,
+    layout: Layout
+  }[];
   constructor(props: RecipeListProps) {
     super(props);
     this.state = {
@@ -66,6 +71,16 @@ class RecipeList extends Component<RecipeListProps, RecipeListState> {
       search: '',
       view: Layout.Module
     }
+    this.layoutButtons = [{
+      icon: 'view_module',
+      layout: Layout.Module
+    }, {
+      icon: 'view_list',
+      layout: Layout.List
+    }, {
+      icon: 'view_sidebar',
+      layout: Layout.VerticalSplit
+    }];
   }
 
   componentDidMount() {
@@ -149,7 +164,7 @@ class RecipeList extends Component<RecipeListProps, RecipeListState> {
   }]
 
   render() {
-    const {data, selectedRecipe, isFetching} = this.props;
+    const {data, selectedRecipe, isFetching, changeLayout } = this.props;
     return(
       <div className='cbk-recipes-list'>
         <Navbar
@@ -168,12 +183,17 @@ class RecipeList extends Component<RecipeListProps, RecipeListState> {
           <Link to='/recipes/create'>
             <Button unelevated>
               Create Recipe
-              
             </Button>
           </Link>
-          <Button icon="view_module" active></Button>
-          <Button icon="view_list"></Button>
-          <Button icon="view_sidebar"></Button>
+          <div>
+            {
+              this.layoutButtons.map(({icon, layout}) => {
+                return (
+                  <Button icon={icon} key={icon} onClick={() => {changeLayout(layout)} } active={layout === this.props.layout}></Button>
+                );
+              })
+            }
+          </div>
         </Navbar>
         {
           isFetching && (<Spinner/>)
@@ -212,11 +232,11 @@ class RecipeList extends Component<RecipeListProps, RecipeListState> {
   }
 }
 
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: AppState) => {
   return {
     ...state.recipes,
     ui: state.ui,
-    shoppingCart: state.shoppingCart.cart
+    shoppingCart: state.shoppingCart
   };
 }
 
@@ -228,7 +248,7 @@ const mapDispatchToProps = (dispatch: any) => {
     receiveRecipes: (recipes: DBRecipe[]) => {
       dispatch(receive(recipes))
     },
-    selectRecipe: (recipe: DBRecipe) => {
+    selectRecipe: (recipe?: DBRecipe) => {
       dispatch(select(recipe))
     },
     addRecipeToCart: (recipe: DBRecipe) => {
@@ -242,6 +262,9 @@ const mapDispatchToProps = (dispatch: any) => {
     },
     deleteRecipe: (id: string) => {
       dispatch(deleteRecipe(id))
+    },
+    changeLayout: (layout: Layout) => {
+      dispatch(changeLayout(layout))
     }
   }
 }

recipes/src/containers/Recipes/List/reducers.ts

@@ -1,16 +1,6 @@
-import { Layout } from 'types/ui';
-import { RecipeListActionTypes, RECEIVE_RECIPES, SELECT_RECIPE, REQUEST_RECIPES, DELETE_RECIPE, CONFIRM_DELETE_RECIPE, REJECT_DELETE_RECIPE, CHANGE_LAYOUT } from './actions';
-import Recipe from 'types/recipes';
 
-type RecipeState = {
-  isFetching: boolean,
-  data: Recipe[],
-  selectedRecipe?: Recipe,
-  shoppingCart: [],
-  id: string,
-  result: any,
-  layout: Layout
-};
+import { RECEIVE_RECIPES, SELECT_RECIPE, REQUEST_RECIPES, DELETE_RECIPE, CONFIRM_DELETE_RECIPE, REJECT_DELETE_RECIPE, CHANGE_LAYOUT } from './actions';
+import { RecipeState, Layout, RecipeListActionTypes } from './types';
 
 const initialState: RecipeState = {
   isFetching: false,

recipes/src/containers/Recipes/List/types.ts

@@ -0,0 +1,51 @@
+import { Action } from 'redux';
+import { DBRecipe } from 'types/recipes';
+
+export type RecipeState = {
+  isFetching: boolean,
+  data: DBRecipe[],
+  selectedRecipe?: DBRecipe,
+  shoppingCart: [],
+  id: string,
+  result: any,
+  layout: Layout
+};
+
+export enum Layout {
+  VerticalSplit,
+  Module,
+  List
+}
+
+export interface ReceiveRecipeAction extends Action<'RECEIVE_RECIPES'> {
+  isFetching: boolean,
+  payload: DBRecipe[]
+}
+
+export interface RequestRecipeAction extends Action<'REQUEST_RECIPES'> {
+  isFetching: boolean
+}
+
+export interface SelectRecipeAction extends Action<'SELECT_RECIPE'> {
+  payload: DBRecipe | undefined
+}
+
+export interface DeleteRecipeAction extends Action<'DELETE_RECIPE'> {
+  id: string,
+}
+
+export interface ResultDeleteRecipeAction extends Action<'CONFIRM_DELETE_RECIPE'|'REJECT_DELETE_RECIPE'> {
+  result: any
+}
+
+export interface ChangeLayoutAction extends Action<'CHANGE_LAYOUT'> {
+  layout: Layout
+}
+
+export type RecipeListActionTypes =
+  ReceiveRecipeAction |
+  RequestRecipeAction |
+  SelectRecipeAction |
+  DeleteRecipeAction |
+  ResultDeleteRecipeAction |
+  ChangeLayoutAction;

recipes/src/types/ui.ts

@@ -7,12 +7,6 @@ export type UiState = {
   display: Display,
 }
 
-export enum Layout {
-  VerticalSplit,
-  Module,
-  List
-}
-
 export default {
   Display,
 }