Remove CreateForm from redux state (lmao what was I thinking)

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

@@ -1,33 +0,0 @@
-import Recipe from 'types/recipes';
-import { scrapeRecipe as Scrape } from '../services';
-import { SCRAPE_RECIPE, RECEIVE_SCRAPE, INVALID_SCRAPE } from './types';
-
-const scrapeRecipe = (url: string) => ({
-  type: SCRAPE_RECIPE,
-  url
-});
-
-const receiveScrape = (data: Recipe) => ({
-  type: RECEIVE_SCRAPE,
-  data,
-});
-
-const invalidateScrape = (error: any) => ({
-  type: INVALID_SCRAPE,
-  error,
-});
-
-export const fetchScrape = (url: string) => (dispatch: any) => {
-  dispatch(scrapeRecipe(url));
-  return Scrape(url)
-    .then(data => dispatch(receiveScrape(data)))
-    .catch(error => dispatch(invalidateScrape(error)))
-}
-
-const CreateFormActions = {
-  fetchScrape
-}
-
-export default CreateFormActions;
-
-export type CreateFormActionsType = typeof CreateFormActions;

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

@@ -1,26 +1,20 @@
 import React from 'react';
-import { assocPath, remove, any } from 'ramda';
+import { assocPath, remove } 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 { Form as IngredientForm } from 'components/Ingredient';
-import { fetchScrape } from './actions';
-import { connect } from 'react-redux';
-import { CreateState } from './types';
 
 import './styles.scss';
 
-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';
+
+import Recipe, { SubRecipe, Author, Details, _recipe, _subRecipe, _ingredient, Ingredient } from 'types/recipes';
+import { scrapeRecipe } from '../services';
 
 interface CreateRecipeProps {
-  createForm: CreateState,
-  fetchScrape: typeof fetchScrape
 };
 
 type CreateRecipeState = {
@@ -30,20 +24,9 @@ type CreateRecipeState = {
 
 type FormKeys = keyof Recipe | keyof SubRecipe | keyof Ingredient | keyof Author | keyof Details | number;
 
-const Suggestions = (suggestions: Suggestion[] = []) => (
-  <div>
-    {
-      suggestions.map(suggestion => (
-        <Btn>{suggestion.name}</Btn>
-      ))
-    }
-  </div>
-)
-
 class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState> {
   constructor(props: CreateRecipeProps) {
     super(props);
-    console.log("props", props);
     this.state = {
       form: { 
         ..._recipe,
@@ -288,29 +271,27 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
   }
 
   scrapeRecipe = () => {
-    this.props.fetchScrape(this.state.scrapeUrl)
-    // scrapeRecipe(this.state.scrapeUrl).then(recipe => {
-    //   this.setState({
-    //     form: {
-    //       ...recipe,
-    //       details: {
-    //         url: this.state.scrapeUrl,
-    //         ...recipe.details,
-    //       }
-    //     }
-    //   })
-    // })
+    scrapeRecipe(this.state.scrapeUrl).then(recipe => {
+      this.setState({
+        form: {
+          ...recipe,
+          details: {
+            url: this.state.scrapeUrl,
+            ...recipe.details,
+          }
+        }
+      })
+    })
   }
 
-  updateField = (key: FormKeys[]) => {
-    return (e: any) => {
-      const newValue = e.currentTarget.value;
-      this.setState({
-        form: assocPath(key, newValue, this.state.form)
-      } as Pick<CreateRecipeState, keyof CreateRecipeState>)
-    }
+  setData = (key: FormKeys[]) => (newValue: string|number) => {
+    this.setState({
+      form: assocPath(key, newValue, this.state.form)
+    } as Pick<CreateRecipeState, keyof CreateRecipeState>)
   }
 
+  updateField = (key: FormKeys[]) => ({ currentTarget }: any) => this.setData(key)(currentTarget.value);
+
   updateSubrecipeName = (subrecipe: number, newValue: string) => {
     this.setState({
       form: assocPath(['ingredients', subrecipe, 'name'], newValue, this.state.form),
@@ -529,67 +510,6 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                 removeSubrecipe={this.removeSubrecipe}
                 updateIngredientUnit={this.updateIngredientUnit}
               />
-              {/* {
-                form.ingredients.map((group, i) => (
-                  <div key={i}>
-                    <Row>
-                      <Cell columns={4}>
-                        <Input
-                          label='group name'
-                          value={group.name}
-                          onChange={this.updateField(['ingredients', i, 'name'])}
-                          button={this.actionButton(form.ingredients, i, this.addSubrecipe, this.removeSubrecipe(i))}
-                        />
-                      </Cell>
-                    </Row>
-                    <div>
-                    {
-                      group.ingredients.map((ingredient, j) => (
-                        <Row key={j}>
-                          <Cell columns={4}>
-                            <Input
-                              label="ingredient"
-                              value={ingredient.name}
-                              onChange={this.updateField(['ingredients', i, 'ingredients', j, 'name'])}
-                            />
-                          </Cell>
-                          <Cell columns={2}>
-                            <Input
-                              label="quantity"
-                              value={ingredient.quantity}
-                              onChange={this.updateField(['ingredients', i, 'ingredients', j, 'quantity'])}
-                            />
-                          </Cell>
-                          <Cell columns={2}>
-                            <Select
-                              label='unit'
-                              options={[
-                                {label: 'grams', value: 'gr'},
-                                {label: 'cups', value: 'cup'},
-                                {label: 'mililiters', value: 'ml'},
-                              ]}
-                              onChange={(x) => {console.log('selected', x)}}
-                            />
-                          </Cell>
-                          <Cell columns={4}>
-                            <Input
-                              label="original/notes"
-                              value={ingredient._original}
-                              onChange={this.updateField(['ingredients', i, 'ingredients', j, '_original'])}
-                              button={this.actionButton(form.ingredients[i].ingredients, j, this.addIngredient(i, j), this.removeIngredient(i, j))}
-                            />
-                          </Cell>
-                          <Cell columns={12}>
-                            { Suggestions(ingredient.suggestions) }
-                          </Cell>
-                        </Row>
-                      ))
-                    }
-                    </div>
-                    
-                  </div>
-                ))
-              } */}
             </section>
 
             <h5>Instructions</h5>
@@ -621,16 +541,4 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
   }
 }
 
-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);
+export default CreateRecipe;

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

@@ -1,43 +0,0 @@
-import { CreateState, CreateActionTypes, SCRAPE_RECIPE, RECEIVE_SCRAPE, INVALID_SCRAPE } from './types';
-
-const initialState: CreateState = {
-  data: {},
-  initialState: {},
-  fromScrape: false,
-  scrapeUrl: null,
-  fetchingScrape: false,
-  invalidScrape: false,
-};
-
-export const createReducer = (
-  state = initialState,
-  action: CreateActionTypes
-): CreateState => {
-  switch (action.type) {
-    case SCRAPE_RECIPE:
-      return {
-        ...state,
-        fromScrape: true,
-        fetchingScrape: true,
-        invalidScrape: false,
-        scrapeUrl: action.url,
-      }
-    case RECEIVE_SCRAPE:
-      return {
-        ...state,
-        fetchingScrape: false,
-        data: action.data,
-        initialState: action.data,
-        invalidScrape: false,
-      }
-    case INVALID_SCRAPE:
-      return {
-        ...state,
-        fetchingScrape: false,
-        invalidScrape: true,
-        fromScrape: false,
-      }
-    default:
-      return state
-  }
-};

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

@@ -1,38 +0,0 @@
-import Recipe from "src/types/recipes";
-
-export const SCRAPE_RECIPE = 'SCRAPE_RECIPE';
-export const RECEIVE_SCRAPE = 'RECEIVE_SCRAPE';
-export const INVALID_SCRAPE = 'INVALID_SCRAPE';
-export const UPDATE_FIELD = 'UPDATE_FIELD';
-export const ADD_SUBRECIPE = 'ADD_SUBRECIPE';
-export const REMOVE_SUBRECIPE = 'REMOVE_SUBRECIPE';
-export const ADD_INGREDIENT = 'ADD_INGREDIENT';
-export const REMOVE_INGREDIENT = 'REMOVE_INGREDIENT';
-export const ADD_SUGGESTION = 'ADD_SUGGESTION';
-export const SELECT_SUGGESTION = 'SELECT_SUGGESTION';
-
-interface ScrapeRecipeAction {
-  type: typeof SCRAPE_RECIPE,
-  url: string
-}
-
-interface ReceiveScrapeAction {
-  type: typeof RECEIVE_SCRAPE,
-  data: Recipe,
-}
-
-interface InvalidScrapeAction {
-  type: typeof INVALID_SCRAPE,
-  error: any
-}
-
-export interface CreateState {
-  data: Recipe|{},
-  initialState: Recipe|{},
-  fromScrape: boolean,
-  scrapeUrl: string|null,
-  fetchingScrape: boolean,
-  invalidScrape: boolean
-}
-
-export type CreateActionTypes = ScrapeRecipeAction | ReceiveScrapeAction | InvalidScrapeAction;

recipes/src/store/configureStore.ts

@@ -2,13 +2,11 @@ import { createStore, applyMiddleware, combineReducers } from 'redux';
 import thunk from 'redux-thunk';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import { recipesReducer } from 'containers/Recipes/List/reducers';
-import { createReducer } from 'containers/Recipes/Create/reducers';
 
 const composeEnhancers = composeWithDevTools({});
 const rootReducer = combineReducers({
   recipes: combineReducers({
     list: recipesReducer,
-    create: createReducer
   })
 })