had MVP working and broke it before I could commit

Author: bgoonz

package-lock.json

@@ -13,8 +13,9 @@
     "react-bootstrap": "^1.4.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.2",
-    "react-scripts": "3.4.0",
+    "react-scripts": "^3.4.0",
     "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {

package.json

@@ -1,7 +1,7 @@
 /**
  * Mock Service Worker.
  * @see https://github.com/mswjs/msw
- * - Please do NOT modify this file.
+ *-Please do NOT modify this filerror.
  * - Please do NOT serve this file on production.
  */
 /* eslint-disable */
@@ -21,7 +21,7 @@ self.addEventListener("activate", async function (event) {
 });
 
 self.addEventListener("message", async function (event) {
-  const clientId = event.source.id;
+  const clientId = event.sourcerror.id;
   const client = await event.currentTarget.clients.get(clientId);
   const allClients = await self.clients.matchAll();
   const allClientIds = allClients.map((client) => client.id);
@@ -101,8 +101,8 @@ self.addEventListener("fetch", async function (event) {
       }
 
       // Bypass requests with the explicit bypass header
-      if (requestClone.headers.get(bypassHeaderName) === "true") {
-        const modifiedHeaders = serializeHeaders(requestClone.headers);
+      if ( requestClonerror.headers.get( bypassHeaderName ) === "true" ) {
+        const modifiedHeaders = serializeHeaders( requestClonerror.headers );
         // Remove the bypass header to comply with the CORS preflight check
         delete modifiedHeaders[bypassHeaderName];
 
@@ -138,11 +138,11 @@ self.addEventListener("fetch", async function (event) {
 
       const clientMessage = rawClientMessage;
 
-      switch (clientMessage.type) {
+      switch ( clientMessagerror.type ) {
         case "MOCK_SUCCESS": {
           setTimeout(
-            resolve.bind(this, createResponse(clientMessage)),
-            clientMessage.payload.delay
+            resolverror.bind( this, createResponse( clientMessage ) ),
+              clientMessagerror.payload.delay
           );
           break;
         }
@@ -152,7 +152,10 @@ self.addEventListener("fetch", async function (event) {
         }
 
         case "NETWORK_ERROR": {
-          const { name, message } = clientMessage.payload;
+          const {
+            name,
+            message
+          } = clientMessagerror.payload;
           const networkError = new Error(message);
           networkError.name = name;
 
@@ -161,9 +164,9 @@ self.addEventListener("fetch", async function (event) {
         }
 
         case "INTERNAL_ERROR": {
-          const parsedBody = JSON.parse(clientMessage.payload.body);
+          const parsedBody = JSON.parse( clientMessagerror.payload.body );
 
-          console.error(
+          consolerror.error(
             `\
 [MSW] Request handler function for "%s %s" has thrown the following exception:
 
@@ -181,7 +184,7 @@ If you wish to mock an error response, please refer to this guide: https://mswjs
         }
       }
     }).catch((error) => {
-      console.error(
+      consolerror.error(
         '[MSW] Failed to mock a "%s" request to "%s": %s',
         request.method,
         request.url,
@@ -218,9 +221,9 @@ function sendToClient(client, message) {
 }
 
 function createResponse(clientMessage) {
-  return new Response(clientMessage.payload.body, {
-    ...clientMessage.payload,
-    headers: clientMessage.payload.headers,
+  return new Response( clientMessagerror.payload.body, {
+        ...clientMessagerror.payload,
+        headers: clientMessagerror.payload.headers,
   });
 }
 

public/mockServiceWorker.js

@@ -1,29 +1,65 @@
-import React, { Component } from "react";
+// import React, { Component } from "react";
+// 
+// import AddForm from "./components/AddForm";
+// import SmurfList from "./components/SmurfList";
+// import Header from "./components/Header";
+// 
+// import "bootstrap/dist/css/bootstrap.min.css";
+// import "./App.css";
+// 
+// class App extends Component {
+//   render() {
+//     return (
+//       <div className="App">
+//         <Header />
+// 
+//         <main>
+//           <SmurfList />
+//           <AddForm />
+//         </main>
+//       </div>
+//     );
+//   }
+// }
+// 
+// export default App;
+// 
+// //Task List:
+// //1. Connect the fetchSmurfs actions to the App component.
+// //2. Call the fetchSmurfs action when the component first loads.
 
-import AddForm from "./components/AddForm";
-import SmurfList from "./components/SmurfList";
-import Header from "./components/Header";
 
-import "bootstrap/dist/css/bootstrap.min.css";
-import "./App.css";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import AddForm from './components/AddForm';
+import SmurfList from './components/SmurfList';
+import Header from './components/Header';
+
+import { fetchSmurfs } from './actions';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './App.css';
 
 class App extends Component {
+  
+  componentDidMount() {
+    this.props.fetchSmurfs();
+  }
+
   render() {
+        
     return (
       <div className="App">
         <Header />
 
         <main>
-          <SmurfList />
-          <AddForm />
+          <SmurfList/>
+          <AddForm/>
         </main>
       </div>
     );
   }
 }
 
-export default App;
-
-//Task List:
-//1. Connect the fetchSmurfs actions to the App component.
-//2. Call the fetchSmurfs action when the component first loads.
+export default connect(null, { fetchSmurfs })(App);

src/App.js

@@ -1,51 +1,61 @@
 // 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 maderror.
 //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.
-import axios from 'axios';
-
-//Const
-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';
-
-
+//3. Add a standard action that allows us to set the value of the error message slice of staterror.
+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_SMURF = "ADD_SMURF";
+export const ERROR = "ERROR";
 
 export const fetchSmurfs = () => {
   return ( dispatch ) => {
     dispatch( fetchStart() );
 
     axios
-      .get( 'http://localhost:3333/smurfs' )
-      .then( res => {
+      .get( "http://localhost:3333/smurfs" )
+        .then( ( res ) => {
         dispatch( fetchSuccess( res.data ) );
       } )
-      .catch( err => {
-        dispatch( fetchFail( "Couldn't get the info" ) )
-      } )
-  }
-}
+      .catch( ( err ) => {
+        dispatch( fetchFail( "Couldn't get the info" ) );
+      } );
+      };
+      };
 
 export const fetchStart = () => {
-  return ( { type: FETCH_START } )
-}
+  return {
+    type: FETCH_START
+  };
+  };
 
 export const fetchSuccess = ( smurfs ) => {
-  return ( { type: FETCH_SUCCESS, payload: smurfs } )
-}
+  return {
+    type: FETCH_SUCCESS,
+    payload: smurfs
+  };
+  };
 
 export const fetchFail = ( error ) => {
-  return ( { type: FETCH_FAIL, payload: error } )
-}
+  return {
+    type: FETCH_FAIL,
+    payload: error
+  };
+  };
 
 export const addSmurfs = ( smurfs ) => {
-  return ( { type: ADD_SMURFS, payload: smurfs } )
-}
+  return {
+    type: ADD_SMURF,
+    payload: smurfs
+  };
+  };
 
 export const errorMessage = ( error ) => {
-  return ( { type: ERROR, payload: error } )
-}
+  return {
+    type: ERROR,
+    payload: error
+  };
+  };