Add edit user functionality

Add UPDATE_USER type and action. Add UI and styles for edit user
page. Add object assign to get user and update user mutations.
Add constants to hold local storage user key.

Author: jfusco

src/components/Header.vue

@@ -1,15 +1,16 @@
 <template>
 	<div>
-		Hello: Joe Fusco
+		Hello: {{user.firstName}} {{user.lastName}}
 	</div>
 </template>
 
 <script type="text/babel">
 	import Vue from 'vue'
+	import { mapState } from 'vuex'
 
 	export default Vue.component('app-header', {
-		props: {
-
-		}
+		computed: mapState([
+			'user'
+		])
 	})
 </script>

src/constants/index.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export const LOCAL_USER = 'vue.user'

src/pages/EditUser.vue

@@ -1,9 +1,42 @@
 <template>
 	<div>
 		<h2>Edit user</h2>
+
+		<input v-model="user.firstName" placeholder="First name" />
+		<input v-model="user.lastName" placeholder="Last name" />
+		<input v-model="user.age" type="number" placeholder="Age" />
+
+		<select v-model="user.gender">
+			<option value="male">male</option>
+			<option value="female">female</option>
+		</select>
+
+		<button v-on:click="save">save</button>
 	</div>
 </template>
 
 <script type="text/babel">
 	import Vue from 'vue'
+	import { mapActions, mapState } from 'vuex'
+
+	export default {
+		methods: {
+			...mapActions([
+				'getUser',
+				'updateUser'
+			]),
+
+			save(){
+				this.updateUser(this.user)
+			}
+		},
+
+		mounted(){
+			this.getUser()
+		},
+
+		computed: mapState([
+			'user'
+		])
+	}
 </script>

src/pages/Users.vue

@@ -23,14 +23,17 @@
 			loader,
 			user
 		},
+
 		methods: {
 			...mapActions([
 				'getUsers'
 			])
 		},
+
 		mounted(){
 			this.getUsers(10);
 		},
+
 		computed: mapState([
 			'users',
 			'loader'

src/store/index.js

@@ -21,6 +21,6 @@ export default new Vuex.Store({
 		user,
 		loader
 	},
-	strict: debug,
+	strict: false,
 	middlewares: debug ? [createLogger()] : []
 })

src/store/modules/loader/types.js

@@ -1,4 +1,4 @@
 'use strict';
 
-export const SHOW_LOADER = 'SHOW_LOADER';
-export const HIDE_LOADER = 'HIDE_LOADER';
+export const SHOW_LOADER = 'SHOW_LOADER'
+export const HIDE_LOADER = 'HIDE_LOADER'

src/store/modules/user.js

@@ -1,2 +1,30 @@
 'use strict';
 
+import Vue from 'vue'
+import VueResource from 'vue-resource'
+import * as type from './types'
+import { LOCAL_USER } from '../../../constants/index'
+
+function getLocalUser(){
+	return localStorage.getItem(LOCAL_USER);
+}
+
+const actions = {
+	getUser({ commit }){
+		const storedUser = getLocalUser()
+
+		commit(type.GET_USER, {
+			user: storedUser
+		})
+	},
+
+	updateUser({ commit }, user){
+		localStorage.setItem(LOCAL_USER, JSON.stringify(user));
+
+		commit(type.UPDATE_USER, {
+			user
+		})
+	}
+}
+
+export default actions;

src/store/modules/user/actions.js

@@ -1,2 +1,31 @@
 'use strict';
 
+import * as type from './types'
+import actions from './actions'
+
+const state = {
+	firstName: 'Joe',
+	lastName: 'Fusco',
+	age: 32,
+	gender: 'male'
+}
+
+const mutations = {
+	[type.GET_USER](state, action) {
+		if(action.user !== null){
+			const storedUser = JSON.parse(action.user);
+
+			Object.assign(state, storedUser)
+		}
+	},
+
+	[type.UPDATE_USER](state, action) {
+		Object.assign(state, action.user)
+	}
+}
+
+export default {
+	state,
+	mutations,
+	actions
+}

src/store/modules/user/index.js

@@ -1,2 +1,4 @@
 'use strict';
 
+export const GET_USER = 'GET_USER'
+export const UPDATE_USER = 'UPDATE_USER'