update profile

src/App.js

@@ -42,6 +42,7 @@ class App extends React.Component {
     this.selectTask = this.selectTask.bind(this)
     this.updateTask = this.updateTask.bind(this)
     this.deleteProject = this.deleteProject.bind(this)
+    this.updateProfile = this.updateProfile.bind(this)
   }
 
   async fetchTasks() {
@@ -261,6 +262,25 @@ class App extends React.Component {
       alert(`Failed to delete project '${project.name}': ${e}`)
     }
   }
+  async updateProfile(e) {
+    e.preventDefault()
+    const user = {} // TODO update properties from form
+    console.log(e.target)
+    try {
+      const { data, error } = await axios.put(api + `/api/user`, user)
+      console.log('Trying to update user profile: ', user)
+      if (error) {
+        alert('Received error when updating user profile: ', error)
+      } else if (data.desc && data.projectId) {
+        console.log('Successfully updated user profile:', data)
+        // TODO        this.setState({ tasks: this.state.tasks.concat(data), newTask: '' })
+      } else {
+        console.log('Received malformed data when updating user profile: ', data)
+      }
+    } catch (e) {
+      alert(`Updating user profile failed: ${e}`)
+    }
+  }
 
   renderLoading() {
     return <div>Loading...</div>
@@ -269,7 +289,14 @@ class App extends React.Component {
     return <div>Something went wrong. Please try again.</div>
   }
   renderProfile() {
-    return <Profile {...this.state} />
+    return (
+      <Profile
+        handleChange={this.handleChange}
+        selectProject={this.selectProject}
+        updateProfile={this.updateProfile}
+        {...this.state}
+      />
+    )
   }
   renderProjects() {
     return (

src/components/profile.js

@@ -1,7 +1,51 @@
 import React from 'react'
 
 function Profile(props) {
-  return <div>You are {props.user.name}.</div>
+  const user = props.user
+  user['projects'] = [1, 10] // TODO
+  return (
+    <div>
+      <form className="form-group" name="profile">
+        <ul className="list-group">
+          <li className="list-group-item row">
+            <span className="col-lg-1 col-md-1 col-sm-1 col-xs-1">Name:</span>
+            <input
+              className="col-lg-5 col-md-5 col-sm-5 col-xs-5"
+              type="text"
+              name="username"
+              value={user.name}
+              onChange={props.handleChange}
+            />
+            <img className="" src="/img/default-user-image.png" alt="avatar" />
+          </li>
+          <li className="list-group-item row">
+            <span className="col">created:</span>
+            <span className="col">{user.createdAt}</span>
+          </li>
+          <li className="list-group-item row">
+            <span className="col-sm-1">projects:</span>
+            {user.projects &&
+              user.projects.map(userProject => {
+                const project = props.projects.find(p => p.id === userProject)
+                return (
+                  <span key={project.id} onClick={() => props.selectProject(userProject)}>
+                    {project.name}
+                  </span>
+                )
+              })}
+          </li>
+          <li className="list-group-item row">
+            <input
+              className="btn btn-outline-success col"
+              type="submit"
+              onClick={props.updateTask}
+              value="Save"
+            />
+          </li>
+        </ul>
+      </form>
+    </div>
+  )
 }
 
 export default Profile