Merge pull request #13 from Lambda-Build-Week-Water-My-Plants-II/isaa…

…c-stott

Dashboard displays username

wmp/src/actions/PlantAction.js

@@ -7,6 +7,7 @@ export const SET_ERROR = 'SET_ERROR';
 export const DELETE_PLANT = 'DELETE_PLANT';
 export const EDITING_PLANT = 'EDITING_PLANT';
 export const EDIT_PLANT = 'EDIT_PLANT';
+// export const FETCH_USER = 'FETCH_USER';
 
 export const getPlant = userId => dispatch => {
   dispatch({ type: FETCH_PLANT_START });
@@ -49,6 +50,17 @@ export const editPlant = (plantId, plant) => dispatch => {
   .catch(err => console.log(err));
 }
 
+// export const getUser = userName => dispatch => {
+//   // dispatch({ type: FETCH_USER });
+//   axiosWithAuth()
+//     .get(`/api/user`)
+//     .then(res => {
+//       console.log('userName', res)
+//       dispatch({ type: FETCH_USER, payload: res.data.username });
+//     })
+//     .catch(error => console.log('getUser', error));
+// }
+
 export const setUserId = userId => dispatch => {
   dispatch({ type: SET_USER, payload: userId });
 };

wmp/src/components/NavBar.js

@@ -2,14 +2,31 @@
 //User should be able to logout and create a new property from here
 //create buttons for each of those actions
 
-import React from "react";
+import React, {useState, useEffect} from "react";
 import { useHistory } from "react-router-dom";
+import { axiosWithAuth } from "../utils/axiosWithAuth";
+// import { connect } from 'react-redux';
+// import { setUserId } from "../actions/PlantAction";
 
 import './navbar.css';
 
-const Navbar = () => {
 
+const Navbar = () => {
   const history = useHistory();
+  const [name, setName] = useState('')
+  console.log('username state', name)
+
+
+
+  useEffect(() => {
+    axiosWithAuth()
+      .get('/api/user')
+      .then(res => {
+        console.log('getuser', res.data.username)
+        setName(res.data.username)
+      })
+      .catch(err => console.log(err))
+  }, [setName]);
 
   const newPlant = e => {
     history.push("/new-plant");
@@ -25,17 +42,28 @@ const Navbar = () => {
     <div>
       <div className="NavBar">
         <h1>Water My Plants</h1>   
+
+        <h3>Welcome {name} &#129373;</h3>
 
         <div className='linky'>
           <button onClick={newPlant}>New Plant</button>
         </div>
 
         <div className='logout'>
-          <button onClick={logout}>Log out </button>
+          <button onClick={logout}>Log out</button>
         </div>
       </div>
     </div>
   );
 };
 
-export default Navbar;
+export default Navbar;
+
+
+// const mapStateToProps = (state) => {
+//   return {
+//     userName: state.plantReducer.userId
+//   };
+// };
+
+// export default connect(mapStateToProps, { setUserId })(Navbar);

wmp/src/components/PlantCard.js

@@ -18,7 +18,7 @@ import { getPlant, deletePlant, startEdit } from '../actions/PlantAction'
 
 
 const PlantCard = props => {
-    console.log('plantcardy', props)
+    // console.log('plantcardy', props)
 
     const {push} =  useHistory();
 

wmp/src/components/navbar.css

@@ -9,6 +9,11 @@
     margin-left: 1%;
 }
 
+.NavBar h3 {
+    /* background-color: white; */
+    display: flex;
+    align-items: center;
+}
 
 .linky, .logout {
     display: flex;

wmp/src/reducers/PlantReducer.js

@@ -7,15 +7,17 @@ import {
   SET_ERROR,
   DELETE_PLANT,
   EDITING_PLANT,
-  EDIT_PLANT
+  EDIT_PLANT,
+  // FETCH_USER
 } from '../actions/PlantAction';
 
 const initialState = {
   plants: [],
   isFetchingData: false,
   error: '',
   isEditing: false,
-  plantToEdit: {}
+  plantToEdit: {},
+  userId: '',
 };
 
 const plantReducer = (state = initialState, action) => {
@@ -58,6 +60,11 @@ const plantReducer = (state = initialState, action) => {
           }
         })]
       }
+    // case FETCH_USER:
+    //   return {
+    //     ...state,
+    //     userName: action.payload
+    //   }
     case SET_USER:
       return {
         ...state,