(fixes #508) Vue 2 to 3 upgrade (#515)

* 508 Vue upgrade initial change
CodeForPoznan · May 24, 2023 · fa0574e · fa0574e
1 parent 7eec3fb
commit fa0574e
Show file tree

Hide file tree

Showing 41 changed files with 5,007 additions and 6,726 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -29,7 +29,7 @@
     "jest/valid-expect": "error"
   },
   "parserOptions": {
-    "parser": "babel-eslint"
+    "parser": "@babel/eslint-parser"
   },
   "settings": {
     "import/resolver": {

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:12
+FROM node:19
 
 EXPOSE 8080
 

diff --git a/frontend/babel.config.js b/frontend/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@vue/app']
+  presets: ['@vue/app'],
 };
diff --git a/frontend/jest.config.js b/frontend/jest.config.js
@@ -4,5 +4,5 @@ module.exports = {
   testMatch: ['**/?(*.)+(spec).js'],
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*', '!src/assets/**'],
-  transformIgnorePatterns: ['/node_modules/(?!(vue-scrollactive)/)']
+  transformIgnorePatterns: ['/node_modules/(?!(vue-scrollactive)/)'],
 };
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,41 +11,48 @@
     "lint:fix": "vue-cli-service lint "
   },
   "dependencies": {
-    "@mdi/font": "^4.5.95",
-    "apexcharts": "^3.27.1",
-    "axios": "^0.21.1",
-    "eslint-plugin-jest": "^24.5.0",
+    "@mdi/font": "^7.2.96",
+    "apexcharts": "^3.37.3",
+    "axios": "^1.3.5",
+    "eslint-plugin-jest": "^27.2.1",
     "lodash": "^4.17.21",
-    "vue": "^2.6.10",
-    "vue-apexcharts": "^1.6.1",
-    "vue-router": "^3.3.4",
+    "vue": "3.2.47",
+    "vue3-apexcharts": "^1.4.1",
+    "vue-router": "^4.1.6",
     "vue-scrollactive": "^0.9.3",
-    "vuelidate": "^0.7.4",
-    "vuetify": "^2.6.10",
-    "vuex": "^3.0.1",
-    "vue-gtag": "^1.16.1"
+    "@vuelidate/core": "^2.0.2",
+    "@vuelidate/validators": "^2.0.2",
+    "vuetify": "3.2.2",
+    "vuex": "^4.1.0",
+    "vue-gtag": "^2.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-service": "^3.8.0",
-    "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^5.0.0-beta.4",
-    "husky": "^2.3.0",
-    "prettier": "^1.17.1",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/test-utils": "^2.3.2",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.10.0",
+    "husky": "^8.0.3",
+    "prettier": "^2.8.7",
     "sass": "~1.32.12",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "vue-cli-plugin-vuetify": "^0.6.3",
-    "vue-template-compiler": "^2.6.10",
-    "vuetify-loader": "^1.3.0",
-    "webpack": "^4.39.3"
+    "sass-loader": "^13.2.2",
+    "style-loader": "^3.3.2",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-plugin-vuetify": "^2.0.0",
+    "@babel/core": "^7.0.0",
+    "jest": "^27.1.0",
+    "@vue/compiler-dom": "^3.2.47",
+    "@vue/server-renderer": "^3.2.47",
+    "@vue/babel-preset-app": "^5.0.8",
+    "@babel/eslint-parser": "^7.21.3"
+
   },
   "postcss": {
     "plugins": {

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="app">
     <v-app>
       <router-view></router-view>
     </v-app>
@@ -8,6 +8,6 @@
 
 <script>
 export default {
-  name: 'app'
+  name: 'app',
 };
 </script>
diff --git a/frontend/src/assets/projects.js b/frontend/src/assets/projects.js
@@ -12,14 +12,14 @@ const projects = [
     stack: [
       {
         name: 'Angular',
-        documentation: 'https://angular.io/'
+        documentation: 'https://angular.io/',
       },
       {
         name: 'Django',
-        documentation: 'https://docs.djangoproject.com/pl/2.2/'
-      }
+        documentation: 'https://docs.djangoproject.com/pl/2.2/',
+      },
     ],
-    website: ''
+    website: '',
   },
   {
     badge: 'active',
@@ -33,20 +33,20 @@ const projects = [
     partner: [
       {
         name: 'Polska Akcja Humanitarna',
-        link: 'https://www.pah.org.pl/'
-      }
+        link: 'https://www.pah.org.pl/',
+      },
     ],
     stack: [
       {
         name: 'React.js',
-        documentation: 'https://pl.reactjs.org/docs/getting-started.html'
+        documentation: 'https://pl.reactjs.org/docs/getting-started.html',
       },
       {
         name: 'Django',
-        documentation: 'https://docs.djangoproject.com/pl/2.2/'
-      }
+        documentation: 'https://docs.djangoproject.com/pl/2.2/',
+      },
     ],
-    website: 'https://github.com/CodeForPoznan/pah-fm#readme'
+    website: 'https://github.com/CodeForPoznan/pah-fm#readme',
   },
   {
     badge: 'active',
@@ -61,28 +61,28 @@ const projects = [
     partner: [
       {
         name: 'Poradnia Psychologiczno-Pedagogiczna w Grodzisku Wielkopolskim',
-        link: 'http://www.grodziskwlkp.naszaporadnia.com/aktualnosci'
+        link: 'http://www.grodziskwlkp.naszaporadnia.com/aktualnosci',
       },
       {
         name: 'Poradnia Pscyhologiczno-Pedagogiczna we Wrześni',
-        link: 'https://ppp-wrzesnia.pl/'
-      }
+        link: 'https://ppp-wrzesnia.pl/',
+      },
     ],
     stack: [
       {
         name: 'React',
-        documentation: 'https://pl.reactjs.org/docs/getting-started.html'
+        documentation: 'https://pl.reactjs.org/docs/getting-started.html',
       },
       {
         name: 'Electron',
-        documentation: 'https://www.electronjs.org/docs'
+        documentation: 'https://www.electronjs.org/docs',
       },
       {
         name: 'SQLite',
-        documentation: 'https://www.sqlite.org/docs.html'
-      }
+        documentation: 'https://www.sqlite.org/docs.html',
+      },
     ],
-    website: 'https://alinka.io'
+    website: 'https://alinka.io',
   },
   {
     badge: 'maintained',
@@ -95,7 +95,7 @@ const projects = [
     name: 'Bank Empatii',
     partner: [],
     stack: [],
-    website: 'http://bankempatii.pl/'
+    website: 'http://bankempatii.pl/',
   },
   {
     badge: 'parked',
@@ -111,10 +111,10 @@ const projects = [
     stack: [
       {
         name: 'React',
-        documentation: 'https://pl.reactjs.org/docs/getting-started.html'
-      }
+        documentation: 'https://pl.reactjs.org/docs/getting-started.html',
+      },
     ],
-    website: 'https://streetmix.net'
+    website: 'https://streetmix.net',
   },
   {
     badge: 'parked',
@@ -127,7 +127,7 @@ const projects = [
     name: 'Wysadź ulicę',
     partner: [],
     stack: [],
-    website: ''
+    website: '',
   },
   {
     badge: 'active',
@@ -143,22 +143,22 @@ const projects = [
     stack: [
       {
         name: 'Vue.js',
-        documentation: 'https://vuejs.org/v2/guide/'
+        documentation: 'https://vuejs.org/v2/guide/',
       },
       {
         name: 'Vuetify',
-        documentation: 'https://vuetifyjs.com/en/getting-started/quick-start/'
+        documentation: 'https://vuetifyjs.com/en/getting-started/quick-start/',
       },
       {
         name: 'Vuex',
-        documentation: 'https://vuex.vuejs.org/guide/'
+        documentation: 'https://vuex.vuejs.org/guide/',
       },
       {
         name: 'Flask',
-        documentation: 'https://flask.palletsprojects.com/en/1.0.x/'
-      }
+        documentation: 'https://flask.palletsprojects.com/en/1.0.x/',
+      },
     ],
-    website: 'https://dev.codeforpoznan.pl/'
+    website: 'https://dev.codeforpoznan.pl/',
   },
   {
     badge: 'parked',
@@ -172,29 +172,29 @@ const projects = [
     partner: [
       {
         name: 'Watchdog Polska',
-        link: 'https://siecobywatelska.pl/'
-      }
+        link: 'https://siecobywatelska.pl/',
+      },
     ],
     stack: [
       {
         name: 'React.js',
-        documentation: 'https://reactjs.org/docs/getting-started.html'
+        documentation: 'https://reactjs.org/docs/getting-started.html',
       },
       {
         name: 'PostgresSQL',
-        documentation: 'https://www.postgresql.org/'
+        documentation: 'https://www.postgresql.org/',
       },
       {
         name: 'Django',
-        documentation: 'https://docs.djangoproject.com/en/3.2/'
+        documentation: 'https://docs.djangoproject.com/en/3.2/',
       },
       {
         name: 'Min.io',
-        documentation: 'https://docs.min.io/'
-      }
+        documentation: 'https://docs.min.io/',
+      },
     ],
-    website: 'dev.small-eod.siecobywatelska.pl'
-  }
+    website: 'dev.small-eod.siecobywatelska.pl',
+  },
 ];
 
 export default projects;
diff --git a/frontend/src/components/Login/Login.spec.js → ...omponents/Dashboard/DashboardMain.spec.js b/frontend/src/components/Login/Login.spec.js → ...omponents/Dashboard/DashboardMain.spec.js
@@ -1,11 +1,11 @@
+import DashboardMain from './DashboardMain';
 import { getMountWithProviders } from '../../../jest/utils';
-import Login from './Login';
 
-describe('Login component', () => {
+describe('DashboardMain component', () => {
   const mountWithProviders = getMountWithProviders();
 
   it('renders correctly', () => {
-    const wrapper = mountWithProviders(Login);
+    const wrapper = mountWithProviders(DashboardMain);
 
     expect(wrapper).toBeDefined();
   });

diff --git a/...nd/src/components/Dashboard/Dashboard.vue → ...rc/components/Dashboard/DashboardMain.vue b/...nd/src/components/Dashboard/Dashboard.vue → ...rc/components/Dashboard/DashboardMain.vue
@@ -21,25 +21,25 @@
 <script>
 import { mapGetters } from 'vuex';
 import DashboardHeader from './Header/DashboardHeader.vue';
-import Hacknight from './Hacknight/Hacknight.vue';
-import Participants from './Participants/Participants.vue';
+import HacknightWrapper from './Hacknight/HacknightWrapper.vue';
+import ParticipantsList from './Participants/ParticipantsList.vue';
 import HacknightsParticipants from './HacknightsParticipants/HacknightsParticipants.vue';
 import ParticipantsChart from './ParticipantsChart/ParticipantsChart.vue';
 
 export default {
   components: {
     'app-dashboard-header': DashboardHeader,
-    'app-hacknight': Hacknight,
+    'app-hacknight': HacknightWrapper,
     'app-hacknights-participants': HacknightsParticipants,
-    'app-participants': Participants,
-    ParticipantsChart
+    'app-participants': ParticipantsList,
+    ParticipantsChart,
   },
   computed: {
-    ...mapGetters('hacknight', ['getHacknight'])
+    ...mapGetters('hacknight', ['getHacknight']),
   },
   created() {
     this.$store.dispatch('participant/getParticipants');
-  }
+  },
 };
 </script>
 

diff --git a/...shboard/Participants/Participants.spec.js → ...hboard/Hacknight/HacknightWrapper.spec.js b/...shboard/Participants/Participants.spec.js → ...hboard/Hacknight/HacknightWrapper.spec.js
@@ -1,11 +1,11 @@
+import HacknightWrapper from './HacknightWrapper';
 import { getMountWithProviders } from '../../../../jest/utils';
-import Participants from './Participants';
 
-describe('Participants component', () => {
+describe('HacknightWrapper component', () => {
   const mountWithProviders = getMountWithProviders();
 
   it('renders correctly', () => {
-    const wrapper = mountWithProviders(Participants);
+    const wrapper = mountWithProviders(HacknightWrapper);
 
     expect(wrapper).toBeDefined();
   });

diff --git a/...ponents/Dashboard/Hacknight/Hacknight.vue → .../Dashboard/Hacknight/HacknightWrapper.vue b/...ponents/Dashboard/Hacknight/Hacknight.vue → .../Dashboard/Hacknight/HacknightWrapper.vue
@@ -78,7 +78,7 @@ export default {
     return {
       selectedHacknight: null,
       date: null,
-      datePicker: false
+      datePicker: false,
     };
   },
   created() {
@@ -98,14 +98,14 @@ export default {
       const hacknightDates = this.getHacknights.flatMap(({ date }) => [date]);
 
       return !hacknightDates.includes(val);
-    }
+    },
   },
   computed: {
     ...mapGetters('hacknight', ['getHacknights', 'getHacknight', 'getError']),
     getTodayDate() {
       return new Date().toISOString().slice(0, 10);
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>