🔧 Add typescript

.eslintrc.js

@@ -4,11 +4,8 @@ module.exports = {
     browser: true,
     node: true
   },
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
   extends: [
-    '@nuxtjs',
+    '@nuxtjs/eslint-config-typescript',
     'prettier',
     'prettier/vue',
     'plugin:prettier/recommended',
@@ -19,6 +16,7 @@ module.exports = {
   ],
   // add your custom rules here
   rules: {
-    "no-console": 0
+    'no-console': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
   }
 }

components/legacy/InputSetting.vue

@@ -67,7 +67,10 @@ export default {
     verboseChoices() {
       const choices = []
       this.choices.forEach(choice => {
-        const verboseChoice = this.verboseChoices.hasOwnProperty(choice)
+        const verboseChoice = Object.prototype.hasOwnProperty.call(
+          this.verboseChoices,
+          choice
+        )
           ? this.verboseChoices[choice]
           : choice
         choices.push({ key: choice, label: verboseChoice })

components/legacy/TheDrawer.vue

@@ -58,7 +58,7 @@ export default {
       return '/' + topPathFragment === link.href
     },
     hasNotifications(link) {
-      if (link.hasOwnProperty('notifications')) {
+      if (Object.prototype.hasOwnProperty.call(link, 'notifications')) {
         return link.notifications >= 1 || link.notifications === '99+'
       }
     },

components/legacy/TheSideRail.vue

@@ -29,7 +29,7 @@ export default {
       return '/' + topPathFragment === link.href
     },
     hasNotifications(link) {
-      if (link.hasOwnProperty('notifications')) {
+      if (Object.prototype.hasOwnProperty.call(link, 'notifications')) {
         return link.notifications >= 1 || link.notifications === '99+'
       }
     },

nuxt.config.js

@@ -126,8 +126,8 @@ export default {
   buildModules: [
     // Doc: https://github.com/nuxt-community/eslint-module
     '@nuxtjs/eslint-module',
-    // // Doc: https://github.com/nuxt-community/stylelint-module
-    // '@nuxtjs/stylelint-module'
+    // Doc: https://typescript.nuxtjs.org/guide/setup.html
+    '@nuxt/typescript-build',
   ],
   /*
    ** Nuxt.js modules
@@ -210,4 +210,9 @@ export default {
       nativeUI: true,
     },
   },
+  typescript: {
+    typeCheck: {
+      eslint: true,
+    },
+  },
 }

package.json

@@ -7,11 +7,11 @@
   "private": true,
   "scripts": {
     "dev": "tmux new -s schoolsyst-dev -d 'yarn dev:frontend' \\; split-window -h -d 'yarn dev:backend' \\; attach",
-    "dev:frontend": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "dev:frontend": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate",
+    "lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore .",
     "test": "cross-env NODE_ENV=test jest",
     "dev:backend": "cd ../schoolsyst-api && poetry run python manage.py runserver 9999"
   },
@@ -71,14 +71,15 @@
     ]
   },
   "lint-staged": {
-    "*.{js,vue}": "eslint"
+    "*.{js,vue,ts}": "eslint"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
   "dependencies": {
+    "@nuxt/typescript-runtime": "^0.4.7",
     "@nuxtjs/auth": "^4.8.1",
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/dotenv": "^1.4.0",
@@ -130,12 +131,12 @@
     "@babel/plugin-transform-regenerator": "^7.8.7",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.8.7",
-    "@nuxtjs/eslint-config": "^1.0.1",
+    "@nuxt/typescript-build": "^1.0.0",
+    "@nuxtjs/eslint-config-typescript": "^2.0.0",
     "@nuxtjs/eslint-module": "^1.0.0",
     "@nuxtjs/stylelint-module": "^3.1.0",
     "@vue/test-utils": "^1.0.0-beta.32",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
     "babel-jest": "^25.1.0",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-register": "^6.26.0",

store/grades.js

@@ -29,7 +29,7 @@ export const getters = {
     date = 'added'
   ) => {
     switch (what) {
-      case 'trimester':
+      case 'trimester': {
         let trimesterInterval
         if (value === null) {
           trimesterInterval = rootGetters['schedule/currentTrimester']
@@ -42,7 +42,7 @@ export const getters = {
         return getters.all.filter(
           o => o[date] && isWithinInterval(o[date], trimesterInterval)
         )
-
+      }
       case 'interval':
         return getters.all.filter(
           o => o[date] && isWithinInterval(o[date], value)

store/index.js

@@ -21,6 +21,13 @@ export const state = () => ({
     longitude: null,
   },
   links: [
+    {
+      name: 'Tests du refactoring',
+      href: '/refactor-test',
+      icon: 'build',
+      id: 'refactor-test',
+    },
+    'separator',
     {
       name: 'Timeline',
       href: '/timeline',
@@ -207,7 +214,8 @@ export const getValidator = ({
         ? object[fieldName].length <= arg
         : true,
     required: ({ arg, fieldName }) =>
-      object.hasOwnProperty(fieldName) && object[fieldName] !== null,
+      Object.prototype.hasOwnProperty.call(object, fieldName) &&
+      object[fieldName] !== null,
     notEmpty: ({ arg, fieldName }) =>
       object[fieldName] && object[fieldName].trim().length > 0,
     isAWeekType: ({ arg, fieldName }) =>
@@ -230,7 +238,10 @@ export const getValidator = ({
     /* Special case for required, which checks if the property exist
        and returnes *false* instead.
     */
-    if (errorName !== 'required' && !object.hasOwnProperty(fieldName)) {
+    if (
+      errorName !== 'required' &&
+      !Object.prototype.hasOwnProperty.call(object, fieldName)
+    ) {
       return true
     }
     return checkers[errorName]({ arg: errorArg, fieldName })
@@ -281,7 +292,7 @@ export const getValidator = ({
 
   // Go through the constraints
   for (const errorName in constraints) {
-    if (constraints.hasOwnProperty(errorName)) {
+    if (Object.prototype.hasOwnProperty.call(constraints, errorName)) {
       const fieldsOrArgs = constraints[errorName]
       // No arguments, field names are passed directly
       // eslint-disable-next-line
@@ -299,7 +310,7 @@ export const getValidator = ({
       // Error arguments, multiple cases. eg: maximum
       else {
         for (const errorArg in fieldsOrArgs) {
-          if (fieldsOrArgs.hasOwnProperty(errorArg)) {
+          if (Object.prototype.hasOwnProperty.call(fieldsOrArgs, errorArg)) {
             const fields = fieldsOrArgs[errorArg]
             fields.forEach(fieldName => {
               if (!check({ errorName, fieldName, errorArg })) {
@@ -319,7 +330,7 @@ export const getValidator = ({
   customConstraints.forEach(({ message, constraint, field }) => {
     if (!constraint(getters, object)) {
       field = field === null ? 'nonFieldErrors' : field
-      if (errorMessages.hasOwnProperty(field)) {
+      if (Object.prototype.hasOwnProperty.call(errorMessages, field)) {
         errorMessages[field].push(message)
       } else {
         errorMessages[field] = [message]
@@ -333,7 +344,7 @@ export const getValidator = ({
   let flatErrorMessage = ''
   let errorsCount = 0
   for (const field in errorMessages) {
-    if (errorMessages.hasOwnProperty(field)) {
+    if (Object.prototype.hasOwnProperty.call(errorMessages, field)) {
       const errors = errorMessages[field]
       if (errors.length) {
         flatErrorMessage += errors.join(', ') + '\n'

store/schedule.js

@@ -176,7 +176,7 @@ export const getters = {
     ),
 
   isDeleted: (state, getters) => (course, mutation) => {
-    if (!mutation.hasOwnProperty('event')) return false
+    if (!Object.prototype.hasOwnProperty.call(mutation, 'event')) return false
     if (course.uuid !== mutation.event.uuid) return false
     if (!mutation.deleted_start || !mutation.deleted_end) return false
     return (
@@ -185,7 +185,7 @@ export const getters = {
     )
   },
   isAdded: (state, getters) => (course, mutation) => {
-    if (!mutation.hasOwnProperty('event')) return false
+    if (!Object.prototype.hasOwnProperty.call(mutation, 'event')) return false
     if (course.uuid !== mutation.event.uuid) return false
     if (!mutation.added_start || !mutation.added_end) return false
     return (
@@ -457,8 +457,8 @@ export const getters = {
           /* Checks if -- when the mutation is rescheduled -- no courses already exists between the chosen dates */
           if (
             !(
-              object.hasOwnProperty('added_start') &&
-              object.hasOwnProperty('added_end')
+              Object.prototype.hasOwnProperty.call(object, 'added_start') &&
+              Object.prototype.hasOwnProperty.call(object, 'added_end')
             )
           )
             return !getters
@@ -478,8 +478,8 @@ export const getters = {
           /* Checks if -- when the mutation is deleted -- some course(s) already exists between the chosen dates */
           if (
             !(
-              object.hasOwnProperty('deleted_start') &&
-              object.hasOwnProperty('deleted_end')
+              Object.prototype.hasOwnProperty.call(object, 'deleted_start') &&
+              Object.prototype.hasOwnProperty.call(object, 'deleted_end')
             )
           )
             return (
@@ -501,8 +501,8 @@ export const getters = {
           /* Checks if -- when the mutation is deleted -- no more than one course already exists between the chosen dates */
           if (
             !(
-              object.hasOwnProperty('deleted_start') &&
-              object.hasOwnProperty('deleted_end')
+              Object.prototype.hasOwnProperty.call(object, 'deleted_start') &&
+              Object.prototype.hasOwnProperty.call(object, 'deleted_end')
             )
           )
             return (

store/settings.js

@@ -166,7 +166,7 @@ export const actions = {
   async patch({ commit, getters }, { key, modifications, early }) {
     early = early || false
     const type = getters.one(key).type
-    if (modifications.hasOwnProperty('value')) {
+    if (Object.prototype.hasOwnProperty.call(modifications, 'value')) {
       modifications.value = stringifiedValue({
         value: modifications.value,
         type,
@@ -313,7 +313,7 @@ const parsedValue = (
         parsed = parseISO(value)
         break
 
-      case 'DATERANGE':
+      case 'DATERANGE': {
         // Gets the start and stop dates.
         let dates = value.split(' - ')
         // Parse each date
@@ -334,7 +334,7 @@ const parsedValue = (
             ? { start: dates[0], end: dates[1] }
             : (parsed = dates[0])
         break
-
+      }
       case 'TIMERANGE':
         // TODO
         throw new Error('TIMERANGE setting types are not available yet.')

store/subjects.js

@@ -23,7 +23,7 @@ export const getters = {
       uuid: firstBy('uuid'),
     }
 
-    if (!sorters.hasOwnProperty(what)) {
+    if (!Object.prototype.hasOwnProperty.call(sorters, what)) {
       console.warn(
         `subjects/orderBy: unknown ordering method '${what}': defaulting to UUID sorting`
       )

store/theme.js

@@ -7,7 +7,7 @@ export const state = () => ({
 
 export const getters = {
   current: state => state.current,
-  resolveAuto: (state, getters, rootState) => {
+  resolveAuto: (_, __, rootState) => {
     const { latitude, longitude } = rootState.location
     const now = rootState.now
     const { sunrise, sunset } = SunCalc.getTimes(now, latitude, longitude)

stylelint.config.js

@@ -3,6 +3,6 @@ module.exports = {
   // https://stylelint.io/user-guide/configuration
   rules: {
     'block-no-empty': null,
-    'color-no-invalid-hex': true
-  }
+    'color-no-invalid-hex': true,
+  },
 }

tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "target": "es2018",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "lib": [
+            "esnext",
+            "esnext.asynciterable",
+            "dom"
+        ],
+        "esModuleInterop": true,
+        "allowJs": true,
+        "sourceMap": true,
+        "strict": true,
+        "noEmit": true,
+        "baseUrl": ".",
+        "paths": {
+            "~/*": [
+                "./*"
+            ],
+            "@/*": [
+                "./*"
+            ]
+        },
+        "types": [
+            "@types/node",
+            "@nuxt/types"
+        ]
+    },
+    "exclude": [
+        "node_modules/**",
+        "static/*.js"
+    ]
+}

utils/colors.js

@@ -0,0 +1,12 @@
+import tinycolor from 'tinycolor2'
+
+export const lightColor = baseColor => {
+  /* see https://codepen.io/ewen-lbh/pen/dyYKWVL */
+  const { h, s } = tinycolor(baseColor).toHsl()
+  return tinycolor({ h, s: 2 * s, l: 0.9 }).toHslString()
+}
+export const darkColor = baseColor => {
+  /* see https://codepen.io/ewen-lbh/pen/dyYKWVL */
+  const { h, s } = tinycolor(baseColor).toHsl()
+  return tinycolor({ h, s: 0.25 * s, l: 0.4 }).toHslString()
+}