done

interview_answers.md

@@ -2,9 +2,13 @@
 Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. These will not be counted as a part of your sprint score but will be helpful for preparing you for your endorsement interview, and enhancing overall understanding.
 
 1. What problem does the context API help solve?
+    making prop drilling easier to access. can also substitute redux if used with a useReducer
 
 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 passes information into the store. reducers are used to change state, and the store is an object that holds the state 
 
 3. What does `redux-thunk` allow us to do? How does it change our `action-creators`?
+    redux thunk is a middleware that can let you write action-creators that returns functions instead of an action
 
-4. What is your favorite state management system you've learned and this sprint? Please explain why!
+4. What is your favorite state management system you've learned and this sprint? Please explain why!    
+    i only really know how to manage state in redux, but i feel like context api is far easier once i leanr how to use it with a useReducer.

package.json

@@ -15,6 +15,7 @@
     "react-redux": "^7.2.2",
     "react-scripts": "3.4.0",
     "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {

src/App.js

@@ -1,21 +1,25 @@
 import React, { Component } from "react";
+import {connect} from 'react-redux';
+
+import {fetchSmurfs} from './actions'
 
 import AddForm from './components/AddForm';
 import SmurfList from './components/SmurfList';
 import Header from './components/Header';
 
-import axios from 'axios';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import "./App.css";
 
+
 class App extends Component {
-  componentDidMount() {
-    axios.get('http://localhost:3333/smurfs')
-    .then(res => console.log(res))
-    .catch(err => console.log('Axios Error', err));
+
+  componentDidMount(){
+    console.log("didMount")
+    this.props.dispatch(fetchSmurfs());
   }
 
+
   render() {
     return (
       <div className="App">
@@ -30,7 +34,7 @@ class App extends Component {
   }
 }
 
-export default App;
+export default connect(null)(App);
 
 //Task List:
 //1. Connect the fetchSmurfs actions to the App component.

src/actions/index.js

@@ -1,5 +1,39 @@
-import axios from 'axios';
+import axios from "axios";
+export const FETCH_START = 'FETCH_START';
+export const FETCH_SUCCESS = 'FETCH_SUCCESS';
+export const FETCH_FAIL = 'FETCH_FAIL';
+export const ADD_SMURFS = 'ADD_SMURFS';
+export const ERROR = 'ERROR';
 
+export const fetchSmurfs = () =>{
+    return(dispatch) =>{
+        dispatch(fetchStart());
+
+        axios
+        .get('http://localhost:3333/smurfs')
+        .then(res =>{
+            dispatch(fetchSuccess(res.data));
+        })
+        .catch(err =>{
+            dispatch(fetchFail("Couldn't get the info"))
+        })
+    }
+}
+export const fetchStart = () =>{
+    return({type:FETCH_START})
+}
+export const fetchSuccess = (smurfs) =>{
+    return({type:FETCH_SUCCESS, payload:smurfs})
+}
+export const fetchFail = (error) =>{
+    return({type:FETCH_FAIL, payload:error})
+}
+export const addSmurfs = (smurfs) =>{
+    return({type:ADD_SMURFS, payload:smurfs})
+}
+export const errorMessage = (error) =>{
+    return({type:ERROR, payload:error})
+}
 //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.
 //2. Add a standard action that allows us to add new smurf (including the name, nickname, position, summary)

src/components/AddForm.js

@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import {addSmurfs, errorMessage } from '../actions';
+import {connect} from 'react-redux';
 
 const AddForm = (props) => {
     const [state, setState] = useState({
@@ -18,11 +20,14 @@ const AddForm = (props) => {
     const handleSubmit = e => {
         e.preventDefault();
         if (state.name === "" || state.position === "" || state.nickname === "") {
-            errorMessage = "Name, position and nickname fields are required.";
+            props.errorMessage("Name, position and nickname fields are required.");
+        }else{
+            props.addSmurfs(state)
         }
-    }
+}
+
 
-    const errorMessage = "";
+const errorMessage = state.errorMessage;
 
     return(<section>
         <h2>Add Smurf</h2>
@@ -46,12 +51,13 @@ const AddForm = (props) => {
             {
                 errorMessage && <div data-testid="errorAlert" className="alert alert-danger" role="alert">Error: {errorMessage}</div>
             }
-            <button>Submit Smurf</button>
+            <button onClick={handleSubmit}>Submit Smurf</button>
         </form>
     </section>);
 }
 
-export default AddForm;
+
+export default connect(null,{addSmurfs,errorMessage})(AddForm);
 
 //Task List:
 //1. Connect the errorMessage, setError and addSmurf actions to the AddForm component.

src/components/SmurfList.js

@@ -1,26 +1,30 @@
 import React from 'react';
 import Smurf from './Smurf';
+import {connect} from 'react-redux'
 
- 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.'
-    }
+const SmurfList = (props)=> {
+    const {smurfs,isLoading} = props
 
     if (isLoading) {
         return <h1>Loading...</h1>;
     }
 
     return(<div className="listContainer">
-        <Smurf smurf={testSmurf}/>
-    </div>);
+        {
+            smurfs.map((smurf,id) =>{
+                return <Smurf key={id} smurf={smurf}/>
+            })
+        }
+        </div>);}
+
+const mapStateToProps = state =>{
+    return{
+        smurfs:state.smurfs,
+        isLoading:state.isLoading
+    }
 }
 
-export default SmurfList;
+export default connect(mapStateToProps) (SmurfList);
 
 //Task List:
 //1. Connect the smurfs and loading state values to the SmurfList component.

src/index.js

@@ -1,16 +1,24 @@
 import React from "react";
 import ReactDOM from "react-dom";
-
+import { Provider } from "react-redux";
+import { applyMiddleware, createStore } from "redux"; 
+import reducer from './reducers';
+import thunk from "redux-thunk";
+import logger from 'redux-logger';
 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(
-    <App />, 
+    <Provider store={store}>
+    <App />
+    </Provider>,
     rootElement
 );
 

src/reducers/index.js

@@ -1,8 +1,43 @@
+import { FETCH_START,FETCH_SUCCESS,FETCH_FAIL,ADD_SMURFS,ERROR } from "../actions/index"
 
 export const initialState = {
+    smurfs:[],
+    isLoading:false,
+    error:''
 }
-
-const reducer = ()=>{
+const reducer = (state=initialState,action)=>{
+    switch(action.type){
+        case(FETCH_START):
+            return({
+                ...state,
+                isLoading:true
+            })
+        case(FETCH_SUCCESS):
+            return({
+                ...state,
+                isLoading:false,
+                smurfs: action.payload
+            })
+        case (FETCH_FAIL):
+            return({
+                ...state,
+                isLoading:false,
+                error:action.payload
+            })
+        case(ADD_SMURFS):
+            return({
+                ...state,
+                smurfs:[...state.smurfs,
+                    action.payload]
+            })    
+        case(ERROR):
+            return({
+                ...state,
+                error:action.payload
+            })
+        default:
+            return state;
+    }
 }
 
 //**************DO NOT EDIT ANY CODE BEYOND THIS POINT**************//