[Vue Rewrite] Start Vuex store

.eslintrc.js

@@ -17,6 +17,30 @@ module.exports = {
 		'@vue/standard',
 		'@vue/typescript/recommended',
 		'@nextcloud',
+		'plugin:@typescript-eslint/recommended',
 	],
 	ignorePatterns: ['*.d.ts'],
+	rules: {
+		'no-console': 'warn',
+		'@typescript-eslint/no-var-requires': 'off',
+
+		// TODO: Trouble importing .ts files into .vue files for some reason?
+		'import/extensions': 'off',
+		'n/no-missing-import': 'off',
+	},
+	settings: {
+		'import/resolver': {
+			node: {
+				extensions: ['.ts'],
+			},
+		},
+	},
+	overrides: [
+		{
+		 files: ['*spec.ts', 'tests/javascript/unit/setup.ts'],
+			rules: {
+				'@typescript-eslint/no-explicit-any': 'off',
+			},
+		},
+	 ],
 }

package.json

@@ -7,8 +7,8 @@
     "build": "NODE_ENV=production webpack --progress --config webpack.js",
     "dev": "NODE_ENV=development webpack --progress --config webpack.js",
     "watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
-    "lint": "eslint --ext .js,.vue src",
-    "lint:fix": "eslint --ext .js,.vue src --fix",
+    "lint": "eslint --ext .js,.vue,.ts src",
+    "lint:fix": "eslint --ext .js,.vue,.ts src --fix",
     "stylelint": "stylelint **/*.css **/*.scss **/*.vue",
     "stylelint:fix": "stylelint **/*.css **/*.scss **/*.vue --fix",
     "test": "jest --verbose",
@@ -82,7 +82,7 @@
     "eslint": "^8.6.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-import-resolver-webpack": "^0.12.2",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsdoc": "^39.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
@@ -118,13 +118,14 @@
     "vue-color": "^2.8.1",
     "vue-eslint-parser": "^9.0.2",
     "vue-jest": "^3.0.7",
-    "vue-loader": "^15.9.8",
+    "vue-loader": "^15.10.1",
     "vue-material-design-icons": "^5.1.2",
     "vue-multiselect": "^2.1.6",
     "vue-template-compiler": "^2.6.14",
     "vue2-datepicker": "^3.11.0",
     "webpack": "^5.72.1",
-    "webpack-cli": "^4.9.2"
+    "webpack-cli": "^4.9.2",
+    "webpack-merge": "^5.8.0"
   },
   "jest": {
     "preset": "ts-jest",

src/App.vue

@@ -13,15 +13,17 @@ import Vue from 'vue'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import Sidebar from './components/Sidebar.vue'
+import { ACTIONS } from './store'
 
 export default Vue.extend({
 	components: {
 		NcContent,
 		Sidebar,
 		NcAppContent,
 	},
-	created() {
-		this.$store.dispatch('loadFolder')
+	async created() {
+		await this.$store.dispatch(ACTIONS.FETCH_FOLDERS)
+		await this.$store.dispatch(ACTIONS.FETCH_FEEDS)
 	},
 })
 </script>

src/components/AddFeed.vue

@@ -107,12 +107,15 @@
 <script lang="ts">
 
 import Vue from 'vue'
+
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
-import { Folder } from '../types/Folder.vue'
-import { Feed } from '../types/Feed.vue'
+
+import { Folder } from '../types/Folder'
+import { Feed } from '../types/Feed'
+import { ACTIONS } from '../store'
 
 type AddFeedState = {
 	folder: Folder;
@@ -139,7 +142,7 @@ export default Vue.extend({
 	},
 	data: (): AddFeedState => {
 		return {
-			folder: { name: '' },
+			folder: { name: '' } as Folder,
 			autoDiscover: true,
 			createNewFolder: false,
 			withBasicAuth: false,
@@ -158,7 +161,7 @@ export default Vue.extend({
 			this.createNewFolder = false
 		},
 		addFeed() {
-			this.$store.dispatch('addFeed', {
+			this.$store.dispatch(ACTIONS.ADD_FEED, {
 				feedReq: {
 					url: this.feed,
 					folder: this.folder,

src/components/AdminSettings.vue

@@ -107,9 +107,11 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 
 /**
+ * Debounce helper for method
+ * TODO: Should we remove this and use library?
  *
- * @param func
- * @param wait
+ * @param {Function} func function to debounce
+ * @param {number} wait milliseconds to wait
  */
 function debounce(func, wait) {
 	let timeout

src/components/Explore.vue

@@ -33,12 +33,15 @@
 <script lang="ts">
 
 import Vue from 'vue'
+
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import axios from '@nextcloud/axios'
-import AddFeed from './AddFeed.vue'
 import * as router from '@nextcloud/router'
-import { ExploreSite } from '../types/ExploreSite.vue'
-import { Feed } from '../types/Feed.vue'
+
+import AddFeed from './AddFeed.vue'
+
+import { ExploreSite } from '../types/ExploreSite'
+import { Feed } from '../types/Feed'
 
 const ExploreComponent = Vue.extend({
 	components: {
@@ -47,7 +50,7 @@ const ExploreComponent = Vue.extend({
 	},
 	data: () => {
 		const exploreSites: ExploreSite[] = []
-		const feed: Feed = {}
+		const feed: Feed = {} as Feed
 		const showAddFeed = false
 
 		return {