feature/Add avatars to users

LewisYoul · LewisYoul · commit a48daa89fbd6 · 2020-06-24T09:17:39.000+01:00
diff --git a/Gemfile b/Gemfile
@@ -14,7 +14,7 @@ gem 'sass-rails', '>= 6'
 # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
 gem 'webpacker', '~> 4.0'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
-# gem 'turbolinks', '~> 5'
+gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.7'
 # Serializing
@@ -23,6 +23,7 @@ gem 'active_model_serializers', '~> 0.10.0'
 gem 'byebug'
 
 gem 'devise'
+
 # Use Redis adapter to run Action Cable in production
 # gem 'redis', '~> 4.0'
 # Use Active Model has_secure_password
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -173,6 +173,9 @@ GEM
     thor (1.0.1)
     thread_safe (0.3.6)
     tilt (2.0.10)
+    turbolinks (5.2.1)
+      turbolinks-source (~> 5.2)
+    turbolinks-source (5.2.0)
     tzinfo (1.2.7)
       thread_safe (~> 0.1)
     warden (1.2.8)
@@ -207,6 +210,7 @@ DEPENDENCIES
   sass-rails (>= 6)
   spring
   spring-watcher-listen (~> 2.0.0)
+  turbolinks (~> 5)
   tzinfo-data
   web-console (>= 3.3.0)
   webpacker (~> 4.0)
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -6,8 +6,8 @@ class ApplicationController < ActionController::Base
   protected
 
   def configure_permitted_parameters
-    devise_parameter_sanitizer.permit(:sign_up) { |u| u.permit(:name, :email, :password)}
+    devise_parameter_sanitizer.permit(:sign_up) { |u| u.permit(:name, :email, :password, :avatar)}
 
-    devise_parameter_sanitizer.permit(:account_update) { |u| u.permit(:name, :email, :bio, :location, :password, :current_password)}
+    devise_parameter_sanitizer.permit(:account_update) { |u| u.permit(:name, :email, :bio, :location, :password, :avatar, :current_password)}
   end
 end
diff --git a/app/controllers/registrations_controller.rb b/app/controllers/registrations_controller.rb
@@ -1,9 +1,17 @@
 class RegistrationsController < Devise::RegistrationsController
+  # def create
+  #   byebug
+  #   super
+  # end
+
   def update
-    if current_user.update(account_update_params)
-      render json: { message: "Profile updated" }
-    else
-      render json: { message: "Failed to update profile" }, status: 400
-    end
+    current_user.updated_at = Time.now
+    current_user.avatar.attach(params[:user][:avatar])
+    current_user.save!
+    # if current_user.update(account_update_params)
+    #   render json: { message: "Profile updated" }
+    # else
+    #   render json: { message: "Failed to update profile" }, status: 400
+    # end
   end
 end
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
@@ -7,6 +7,22 @@ def show
     @following = @user.following
   end
 
+  def modify
+    current_user.assign_attributes(user_params)
+    current_user.avatar.attach(avatar_param) if avatar_param
+
+    if current_user.save
+      render json: { message: "Profile updated" }
+    else
+      render json: { message: "Failed to update profile" }, status: 400
+    end
+
+    # current_user.updated_at = Time.now
+    # current_user.avatar.attach(params[:user][:avatar])
+    # current_user.save!
+    # byebug
+  end
+
   def follow
     @user = User.find_by(id: params[:id])
 
@@ -26,4 +42,17 @@ def unfollow
       render json: { message: "You can't unfollow someone you aren't following you nutter!" }, status: 400
     end
   end
+
+  private
+
+  def user_params
+    params
+      .require(:user)
+      .permit(:name, :bio, :location)
+      .merge(updated_at: Time.now) #This is to fix an activestorage bug
+  end
+
+  def avatar_param
+    params[:user][:avatar]
+  end
 end
diff --git a/app/javascript/edit-avatar.vue b/app/javascript/edit-avatar.vue
@@ -3,7 +3,7 @@
     <img ref="avatar" src="https://media-exp1.licdn.com/dms/image/C4E03AQG0MUNjxFvBTw/profile-displayphoto-shrink_200_200/0?e=1593648000&v=beta&t=WnnJ_Q6MpQFur5Uev2iqeLAnoX6Rdb1Bv6RoAijK3tA" style="border-radius: 50%;" width="120" height="120">
     <div class="edit-avatar--edit-button" @click="selectNewAvatar">
       <img src="/icons/edit.svg" width="16">
-      <input ref="fileInput" type="file" @change="handleFileSelect" style="visibility: hidden" />
+      <input name="avatar" ref="fileInput" type="file" @change="handleFileSelect" style="visibility: hidden" />
     </div>
   </div>
 </template>
@@ -24,6 +24,8 @@ export default {
 
         reader.onload = function(e) {
           self.$refs.avatar.setAttribute('src', e.target.result);
+
+          self.$emit('change', input.files[0])
         }
 
         reader.readAsDataURL(input.files[0]);
diff --git a/app/javascript/edit-profile.vue b/app/javascript/edit-profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="edit-profile--wrapper">
-      <edit-avatar />
+      <edit-avatar @change="addAvatarToParams"/>
 
       <div class="edit-profile--fields">
         <form-field label="Name" type="text" v-model="userParams.name" :margin-top="false" />
@@ -34,8 +34,10 @@ export default {
       userParams: {
         name: this.currentUser.name,
         bio: this.currentUser.bio,
-        location: this.currentUser.location
-      }
+        location: this.currentUser.location,
+        avatar: undefined
+      },
+      avatar: null
     }
   },
 
@@ -46,14 +48,28 @@ export default {
 
   methods: {
     saveForm() {
-      this.updateUser(this.userParams)
+      let formData = new FormData()
+
+      Object.keys(this.userParams).forEach(attribute => {
+        const value = this.userParams[attribute];
+
+        if (value) { formData.append(`user[${attribute}]`, value); };
+      })
+
+      
+
+      this.updateUser(formData)
         .then(res => {
           EventBus.$emit('presentToast', res.data.message)
         })
         .catch(error => {
           console.error(error)
           EventBus.$emit('presentToast', error.response.data.message)
         })
+    },
+
+    addAvatarToParams(avatarFile) {
+      this.userParams.avatar = avatarFile;
     }
   }
 }
diff --git a/app/javascript/mixins/usersMixin.js b/app/javascript/mixins/usersMixin.js
@@ -8,8 +8,14 @@ export default {
   },
 
   methods: {
-    updateUser(userParams) {
-      return axios.put(`/users?ajax=true`, { user: userParams })
+    updateUser(userForm) {
+      const config = {
+        headers: {
+            'content-type': 'multipart/form-data'
+        }
+    }
+
+      return axios.put(`/users/modify?ajax=true`, userForm, config)
     },
 
     followUser(userId) {
diff --git a/app/javascript/packs/snippet_app.js b/app/javascript/packs/snippet_app.js
@@ -53,7 +53,7 @@
 //
 // Then uncomment the code block below:
 //
-// import TurbolinksAdapter from 'vue-turbolinks'
+import TurbolinksAdapter from 'vue-turbolinks'
 import Vue from 'vue/dist/vue.esm'
 
 import { store } from '../store.js';
@@ -84,7 +84,7 @@ import Toast from '../toast.vue';
 import UserPreview from '../user-preview.vue';
 import UserProfile from '../user-profile.vue'
 
-// Vue.use(TurbolinksAdapter)
+Vue.use(TurbolinksAdapter)
 
 
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/app/javascript/user-preview.vue b/app/javascript/user-preview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-preview--wrapper">
     <a :href="`/users/${user.id}`">
-      <img class="user-preview--img" src="https://media-exp1.licdn.com/dms/image/C4E03AQG0MUNjxFvBTw/profile-displayphoto-shrink_200_200/0?e=1593648000&v=beta&t=WnnJ_Q6MpQFur5Uev2iqeLAnoX6Rdb1Bv6RoAijK3tA" height="48" width="48" />
+      <img class="user-preview--img" :src="user.avatar_url" height="48" width="48" />
     </a>
     <div class="user-preview--summary">
       <a :href="`/users/${user.id}`">
diff --git a/app/models/application_record.rb b/app/models/application_record.rb
@@ -1,3 +1,5 @@
 class ApplicationRecord < ActiveRecord::Base
+  include Rails.application.routes.url_helpers
+
   self.abstract_class = true
 end
diff --git a/app/models/user.rb b/app/models/user.rb
@@ -1,5 +1,6 @@
 class User < ApplicationRecord
   DEFAULT_FOLDER_NAME = 'My First Folder'.freeze
+  has_one_attached :avatar
 
   # Include default devise modules. Others available are:
   # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
@@ -28,6 +29,14 @@ class User < ApplicationRecord
   #TODO: Add tests for this
   after_create :create_default_folder
 
+  def avatar_url
+    if avatar.attached?
+      url_for(avatar)
+    else
+      '/icons/avatar_placeholder.svg'
+    end
+  end
+
   def description
     'Software developer on the Integrated Biodiversity Assessment Tool and founder of Snippet.io. Can often be found playing tennis or riding a bike.'
   end
diff --git a/app/serializers/user_serializer.rb b/app/serializers/user_serializer.rb
@@ -1,3 +1,3 @@
 class UserSerializer < ActiveModel::Serializer
-  attributes :id, :name, :snippets_count, :followers_count, :following_count
+  attributes :id, :name, :snippets_count, :followers_count, :following_count, :avatar_url
 end
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
@@ -27,6 +27,11 @@
       <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
     </div>
 
+    <div class="field">
+      <%= f.label :avatar %><br />
+      <%= f.file_field :avatar %>
+    </div>
+
     <div class="actions">
       <%= f.submit "Sign up" %>
     </div>
diff --git a/app/views/shared/_sidebar.html.erb b/app/views/shared/_sidebar.html.erb
@@ -2,7 +2,7 @@
   <% if user_signed_in? %>
     <card>
       <div style="text-align: center;">
-        <img src="https://media-exp1.licdn.com/dms/image/C4E03AQG0MUNjxFvBTw/profile-displayphoto-shrink_200_200/0?e=1593648000&v=beta&t=WnnJ_Q6MpQFur5Uev2iqeLAnoX6Rdb1Bv6RoAijK3tA" style="border-radius: 50%; display: block; margin: 0 auto;" width=80">
+        <%= image_tag current_user.avatar_url, style: "border-radius: 50%; display: block; margin: 0 auto;", size: 80 %>
         <h3 style="margin: 8px 0px 0px 0px;"><%= current_user.name %></h2>
       </div>
       <div class="horizontal-line"></div>
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,11 +1,19 @@
 Rails.application.routes.draw do
-  devise_for :users, :controllers => { registrations: :registrations }
+  #TODO: works for development
+  if Rails.env.development?
+    Rails.application.routes.default_url_options[:host] = "localhost:3000"
+  else
+    Rails.application.routes.default_url_options[:host] = 'cryptic-refuge-00081.herokuapp.com'
+  end
+
+  devise_for :users
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
   root to: 'home#index'
 
   resources :snippets, only: %i(new show create update destroy)
   resources :comments, only: :create
   resources :users, only: :show do
+    put :modify, on: :collection
     post :follow, on: :member
     post :unfollow, on: :member
   end
diff --git a/db/migrate/20200622070442_create_active_storage_tables.active_storage.rb b/db/migrate/20200622070442_create_active_storage_tables.active_storage.rb
@@ -0,0 +1,27 @@
+# This migration comes from active_storage (originally 20170806125915)
+class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
+  def change
+    create_table :active_storage_blobs do |t|
+      t.string   :key,        null: false
+      t.string   :filename,   null: false
+      t.string   :content_type
+      t.text     :metadata
+      t.bigint   :byte_size,  null: false
+      t.string   :checksum,   null: false
+      t.datetime :created_at, null: false
+
+      t.index [ :key ], unique: true
+    end
+
+    create_table :active_storage_attachments do |t|
+      t.string     :name,     null: false
+      t.references :record,   null: false, polymorphic: true, index: false
+      t.references :blob,     null: false
+
+      t.datetime :created_at, null: false
+
+      t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
+      t.foreign_key :active_storage_blobs, column: :blob_id
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
@@ -10,11 +10,32 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_06_21_112744) do
+ActiveRecord::Schema.define(version: 2020_06_22_070442) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
+  create_table "active_storage_attachments", force: :cascade do |t|
+    t.string "name", null: false
+    t.string "record_type", null: false
+    t.bigint "record_id", null: false
+    t.bigint "blob_id", null: false
+    t.datetime "created_at", null: false
+    t.index ["blob_id"], name: "index_active_storage_attachments_on_blob_id"
+    t.index ["record_type", "record_id", "name", "blob_id"], name: "index_active_storage_attachments_uniqueness", unique: true
+  end
+
+  create_table "active_storage_blobs", force: :cascade do |t|
+    t.string "key", null: false
+    t.string "filename", null: false
+    t.string "content_type"
+    t.text "metadata"
+    t.bigint "byte_size", null: false
+    t.string "checksum", null: false
+    t.datetime "created_at", null: false
+    t.index ["key"], name: "index_active_storage_blobs_on_key", unique: true
+  end
+
   create_table "comments", force: :cascade do |t|
     t.text "body"
     t.bigint "snippet_id", null: false
@@ -87,6 +108,7 @@
     t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
   end
 
+  add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
   add_foreign_key "comments", "snippets"
   add_foreign_key "comments", "users"
   add_foreign_key "likes", "snippets"
diff --git a/public/icons/avatar_placeholder.svg b/public/icons/avatar_placeholder.svg
