all done

package.json

@@ -10,7 +10,9 @@
     "node-sass": "^4.13.1",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "react-scripts": "3.4.0"
+    "react-redux": "^7.2.0",
+    "react-scripts": "3.4.0",
+    "redux": "^4.0.5"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,48 +1,57 @@
-import React from 'react';
-
-import Header from './components/Header';
-import AddedFeatures from './components/AddedFeatures';
-import AdditionalFeatures from './components/AdditionalFeatures';
-import Total from './components/Total';
-
-const App = () => {
-  const state = {
-    additionalPrice: 0,
-    car: {
-      price: 26395,
-      name: '2019 Ford Mustang',
-      image:
-        'https://cdn.motor1.com/images/mgl/0AN2V/s1/2019-ford-mustang-bullitt.jpg',
-      features: []
-    },
-    additionalFeatures: [
-      { id: 1, name: 'V-6 engine', price: 1500 },
-      { id: 2, name: 'Racing detail package', price: 1500 },
-      { id: 3, name: 'Premium sound system', price: 500 },
-      { id: 4, name: 'Rear spoiler', price: 250 }
-    ]
-  };
+import React from "react";
+
+import { connect } from "react-redux";
+
+import { removeItem, addItem } from "./actions";
 
+import Header from "./components/Header";
+import AddedFeatures from "./components/AddedFeatures";
+import AdditionalFeatures from "./components/AdditionalFeatures";
+import Total from "./components/Total";
+
+const App = props => {
   const removeFeature = item => {
     // dispatch an action here to remove an item
+
+
+    props.removeItem(item);
   };
 
   const buyItem = item => {
     // dipsatch an action here to add an item
+
+    props.addItem(item);
   };
 
+  // const { state, removeFeature, buyItem } = props;
+
   return (
     <div className="boxes">
       <div className="box">
-        <Header car={state.car} />
-        <AddedFeatures car={state.car} />
+        <Header car={props.car} />
+        <AddedFeatures car={props.car} removeFeature={removeFeature} />
       </div>
       <div className="box">
-        <AdditionalFeatures additionalFeatures={state.additionalFeatures} />
-        <Total car={state.car} additionalPrice={state.additionalPrice} />
+        <AdditionalFeatures
+          additionalFeatures={props.additionalFeatures}
+          // store={state.store}
+          buyItem={buyItem}
+        />
+        <Total car={props.car} additionalPrice={props.additionalPrice} />
       </div>
     </div>
   );
 };
 
-export default App;
+
+const mapStateToProps = state => {
+  console.log("maps props", state);
+  return {
+    features: state.car.features,
+    car: state.car,
+    additionalFeatures: state.additionalFeatures,
+    additionalPrice: state.additionalPrice
+  };
+};
+
+export default connect(mapStateToProps, { removeItem, addItem })(App);

src/actions/index.js

@@ -0,0 +1,10 @@
+export const removeItem = item => {
+  return { type: "REMOVE_ITEM", payload: { id: item.id, price: item.price } };
+};
+
+export const addItem = item => {
+  return {
+    type: "BUY_ITEM",
+    payload: { id: item.id, name: item.name, price: item.price }
+  };
+};

src/components/AddedFeature.js

@@ -4,8 +4,8 @@ const AddedFeature = props => {
   return (
     <li>
       {/* Add an onClick to run a function to remove a feature */}
-      <button className="button">X</button>
-      {props.feature.name}
+      <button className="button" onClick={() => props.removeFeature(props.feature)}>X</button>
+      {props.feature.name} (-{props.feature.price})
     </li>
   );
 };

src/components/AddedFeatures.js

@@ -9,7 +9,11 @@ const AddedFeatures = props => {
       {props.car.features.length ? (
         <ol type="1">
           {props.car.features.map(item => (
-            <AddedFeature key={item.id} feature={item} />
+            <AddedFeature 
+            key={item.id}
+            id={item.id}
+            feature={item}
+            removeFeature={props.removeFeature}/>
           ))}
         </ol>
       ) : (

src/components/AdditionalFeature.js

@@ -4,7 +4,7 @@ const AdditionalFeature = props => {
   return (
     <li>
       {/* Add an onClick that will let you add a feature to your car */}
-      <button className="button">Add</button>
+      <button className="button" onClick={() => props.buyItem(props.feature)}>Add</button>
       {props.feature.name} (+{props.feature.price})
     </li>
   );

src/components/AdditionalFeatures.js

@@ -8,7 +8,10 @@ const AdditionalFeatures = props => {
       {props.additionalFeatures.length ? (
         <ol type="1">
           {props.additionalFeatures.map(item => (
-            <AdditionalFeature key={item.id} feature={item} />
+            <AdditionalFeature 
+            key={item.id} 
+            feature={item} 
+            buyItem={props.buyItem}/>
           ))}
         </ol>
       ) : (

src/index.js

@@ -1,9 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import { createStore } from "redux";
+import { Provider } from "react-redux";
 
-import 'bulma/css/bulma.css';
-import './styles.scss';
+import mainReducer from "./reducers/mainReducer";
 
-const rootElement = document.getElementById('root');
-ReactDOM.render(<App />, rootElement);
+import App from "./App";
+
+import "bulma/css/bulma.css";
+import "./styles.scss";
+
+const store = createStore(mainReducer);
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  rootElement
+);

src/reducers/mainReducer.js

@@ -0,0 +1,45 @@
+const initialState = {
+    additionalPrice: 0,
+    car: {
+      price: 26395,
+      name: "2019 Ford Mustang",
+      image:
+        "https://cdn.motor1.com/images/mgl/0AN2V/s1/2019-ford-mustang-bullitt.jpg",
+      features: []
+    },
+    additionalFeatures: [
+      { id: 1, name: "V-6 engine", price: 1500 },
+      { id: 2, name: "Racing detail package", price: 1500 },
+      { id: 3, name: "Premium sound system", price: 500 },
+      { id: 4, name: "Rear spoiler", price: 250 }
+    ]
+  };
+
+  const mainReducer = (state = initialState, action) => {
+    switch (action.type) {
+      case "BUY_ITEM":
+        return {
+          ...state,
+          car: {
+            ...state.car,
+            price: state.car.price + action.payload.price,
+            features: [...state.car.features, action.payload]
+          }
+        };
+      case "REMOVE_ITEM":
+        return {
+          ...state,
+          car: {
+            ...state.car,
+            price: state.car.price - action.payload.price,
+            features: [...state.car.features.filter(
+              item => item.id !== action.payload.id
+            )]
+          }
+        };
+      default:
+        return state;
+    }
+  };
+
+  export default mainReducer;