Add vuex, 404 and non auth navbar (#35)

package.json

@@ -14,7 +14,8 @@
     "bulma": "^0.9.2",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.8"
+    "vue-router": "^4.0.8",
+    "vuex": "^4.0.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",

src/App.vue

@@ -1,3 +1,19 @@
 <template>
+  <navbar/>
   <router-view/>
+  <Footer />
 </template>
+
+<script lang='ts'>
+import { defineComponent } from 'vue'
+
+import Footer from './blocks/Footer.vue'
+import Navbar from './blocks/Navbar.vue'
+
+export default defineComponent({
+  components: {
+    Footer,
+    Navbar,
+  },
+})
+</script>

src/blocks/Navbar.vue

@@ -21,11 +21,11 @@
 
     <div id="navbarBasicExample" :class="['navbar-menu', {'is-active': isMenuActive}]">
       <div class="navbar-start">
-        <a href="/dashboard" class="navbar-item">
+        <a v-if="username" @click="$router.push('/dashboard')" class="navbar-item">
           Панель управления
         </a>
 
-        <div class="navbar-item has-dropdown is-hoverable">
+        <div v-if="username" class="navbar-item has-dropdown is-hoverable">
           <a class="navbar-link">
             {{ username }}
           </a>
@@ -39,7 +39,7 @@
 
         <div class="navbar-item has-dropdown is-hoverable">
           <a class="navbar-link">
-            Другое
+            Помощь
           </a>
 
           <div class="navbar-dropdown is-boxed">
@@ -52,18 +52,26 @@
 
       <div class="navbar-end">
         <div class="navbar-item">
-          <div class="buttons">
+          <div v-if="username" class="buttons">
             <a href="#" class="button is-primary" @click="showModal = true">
               <strong>Создать сервер</strong>
             </a>
           </div>
+          <div v-if="!username" class="buttons">
+            <a class="button is-primary" @click="$router.push('/signup')">
+                <strong>Регистрация</strong>
+              </a>
+              <a class="button" @click="$router.push('/login')">
+                Вход
+              </a>
+          </div>
         </div>
       </div>
     </div>
 
     <server-modal
+      v-if="username"
       v-model:show="showModal"
-      @create-server="$emit('create-server', $event)"
     />
   </nav>
 </template>
@@ -91,7 +99,7 @@ export default defineComponent({
     async signOut() {
       await this.$http.get('/logout/')
       localStorage.removeItem('user')
-      store.state.user = undefined
+      store.commit('removeUser')
       this.$router.push('/login')
     },
   },

src/components/Dashboard.vue

@@ -1,5 +1,4 @@
 <template>
-  <navbar @create-server="servers.push($event)" />
   <section class="section">
     <h1 class="title">Панель управления</h1>
       <div v-if="servers.length > 0" class="columns is-multiline is-variable is-1">
@@ -15,30 +14,29 @@
       Если вы нашли какую-то ошибку на сайте или у вас есть предложение по функционалу, напишите пожалуйста нам на <a href="mailto:support@donkey-engine.host">почту</a>
     </div>
   </section>
-  <Footer />
 </template>
 
 <script lang='ts'>
 import { defineComponent } from 'vue'
 
-import Footer from '../blocks/Footer.vue'
-import Navbar from '../blocks/Navbar.vue'
+import store from '../store'
 import ServerItem from './ServerItem.vue'
 
 export default defineComponent({
   components: {
-    Footer,
-    Navbar,
     ServerItem,
   },
-  data() {
-    return {
-      servers: [],
+  computed: {
+    servers() {
+      return store.state.servers
     }
   },
   async created() {
     const response = await this.$http.get('/servers/')
-    this.servers = response.data
+    store.commit({
+      type: 'setServers',
+      servers: response.data,
+    })
   },
 })
 </script>

src/components/NotFound.vue

@@ -0,0 +1,44 @@
+<template>
+  <section class="hero is-large has-background-danger-light has-text-centered">
+  <div class="hero-body">
+      <h1 class="title">
+        404
+      </h1>
+      <h2 class="subtitle">
+        Ой... Похоже, такой страницы не существует.
+      </h2>
+      <p class='has-text-danger'>
+        <i :class="['fas fa-3x', currentIcon]"></i>
+      </p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      icons: [
+        'fa-frown',
+        'fa-sad-tear',
+        'fa-frown-open',
+        'fa-sad-cry',
+      ],
+      iconIndex: 0,
+    }
+  },
+  computed: {
+    currentIcon(): String {
+      return this.icons[this.iconIndex]
+    }
+  },
+  created() {
+    setInterval(() => {
+      this.iconIndex += 1
+      this.iconIndex = this.iconIndex >= this.icons.length ? 0 : this.iconIndex
+    }, 3000)
+  }
+})
+</script>

src/components/ServerItem.vue

@@ -128,7 +128,7 @@ export default defineComponent({
       if (this.server.status === ServerStatus.RUNNING) {
         return `${settings.SERVER_HOST_URL}:${this.server.port}`
       } else {
-        return 'Сервер не запущенн'
+        return 'Сервер не запущен'
       }
     }
   },

src/components/ServerModal.vue

@@ -111,6 +111,8 @@ import { defineComponent } from "vue"
 import { useVuelidate } from "@vuelidate/core"
 import { required } from "@vuelidate/validators"
 
+import store from '../store'
+
 export default defineComponent({
   setup() {
     return { v$: useVuelidate() }
@@ -183,7 +185,7 @@ export default defineComponent({
       const { data } = await this.$http.post("/servers/", this.form)
       await this.$http.post(`/servers/${data.id}/build/`)
       this.pending = false
-      this.$emit("create-server", data)
+      store.state.servers.push(data)
       this.$emit("update:show", false)
     },
   },

src/main.ts

@@ -15,10 +15,13 @@ const app = createApp({
     const user = localStorage.getItem('user')
     if (user) {
       try {
-        store.state.user = JSON.parse(user)
+        store.commit({
+          type: 'setUser',
+          user: JSON.parse(user)
+        })
       } catch (err) {
         localStorage.removeItem('user')
-        store.state.user = undefined
+        store.commit('removeUser')
       }
     }
   },
@@ -40,14 +43,15 @@ axios.interceptors.response.use(
   (error) => {
     if (error.response?.status === 403) {
       localStorage.removeItem('user')
-      store.state.user = undefined
+      store.commit('removeUser')
       return Promise.reject(error)
     }
     return Promise.reject(error)
   }
 )
 app.config.globalProperties.$http = axios
 app.use(router)
+app.use(store)
 app.mount('#app')
 
 declare module "@vue/runtime-core" {

src/router.ts

@@ -2,6 +2,7 @@ import { Component } from 'vue'
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 import Dashboard from './components/Dashboard.vue'
+import NotFound from './components/NotFound.vue'
 import SignUp from './components/SignUp.vue'
 import SignIn from './components/SignIn.vue'
 import store from './store'
@@ -31,6 +32,14 @@ const routes: RouteRecordRaw[] = [
       authRoute: true,
     },
   },
+  {
+    path: '/404',
+    component: NotFound,
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/404',
+  },
 ]
 
 export const router = createRouter({

src/store.ts

@@ -1,16 +1,32 @@
-import { reactive } from 'vue'
+import { createStore } from 'vuex'
+import { Server } from './interfaces'
 
-export interface User {
+interface User {
     id: number,
     username: string,
 }
 
 interface State {
     user?: User,
+    servers: Server[],
 }
 
-export default {
-    state: reactive({
-        user: undefined,
-    }) as State,
-}
+export default createStore({
+  state(): State {
+    return {
+      user: undefined,
+      servers: [],
+    }
+  },
+  mutations: {
+    setUser(state: State, payload) {
+      state.user = payload.user
+    },
+    removeUser(state: State) {
+      state.user = undefined
+    },
+    setServers(state: State, payload) {
+      state.servers = payload.servers
+    }
+  }
+})