Connect CreateForm component with redux

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

@@ -1,6 +1,7 @@
 import Recipe from 'types/recipes';
 import { scrapeRecipe as Scrape } from '../services';
 import { SCRAPE_RECIPE, RECEIVE_SCRAPE, INVALID_SCRAPE } from './types';
+import { bindActionCreators } from 'redux';
 
 const scrapeRecipe = (url: string) => ({
   type: SCRAPE_RECIPE,
@@ -26,19 +27,18 @@ const invalidateScrape = (error: any) => ({
   error,
 });
 
-const fetchScrape = (url: string) => (dispatch: any) => {
+export const fetchScrape = (url: string) => (dispatch: any) => {
+  console.log("fetching");
   dispatch(scrapeRecipe(url));
   return Scrape(url)
     .then(data => dispatch(receiveScrape(data)))
-    .catch(error => invalidateScrape(error))
+    .catch(error => dispatch(invalidateScrape(error)))
 }
 
-export {
-  SCRAPE_RECIPE,
-  RECEIVE_SCRAPE,
-  INVALID_SCRAPE,
-  scrapeRecipe,
-  receiveScrape,
-  invalidateScrape,
-  fetchScrape,
-}
+const CreateFormActions = {
+  fetchScrape
+}
+
+export default CreateFormActions;
+
+export type CreateFormActionsType = typeof CreateFormActions;

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

@@ -1,12 +1,14 @@
 import React from 'react';
-import { assocPath, remove } from 'ramda';
+import { assocPath, remove, any } from 'ramda';
 import  Navbar from 'components/Navbar';
 import { Grid, Row, Cell } from '@material/react-layout-grid';
 import Btn from 'components/Button';
 import Input from 'components/Input';
 import TagInput from 'components/TagInput';
-import Select from 'components/Select';
 import { Form as IngredientForm } from 'components/Ingredient';
+import CreateFormActions, { fetchScrape } from './actions';
+import { connect } from 'react-redux';
+import { CreateState } from './types';
 
 import './styles.scss';
 
@@ -14,8 +16,11 @@ import { scrapeRecipe } from './../services';
 
 import sample_img from "../../../sample.png";
 import Recipe, { SubRecipe, Author, Details, _recipe, _subRecipe, _ingredient, Ingredient, Suggestion } from 'types/recipes';
+import { AppState } from 'src/store/configureStore';
 
-type CreateRecipeProps = {
+interface CreateRecipeProps {
+  createForm: CreateState,
+  fetchScrape: typeof fetchScrape
 };
 
 type CreateRecipeState = {
@@ -36,8 +41,9 @@ const Suggestions = (suggestions: Suggestion[] = []) => (
 )
 
 class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState> {
-  constructor(props: any) {
+  constructor(props: CreateRecipeProps) {
     super(props);
+    console.log("props", props);
     this.state = {
       form: { 
         ..._recipe,
@@ -282,17 +288,18 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
   }
 
   scrapeRecipe = () => {
-    scrapeRecipe(this.state.scrapeUrl).then(recipe => {
-      this.setState({
-        form: {
-          ...recipe,
-          details: {
-            url: this.state.scrapeUrl,
-            ...recipe.details,
-          }
-        }
-      })
-    })
+    this.props.fetchScrape(this.state.scrapeUrl)
+    // scrapeRecipe(this.state.scrapeUrl).then(recipe => {
+    //   this.setState({
+    //     form: {
+    //       ...recipe,
+    //       details: {
+    //         url: this.state.scrapeUrl,
+    //         ...recipe.details,
+    //       }
+    //     }
+    //   })
+    // })
   }
 
   updateField = (key: FormKeys[]) => {
@@ -614,4 +621,16 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
   }
 }
 
-export default CreateRecipe;
+const mapStateToProps = ({ recipes }: AppState, ownProps: any) => {
+  return {
+    createForm: recipes.create
+  };
+};
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    fetchScrape: (url: string) => dispatch(fetchScrape(url))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CreateRecipe);

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

@@ -1,6 +1,6 @@
-import { FormState, FormActionTypes, SCRAPE_RECIPE, RECEIVE_SCRAPE, INVALID_SCRAPE } from './types';
+import { CreateState, CreateActionTypes, SCRAPE_RECIPE, RECEIVE_SCRAPE, INVALID_SCRAPE } from './types';
 
-const initialState: FormState = {
+const initialState: CreateState = {
   data: {},
   initialState: {},
   fromScrape: false,
@@ -10,8 +10,8 @@ const initialState: FormState = {
 
 export const createReducer = (
   state = initialState,
-  action: FormActionTypes
-): FormState => {
+  action: CreateActionTypes
+): CreateState => {
   switch (action.type) {
     case SCRAPE_RECIPE:
       return {

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

@@ -33,7 +33,7 @@ interface InvalidScrapeAction {
   invalidScrape: boolean,
 }
 
-export interface FormState {
+export interface CreateState {
   data: Recipe|{},
   initialState: Recipe|{},
   fromScrape: boolean,
@@ -41,4 +41,4 @@ export interface FormState {
   invalidScrape: boolean
 }
 
-export type FormActionTypes = ScrapeRecipeAction | ReceiveScrapeAction | InvalidScrapeAction;
+export type CreateActionTypes = ScrapeRecipeAction | ReceiveScrapeAction | InvalidScrapeAction;

recipes/src/store/configureStore.ts

@@ -22,4 +22,5 @@ const configureStore = () => {
   )
 }
 
+export type AppState = ReturnType<typeof rootReducer>
 export default configureStore;