♻️ Refactor frontend

{{cookiecutter.project_slug}}/frontend/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

{{cookiecutter.project_slug}}/frontend/.eslintrc.js

@@ -0,0 +1,52 @@
+const OFF = 0,
+  WARN = 1,
+  ERROR = 2;
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  ignorePatterns: [
+    "!.eslintrc.js",
+    "!.prettierrc.js",
+    "node_modules/",
+    "shims-tsx.d.ts",
+    "shims-vue.d.ts"
+  ],
+  extends: [
+    "plugin:vue/recommended",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/prettier/@typescript-eslint",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? ERROR : OFF,
+    "no-debugger": process.env.NODE_ENV === "production" ? ERROR : OFF,
+    "@typescript-eslint/interface-name-prefix": [
+      WARN,
+      {
+        prefixWithI: "always",
+      },
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      ERROR,
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+};

{{cookiecutter.project_slug}}/frontend/.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  printWidth: 88,
+  tabWidth: 2,
+  tabs: false,
+  semi: true,
+  singleQuote: false,
+  trailingComma: "all",
+  arrowParens: "always",
+  vueIndentScriptAndStyle: true,
+};

{{cookiecutter.project_slug}}/frontend/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
+  transformIgnorePatterns: ['/node_modules/(?!@mdi|vuetify)'],
+};

{{cookiecutter.project_slug}}/frontend/package.json

@@ -9,66 +9,46 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.2.5",
-    "axios": "^0.18.0",
-    "core-js": "^3.4.3",
-    "register-service-worker": "^1.0.0",
-    "typesafe-vuex": "^3.1.1",
-    "vee-validate": "^2.1.7",
-    "vue": "^2.5.22",
-    "vue-class-component": "^6.0.0",
-    "vue-property-decorator": "^7.3.0",
-    "vue-router": "^3.0.2",
-    "vuetify": "^1.4.4",
-    "vuex": "^3.1.0"
+    "@mdi/font": "^3.6.95",
+    "axios": "^0.19.2",
+    "core-js": "^3.6.4",
+    "http-status-codes": "^1.4.0",
+    "register-service-worker": "^1.6.2",
+    "roboto-fontface": "*",
+    "vee-validate": "^3.2.5",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.2",
+    "vue-property-decorator": "^8.3.0",
+    "vue-router": "^3.1.6",
+    "vuetify": "^2.2.20",
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.13",
-    "@vue/cli-plugin-babel": "^4.1.1",
-    "@vue/cli-plugin-pwa": "^4.1.1",
-    "@vue/cli-plugin-typescript": "^4.1.1",
-    "@vue/cli-plugin-unit-jest": "^4.1.1",
-    "@vue/cli-service": "^4.1.1",
-    "@vue/test-utils": "^1.0.0-beta.28",
-    "babel-core": "7.0.0-bridge.0",
-    "ts-jest": "^23.10.5",
-    "typescript": "^3.2.4",
-    "vue-cli-plugin-vuetify": "^2.0.2",
-    "vue-template-compiler": "^2.5.22"
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 10"
-  ],
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "json",
-      "vue",
-      "ts",
-      "tsx"
-    ],
-    "transform": {
-      "^.+\\.vue$": "vue-jest",
-      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1"
-    },
-    "snapshotSerializers": [
-      "jest-serializer-vue"
-    ],
-    "testMatch": [
-      "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
-    ],
-    "testURL": "http://localhost/"
+    "@types/jest": "^24.0.19",
+    "@typescript-eslint/eslint-plugin": "^2.18.0",
+    "@typescript-eslint/parser": "^2.18.0",
+    "@vue/cli-plugin-babel": "~4.2.0",
+    "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-plugin-pwa": "~4.2.0",
+    "@vue/cli-plugin-router": "~4.2.0",
+    "@vue/cli-plugin-typescript": "~4.2.0",
+    "@vue/cli-plugin-unit-jest": "~4.2.0",
+    "@vue/cli-plugin-vuex": "~4.2.0",
+    "@vue/cli-service": "~4.2.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^5.0.1",
+    "@vue/test-utils": "1.0.0-beta.31",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^6.1.2",
+    "prettier": "^1.19.1",
+    "sass": "^1.25.0",
+    "sass-loader": "^8.0.2",
+    "typescript": "^3.8.3",
+    "vue-cli-plugin-vuetify": "~2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0",
+    "vuex-module-decorators": "^0.16.1",
+    "webpack": "^4.42.1"
   }
 }

{{cookiecutter.project_slug}}/frontend/public/index.html

@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= VUE_APP_NAME %></title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= VUE_APP_NAME %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly
+        without JavaScript enabled. Please enable it to continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

{{cookiecutter.project_slug}}/frontend/src/App.vue

@@ -1,16 +1,20 @@
 <template>
   <div id="app">
     <v-app>
-      <v-content v-if="loggedIn===null">
-        <v-container fill-height>
-          <v-layout align-center justify-center>
-            <v-flex>
+      <v-content v-if="loggedIn === null">
+        <v-container class="fill-height">
+          <v-row align="center" justify="center">
+            <v-col>
               <div class="text-xs-center">
                 <div class="headline my-5">Loading...</div>
-                <v-progress-circular size="100" indeterminate color="primary"></v-progress-circular>
+                <v-progress-circular
+                  size="100"
+                  indeterminate
+                  color="primary"
+                ></v-progress-circular>
               </div>
-            </v-flex>
-          </v-layout>
+            </v-col>
+          </v-row>
         </v-container>
       </v-content>
       <router-view v-else />
@@ -20,24 +24,22 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import NotificationsManager from '@/components/NotificationsManager.vue';
-import { readIsLoggedIn } from '@/store/main/getters';
-import { dispatchCheckLoggedIn } from '@/store/main/actions';
+  import { Component, Vue } from "vue-property-decorator";
+  import NotificationsManager from "@/components/NotificationsManager.vue";
+  import { mainStore } from "@/store";
 
-@Component({
-  components: {
-    NotificationsManager,
-  },
-})
-export default class App extends Vue {
+  @Component({
+    components: {
+      NotificationsManager,
+    },
+  })
+  export default class App extends Vue {
+    get loggedIn() {
+      return mainStore.isLoggedIn;
+    }
 
-  get loggedIn() {
-    return readIsLoggedIn(this.$store);
+    public async created() {
+      await mainStore.checkLoggedIn();
+    }
   }
-
-  public async created() {
-    await dispatchCheckLoggedIn(this.$store);
-  }
-}
 </script>

{{cookiecutter.project_slug}}/frontend/src/api.ts

@@ -1,6 +1,6 @@
-import axios from 'axios';
-import { apiUrl } from '@/env';
-import { IUserProfile, IUserProfileUpdate, IUserProfileCreate } from './interfaces';
+import axios from "axios";
+import { apiUrl } from "@/env";
+import { IUserProfile, IUserProfileUpdate, IUserProfileCreate } from "./interfaces";
 
 function authHeaders(token: string) {
   return {
@@ -13,16 +13,20 @@ function authHeaders(token: string) {
 export const api = {
   async logInGetToken(username: string, password: string) {
     const params = new URLSearchParams();
-    params.append('username', username);
-    params.append('password', password);
+    params.append("username", username);
+    params.append("password", password);
 
     return axios.post(`${apiUrl}/api/v1/login/access-token`, params);
   },
   async getMe(token: string) {
     return axios.get<IUserProfile>(`${apiUrl}/api/v1/users/me`, authHeaders(token));
   },
   async updateMe(token: string, data: IUserProfileUpdate) {
-    return axios.put<IUserProfile>(`${apiUrl}/api/v1/users/me`, data, authHeaders(token));
+    return axios.put<IUserProfile>(
+      `${apiUrl}/api/v1/users/me`,
+      data,
+      authHeaders(token),
+    );
   },
   async getUsers(token: string) {
     return axios.get<IUserProfile[]>(`${apiUrl}/api/v1/users/`, authHeaders(token));
@@ -38,7 +42,7 @@ export const api = {
   },
   async resetPassword(password: string, token: string) {
     return axios.post(`${apiUrl}/api/v1/reset-password/`, {
-      new_password: password,
+      new_password: password, // eslint-disable-line @typescript-eslint/camelcase
       token,
     });
   },

{{cookiecutter.project_slug}}/frontend/src/component-hooks.ts

@@ -1,8 +1,8 @@
-import Component from 'vue-class-component';
+import Component from "vue-class-component";
 
 // Register the router hooks with their names
 Component.registerHooks([
-  'beforeRouteEnter',
-  'beforeRouteLeave',
-  'beforeRouteUpdate', // for vue-router 2.2+
+  "beforeRouteEnter",
+  "beforeRouteLeave",
+  "beforeRouteUpdate", // for vue-router 2.2+
 ]);