Vida causey

interview_answers.md

@@ -3,8 +3,20 @@ Be prepared to demonstrate your understanding of this week's concepts by answeri
 
 1. What problem does the context API help solve?
 
+You are able to pass props and state around more easily with context API not having to share own through the component tree
+
 2. In your own words, describe `actions`, `reducers` and the `store` and their role in Redux. What does each piece do? Why is the store known as a 'single source of truth' in a redux application?
 
+Actions: the only source of information for the store, they carry paload info from the application to the store. 
+
+Reducers: are functions that determine changes to the applications state. It uses the action to determine this change.
+
+Store: It stores the whole state of the app in an immutable tree.
+
 3. What does `redux-thunk` allow us to do? How does it change our `action-creators`?
 
-4. What is your favorite state management system you've learned and this sprint? Please explain why!
+Redux Thunk is a middleware that allows you to call action creators. It changes action creators as it allows them to return a function instead of an action object.
+
+4. What is your favorite state management system you've learned and this sprint? Please explain why!
+
+Redux. I have enjoyed lerning how to pass around data with component state.

src/App.js

@@ -1,25 +1,33 @@
-import React, { Component } from "react";
+import React, { Component, useReducer} from "react";
 
 import AddForm from './components/AddForm';
 import SmurfList from './components/SmurfList';
 import Header from './components/Header';
-
+import {createContext} from "react"
+import reducer, {initialState} from './reducers/index'
 import 'bootstrap/dist/css/bootstrap.min.css';
 import "./App.css";
 
-class App extends Component {
-  render() {
+const SmurfsContext = createContext()
+
+const App =() => {
+  const {smurfs, dispatch} = useReducer(reducer, initialState)
+
+
+
+
     return (
       <div className="App">
         <Header />
-
+        <SmurfsContext.Provider value={smurfs, dispatch}>
         <main>
           <SmurfList/>
           <AddForm/>
         </main>
+        </SmurfsContext.Provider>
       </div>
     );
-  }
+
 }
 
 export default App;

src/actions/index.js

@@ -1,6 +1,34 @@
 import axios from 'axios';
 
 //Task List:
-//1. Add a thunk action called fetchSmurfs that triggers a loading status display in our application, performs an axios call to retreive smurfs from our server, saves the result of that call to our state and shows an error if one is made.
+//1. Add a thunk action called fetchSmurfs that triggers a loading status display in our application,
+// performs an axios call to retreive smurfs from our server, saves the result of that call to our 
+//state and shows an error if one is made.
+
+export const FETCH_SMURFS_START = "FETCH_SMURFS_START"
+export const FETCH_SMURFS_SUCCESS = "FETCH_SMURFS_SUCCESS"
+export const ERROR = 'ERROR';
 //2. Add a standard action that allows us to add new smurf (including the name, nickname, position, summary)
-//3. Add a standard action that allows us to set the value of the error message slice of state.
+export const FETCH_ADD_SMURFS = "FETCH_ADD_SMURFS"
+//3. Add a standard action that allows us to set the value of the error message slice of state.
+export const FETCH_SMURFS_ERROR = "FETCH_SMURFS_ERROR"
+
+
+
+export const fetchSmurfs = () =>dispatch =>{
+    return dispatch({type: FETCH_SMURFS_START});
+    axios
+    .get("http://localhost:3333/smurfs")
+    .then(res => 
+        dispatch({type: FETCH_SMURFS_SUCCESS, payload: res.data.results[0]})
+        .catch(err=> {
+            dispatch({type: "ERROR", payload: err.message })})
+            )}
+
+export const addsmurf = (newSmurf)=> {
+    return({type:FETCH_ADD_SMURFS, payload:newSmurf});
+}
+
+export const fetchSmurfError = (error) => {
+    return ({ type: FETCH_SMURFS_ERROR, payload: error })
+  }

src/components/AddForm.js

@@ -1,4 +1,8 @@
 import React, { useState } from 'react';
+import { connect } from 'react-redux';
+
+import { fetchSmurfError, addsmurf } from '../actions';
+import Smurf from './Smurf';
 
 const AddForm = (props) => {
     const [state, setState] = useState({
@@ -8,9 +12,6 @@ const AddForm = (props) => {
         description:""
     });
 
-    //remove when error state is added
-    const errorMessage = "";
-
     const handleChange = e => {
         setState({
             ...state,
@@ -22,37 +23,51 @@ const AddForm = (props) => {
         e.preventDefault();
         if (state.name === "" || state.position === "" || state.nickname === "") {
             //add in error action
+           return props.setError("error");
         }
-    }
+        props.addSmurf({...state, id:Date.now()});
+    } 
 
+    const { name, position, nickname, description } = state;
     return(<section>
         <h2>Add Smurf</h2>
         <form onSubmit={handleSubmit}>
             <div className="form-group">
                 <label htmlFor="name">Name:</label><br/>
-                <input onChange={handleChange} value={state.name} name="name" id="name" />
+                <input onChange={handleChange} value={name} name="name" id="name" />
             </div>
             <div className="form-group">
                 <label htmlFor="position">Position:</label><br/>
-                <input onChange={handleChange} value={state.position} name="position" id="position" />
+                <input onChange={handleChange} value={position} name="position" id="position" />
             </div>
             <div className="form-group">
                 <label htmlFor="nickname">Nickname:</label><br/>
-                <input onChange={handleChange} value={state.nickname} name="nickname" id="nickname" />
+                <input onChange={handleChange} value={nickname} name="nickname" id="nickname" />
             </div>
             <div className="form-group">
                 <label htmlFor="description">Description:</label><br/>
-                <textarea onChange={handleChange} value={state.description} name="description" id="description" />
+                <textarea onChange={handleChange} value={description} name="description" id="description" />
             </div>
             {
-                errorMessage && <div data-testid="errorAlert" className="alert alert-danger" role="alert">Error: {errorMessage}</div>
+                props.error && <div data-testid="errorAlert" className="alert alert-danger" role="alert">Error: {props.error}</div>
             }
             <button>Submit Smurf</button>
         </form>
     </section>);
 }
 
-export default AddForm;
+const mapStateToProps = (state) => {
+    return{
+        error: state.error
+    }
+}
+
+const mapActionToProps = {
+    fetchSmurfError : fetchSmurfError,
+    addsmurf : addsmurf,
+}
+
+export default connect(mapStateToProps, mapActionToProps)(AddForm);
 
 //Task List:
 //1. Connect the errorMessage, setError and addSmurf actions to the AddForm component.

src/components/SmurfList.js

@@ -1,26 +1,27 @@
-import React from 'react';
+import React,  {useEffect}  from 'react';
+import axios from 'axios';
 import Smurf from './Smurf';
+import { connect } from 'react-redux';
+import {fetchSmurfs} from "../actions";
 
- const SmurfList = ()=> {
-    const isLoading = false;
-    const testSmurf = {
-        id:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
-        name:'Poppa Smurf',
-        position:'Village Leader',
-        nickname: 'Pops',
-        description: 'Papa is the practical village leader and the father figure of 100 or so young Smurfs. He is easily identified by his red Smurf hat, pants, and a shortly-trimmed white beard and moustache.'
-    }
-
-    if (isLoading) {
-        return <h1>Loading...</h1>;
-    }
-
+const SmurfList = (props)=> {
+    useEffect(() => {
+        props.fetchSmurfs();
+    },[]);
+
     return(<div className="listContainer">
-        <Smurf smurf={testSmurf}/>
+        {props.smurfs.map(smurf => <Smurf smurf={smurf} key={smurf.id}/>)}
     </div>);
 }
 
-export default SmurfList;
+const mapStateToProps = (state) => {
+    return {
+        smurfs: state.smurfs,
+        loading: state.loading,
+    }
+}
+
+export default connect(mapStateToProps, {fetchSmurfs})(SmurfList);
 
 //Task List:
 //1. Connect the smurfs and loading state values to the SmurfList component.

src/index.js

@@ -1,19 +1,28 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Provider } from 'react-redux';
+import logger from "redux-logger";
+import thunk from 'redux-thunk'
+import {createStore, applyMiddleware } from "redux";
+import reducer from './reducers';
 
 import "./index.css";
 import App from "./App";
 
+const store = createStore(reducer, applyMiddleware(thunk, logger));
+
 const { worker } = require('./mocks/browser');
 worker.start();
 
 const rootElement = document.getElementById("root");
 
 ReactDOM.render(
+    <Provider store={store}>
     <App />, 
+    </Provider>,
+
     rootElement
 );
-
 //Task List:
 //1. Add in all necessary components and libary methods.
 //2. Create a store that includes thunk and logger middleware support.

src/reducers/index.js

@@ -1,10 +1,39 @@
+import { FETCH_SMURFS_START, FETCH_SMURFS_SUCCESS,
+    FETCH_SMURFS_ERROR, FETCH_ADD_SMURFS, } from "../actions";
 
 export const initialState = {
+   smurf:[
+       {id: 0 , name:"", nickname:"", position: "", description:""}
+
+   ],
+   isLoading : false,
+   error : "Wrong Smurfs Loading"
 }
 
-const reducer = ()=>{
+const reducer = (state = initialState, action ) =>{
+   switch (action.type){
+       case FETCH_SMURFS_START:
+           return {...state, isLoading: true}
+
+       case FETCH_SMURFS_SUCCESS:
+           return {...state, smurfs: action.payload, isLoading:false }
+
+       case FETCH_SMURFS_ERROR:
+           return {...state, isLoading: false, error: action.payload}
+
+       case FETCH_ADD_SMURFS:
+           return  { ...state, 
+            id: action.payload , name: action.payload, nickname: action.payload, position: action.payload, summary: action.payload 
+
+           }
+
+
+     default:
+       return state;
+   }
 }
 
+
 //**************DO NOT EDIT ANY CODE BEYOND THIS POINT**************//
 export default reducer;