From 001c243f95d6b15e95810b3e47b33959433a87f3 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 22 Oct 2019 22:52:24 +0200
Subject: [PATCH] New store module for setting the document title. Each route
 changes the document title to its name

---
 src/modules/documentTitle.js | 37 ++++++++++++++++++++++++++++++++++++
 src/routes.js                | 16 ++++++----------
 src/store.js                 |  4 +++-
 3 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 src/modules/documentTitle.js

diff --git a/src/modules/documentTitle.js b/src/modules/documentTitle.js
new file mode 100644
index 0000000..c2bfb0f
--- /dev/null
+++ b/src/modules/documentTitle.js
@@ -0,0 +1,37 @@
+const capitalize = (string) => {
+  return string.includes(' ') ? 
+    string.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).replace('_', ' ')).join(' ')
+    : string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+const setDocumentTitle = (state) => {
+  document.title = `${state.emoji} ${state.titlePrefix} | ${capitalize(state.title)}`
+}
+
+export default {
+  namespaced: true,
+  state: {
+    emoji: '🍕',
+    titlePrefix: 'request',
+    title: undefined
+  },
+  getters: {},
+  mutations: {
+    SET_EMOJI: (state, emoji) => {
+      state.emoji = emoji
+      setDocumentTitle(state)
+    },
+    SET_TITLE: (state, title) => {
+      state.title = title
+      setDocumentTitle(state)
+    }
+  },
+  actions: {
+    updateEmoji({ commit }, emoji) {
+      commit('SET_EMOJI', emoji)
+    },
+    updateTitle({ commit }, title) {
+      commit('SET_TITLE', title)
+    }
+  }
+}
diff --git a/src/routes.js b/src/routes.js
index 27fc8fa..eecb58c 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router';
+import store from '@/store'
 
 Vue.use(VueRouter)
 
@@ -18,19 +19,19 @@ let routes = [
   {
     name: 'list',
     path: '/list/:name',
-    component: (resolve) => require(['./components/MoviesList.vue'], resolve)
+    component: (resolve) => require(['./components/ListPage.vue'], resolve)
   },
   {
     name: 'request',
     path: '/request/all',
     components: {
-      'request-router-view': require('./components/MoviesList.vue')
+      'request-router-view': require('./components/ListPage.vue')
     }
   },
   {
     name: 'search',
     path: '/search',
-    component: (resolve) => require(['./components/MoviesList.vue'], resolve)
+    component: (resolve) => require(['./components/Search.vue'], resolve)
   },
   {
     name: 'register',
@@ -47,13 +48,6 @@ let routes = [
     path: '/signin',
     component: (resolve) => require(['./components/Signin.vue'], resolve)
   },
-  {
-    name: 'settings',
-    path: '/profile/settings',
-    components: {
-      'search-router-view': require('./components/Settings.vue')
-    }
-  },
   // {
   //   name: 'user-requests',
   //   path: '/profile/requests',
@@ -84,6 +78,8 @@ const router =  new VueRouter({
 });
 
 router.beforeEach((to, from, next) => {
+  store.dispatch('documentTitle/updateTitle', to.name)
+
   // Toggle mobile nav
   if(document.querySelector('.nav__hamburger--active')){
     document.querySelector('.nav__hamburger').classList.remove('nav__hamburger--active');
diff --git a/src/store.js b/src/store.js
index 901b568..bfe663f 100644
--- a/src/store.js
+++ b/src/store.js
@@ -3,13 +3,15 @@ import Vuex from 'vuex'
 
 import torrentModule from './modules/torrentModule.js'
 import darkmodeModule from './modules/darkmodeModule.js'
+import documentTitle from './modules/documentTitle.js'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
     torrentModule,
-    darkmodeModule
+    darkmodeModule,
+    documentTitle
   }
 })