feature/Allow user to update name

Author: LewisYoul

app/controllers/application_controller.rb

@@ -1,4 +1,5 @@
 class ApplicationController < ActionController::Base
+  respond_to :html, :json
   serialization_scope :view_context
   before_action :configure_permitted_parameters, if: :devise_controller?
 

app/controllers/registrations_controller.rb

@@ -0,0 +1,9 @@
+class RegistrationsController < Devise::RegistrationsController
+  def update
+    if current_user.update(sign_up_params)
+      render json: { message: "Profile updated" }
+    else
+      render json: { message: "Failed to update profile" }, status: 400
+    end
+  end
+end

app/javascript/edit-profile.vue

@@ -4,15 +4,15 @@
       <edit-avatar />
 
       <div class="edit-profile--fields">
-        <form-field label="Name" type="text" :value="currentUser.name" :margin-top="false" @change="logChange"/>
-        <form-field label="Description" type="textarea" value="Dummy description" />
-        <form-field label="Location" type="text" value="location" />
+        <form-field label="Name" type="text" v-model="userParams.name" :margin-top="false" />
+        <form-field label="Description" type="textarea" v-model="userParams.bio" />
+        <form-field label="Location" type="text" v-model="userParams.location" />
       </div>
 
     </div>
 
     <div class="folders--options-wrapper">
-      <button class="button--cta-blue">SAVE</button>
+      <button @click="saveForm" class="button--cta-blue">SAVE</button>
     </div>
   </div>
 </template>
@@ -21,19 +21,39 @@
 import EditAvatar from './edit-avatar';
 import FormField from './form-field';
 
+import usersMixin from './mixins/usersMixin';
+
 export default {
   components: { EditAvatar, FormField },
 
-    // TODO: Extract this into a class or module that can be reused accross the application
+  mixins: [usersMixin],
+
   data() {
     return {
-      currentUser: this.$store.state.currentUser
+      userParams: {
+        name: this.currentUser.name,
+        bio: 'Dummy bio',
+        location: 'Cambridge UK'
+      }
     }
   },
 
+  // TODO: Extract this into a class or module that can be reused across the application
+  beforeCreate() {
+    this.currentUser = this.$store.state.currentUser;
+  },
+
   methods: {
-    logChange(value) {
-      console.log(value)
+    saveForm() {
+      console.log('params', this.userParams)
+
+      this.updateUser(this.userParams)
+        .then(res => {
+          console.log('aya', res)
+        })
+        .catch(error => {
+          console.error(error)
+        })
     }
   }
 }

app/javascript/form-field.vue

@@ -37,7 +37,7 @@ export default {
 
   methods: {
     emitValueChange() {
-      this.$emit('change', this.valueDup)
+      this.$emit('input', this.valueDup)
     }
   }
 }

app/javascript/mixins/usersMixin.js

@@ -8,6 +8,10 @@ export default {
   },
 
   methods: {
+    updateUser(userParams) {
+      return axios.put(`/users?ajax=true`, { user: userParams })
+    },
+
     followUser(userId) {
       return axios.post(`/users/${userId}/follow?ajax=true`)
     },

app/javascript/new-snippet.vue

@@ -99,8 +99,6 @@ export default {
     }, 300),
 
     createSnippet() {
-      console.log('snippet params', this.snippetParams)
-
       axios.post('/snippets?ajax=true', { snippet: this.snippetParams })
         .then(res => {
           const snippet = res.data.snippet

config/routes.rb

@@ -1,5 +1,5 @@
 Rails.application.routes.draw do
-  devise_for :users
+  devise_for :users, :controllers => { registrations: :registrations }
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
   root to: 'home#index'
 
@@ -8,8 +8,6 @@
   resources :users, only: :show do
     post :follow, on: :member
     post :unfollow, on: :member
-    get :followers, on: :member
-    get :following, on: :member
   end
 
   resources :likes, only: :create