Merge 072ad7f into 76bb135

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/src/"
+        },
+
+
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceFolder}/start"
+        }
+    ]
+}

public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 
     <title>Authors Haven</title>
   </head>

src/app/App.scss

@@ -35,7 +35,6 @@ body {
     .logo {
       text-decoration: none;
       color: white;
-      height: 5rem;
       margin: 30px 10px 10px 0px;
       float: left;
     }

src/app/routes/NavBar.js

@@ -26,7 +26,7 @@ export class Navbar extends Component {
     this.closeMenu = this.closeMenu.bind(this);
   }
 
-  componentDidMount = () => {
+  componentDidUpdate = () => {
     this.currentUserProfile();
   };
 

src/feature/Reset Password/resetPassword.scss

@@ -19,6 +19,11 @@
     position: relative;
     left: 5%;
 }
+
+.inputForm input::placeholder {
+  font-size: 20px;
+}
+
 .inputForm input {
     border: 3px rgba(0, 0, 0, 0.089) solid;
     border-top: none;
@@ -28,12 +33,10 @@
     margin-top: 1%;
     padding-top: 1%;
     margin-left: 4%;
-}
-input,
-.inputForm::-webkit-input-placeholder {
     font-size: 20px;
-    line-height: 2;
+    padding: 8px;
 }
+
 .send{
     position: absolute;
     right: 23%;
@@ -91,7 +94,6 @@ input,
     input,
     .inputForm::-webkit-input-placeholder {
     font-size: 13px;
-    line-height: 2;
 }
 :focus{
     outline: none;
@@ -137,7 +139,6 @@ input,
     input,
     .inputForm::-webkit-input-placeholder {
     font-size: 13px;
-    line-height: 2;
 }
   }
 

src/feature/auth/login/LoginComponent.js

@@ -30,7 +30,7 @@ export class Login extends Component {
   redirectOnSuccess = () => {
     const { isAuthenticated, location } = this.props;
     const { redirectTo } = QueryString.parse(location.search);
-    return isAuthenticated ? this.props.history.push(redirectTo || '/profile') : null;
+    return isAuthenticated ? this.props.history.push(redirectTo || '/') : null;
   };
 
   handleSubmit = e => {

src/feature/profile/update_profile/UpdateProfileAction.js

@@ -16,29 +16,28 @@ export const sendError = profileError => ({
   error: profileError
 });
 
-export const updateUserProfile = profile => async dispatch => {
+export const updateUserProfile = (user, profile) => async dispatch => {
   try {
-    // localStorage.removeItem('token');
     const token = localStorage.getItem('token');
     const config = {
       headers: {
         authorization: token,
         'content-type': 'multipart/form-data'
       }
     };
-    const { bio, image, user } = profile;
+    const { bio, image } = profile;
     const formData = new FormData();
     if (bio !== null) formData.append('bio', bio);
     if (image !== null) formData.append('image', image);
     const response = await axios.put(`${BACKEND_URL}/profiles/${user}`, formData, config);
     dispatch(updateProfile(response));
     toast.success(response.data.message, {
-      position: toast.POSITION.TOP_CENTER
+      position: toast.POSITION.TOP_RIGHT
     });
   } catch (error) {
     dispatch(sendError(error));
     toast.error(error.response.data.error, {
-      position: toast.POSITION.TOP_CENTER
+      position: toast.POSITION.TOP_RIGHT
     });
   }
 };

src/feature/profile/update_profile/UpdateProfileComponent.js

@@ -1,23 +1,29 @@
-/* eslint-disable react/no-unused-state */
+/* eslint-disable jsx-a11y/alt-text */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import { updateUserProfile } from './UpdateProfileAction';
 import './UpdateProfileStyle.scss';
 
 export class UpdateProfileComponent extends Component {
   constructor(props) {
     super(props);
-    const { authenticated } = this.props;
+    const { bio } = this.props;
     this.state = {
-      user: authenticated.username,
-      userName: null,
-      bio: null,
-      image: null
+      bio,
+      image: null,
+      preview: null
     };
   }
 
+  // componentWillReceiveProps() {
+  //   toast.success('Profile updated successfully', {
+  //     position: toast.POSITION.TOP_RIGHT
+  //   });
+  // }
+
   handleChange = e => {
     this.setState({
       [e.target.id]: e.target.value
@@ -26,68 +32,93 @@ export class UpdateProfileComponent extends Component {
 
   handleFileUpload = e => {
     this.setState({
-      image: e.target.files[0]
+      image: e.target.files[0],
+      preview: URL.createObjectURL(e.target.files[0])
     });
   }
 
+  clearStateAndModal = () => {
+    const { bio } = this.props;
+    this.setState({
+      bio,
+      image: null,
+      preview: null
+    });
+    const { displayModal } = this.props;
+    displayModal(false);
+  }
+
   handleSubmit = e => {
     e.preventDefault();
     const { bio, image } = this.state;
     if (!bio && !image) {
       toast.error('No data provided', {
-        position: toast.POSITION.TOP_CENTER
+        position: toast.POSITION.TOP_RIGHT
       });
     } else {
-      const { updateProfile } = this.props;
-      updateProfile(this.state);
+      const { authenticated, updateProfile } = this.props;
+      updateProfile(authenticated.username, this.state);
     }
   };
 
+  handleCloseClick = e => {
+    e.preventDefault();
+    const { displayModal } = this.props;
+    displayModal(false);
+    this.setState({
+      bio: null,
+      image: null,
+      preview: null
+    });
+  }
+
   render() {
-    return (
+    const { show } = this.props;
+    const { preview, bio } = this.state;
+    return show ? (
       <div>
-        <h1 className="title">Update Profile</h1>
-        <div className="grid-container">
-          <form className="grid-container__form" onSubmit={this.handleSubmit}>
-            <label className="grid-container__label">Bio</label>
-            <br />
-            <textarea
-              rows="5"
-              cols="60"
-              type="text"
-              id="bio"
-              onChange={this.handleChange}
-              className="grid-container__textarea"
-            />
-            <br />
-            <label className="grid-container__label">Image</label>
-            <br />
-            <input
-              type="file"
-              onChange={this.handleFileUpload}
-              className="grid-container__file"
-            />
-            <br />
-            <button type="submit" className="grid-container__btn">
+        <div className="modal">
+          <div className="modal__modal-content">
+            <i className="fa fa-times modal-content__close" onClick={this.handleCloseClick} />
+            <h2 className="modal-content__title">Update Profile</h2>
+            <form className="modal-content__form" onSubmit={this.handleSubmit}>
+              <label className="modal-content__label">Bio</label>
+              <br />
+              <textarea
+                rows="5"
+                cols="60"
+                type="text"
+                id="bio"
+                onChange={this.handleChange}
+                className="modal-content__textarea"
+                value={bio}
+              />
+              <br />
+              <label className="modal-content__label">Image</label>
+              <br />
+              <input
+                type="file"
+                onChange={this.handleFileUpload}
+                className="modal-content__file"
+              />
+              <br />
+              <img src={preview} className="modal-content__preview" />
+              <br />
+              <button type="submit" className="modal-content__btn">
               Update
-            </button>
-          </form>
+              </button>
+            </form>
+          </div>
         </div>
       </div>
-    );
+    ) : (null);
   }
 }
 
-export const mapStateToProps = state => ({
-  authenticated: state.login.user,
+const mapStateToProps = (state) => ({
   profile: state.profile
 });
 
-const mapDispatchToProps = dispatch => ({
-  updateProfile: profile => dispatch(updateUserProfile(profile))
-});
-
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+  mapStateToProps
 )(UpdateProfileComponent);