From 84eae5380f67ee0257739df506266df2333c0edb Mon Sep 17 00:00:00 2001 From: Valentin Kaelin Date: Fri, 23 Aug 2019 00:50:00 +0200 Subject: [PATCH] Add Vuex and create Notifications Component --- client/package-lock.json | 16 +++-- client/package.json | 3 +- client/src/App.vue | 30 ++------ client/src/assets/css/base.css | 11 +++ .../src/components/NotificationsContainer.vue | 24 +++++++ client/src/components/PopupNotification.vue | 69 +++++++++++++++++++ client/src/components/SearchForm.vue | 12 +++- client/src/main.js | 7 +- client/src/store/index.js | 14 ++++ client/src/store/modules/notification.js | 30 ++++++++ 10 files changed, 184 insertions(+), 32 deletions(-) create mode 100644 client/src/components/NotificationsContainer.vue create mode 100644 client/src/components/PopupNotification.vue create mode 100644 client/src/store/index.js create mode 100644 client/src/store/modules/notification.js diff --git a/client/package-lock.json b/client/package-lock.json index f50f3e1..02963a1 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -4522,10 +4522,13 @@ } }, "eslint-utils": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.3.1.tgz", - "integrity": "sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==", - "dev": true + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.2.tgz", + "integrity": "sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.0.0" + } }, "eslint-visitor-keys": { "version": "1.0.0", @@ -11232,6 +11235,11 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vuex": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz", + "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg==" + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/client/package.json b/client/package.json index 0b21328..af699bd 100644 --- a/client/package.json +++ b/client/package.json @@ -11,7 +11,8 @@ "axios": "^0.18.1", "vue": "^2.6.6", "vue-axios": "^2.1.4", - "vue-router": "^3.0.6" + "vue-router": "^3.0.6", + "vuex": "^3.1.1" }, "devDependencies": { "@fullhuman/postcss-purgecss": "^1.2.0", diff --git a/client/src/App.vue b/client/src/App.vue index f183c8f..c2d32f5 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,36 +1,18 @@ - - - diff --git a/client/src/assets/css/base.css b/client/src/assets/css/base.css index b9f5428..bb6f98a 100644 --- a/client/src/assets/css/base.css +++ b/client/src/assets/css/base.css @@ -43,3 +43,14 @@ .fade-enter, .fade-leave-to { opacity: 0; } + +.slide-fade-enter-active, +.slide-fade-leave-active { + transition: all 0.4s; +} + +.slide-fade-enter, +.slide-fade-leave-to { + transform: translateX(400px); + opacity: 0; +} diff --git a/client/src/components/NotificationsContainer.vue b/client/src/components/NotificationsContainer.vue new file mode 100644 index 0000000..4ef8541 --- /dev/null +++ b/client/src/components/NotificationsContainer.vue @@ -0,0 +1,24 @@ + + + diff --git a/client/src/components/PopupNotification.vue b/client/src/components/PopupNotification.vue new file mode 100644 index 0000000..d24cb42 --- /dev/null +++ b/client/src/components/PopupNotification.vue @@ -0,0 +1,69 @@ + + + \ No newline at end of file diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue index b6ece5b..f9bc48d 100644 --- a/client/src/components/SearchForm.vue +++ b/client/src/components/SearchForm.vue @@ -85,8 +85,16 @@ export default { }; }, formSubmit() { - console.log('form submit child'); - this.$emit('formSubmit', this.summoner.split(' ').join(''), this.selectedRegion.toLowerCase()); + const regexNames = new RegExp('^[0-9\\p{L} _\\.]+$', 'u'); + + if(regexNames.exec(this.summoner)) { + this.$emit('formSubmit', this.summoner.split(' ').join(''), this.selectedRegion.toLowerCase()); + } else { + this.$store.dispatch('notification/add', { + type: 'error', + message: 'Summoner Name entered is incorrect.' + }) + } } } }; diff --git a/client/src/main.js b/client/src/main.js index 78fee3a..bb24e5e 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -5,19 +5,24 @@ import DotLoader from 'vue-spinner/src/DotLoader.vue' import '@/assets/css/main.css' import 'vue-awesome/icons' +import Icon from 'vue-awesome/components/Icon' + import App from './App.vue' import router from './router' -import Icon from 'vue-awesome/components/Icon' +import store from './store' Vue.config.productionTip = false Vue.use(VueAxios, axios) + Vue.component('v-icon', Icon) Vue.component('dot-loader', DotLoader) + Vue.prototype.$patch = '9.16.1' new Vue({ router, + store, render: h => h(App), }).$mount('#app') diff --git a/client/src/store/index.js b/client/src/store/index.js new file mode 100644 index 0000000..839b977 --- /dev/null +++ b/client/src/store/index.js @@ -0,0 +1,14 @@ +import Vue from 'vue' +import Vuex from 'vuex' +import * as notification from '@/store/modules/notification' + +Vue.use(Vuex) + +const debug = process.env.NODE_ENV !== 'production' + +export default new Vuex.Store({ + modules: { + notification, + }, + strict: debug +}) diff --git a/client/src/store/modules/notification.js b/client/src/store/modules/notification.js new file mode 100644 index 0000000..2fea967 --- /dev/null +++ b/client/src/store/modules/notification.js @@ -0,0 +1,30 @@ +export const namespaced = true + +export const state = { + notifications: [] +} + +let nextId = 1 + +export const mutations = { + PUSH(state, notification) { + state.notifications.push({ + ...notification, + id: nextId++ + }) + }, + DELETE(state, notificationToRemove) { + state.notifications = state.notifications.filter( + notification => notification.id !== notificationToRemove.id + ) + } +} + +export const actions = { + add({ commit }, notification) { + commit('PUSH', notification) + }, + remove({ commit }, notificationToRemove) { + commit('DELETE', notificationToRemove) + } +}