Merge pull request #6 from abraha2d/dev

Release 0.2.1-beta.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coursewatch",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.1-beta.1",
   "homepage": "https://web.coursewatch.sueztech.com",
   "bugs": "https://github.com/abraha2d/coursewatch/issues",
   "license": "UNLICENSED",

src/components/SubscriptionDialog/index.js

@@ -148,7 +148,6 @@ class SubscriptionDialog extends React.PureComponent {
           loading: false,
           responses: { ...prevState.responses, courses: response.data }
         }));
-        this.setState({ suggestions: this.getSuggestions(this.state.course) });
       })
       .catch(error => this.setState({ loading: false, error }));
   };
@@ -280,7 +279,9 @@ class SubscriptionDialog extends React.PureComponent {
                   });
                 }
               }}
-              onSuggestionsClearRequested={() => {}}
+              onSuggestionsClearRequested={() => {
+                this.setState({ suggestions: [] });
+              }}
               getSuggestionValue={this.getCourseValue}
               renderSuggestion={(course, { query, isHighlighted }) => (
                 <MenuItem selected={isHighlighted}>

src/containers/LoginPage/actions.js

@@ -4,11 +4,18 @@
  *
  */
 
-import { SET_AUTH } from "./constants";
+import { SET_AUTH, SET_USER } from "./constants";
 
 export function setAuth(response) {
   return {
     type: SET_AUTH,
     payload: response
   };
 }
+
+export function setUser(response) {
+  return {
+    type: SET_USER,
+    payload: response
+  };
+}

src/containers/LoginPage/constants.js

@@ -5,3 +5,4 @@
  */
 
 export const SET_AUTH = "app/auth/SET_AUTH";
+export const SET_USER = "app/auth/SET_USER";

src/containers/LoginPage/reducer.js

@@ -5,17 +5,20 @@
  */
 
 import { fromJS } from "immutable";
-import { SET_AUTH } from "./constants";
+import { SET_AUTH, SET_USER } from "./constants";
 
 export const initialState = fromJS({});
 
 function authReducer(state = initialState, action) {
+  let newState = state;
   switch (action.type) {
     case SET_AUTH:
-      let newState = state;
       newState = newState.set("token", action.payload.token);
       newState = newState.set("user", action.payload.user);
       return newState;
+    case SET_USER:
+      newState = newState.set("user", action.payload);
+      return newState;
     default:
       return state;
   }

src/containers/ProfilePage/index.js

@@ -9,6 +9,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { createStructuredSelector } from "reselect";
+import axios from "axios";
 
 import {
   Avatar,
@@ -19,6 +20,7 @@ import {
 } from "@material-ui/core";
 
 import makeSelectAuth from "containers/LoginPage/selectors";
+import { setUser } from "containers/LoginPage/actions";
 
 const styles = theme => ({
   container: {
@@ -42,16 +44,31 @@ const styles = theme => ({
 export class ProfilePage extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.state = { ...props.auth.user };
+    this.state = { loading: false, error: null, user: props.auth.user };
   }
 
   handleChange = name => event => {
     const value = event.target.value;
-    this.setState({ [name]: value });
+    this.setState(prevState => ({
+      user: { ...prevState.user, [name]: value }
+    }));
   };
 
   handleSave = event => {
     event.preventDefault();
+    this.setState({ error: null, loading: true });
+    axios
+      .put(
+        "/api/users/me",
+        { ...this.state.user },
+        { headers: { Authorization: `Bearer ${this.props.auth.token}` } }
+      )
+      .then(response => {
+        this.setState({ loading: false });
+        localStorage.setItem("authUser", JSON.stringify(response.data));
+        this.props.dispatch(setUser(response.data));
+      })
+      .catch(error => this.setState({ loading: false, error }));
   };
 
   render() {
@@ -70,7 +87,7 @@ export class ProfilePage extends React.PureComponent {
               required
               fullWidth
               margin="dense"
-              value={this.state.name}
+              value={this.state.user.name}
               onChange={this.handleChange("name")}
             />
             <TextField
@@ -79,9 +96,17 @@ export class ProfilePage extends React.PureComponent {
               required
               fullWidth
               margin="dense"
-              value={this.state.email}
+              value={this.state.user.email}
               onChange={this.handleChange("email")}
             />
+            <TextField
+              label="Phone"
+              type="tel"
+              fullWidth
+              margin="dense"
+              value={this.state.user.tel}
+              onChange={this.handleChange("tel")}
+            />
           </div>
           <div className={classes.actions}>
             <Button variant="contained" color="primary" type="submit">
@@ -95,6 +120,7 @@ export class ProfilePage extends React.PureComponent {
 }
 
 ProfilePage.propTypes = {
+  dispatch: PropTypes.func.isRequired,
   auth: PropTypes.object.isRequired
 };