Merge pull request #22 from Need2Watch/js-to-ts

JS to TS
Need2Watch · Aug 26, 2020 · 0bf5570 · 0bf5570
2 parents b8fa8be + b2af029
commit 0bf5570
Show file tree

Hide file tree

Showing 34 changed files with 930 additions and 595 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,7 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-    '@babel/preset-env',
-    '@babel/preset-react'
-  ]
-}
+  presets: ['@vue/cli-plugin-babel/preset'],
+};
diff --git a/package.json b/package.json
@@ -16,14 +16,16 @@
     "core-js": "^3.6.4",
     "cors": "^2.8.5",
     "material-design-icons-iconfont": "^5.0.1",
+    "ts-loader": "^8.0.3",
     "uuid": "^8.1.0",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
+    "vue-class-component": "^7.2.5",
     "vue-jest": "^3.0.6",
+    "vue-property-decorator": "^9.0.0",
     "vue-router": "^3.2.0",
     "vue-session": "^1.0.0",
     "vuelidate": "^0.7.5",
-    "vuesax": "^3.11.15",
     "vuetify": "2.3.9",
     "vuex": "^3.4.0",
     "vuex-persist": "^2.2.0"
@@ -41,20 +43,27 @@
     "@storybook/addon-viewport": "^5.2",
     "@storybook/addons": "^5.2",
     "@storybook/vue": "^6.0.16",
+    "@typescript-eslint/eslint-plugin": "^3.10.1",
+    "@typescript-eslint/parser": "^3.10.1",
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-plugin-router": "~4.3.0",
+    "@vue/cli-plugin-typescript": "^4.5.4",
     "@vue/cli-service": "~4.3.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-preset-vue": "^2.0.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^2.1.0",
     "prism-react-renderer": "^0.1.7",
     "prismjs": "^1.17.1",
     "react-is": "^16.13.1",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
+    "typescript": "^4.0.2",
     "vue-cli-plugin-vuetify": "~2.0.5",
     "vue-cli-plugin-vuetify-storybook": "~0.2.0",
     "vue-docgen-loader": "^1.5.0",
@@ -72,7 +81,10 @@
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "babel-eslint",
+      "ecmaFeatures": {
+        "legacyDecorators": true
+      }
     },
     "rules": {}
   },

diff --git a/src/App.vue b/src/App.vue
@@ -7,16 +7,15 @@
   </v-app>
 </template>
 
-<script>
-import N2wNavBar from './components/mainView/N2wNavBar';
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import N2wNavBar from './components/mainView/N2wNavBar.vue';
 
-export default {
-  name: 'App',
-  components: {
-    N2wNavBar,
-  },
-  data: () => ({}),
-};
+@Component({
+  components: { N2wNavBar },
+})
+export default class App extends Vue {}
 </script>
 <style>
 #app {

diff --git a/src/components/calendarView/N2wCalendarEventsList.vue b/src/components/calendarView/N2wCalendarEventsList.vue
@@ -12,14 +12,11 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
+import { mapGetters } from 'vuex';
 export default {
   name: 'N2wCalendar',
-  data: () => ({}),
-  computed: mapState({
-    loggedUser: (state) => state.loggedUser,
-    scheduledEvents: (state) => state.scheduledEvents,
-  }),
+  computed: {
+    ...mapGetters({ scheduledEvents: 'scheduledEvents/scheduledEvents' }),
+  },
 };
 </script>
diff --git a/src/components/mainView/N2wNavBar.vue b/src/components/mainView/N2wNavBar.vue
@@ -80,22 +80,22 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex';
-import N2wSearchBar from './N2wSearchBar';
-import N2wSidebar from './N2wSidebar';
-export default {
-  name: 'N2wNavBar',
-  components: {
-    N2wSearchBar,
-    N2wSidebar,
-  },
-  props: {
-    sidebar: {
-      type: Boolean,
-      default: false,
-    },
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import N2wSearchBar from './N2wSearchBar.vue';
+import N2wSidebar from './N2wSidebar.vue';
+import { mapGetters } from 'vuex';
+
+@Component({
+  components: { N2wSearchBar, N2wSidebar },
+  computed: {
+    ...mapGetters({ loggedUser: 'loggedUser/loggedUser' }),
   },
+})
+export default class N2wNavBar extends Vue {
+  @Prop({ default: false })
+  sidebar: boolean = false;
+
   data() {
     return {
       activeBtn: '',
@@ -126,28 +126,23 @@ export default {
       ],
       items: [{ title: 'Edit Profile', path: '/editProfile' }],
     };
-  },
-  methods: {
-    logOut() {
-      let user = {
-        firstName: '',
-        lastName: '',
-        username: '',
-        email: '',
-        password: '',
-        userId: '',
-        country: '',
-        city: '',
-        profilePicture: '',
-      };
-      this.$store.dispatch('loggedUser/loadUser', user);
-      this.$router.push('/signIn');
-    },
-  },
-  computed: mapState({
-    loggedUser: (state) => state.loggedUser,
-  }),
-};
+  }
+  logOut() {
+    let user = {
+      firstName: '',
+      lastName: '',
+      username: '',
+      email: '',
+      password: '',
+      userId: '',
+      country: '',
+      city: '',
+      profilePicture: '',
+    };
+    this.$store.dispatch('loggedUser/loadUser', user);
+    this.$router.push('/signIn');
+  }
+}
 </script>
 <style scoped>
 .activeBtn {

diff --git a/src/components/mainView/N2wSearchBar.vue b/src/components/mainView/N2wSearchBar.vue
@@ -9,63 +9,33 @@
   ></v-text-field>
 </template>
 
-<script>
+<script lang="ts">
 import axios from 'axios';
-
-export default {
-  name: 'N2wSearchBar',
-  data: () => ({
-    movieName: '',
-  }),
-
-  computed: {
-    loggedUser() {
-      return this.$store.state.loggedUser;
-    },
-  },
-
-  methods: {
-    submitSearch() {
-      const previousThis = this;
-      axios
-        .post('http://127.0.0.1:5000/movies/search', {
-          title: this.movieName,
-          user_id: this.loggedUser.userId,
-        })
-        .then(function (response) {
-          let movies = response.data;
-          previousThis.$store.dispatch('movies/loadMovies', movies);
-          previousThis.$router.push('/search');
-        })
-        .catch(function (error) {
-          console.log(error);
-        });
-    },
-  },
-
-  watch: {
-    search() {
-      // Items have already been loaded
-      if (this.items.length > 0) return;
-
-      // Items have already been requested
-      if (this.isLoading) return;
-
-      this.isLoading = true;
-
-      // Lazily load input items
-      fetch('http://127.0.0.1/movies/search')
-        .then((res) => res.json())
-        .then((res) => {
-          const { count, entries } = res;
-          this.count = count;
-          this.entries = entries;
-        })
-        .catch((err) => {
-          console.log(err);
-        })
-        .finally(() => (this.isLoading = false));
-    },
-  },
-};
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class N2wSearchBar extends Vue {
+  movieName: string = '';
+
+  get loggedUser() {
+    return this.$store.state.loggedUser;
+  }
+
+  submitSearch() {
+    const previousThis = this;
+    axios
+      .post('http://127.0.0.1:5000/movies/search', {
+        title: this.movieName,
+        user_id: this.loggedUser.userId,
+      })
+      .then(function (response) {
+        let movies = response.data;
+        previousThis.$store.dispatch('movies/loadMovies', movies);
+        previousThis.$router.push('/search');
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  }
+}
 </script>
diff --git a/src/components/mainView/N2wSidebar.vue b/src/components/mainView/N2wSidebar.vue
@@ -21,37 +21,31 @@
   </v-navigation-drawer>
 </template>
 
-<script>
-export default {
-  name: 'N2wSidebar',
-  props: {
-    value: {
-      type: Boolean,
-      default: false,
-    },
-    sidebarItems: {
-      type: Array,
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    logOut() {
-      let user = {
-        firstName: '',
-        lastName: '',
-        username: '',
-        email: '',
-        password: '',
-        userId: '',
-        country: '',
-        city: '',
-        profilePicture: '',
-      };
-      this.$store.dispatch('loggedUser/loadUser', user);
-      this.$router.push('/signIn');
-    },
-  },
-};
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class N2wSidebar extends Vue {
+  @Prop({ default: false })
+  value: boolean = false;
+
+  @Prop()
+  sidebarItems: Array<Object> = [];
+
+  logOut() {
+    let user = {
+      firstName: '',
+      lastName: '',
+      username: '',
+      email: '',
+      password: '',
+      userId: '',
+      country: '',
+      city: '',
+      profilePicture: '',
+    };
+    this.$store.dispatch('loggedUser/loadUser', user);
+    this.$router.push('/signIn');
+  }
+}
 </script>
diff --git a/src/components/moviesView/N2wCinemaCard.vue b/src/components/moviesView/N2wCinemaCard.vue
@@ -15,8 +15,8 @@
   </v-card>
 </template>
 <script>
-import { mapState } from 'vuex';
 import axios from 'axios';
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'N2wCinemaCard',
@@ -40,8 +40,8 @@ export default {
     },
   },
   computed: {
-    ...mapState({
-      user: (state) => state.loggedUser,
+    ...mapGetters({
+      loggedUser: 'loggedUser/loggedUser',
     }),
     filmPoster() {
       if (this.image) {
@@ -61,8 +61,8 @@ export default {
   methods: {
     goToMovie() {
       let route = 'http://127.0.0.1:5000/movies/' + this.id;
-      if (this.user.user_id) {
-        route += '/' + this.user.user_id;
+      if (this.loggedUser.userId) {
+        route += '/' + this.loggedUser.userId;
       }
       console.debug(route);
       const previousThis = this;