API & Client: Profile picture

mpwo_client/src/components/App.css

@@ -22,6 +22,18 @@
   font-size: large;
 }
 
+.App-nav-profile-img {
+    max-width: 35px;
+    max-height: 35px;
+    border-radius: 50%;
+}
+
+.App-profile-img-small {
+    max-width: 150px;
+    max-height: 150px;
+    border-radius: 50%;
+}
+
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

mpwo_client/src/components/NavBar/index.jsx

@@ -2,6 +2,9 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
+import mpwoApi from '../../mpwoApi'
+
+
 function NavBar (props) {
   return (
     <header>
@@ -56,6 +59,14 @@ function NavBar (props) {
                 </Link>
               </li>
             )}
+            {props.user.picture === true && (
+            <img
+              alt="Profile"
+              src={`${mpwoApi.getApiUrl()}users/${props.user.id}/picture` +
+                  `?${Date.now()}`}
+              className="img-fluid App-nav-profile-img"
+            />
+            )}
             {props.user.isAuthenticated && (
             <li className="nav-item">
               <Link

mpwo_client/src/components/User/Profile.jsx

@@ -3,12 +3,18 @@ import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
-function Profile ({ user }) {
+import mpwoApi from '../../mpwoApi'
+import { deletePicture, uploadPicture } from '../../actions'
+
+function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
   return (
     <div>
       <Helmet>
         <title>mpwo - {user.username} - Profile</title>
       </Helmet>
+      { message !== '' && (
+        <code>{message}</code>
+      )}
       <div className="container">
         <h1 className="page-title">Profile</h1>
         <div className="row">
@@ -35,6 +41,38 @@ function Profile ({ user }) {
                     <p>Location : {user.location}</p>
                     <p>Bio : {user.bio}</p>
                   </div>
+                  <div className="col-md-4">
+                    { user.picture === true && (
+                    <div>
+                      <img
+                        alt="Profile"
+                        src={`${mpwoApi.getApiUrl()}users/${user.id}/picture` +
+                             `?${Date.now()}`}
+                        className="img-fluid App-profile-img-small"
+                      />
+                      <br />
+                      <button
+                        type="submit"
+                        onClick={() => onDeletePicture()}
+                      >
+                        Delete picture
+                      </button>
+                      <br /><br />
+                    </div>
+                    )}
+                    <form
+                      encType="multipart/form-data"
+                      onSubmit={event => onUploadPicture(event)}
+                    >
+                      <input
+                          type="file"
+                          name="picture"
+                          accept=".png,.jpg,.gif"
+                      />
+                      <br />
+                      <button type="submit">Send</button>
+                    </form>
+                  </div>
                 </div>
               </div>
             </div>
@@ -55,6 +93,15 @@ function Profile ({ user }) {
 
 export default connect(
   state => ({
+    message: state.message,
     user: state.user,
+  }),
+  dispatch => ({
+    onDeletePicture: () => {
+      dispatch(deletePicture())
+    },
+    onUploadPicture: event => {
+      dispatch(uploadPicture(event))
+    },
   })
 )(Profile)