fixed profile username detail. Add link to list images.

onestopshop/src/Components/ProductCard.js

@@ -7,12 +7,14 @@ const ProductCard = ({ product }) => {
   return (
     <div id="card-items" className="card">
       <div className="image">
-        <img
-          className="card-img-top img-fluid"
-          id="card-image"
-          src={product.img}
-          alt={product.name}
-        />
+        <Link to={`/products/${product.id}`}>
+          <img
+            className="card-img-top img-fluid"
+            id="card-image"
+            src={product.img}
+            alt={product.name}
+          />
+        </Link>
       </div>
       <div className="card-body">
         <Link to={`/products/${product.id}`}>
@@ -21,7 +23,6 @@ const ProductCard = ({ product }) => {
           </h5>
         </Link>
         <p className="card-text">{product.price} KWD</p>
-
       </div>
     </div>
   );

onestopshop/src/Components/Profile.js

@@ -6,7 +6,6 @@ import Loading from "./Loading";
 import Logout from "./Logout";
 
 class Profile extends Component {
-
   componentDidMount() {
     this.props.fetchProfile();
   }
@@ -25,27 +24,28 @@ class Profile extends Component {
     if (!user) return <Redirect to="/" />;
 
     if (user) {
-      if (!loading) {
+      if (loading) {
         return <Loading />;
       } else {
-        console.log("hi", profile.user);
+        console.log("Profile: ", profile);
+        console.log("Profile user =>", profile.user);
         return (
           <div className="card col-6 mx-auto p-0" style={{ marginTop: "10%" }}>
             <img
-              src={`http://chabra.herokuapp.com${profile.image}`}
+              src={`http://134.209.242.76${profile.image}`}
               height="42"
               width="42"
             ></img>
-            <p> Username: </p>
-            <p> First Name: </p>
-            <p> Last Name: </p>
+            <p> Username: {profile.user.username} </p>
+            <p> First Name: {profile.user.first_name}</p>
+            <p> Last Name: {profile.user.last_name}</p>
             <p> Age: {profile.age} </p>
             <p> Gender: {this.genderString(profile.gender)} </p>
             <p> Phone: {profile.phone} </p>
             <Link to="/order-history">
               <button className="btn btn-block btn-info">Order History</button>
             </Link>
-            <br/>
+            <br />
             <Logout />
           </div>
         );
@@ -54,15 +54,12 @@ class Profile extends Component {
   }
 }
 
-
 const mapStateToProps = state => ({
   user: state.authReducer.user,
   profile: state.authReducer.profile,
-  loading: state.profileReducer.loading
+  loading: state.authReducer.loading
 });
 
-
-
 const mapDispatchToProps = dispatch => ({
   fetchProfile: () => dispatch(actionCreators.profile())
 });
@@ -71,4 +68,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Profile);
-

onestopshop/src/redux/actions/instance.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const instance = axios.create({
-  baseURL: "http://127.0.0.1:8000/api/"
+  baseURL: "http://134.209.242.76/api/"
 });
 
 export default instance;

onestopshop/src/redux/reducers/authentication.js

@@ -2,7 +2,8 @@ import * as actionTypes from "../actions/actionTypes";
 
 const initialState = {
   user: null,
-  profile: {}
+  profile: null,
+  loading: true
 };
 
 const reducer = (state = initialState, action) => {
@@ -17,7 +18,8 @@ const reducer = (state = initialState, action) => {
       const profile = action.payload;
       return {
         ...state,
-        profile: profile
+        profile: profile,
+        loading: false
       };
     default:
       return state;