Feature: Agent Profile Update with avatar (#449)

* Feature: Agent Profile Update with avatar
* Add Update Profile with name, avatar, email and password

app/javascript/dashboard/store/modules/auth.js

@@ -1,5 +1,3 @@
-/* eslint no-console: 0 */
-/* eslint-env browser */
 /* eslint no-param-reassign: 0 */
 import axios from 'axios';
 import moment from 'moment';
@@ -9,7 +7,8 @@ import router from '../../routes';
 import authAPI from '../../api/auth';
 import createAxios from '../../helper/APIHelper';
 import actionCable from '../../helper/actionCable';
-// initial state
+import { setUser, getHeaderExpiry, clearCookiesOnLogout } from '../utils/api';
+
 const state = {
   currentUser: {
     id: null,
@@ -27,15 +26,19 @@ const state = {
 };
 
 // getters
-const getters = {
-  isLoggedIn(_state) {
-    return _state.currentUser.id !== null;
+export const getters = {
+  isLoggedIn($state) {
+    return !!$state.currentUser.id;
   },
 
   getCurrentUserID(_state) {
     return _state.currentUser.id;
   },
 
+  getCurrentUser(_state) {
+    return _state.currentUser;
+  },
+
   getSubscription(_state) {
     return _state.currentUser.subscription === undefined
       ? null
@@ -53,7 +56,7 @@ const getters = {
 };
 
 // actions
-const actions = {
+export const actions = {
   login({ commit }, credentials) {
     return new Promise((resolve, reject) => {
       authAPI
@@ -70,14 +73,21 @@ const actions = {
         });
     });
   },
-  validityCheck(context) {
-    if (context.getters.isLoggedIn) {
-      authAPI.validityCheck();
+  async validityCheck(context) {
+    try {
+      const response = await authAPI.validityCheck();
+      setUser(response.data.payload.data, getHeaderExpiry(response));
+      context.commit(types.default.SET_CURRENT_USER);
+    } catch (error) {
+      if (error.response.status === 401) {
+        clearCookiesOnLogout();
+      }
     }
   },
-  set_user({ commit }) {
+  setUser({ commit, dispatch }) {
     if (authAPI.isLoggedIn()) {
       commit(types.default.SET_CURRENT_USER);
+      dispatch('validityCheck');
     } else {
       commit(types.default.CLEAR_USER);
     }
@@ -85,6 +95,15 @@ const actions = {
   logout({ commit }) {
     commit(types.default.CLEAR_USER);
   },
+  updateProfile: async ({ commit }, params) => {
+    try {
+      const response = await authAPI.profileUpdate(params);
+      setUser(response.data, getHeaderExpiry(response));
+      commit(types.default.SET_CURRENT_USER);
+    } catch (error) {
+      // Ignore error
+    }
+  },
 };
 
 // mutations
@@ -93,8 +112,12 @@ const mutations = {
     _state.currentUser.id = null;
   },
   [types.default.SET_CURRENT_USER](_state) {
-    Object.assign(_state.currentUser, authAPI.getAuthData());
-    Object.assign(_state.currentUser, authAPI.getCurrentUser());
+    const currentUser = {
+      ...authAPI.getAuthData(),
+      ...authAPI.getCurrentUser(),
+    };
+
+    Vue.set(_state, 'currentUser', currentUser);
   },
 };
 

app/javascript/dashboard/store/modules/specs/auth/actions.spec.js

@@ -0,0 +1,70 @@
+import axios from 'axios';
+import Cookies from 'js-cookie';
+import { actions } from '../../auth';
+import * as types from '../../../mutation-types';
+import { setUser, clearCookiesOnLogout } from '../../../utils/api';
+import '../../../../routes';
+
+jest.mock('../../../../routes', () => {});
+jest.mock('../../../utils/api', () => ({
+  setUser: jest.fn(),
+  clearCookiesOnLogout: jest.fn(),
+  getHeaderExpiry: jest.fn(),
+}));
+jest.mock('js-cookie', () => ({
+  getJSON: jest.fn(),
+}));
+
+const commit = jest.fn();
+const dispatch = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  describe('#validityCheck', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: { payload: { data: { id: 1, name: 'John' } } },
+        headers: { expiry: 581842904 },
+      });
+      await actions.validityCheck({ commit });
+      expect(setUser).toHaveBeenCalledTimes(1);
+      expect(commit.mock.calls).toEqual([[types.default.SET_CURRENT_USER]]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({
+        response: { status: 401 },
+      });
+      await actions.validityCheck({ commit });
+      expect(clearCookiesOnLogout);
+    });
+  });
+
+  describe('#updateProfile', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.put.mockResolvedValue({
+        data: { id: 1, name: 'John' },
+        headers: { expiry: 581842904 },
+      });
+      await actions.updateProfile({ commit }, { name: 'Pranav' });
+      expect(setUser).toHaveBeenCalledTimes(1);
+      expect(commit.mock.calls).toEqual([[types.default.SET_CURRENT_USER]]);
+    });
+  });
+
+  describe('#setUser', () => {
+    it('sends correct actions if user is logged in', async () => {
+      Cookies.getJSON.mockImplementation(() => true);
+      actions.setUser({ commit, dispatch });
+      expect(commit.mock.calls).toEqual([[types.default.SET_CURRENT_USER]]);
+      expect(dispatch.mock.calls).toEqual([['validityCheck']]);
+    });
+
+    it('sends correct actions if user is not logged in', async () => {
+      Cookies.getJSON.mockImplementation(() => false);
+      actions.setUser({ commit, dispatch });
+      expect(commit.mock.calls).toEqual([[types.default.CLEAR_USER]]);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/auth/getters.spec.js

@@ -0,0 +1,20 @@
+import { getters } from '../../auth';
+
+import '../../../../routes';
+
+jest.mock('../../../../routes', () => {});
+describe('#getters', () => {
+  it('isLoggedIn', () => {
+    expect(getters.isLoggedIn({ currentUser: { id: null } })).toEqual(false);
+    expect(getters.isLoggedIn({ currentUser: { id: 1 } })).toEqual(true);
+  });
+
+  it('getCurrentUserID', () => {
+    expect(getters.getCurrentUserID({ currentUser: { id: 1 } })).toEqual(1);
+  });
+  it('getCurrentUser', () => {
+    expect(
+      getters.getCurrentUser({ currentUser: { id: 1, name: 'Pranav' } })
+    ).toEqual({ id: 1, name: 'Pranav' });
+  });
+});