From 6fc143e6e590719744a29e8939ad94709465cf70 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sun, 6 Aug 2023 12:37:39 -0700
Subject: [PATCH 01/13] add feed pretty much works

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue | 214 +++++++++++++++++++++----------------
 src/components/Sidebar.vue |   7 +-
 src/store/feed.ts          |  34 +++---
 src/store/folder.ts        |  18 ++++
 4 files changed, 162 insertions(+), 111 deletions(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index af5d75937..5bf0c7389 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -6,83 +6,85 @@
 				name="feedform">
 				<fieldset ng-disabled="Navigation.addingFeed" style="padding: 16px">
 					<input type="text"
-						:value="feed"
-						ng-model="Navigation.feed.url"
-						ng-class="{'ng-invalid':
-												!Navigation.addingFeed &&
-												Navigation.feedUrlExists(Navigation.feed.url)
-											}"
+						v-model="feedUrl"
 						:placeholder="t('news', 'Web address')"
 						name="address"
 						pattern="[^\s]+"
 						required
-						autofocus>
+						autofocus
+                        style="width: 90%;">
 
-					<p class="error"
-						ng-show="!Navigation.addingFeed &&
-											Navigation.feedUrlExists(Navigation.feed.url)">
+					<p class="error" v-if="feedUrlExists()">
 						{{ t("news", "Feed exists already!") }}
 					</p>
+                    
 
 					<!-- select a folder -->
-					<NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
-						{{ t("news", "New folder") }}?
-					</NcCheckboxRadioSwitch>
-
-					<NcMultiselect v-if="!createNewFolder && folders"
-						v-model="folder"
-						:options="folders"
-						track-by="id"
-						label="name" />
-
-					<!-- add a folder -->
-					<input v-if="createNewFolder"
-						type="text"
-						ng-model="Navigation.feed.newFolder"
-						ng-class="{'ng-invalid':
-														!Navigation.addingFeed &&
-														!Navigation.addingFeed &&
-														Navigation.showNewFolder &&
-														Navigation.folderNameExists(Navigation.feed.newFolder)
-											}"
-						:placeholder="t('news', 'Folder name')"
-						name="folderName"
-						style="width: 90%"
-						required>
-
-					<p class="error"
-						ng-show="!Navigation.addingFeed &&
-											Navigation.folderNameExists(Navigation.feed.newFolder)">
-						{{ t("news", "Folder exists already!") }}
-					</p>
+                    <div style="display:flex;">
+                        <NcSelect v-if="!createNewFolder && folders"
+                            v-model="folder"
+                            :options="folders.folders"
+                            :placeholder="'-- ' + t('news', 'No folder') + ' --'"
+                            track-by="id"
+                            label="name"
+                            style="flex-grow: 1;" />
+
+                        <!-- add a folder -->
+                        <input v-if="createNewFolder"
+                            type="text"
+                            v-model="newFolderName"
+                            ng-class="{'ng-invalid':
+                                                            !Navigation.addingFeed &&
+                                                            !Navigation.addingFeed &&
+                                                            Navigation.showNewFolder &&
+                                                            Navigation.folderNameExists(Navigation.feed.newFolder)
+                                                }"
+                            :placeholder="t('news', 'Folder name')"
+                            name="folderName"
+                            style="flex-grow: 1; padding: 22px 12px; margin: 0px;"
+                            required>
+
+                        <NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
+                            {{ t("news", "New folder") }}?
+                        </NcCheckboxRadioSwitch>
+                    </div>
+
+                    <p class="error"
+                        v-if="folderNameExists()">
+                        {{ t("news", "Folder exists already!") }}
+                    </p>
 
 					<!-- basic auth -->
-
-					<NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch">
-						{{ t("news", "Credentials") }}?
-					</NcCheckboxRadioSwitch>
-
-					<div v-if="withBasicAuth" class="add-feed-basicauth">
-						<p class="warning">
-							{{
-								t(
-									"news",
-									"HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!"
-								)
-							}}
-						</p>
-						<input type="text"
-							ng-model="Navigation.feed.user"
-							:placeholder="t('news', 'Username')"
-							name="user"
-							autofocus>
-
-						<input type="password"
-							ng-model="Navigation.feed.password"
-							:placeholder="t('news', 'Password')"
-							name="password"
-							autocomplete="new-password">
-					</div>
+                    <p v-if="withBasicAuth" class="warning">
+                        {{
+                            t(
+                                "news",
+                                "HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!"
+                            )
+                        }}
+                    </p>
+
+                    <div style="display: flex">
+                        <NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch" style="flex-grow: 1;">
+                            {{ t("news", "Credentials") }}?
+                        </NcCheckboxRadioSwitch>
+
+                        <div v-if="withBasicAuth" class="add-feed-basicauth" style="flex-grow: 1;  display: flex;">
+                            <input type="text"
+                                ng-model="Navigation.feed.user"
+                                :placeholder="t('news', 'Username')"
+                                name="user"
+                                autofocus
+                                style="flex-grow: 1">
+
+                            <input type="password"
+                                ng-model="Navigation.feed.password"
+                                :placeholder="t('news', 'Password')"
+                                name="password"
+                                autocomplete="new-password"
+                                style="flex-grow: 1">
+                        </div>
+                    </div>
 
 					<NcCheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
 						{{ t("news", "Auto discover Feed") }}?
@@ -90,11 +92,7 @@
 
 					<NcButton :wide="true"
 						type="primary"
-						ng-disabled="Navigation.feedUrlExists(Navigation.feed.url) ||
-													(
-														Navigation.showNewFolder &&
-														Navigation.folderNameExists(folder.name)
-													)"
+						:disabled="disableAddFeed"
 						@click="addFeed()">
 						{{ t("news", "Subscribe") }}
 					</NcButton>
@@ -112,19 +110,25 @@ 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 NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
 import { ACTIONS } from '../store'
+import { mapState } from 'vuex'
+import axios from 'axios'
 
 type AddFeedState = {
-	folder: Folder;
+	folder?: Folder;
+    newFolderName: String;
+
 	autoDiscover: boolean;
 	createNewFolder: boolean;
 	withBasicAuth: boolean;
+    // feedUrlExists: boolean;
 
 	// from props
-	feed?: Feed;
+	feedUrl?: String;
 };
 
 export default Vue.extend({
@@ -133,53 +137,75 @@ export default Vue.extend({
 		NcCheckboxRadioSwitch,
 		NcButton,
 		NcMultiselect,
+        NcSelect
 	},
-	props: {
-		feed: {
-			type: String,
-			default: '',
-		},
-	},
+	// props: {
+	// 	feed: {
+	// 		type: String,
+	// 		default: '',
+	// 	},
+	// },
 	data: (): AddFeedState => {
 		return {
-			folder: { name: '' } as Folder,
+			folder: undefined,
+            newFolderName: '',
+
 			autoDiscover: true,
 			createNewFolder: false,
 			withBasicAuth: false,
+
+            feedUrl: ''
 		}
 	},
 	computed: {
+        // ...mapState(['folders']),
 		folders(): Folder[] {
 			return this.$store.state.folders
 		},
+        disableAddFeed(): boolean {
+            return this.feed === "" || this.feedUrlExists() || (this.createNewFolder && this.newFolderName === "" || this.folderNameExists())
+        }
 	},
 	methods: {
-		newFolder() {
-			this.createNewFolder = true
-		},
-		abortNewFolder() {
-			this.createNewFolder = false
-		},
-		addFeed() {
+        created() {
+
+        },
+
+		async addFeed() {
+            let url = this.feedUrl;
+
 			this.$store.dispatch(ACTIONS.ADD_FEED, {
 				feedReq: {
-					url: this.feed,
-					folder: this.folder,
-					autoDiscover: true,
+					url: this.feedUrl,
+					folder: this.createNewFolder ? { name: this.newFolderName } : this.folder,
+					autoDiscover: this.autoDiscover,
 				},
-			})
+			});
+            this.$emit('close');
 		},
+
+        feedUrlExists(): boolean {
+            // TODO: check feed url
+            console.log(this.feedUrl);
+
+            return false;
+        },
+        folderNameExists(): boolean {
+            // TODO: check folder name
+            console.log(this.newFolderName)
+            return false;
+        }
 	},
 })
 
 </script>
 
 <style scoped>
-input {
+/* input {
     width: 100%
 }
 
 .multiselect {
-    width: 100%
-}
+    width: 100% 
+}*/
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 7e88d97ff..00ee93311 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -33,10 +33,11 @@
 				</template>
 			</NcAppNavigationItem>
 
+            
 			<NcAppNavigationItem v-for="topLevelItem in topLevelNav"
-				:key="topLevelItem.name"
-				:title="topLevelItem.name"
-				icon="icon-folder"
+				:key="topLevelItem.name || topLevelItem.title"
+				:title="topLevelItem.name || topLevelItem.title"
+				:icon="topLevelItem.name !== undefined ? 'icon-folder': ''"
 				:allow-collapse="true">
 				<template #default>
 					<NcAppNavigationItem v-for="feed in topLevelItem.feeds"
diff --git a/src/store/feed.ts b/src/store/feed.ts
index fde3c1d28..646c4a22d 100644
--- a/src/store/feed.ts
+++ b/src/store/feed.ts
@@ -10,6 +10,7 @@ export const FEED_ACTION_TYPES = {
 }
 
 export const FEED_MUTATION_TYPES = {
+	ADD_FEED: 'ADD_FEED',
 	SET_FEEDS: 'SET_FEEDS',
 }
 
@@ -53,16 +54,23 @@ export const actions = {
 			autoDiscover: undefined, // TODO: autodiscover?
 		}
 
-		await axios.post(feedUrl, {
-			url: feed.url,
-			parentFolderId: feed.folderId,
-			title: null,
-			user: null,
-			password: null,
-			fullDiscover: feed.autoDiscover,
-		})
+		// Check that url is resolvable
+		try {
+			const response = await axios.post(feedUrl, {
+				url: feed.url,
+				parentFolderId: feed.folderId,
+				title: null,
+				user: null,
+				password: null,
+				fullDiscover: feed.autoDiscover,
+			})
 
-		commit('addFeed', feed)
+			commit(FEED_MUTATION_TYPES.ADD_FEED, response.data.feeds[0])
+		} catch(e) {
+				// TODO: show error to user if failure
+				console.log(e);
+				return;
+		}
 	},
 }
 
@@ -70,13 +78,11 @@ export const mutations = {
 	[FEED_MUTATION_TYPES.SET_FEEDS](state: AppState, feeds: Feed[]) {
 		feeds.forEach(it => {
 			state.feeds.push(it)
-			const folder = state.folders.find(folder => folder.id === it.folderId)
-			if (folder) {
-				folder.feeds.push(it)
-				folder.feedCount += it.unreadCount
-			}
 		})
 	},
+	[FEED_MUTATION_TYPES.ADD_FEED](state: AppState, feed: Feed) {
+		state.feeds.push(feed);
+	}
 }
 
 export default {
diff --git a/src/store/folder.ts b/src/store/folder.ts
index 8787101af..140d8b602 100644
--- a/src/store/folder.ts
+++ b/src/store/folder.ts
@@ -1,8 +1,10 @@
+import { Feed } from '@/types/Feed'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 import { AppState, ActionParams } from '../store'
 import { Folder } from '../types/Folder'
+import { FEED_MUTATION_TYPES } from './feed'
 
 export const FOLDER_ACTION_TYPES = {
 	FETCH_FOLDERS: 'FETCH_FOLDERS',
@@ -63,6 +65,22 @@ export const mutations = {
 		const index = state.folders.indexOf(folder)
 		state.folders.splice(index, 1)
 	},
+	[FEED_MUTATION_TYPES.SET_FEEDS](state: AppState, feeds: Feed[]) {
+		feeds.forEach(it => {
+			const folder = state.folders.find(folder => folder.id === it.folderId)
+			if (folder) {
+				folder.feeds.push(it)
+				folder.feedCount += it.unreadCount
+			}
+		});
+	},
+	[FEED_MUTATION_TYPES.ADD_FEED](state: AppState, feed: Feed) {
+		const folder = state.folders.find(folder => folder.id === feed.folderId)
+		if (folder) {
+			folder.feeds.push(feed)
+			folder.feedCount += feed.unreadCount
+		}
+	}
 }
 
 export default {

From 9d131c69396ff647cfb1958d4682eb16a7fb15a1 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Mon, 7 Aug 2023 10:43:41 -0700
Subject: [PATCH 02/13] cleanup of angular directives

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue | 59 +++++++++++++++++++-------------------
 src/components/Sidebar.vue |  2 +-
 src/store/feed.ts          |  9 ++++--
 3 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 5bf0c7389..db42b42c9 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -1,13 +1,12 @@
 <template>
 	<NcModal @close="$emit('close')">
-		<div id="new-feed" news-add-feed="Navigation.feed">
-			<form ng-submit="Navigation.createFeed(Navigation.feed)"
-				ng-init="Navigation.feed.autoDiscover=true"
-				name="feedform">
-				<fieldset ng-disabled="Navigation.addingFeed" style="padding: 16px">
+		<div id="new-feed">
+			<form name="feedform">
+				<fieldset style="padding: 16px">
 					<input type="text"
 						v-model="feedUrl"
 						:placeholder="t('news', 'Web address')"
+                        :class="{ 'invalid': feedUrlExists() }"
 						name="address"
 						pattern="[^\s]+"
 						required
@@ -23,7 +22,7 @@
                     <div style="display:flex;">
                         <NcSelect v-if="!createNewFolder && folders"
                             v-model="folder"
-                            :options="folders.folders"
+                            :options="folders"
                             :placeholder="'-- ' + t('news', 'No folder') + ' --'"
                             track-by="id"
                             label="name"
@@ -33,12 +32,7 @@
                         <input v-if="createNewFolder"
                             type="text"
                             v-model="newFolderName"
-                            ng-class="{'ng-invalid':
-                                                            !Navigation.addingFeed &&
-                                                            !Navigation.addingFeed &&
-                                                            Navigation.showNewFolder &&
-                                                            Navigation.folderNameExists(Navigation.feed.newFolder)
-                                                }"
+                            :class="{ 'invalid': folderNameExists() }"
                             :placeholder="t('news', 'Folder name')"
                             name="folderName"
                             style="flex-grow: 1; padding: 22px 12px; margin: 0px;"
@@ -71,14 +65,14 @@
 
                         <div v-if="withBasicAuth" class="add-feed-basicauth" style="flex-grow: 1;  display: flex;">
                             <input type="text"
-                                ng-model="Navigation.feed.user"
+                                v-model="feedUser"
                                 :placeholder="t('news', 'Username')"
                                 name="user"
                                 autofocus
                                 style="flex-grow: 1">
 
                             <input type="password"
-                                ng-model="Navigation.feed.password"
+                                v-model="feedPassword"
                                 :placeholder="t('news', 'Password')"
                                 name="password"
                                 autocomplete="new-password"
@@ -113,10 +107,7 @@ import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 import { Folder } from '../types/Folder'
-import { Feed } from '../types/Feed'
 import { ACTIONS } from '../store'
-import { mapState } from 'vuex'
-import axios from 'axios'
 
 type AddFeedState = {
 	folder?: Folder;
@@ -129,6 +120,8 @@ type AddFeedState = {
 
 	// from props
 	feedUrl?: String;
+    feedUser?: String;
+    feedPassword?: String;
 };
 
 export default Vue.extend({
@@ -154,13 +147,15 @@ export default Vue.extend({
 			createNewFolder: false,
 			withBasicAuth: false,
 
-            feedUrl: ''
+            feedUrl: '',
+            feedUser: '',
+            feedPassword: ''
 		}
 	},
 	computed: {
         // ...mapState(['folders']),
 		folders(): Folder[] {
-			return this.$store.state.folders
+			return this.$store.state.folders.folders
 		},
         disableAddFeed(): boolean {
             return this.feed === "" || this.feedUrlExists() || (this.createNewFolder && this.newFolderName === "" || this.folderNameExists())
@@ -179,20 +174,30 @@ export default Vue.extend({
 					url: this.feedUrl,
 					folder: this.createNewFolder ? { name: this.newFolderName } : this.folder,
 					autoDiscover: this.autoDiscover,
+                    user: this.feedUser === '' ? undefined : this.feedUser,
+                    password: this.feedPassword === '' ? undefined : this.feedPassword
 				},
 			});
             this.$emit('close');
 		},
 
         feedUrlExists(): boolean {
-            // TODO: check feed url
-            console.log(this.feedUrl);
+            for (let feed of this.$store.state.feeds.feeds) {
+                if (feed.url === this.feedUrl) {
+                    return true;
+                }
+            }
 
             return false;
         },
         folderNameExists(): boolean {
-            // TODO: check folder name
-            console.log(this.newFolderName)
+            if (this.createNewFolder) {
+                for (let folder of this.$store.state.folders.folders) {
+                if (folder.name === this.newFolderName) {
+                    return true;
+                }
+            }
+            }
             return false;
         }
 	},
@@ -201,11 +206,7 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-/* input {
-    width: 100%
+.invalid {
+    border: 1px solid rgb(251, 72, 72) !important;
 }
-
-.multiselect {
-    width: 100% 
-}*/
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 00ee93311..bf7e2b82e 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -102,7 +102,7 @@
 					</NcAppNavigationItem>
 				</template>
 				<template v-if="topLevelItem.feedCount > 0" #counter>
-					<CounterBubble>{{ topLevelItem.feedCount }}</CounterBubble>
+					<NcCounterBubble>{{ topLevelItem.feedCount }}</NcCounterBubble>
 				</template>
 				<template #actions>
 					<NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark read')">
diff --git a/src/store/feed.ts b/src/store/feed.ts
index 646c4a22d..6332fb988 100644
--- a/src/store/feed.ts
+++ b/src/store/feed.ts
@@ -34,7 +34,10 @@ export const actions = {
 
 		commit(FEED_MUTATION_TYPES.SET_FEEDS, feeds.data.feeds)
 	},
-	async [FEED_ACTION_TYPES.ADD_FEED]({ commit }: ActionParams, { feedReq }: { feedReq: { url: string; folder?: { id: number } } }) {
+	async [FEED_ACTION_TYPES.ADD_FEED](
+		{ commit }: ActionParams, 
+		{ feedReq }: { feedReq: { url: string; folder?: { id: number }, user?: string; password?: string; } })
+	{
 		let url = feedReq.url.trim()
 		if (!url.startsWith('http')) {
 			url = 'https://' + url
@@ -60,8 +63,8 @@ export const actions = {
 				url: feed.url,
 				parentFolderId: feed.folderId,
 				title: null,
-				user: null,
-				password: null,
+				user: feedReq.user ? feedReq.user : null,
+				password: feedReq.password ? feedReq.password : null,
 				fullDiscover: feed.autoDiscover,
 			})
 

From d77fab6598d96ddce01c29bc86d3be4aa21fa362 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Mon, 7 Aug 2023 11:30:19 -0700
Subject: [PATCH 03/13] clean up

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index db42b42c9..727e20cbf 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -116,7 +116,6 @@ type AddFeedState = {
 	autoDiscover: boolean;
 	createNewFolder: boolean;
 	withBasicAuth: boolean;
-    // feedUrlExists: boolean;
 
 	// from props
 	feedUrl?: String;
@@ -132,12 +131,6 @@ export default Vue.extend({
 		NcMultiselect,
         NcSelect
 	},
-	// props: {
-	// 	feed: {
-	// 		type: String,
-	// 		default: '',
-	// 	},
-	// },
 	data: (): AddFeedState => {
 		return {
 			folder: undefined,
@@ -153,7 +146,6 @@ export default Vue.extend({
 		}
 	},
 	computed: {
-        // ...mapState(['folders']),
 		folders(): Folder[] {
 			return this.$store.state.folders.folders
 		},

From 653c429e1f7f904d5d168e2d8ef2c6b0b83c4c43 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Mon, 7 Aug 2023 11:59:23 -0700
Subject: [PATCH 04/13] fix formatting

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 727e20cbf..589d6650d 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -185,11 +185,11 @@ export default Vue.extend({
         folderNameExists(): boolean {
             if (this.createNewFolder) {
                 for (let folder of this.$store.state.folders.folders) {
-                if (folder.name === this.newFolderName) {
-                    return true;
+                    if (folder.name === this.newFolderName) {
+                        return true;
+                    }
                 }
             }
-            }
             return false;
         }
 	},

From df90cde887abb34ff464d028baff230aa7a0be0d Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Mon, 7 Aug 2023 17:50:04 -0700
Subject: [PATCH 05/13] finished unit tests

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 package.json                                  |  3 +-
 src/components/AddFeed.vue                    |  7 +-
 tests/javascript/helpers/CSSStub.js           |  0
 .../unit/components/AddFeed.spec.ts           | 79 +++++++++++++++++--
 tests/javascript/unit/store/feed.spec.ts      | 71 ++++++++++-------
 5 files changed, 117 insertions(+), 43 deletions(-)
 create mode 100644 tests/javascript/helpers/CSSStub.js

diff --git a/package.json b/package.json
index 0cf1f6f76..3d58fb272 100644
--- a/package.json
+++ b/package.json
@@ -138,7 +138,8 @@
     ],
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/src/$1",
-      "^Components/(.*)$": "<rootDir>/src/components/$1"
+      "^Components/(.*)$": "<rootDir>/src/components/$1",
+      "^.+\\.(css|less)$": "<rootDir>/tests/javascript/helpers/CSSStub.js"
     },
     "testEnvironment": "jsdom",
     "transform": {
diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 589d6650d..de688ba7f 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -154,13 +154,7 @@ export default Vue.extend({
         }
 	},
 	methods: {
-        created() {
-
-        },
-
 		async addFeed() {
-            let url = this.feedUrl;
-
 			this.$store.dispatch(ACTIONS.ADD_FEED, {
 				feedReq: {
 					url: this.feedUrl,
@@ -170,6 +164,7 @@ export default Vue.extend({
                     password: this.feedPassword === '' ? undefined : this.feedPassword
 				},
 			});
+
             this.$emit('close');
 		},
 
diff --git a/tests/javascript/helpers/CSSStub.js b/tests/javascript/helpers/CSSStub.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/javascript/unit/components/AddFeed.spec.ts b/tests/javascript/unit/components/AddFeed.spec.ts
index 66105e3f8..ce1a9581d 100644
--- a/tests/javascript/unit/components/AddFeed.spec.ts
+++ b/tests/javascript/unit/components/AddFeed.spec.ts
@@ -1,23 +1,86 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
-
 import AddFeed from '../../../../src/components/AddFeed.vue'
+import { FEED_ACTION_TYPES } from '@/store/feed'
 
 describe('AddFeed.vue', () => {
 	'use strict'
 
-	it('should initialize without showing createNewFolder', () => {
+	let mockDispatch = jest.fn();
+	let mockStore = {
+		state: {
+			folders: { folders: [] },
+			feeds: { feeds: [] }
+		},
+		dispatch: mockDispatch
+	}
+
+	let wrapper: any
+	beforeEach(() => {
 		const localVue = createLocalVue()
-		const wrapper = shallowMount(AddFeed, {
+		wrapper = shallowMount(AddFeed, {
 			localVue,
 			mocks: {
-				$store: {
-					state: {
-						folders: [],
-					},
-				},
+				$store: mockStore,
 			},
 		})
+	})
 
+	it('should initialize with default values', () => {
 		expect(wrapper.vm.$data.createNewFolder).toBeFalsy()
+		expect(wrapper.vm.$data.autoDiscover).toBeTruthy()
+		expect(wrapper.vm.$data.withBasicAuth).toBeFalsy()
+	})
+
+	it('should dispatch ADD_FEED action to store', async () => {
+		wrapper.vm.$emit = jest.fn()
+
+		await wrapper.vm.addFeed()
+
+		expect(wrapper.vm.$emit).toBeCalled()
+		expect(mockDispatch).toBeCalled()
+		expect(mockDispatch.mock.calls[0][0]).toEqual(FEED_ACTION_TYPES.ADD_FEED);
+	})
+
+	it('should check if feed url exists and return true', () => {
+		wrapper.vm.$data.feedUrl = ''
+		let response = wrapper.vm.feedUrlExists()
+
+		expect(response).toBeFalsy()
+
+		wrapper.vm.$data.feedUrl = 'http://test.com'
+		response = wrapper.vm.feedUrlExists()
+
+		expect(response).toBeFalsy()
+
+		wrapper.vm.$data.feedUrl = 'http://test.com'
+		wrapper.vm.$store.state.feeds.feeds = [{ url: 'http://test.com'}]
+		response = wrapper.vm.feedUrlExists()
+
+		expect(response).toBeTruthy()
+	})
+
+	it('should check if folder name exists when creating folder and return true', () => {
+		wrapper.vm.$data.newFolderName = ''
+		let response = wrapper.vm.folderNameExists()
+
+		expect(response).toBeFalsy()
+
+		wrapper.vm.$data.newFolderName = 'test'
+		response = wrapper.vm.folderNameExists()
+
+		expect(response).toBeFalsy()
+
+		wrapper.vm.$data.newFolderName = 'test'
+		wrapper.vm.$store.state.folders.folders = [{ name: 'test'}]
+		response = wrapper.vm.folderNameExists()
+
+		expect(response).toBeFalsy()
+
+		wrapper.vm.$data.newFolderName = 'test'
+		wrapper.vm.$data.createNewFolder = 'test'
+		wrapper.vm.$store.state.folders.folders = [{ name: 'test'}]
+		response = wrapper.vm.folderNameExists()
+
+		expect(response).toBeTruthy()
 	})
 })
diff --git a/tests/javascript/unit/store/feed.spec.ts b/tests/javascript/unit/store/feed.spec.ts
index 29df4b105..928820085 100644
--- a/tests/javascript/unit/store/feed.spec.ts
+++ b/tests/javascript/unit/store/feed.spec.ts
@@ -9,14 +9,27 @@ describe('feed.ts', () => {
 	'use strict'
 
 	describe('actions', () => {
-		it('ADD_FEED should call POST and commit feed to state', async () => {
-			(axios as any).post.mockResolvedValue()
-			const commit = jest.fn()
-			await actions[FEED_ACTION_TYPES.ADD_FEED]({ commit }, { feedReq: { url: '' } })
-			expect(axios.post).toBeCalled()
-			expect(commit).toBeCalled()
+		describe('ADD_FEED', () => {
+			it('should call POST and commit feed to state', async () => {
+				(axios as any).post.mockResolvedValue({ data: { feeds: [] }})
+				const commit = jest.fn()
+				await actions[FEED_ACTION_TYPES.ADD_FEED]({ commit }, { feedReq: { url: '' } })
+				expect(axios.post).toBeCalled()
+				expect(commit).toBeCalled()
+			})
+
+			it('should call POST and not call commit if error', async () => {
+				(axios as any).post.mockRejectedValue()
+				const commit = jest.fn()
+				await actions[FEED_ACTION_TYPES.ADD_FEED]({ commit }, { feedReq: { url: '' } })
+				expect(axios.post).toBeCalled()
+
+				expect(commit).not.toBeCalled()
+			})
 		})
 
+		
+
 		it('FETCH_FEEDS should call GET and commit returned feeds to state', async () => {
 			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
 			const commit = jest.fn()
@@ -27,29 +40,31 @@ describe('feed.ts', () => {
 	})
 
 	describe('mutations', () => {
-		it('SET_FEEDS should add feeds to state', () => {
-			const state = { feeds: [] as Feed[], folders: [] as any[] } as AppState
-			let feeds = [] as Feed[]
-
-			mutations[FEED_MUTATION_TYPES.SET_FEEDS](state, feeds)
-			expect(state.feeds.length).toEqual(0)
-
-			feeds = [{ title: 'test' }] as Feed[]
-
-			mutations[FEED_MUTATION_TYPES.SET_FEEDS](state, feeds)
-			expect(state.feeds.length).toEqual(1)
-			expect(state.feeds[0]).toEqual(feeds[0])
+		describe('SET_FEEDS', () => {
+			it('should add feeds to state', () => {
+				const state = { feeds: [] as Feed[], folders: [] as any[] } as AppState
+				let feeds = [] as any
+	
+				mutations[FEED_MUTATION_TYPES.SET_FEEDS](state, feeds)
+				expect(state.feeds.length).toEqual(0)
+	
+				feeds = [{ title: 'test' }] as Feed[]
+	
+				mutations[FEED_MUTATION_TYPES.SET_FEEDS](state, feeds)
+				expect(state.feeds.length).toEqual(1)
+				expect(state.feeds[0]).toEqual(feeds[0])
+			})
 		})
-
-		it('SET_FEEDS should add feeds and unreadCount to folder if exists and folder set', () => {
-			const state = { feeds: [] as Feed[], folders: [{ id: 1, feedCount: 3, feeds: [] as Feed[] }] } as AppState
-			const feeds = [{ title: 'test', folderId: 1, unreadCount: 2 }] as Feed[]
-
-			mutations[FEED_MUTATION_TYPES.SET_FEEDS](state, feeds)
-			expect(state.feeds.length).toEqual(1)
-			expect(state.feeds[0]).toEqual(feeds[0])
-			expect(state.folders[0].feeds[0]).toEqual(feeds[0])
-			expect(state.folders[0].feedCount).toEqual(5)
+		
+		describe('ADD_FEED', () => {
+			it('should add a single feed to state', () => {
+				const state = { feeds: [] as Feed[], folders: [] as any[] } as AppState
+				let feed = { title: 'test' } as any;
+	
+				mutations[FEED_MUTATION_TYPES.ADD_FEED](state, feed)
+				expect(state.feeds.length).toEqual(1)
+				expect(state.feeds[0]).toEqual(feed)
+			})
 		})
 	})
 })

From f2391b6643d213cb8514ea6ef39b938f118b0efd Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Mon, 7 Aug 2023 17:55:29 -0700
Subject: [PATCH 06/13] fix indentation

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue | 323 ++++++++++++++++++-------------------
 1 file changed, 161 insertions(+), 162 deletions(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index de688ba7f..6151996ba 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -1,99 +1,99 @@
 <template>
-	<NcModal @close="$emit('close')">
-		<div id="new-feed">
-			<form name="feedform">
-				<fieldset style="padding: 16px">
-					<input type="text"
-						v-model="feedUrl"
-						:placeholder="t('news', 'Web address')"
-                        :class="{ 'invalid': feedUrlExists() }"
-						name="address"
-						pattern="[^\s]+"
-						required
-						autofocus
-                        style="width: 90%;">
-
-					<p class="error" v-if="feedUrlExists()">
-						{{ t("news", "Feed exists already!") }}
-					</p>
+  <NcModal @close="$emit('close')">
+    <div id="new-feed">
+      <form name="feedform">
+        <fieldset style="padding: 16px">
+          <input type="text"
+            v-model="feedUrl"
+            :placeholder="t('news', 'Web address')"
+            :class="{ 'invalid': feedUrlExists() }"
+            name="address"
+            pattern="[^\s]+"
+            required
+            autofocus
+            style="width: 90%;">
+
+          <p class="error" v-if="feedUrlExists()">
+            {{ t("news", "Feed exists already!") }}
+          </p>
                     
 
-					<!-- select a folder -->
-                    <div style="display:flex;">
-                        <NcSelect v-if="!createNewFolder && folders"
-                            v-model="folder"
-                            :options="folders"
-                            :placeholder="'-- ' + t('news', 'No folder') + ' --'"
-                            track-by="id"
-                            label="name"
-                            style="flex-grow: 1;" />
-
-                        <!-- add a folder -->
-                        <input v-if="createNewFolder"
-                            type="text"
-                            v-model="newFolderName"
-                            :class="{ 'invalid': folderNameExists() }"
-                            :placeholder="t('news', 'Folder name')"
-                            name="folderName"
-                            style="flex-grow: 1; padding: 22px 12px; margin: 0px;"
-                            required>
-
-                        <NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
-                            {{ t("news", "New folder") }}?
-                        </NcCheckboxRadioSwitch>
-                    </div>
-
-                    <p class="error"
-                        v-if="folderNameExists()">
-                        {{ t("news", "Folder exists already!") }}
-                    </p>
-
-					<!-- basic auth -->
-                    <p v-if="withBasicAuth" class="warning">
-                        {{
-                            t(
-                                "news",
-                                "HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!"
-                            )
-                        }}
-                    </p>
-
-                    <div style="display: flex">
-                        <NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch" style="flex-grow: 1;">
-                            {{ t("news", "Credentials") }}?
-                        </NcCheckboxRadioSwitch>
-
-                        <div v-if="withBasicAuth" class="add-feed-basicauth" style="flex-grow: 1;  display: flex;">
-                            <input type="text"
-                                v-model="feedUser"
-                                :placeholder="t('news', 'Username')"
-                                name="user"
-                                autofocus
-                                style="flex-grow: 1">
-
-                            <input type="password"
-                                v-model="feedPassword"
-                                :placeholder="t('news', 'Password')"
-                                name="password"
-                                autocomplete="new-password"
-                                style="flex-grow: 1">
-                        </div>
-                    </div>
-
-					<NcCheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
-						{{ t("news", "Auto discover Feed") }}?
-					</NcCheckboxRadioSwitch>
-
-					<NcButton :wide="true"
-						type="primary"
-						:disabled="disableAddFeed"
-						@click="addFeed()">
-						{{ t("news", "Subscribe") }}
-					</NcButton>
-				</fieldset>
-			</form>
-		</div>
-	</NcModal>
+          <!-- select a folder -->
+          <div style="display:flex;">
+            <NcSelect v-if="!createNewFolder && folders"
+              v-model="folder"
+              :options="folders"
+              :placeholder="'-- ' + t('news', 'No folder') + ' --'"
+              track-by="id"
+              label="name"
+              style="flex-grow: 1;" />
+
+            <!-- add a folder -->
+            <input v-if="createNewFolder"
+              type="text"
+              v-model="newFolderName"
+              :class="{ 'invalid': folderNameExists() }"
+              :placeholder="t('news', 'Folder name')"
+              name="folderName"
+              style="flex-grow: 1; padding: 22px 12px; margin: 0px;"
+              required>
+
+            <NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
+                {{ t("news", "New folder") }}?
+            </NcCheckboxRadioSwitch>
+          </div>
+
+          <p class="error"
+              v-if="folderNameExists()">
+              {{ t("news", "Folder exists already!") }}
+          </p>
+
+          <!-- basic auth -->
+          <p v-if="withBasicAuth" class="warning">
+            {{
+              t(
+                "news",
+                "HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!"
+              )
+            }}
+          </p>
+
+          <div style="display: flex">
+            <NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch" style="flex-grow: 1;">
+                {{ t("news", "Credentials") }}?
+            </NcCheckboxRadioSwitch>
+
+            <div v-if="withBasicAuth" class="add-feed-basicauth" style="flex-grow: 1;  display: flex;">
+              <input type="text"
+                v-model="feedUser"
+                :placeholder="t('news', 'Username')"
+                name="user"
+                autofocus
+                style="flex-grow: 1">
+
+              <input type="password"
+                v-model="feedPassword"
+                :placeholder="t('news', 'Password')"
+                name="password"
+                autocomplete="new-password"
+                style="flex-grow: 1">
+            </div>
+          </div>
+
+          <NcCheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
+            {{ t("news", "Auto discover Feed") }}?
+          </NcCheckboxRadioSwitch>
+
+          <NcButton :wide="true"
+            type="primary"
+            :disabled="disableAddFeed"
+            @click="addFeed()">
+            {{ t("news", "Subscribe") }}
+          </NcButton>
+        </fieldset>
+      </form>
+    </div>
+  </NcModal>
 </template>
 
 <script lang="ts">
@@ -110,90 +110,89 @@ import { Folder } from '../types/Folder'
 import { ACTIONS } from '../store'
 
 type AddFeedState = {
-	folder?: Folder;
-    newFolderName: String;
+  folder?: Folder;
+  newFolderName: String;
 
-	autoDiscover: boolean;
-	createNewFolder: boolean;
-	withBasicAuth: boolean;
+  autoDiscover: boolean;
+  createNewFolder: boolean;
+  withBasicAuth: boolean;
 
-	// from props
-	feedUrl?: String;
-    feedUser?: String;
-    feedPassword?: String;
+  // from props
+  feedUrl?: String;
+  feedUser?: String;
+  feedPassword?: String;
 };
 
 export default Vue.extend({
-	components: {
-		NcModal,
-		NcCheckboxRadioSwitch,
-		NcButton,
-		NcMultiselect,
-        NcSelect
-	},
-	data: (): AddFeedState => {
-		return {
-			folder: undefined,
-            newFolderName: '',
-
-			autoDiscover: true,
-			createNewFolder: false,
-			withBasicAuth: false,
-
-            feedUrl: '',
-            feedUser: '',
-            feedPassword: ''
-		}
-	},
-	computed: {
-		folders(): Folder[] {
-			return this.$store.state.folders.folders
-		},
-        disableAddFeed(): boolean {
-            return this.feed === "" || this.feedUrlExists() || (this.createNewFolder && this.newFolderName === "" || this.folderNameExists())
-        }
-	},
-	methods: {
-		async addFeed() {
-			this.$store.dispatch(ACTIONS.ADD_FEED, {
-				feedReq: {
-					url: this.feedUrl,
-					folder: this.createNewFolder ? { name: this.newFolderName } : this.folder,
-					autoDiscover: this.autoDiscover,
-                    user: this.feedUser === '' ? undefined : this.feedUser,
-                    password: this.feedPassword === '' ? undefined : this.feedPassword
-				},
-			});
-
-            this.$emit('close');
-		},
-
-        feedUrlExists(): boolean {
-            for (let feed of this.$store.state.feeds.feeds) {
-                if (feed.url === this.feedUrl) {
-                    return true;
-                }
+  components: {
+    NcModal,
+    NcCheckboxRadioSwitch,
+    NcButton,
+    NcMultiselect,
+    NcSelect
+  },
+  data: (): AddFeedState => {
+    return {
+      folder: undefined,
+      newFolderName: '',
+
+      autoDiscover: true,
+      createNewFolder: false,
+      withBasicAuth: false,
+
+      feedUrl: '',
+      feedUser: '',
+      feedPassword: ''
+    }
+  },
+  computed: {
+    folders(): Folder[] {
+      return this.$store.state.folders.folders
+    },
+    disableAddFeed(): boolean {
+        return this.feed === "" || this.feedUrlExists() || (this.createNewFolder && this.newFolderName === "" || this.folderNameExists())
+    }
+  },
+  methods: {
+    async addFeed() {
+      this.$store.dispatch(ACTIONS.ADD_FEED, {
+        feedReq: {
+          url: this.feedUrl,
+          folder: this.createNewFolder ? { name: this.newFolderName } : this.folder,
+          autoDiscover: this.autoDiscover,
+          user: this.feedUser === '' ? undefined : this.feedUser,
+          password: this.feedPassword === '' ? undefined : this.feedPassword
+        },
+      });
+
+      this.$emit('close');
+    },
+    feedUrlExists(): boolean {
+        for (let feed of this.$store.state.feeds.feeds) {
+            if (feed.url === this.feedUrl) {
+                return true;
             }
+        }
 
-            return false;
-        },
-        folderNameExists(): boolean {
-            if (this.createNewFolder) {
-                for (let folder of this.$store.state.folders.folders) {
-                    if (folder.name === this.newFolderName) {
-                        return true;
-                    }
+        return false;
+    },
+    folderNameExists(): boolean {
+        if (this.createNewFolder) {
+            for (let folder of this.$store.state.folders.folders) {
+                if (folder.name === this.newFolderName) {
+                    return true;
                 }
             }
-            return false;
         }
-	},
+        return false;
+    }
+  },
 })
 
 </script>
 
 <style scoped>
 .invalid {
-    border: 1px solid rgb(251, 72, 72) !important;
+  border: 1px solid rgb(251, 72, 72) !important;
 }
 </style>

From 1d56e16de9bd1de9df460871587edad2f49af9ab Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Mon, 7 Aug 2023 18:00:02 -0700
Subject: [PATCH 07/13] clean up comments

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 6151996ba..91886fc05 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -117,7 +117,6 @@ type AddFeedState = {
   createNewFolder: boolean;
   withBasicAuth: boolean;
 
-  // from props
   feedUrl?: String;
   feedUser?: String;
   feedPassword?: String;
@@ -154,6 +153,9 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * Adds a New Feed via the Vuex Store
+     */
     async addFeed() {
       this.$store.dispatch(ACTIONS.ADD_FEED, {
         feedReq: {
@@ -167,24 +169,30 @@ export default Vue.extend({
 
       this.$emit('close');
     },
+    /**
+     * Checks if Feed Url exists in Vuex Store Feeds
+     */
     feedUrlExists(): boolean {
-        for (let feed of this.$store.state.feeds.feeds) {
-            if (feed.url === this.feedUrl) {
-                return true;
-            }
+      for (let feed of this.$store.state.feeds.feeds) {
+        if (feed.url === this.feedUrl) {
+          return true;
         }
+      }
 
-        return false;
+      return false;
     },
+    /**
+     * Check if Folder Name exists in Vuex Store Folders
+     */
     folderNameExists(): boolean {
-        if (this.createNewFolder) {
-            for (let folder of this.$store.state.folders.folders) {
-                if (folder.name === this.newFolderName) {
-                    return true;
-                }
-            }
+      if (this.createNewFolder) {
+        for (let folder of this.$store.state.folders.folders) {
+          if (folder.name === this.newFolderName) {
+            return true;
+          }
         }
-        return false;
+      }
+      return false;
     }
   },
 })

From cb23fc7b42e74a5a0ed1545b3dc75851befe3870 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 8 Aug 2023 07:45:06 -0700
Subject: [PATCH 08/13] fix indentation

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue | 352 ++++++++++++++++++-------------------
 1 file changed, 176 insertions(+), 176 deletions(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 91886fc05..4f21b6852 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -1,99 +1,99 @@
 <template>
-  <NcModal @close="$emit('close')">
-    <div id="new-feed">
-      <form name="feedform">
-        <fieldset style="padding: 16px">
-          <input type="text"
-            v-model="feedUrl"
-            :placeholder="t('news', 'Web address')"
-            :class="{ 'invalid': feedUrlExists() }"
-            name="address"
-            pattern="[^\s]+"
-            required
-            autofocus
-            style="width: 90%;">
-
-          <p class="error" v-if="feedUrlExists()">
-            {{ t("news", "Feed exists already!") }}
-          </p>
-                    
-
-          <!-- select a folder -->
-          <div style="display:flex;">
-            <NcSelect v-if="!createNewFolder && folders"
-              v-model="folder"
-              :options="folders"
-              :placeholder="'-- ' + t('news', 'No folder') + ' --'"
-              track-by="id"
-              label="name"
-              style="flex-grow: 1;" />
-
-            <!-- add a folder -->
-            <input v-if="createNewFolder"
-              type="text"
-              v-model="newFolderName"
-              :class="{ 'invalid': folderNameExists() }"
-              :placeholder="t('news', 'Folder name')"
-              name="folderName"
-              style="flex-grow: 1; padding: 22px 12px; margin: 0px;"
-              required>
-
-            <NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
-                {{ t("news", "New folder") }}?
-            </NcCheckboxRadioSwitch>
-          </div>
-
-          <p class="error"
-              v-if="folderNameExists()">
-              {{ t("news", "Folder exists already!") }}
-          </p>
-
-          <!-- basic auth -->
-          <p v-if="withBasicAuth" class="warning">
-            {{
-              t(
-                "news",
-                "HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!"
-              )
-            }}
-          </p>
-
-          <div style="display: flex">
-            <NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch" style="flex-grow: 1;">
-                {{ t("news", "Credentials") }}?
-            </NcCheckboxRadioSwitch>
-
-            <div v-if="withBasicAuth" class="add-feed-basicauth" style="flex-grow: 1;  display: flex;">
-              <input type="text"
-                v-model="feedUser"
-                :placeholder="t('news', 'Username')"
-                name="user"
-                autofocus
-                style="flex-grow: 1">
-
-              <input type="password"
-                v-model="feedPassword"
-                :placeholder="t('news', 'Password')"
-                name="password"
-                autocomplete="new-password"
-                style="flex-grow: 1">
-            </div>
-          </div>
-
-          <NcCheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
-            {{ t("news", "Auto discover Feed") }}?
-          </NcCheckboxRadioSwitch>
-
-          <NcButton :wide="true"
-            type="primary"
-            :disabled="disableAddFeed"
-            @click="addFeed()">
-            {{ t("news", "Subscribe") }}
-          </NcButton>
-        </fieldset>
-      </form>
-    </div>
-  </NcModal>
+	<NcModal @close="$emit('close')">
+		<div id="new-feed">
+			<form name="feedform">
+				<fieldset style="padding: 16px">
+					<input type="text"
+						v-model="feedUrl"
+						:placeholder="t('news', 'Web address')"
+						:class="{ 'invalid': feedUrlExists() }"
+						name="address"
+						pattern="[^\s]+"
+						required
+						autofocus
+						style="width: 90%;">
+
+					<p class="error" v-if="feedUrlExists()">
+						{{ t("news", "Feed exists already!") }}
+					</p>
+										
+
+					<!-- select a folder -->
+					<div style="display:flex;">
+						<NcSelect v-if="!createNewFolder && folders"
+							v-model="folder"
+							:options="folders"
+							:placeholder="'-- ' + t('news', 'No folder') + ' --'"
+							track-by="id"
+							label="name"
+							style="flex-grow: 1;" />
+
+						<!-- add a folder -->
+						<input v-if="createNewFolder"
+							type="text"
+							v-model="newFolderName"
+							:class="{ 'invalid': folderNameExists() }"
+							:placeholder="t('news', 'Folder name')"
+							name="folderName"
+							style="flex-grow: 1; padding: 22px 12px; margin: 0px;"
+							required>
+
+						<NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
+								{{ t("news", "New folder") }}?
+						</NcCheckboxRadioSwitch>
+					</div>
+
+					<p class="error"
+							v-if="folderNameExists()">
+							{{ t("news", "Folder exists already!") }}
+					</p>
+
+					<!-- basic auth -->
+					<p v-if="withBasicAuth" class="warning">
+						{{
+							t(
+								"news",
+								"HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!"
+							)
+						}}
+					</p>
+
+					<div style="display: flex">
+						<NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch" style="flex-grow: 1;">
+								{{ t("news", "Credentials") }}?
+						</NcCheckboxRadioSwitch>
+
+						<div v-if="withBasicAuth" class="add-feed-basicauth" style="flex-grow: 1;  display: flex;">
+							<input type="text"
+								v-model="feedUser"
+								:placeholder="t('news', 'Username')"
+								name="user"
+								autofocus
+								style="flex-grow: 1">
+
+							<input type="password"
+								v-model="feedPassword"
+								:placeholder="t('news', 'Password')"
+								name="password"
+								autocomplete="new-password"
+								style="flex-grow: 1">
+						</div>
+					</div>
+
+					<NcCheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
+						{{ t("news", "Auto discover Feed") }}?
+					</NcCheckboxRadioSwitch>
+
+					<NcButton :wide="true"
+						type="primary"
+						:disabled="disableAddFeed"
+						@click="addFeed()">
+						{{ t("news", "Subscribe") }}
+					</NcButton>
+				</fieldset>
+			</form>
+		</div>
+	</NcModal>
 </template>
 
 <script lang="ts">
@@ -110,97 +110,97 @@ import { Folder } from '../types/Folder'
 import { ACTIONS } from '../store'
 
 type AddFeedState = {
-  folder?: Folder;
-  newFolderName: String;
+	folder?: Folder;
+	newFolderName: String;
 
-  autoDiscover: boolean;
-  createNewFolder: boolean;
-  withBasicAuth: boolean;
+	autoDiscover: boolean;
+	createNewFolder: boolean;
+	withBasicAuth: boolean;
 
-  feedUrl?: String;
-  feedUser?: String;
-  feedPassword?: String;
+	feedUrl?: String;
+	feedUser?: String;
+	feedPassword?: String;
 };
 
 export default Vue.extend({
-  components: {
-    NcModal,
-    NcCheckboxRadioSwitch,
-    NcButton,
-    NcMultiselect,
-    NcSelect
-  },
-  data: (): AddFeedState => {
-    return {
-      folder: undefined,
-      newFolderName: '',
-
-      autoDiscover: true,
-      createNewFolder: false,
-      withBasicAuth: false,
-
-      feedUrl: '',
-      feedUser: '',
-      feedPassword: ''
-    }
-  },
-  computed: {
-    folders(): Folder[] {
-      return this.$store.state.folders.folders
-    },
-    disableAddFeed(): boolean {
-        return this.feed === "" || this.feedUrlExists() || (this.createNewFolder && this.newFolderName === "" || this.folderNameExists())
-    }
-  },
-  methods: {
-    /**
-     * Adds a New Feed via the Vuex Store
-     */
-    async addFeed() {
-      this.$store.dispatch(ACTIONS.ADD_FEED, {
-        feedReq: {
-          url: this.feedUrl,
-          folder: this.createNewFolder ? { name: this.newFolderName } : this.folder,
-          autoDiscover: this.autoDiscover,
-          user: this.feedUser === '' ? undefined : this.feedUser,
-          password: this.feedPassword === '' ? undefined : this.feedPassword
-        },
-      });
-
-      this.$emit('close');
-    },
-    /**
-     * Checks if Feed Url exists in Vuex Store Feeds
-     */
-    feedUrlExists(): boolean {
-      for (let feed of this.$store.state.feeds.feeds) {
-        if (feed.url === this.feedUrl) {
-          return true;
-        }
-      }
-
-      return false;
-    },
-    /**
-     * Check if Folder Name exists in Vuex Store Folders
-     */
-    folderNameExists(): boolean {
-      if (this.createNewFolder) {
-        for (let folder of this.$store.state.folders.folders) {
-          if (folder.name === this.newFolderName) {
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  },
+	components: {
+		NcModal,
+		NcCheckboxRadioSwitch,
+		NcButton,
+		NcMultiselect,
+		NcSelect
+	},
+	data: (): AddFeedState => {
+		return {
+			folder: undefined,
+			newFolderName: '',
+
+			autoDiscover: true,
+			createNewFolder: false,
+			withBasicAuth: false,
+
+			feedUrl: '',
+			feedUser: '',
+			feedPassword: ''
+		}
+	},
+	computed: {
+		folders(): Folder[] {
+			return this.$store.state.folders.folders
+		},
+		disableAddFeed(): boolean {
+				return this.feed === "" || this.feedUrlExists() || (this.createNewFolder && this.newFolderName === "" || this.folderNameExists())
+		}
+	},
+	methods: {
+		/**
+		 * Adds a New Feed via the Vuex Store
+		 */
+		async addFeed() {
+			this.$store.dispatch(ACTIONS.ADD_FEED, {
+				feedReq: {
+					url: this.feedUrl,
+					folder: this.createNewFolder ? { name: this.newFolderName } : this.folder,
+					autoDiscover: this.autoDiscover,
+					user: this.feedUser === '' ? undefined : this.feedUser,
+					password: this.feedPassword === '' ? undefined : this.feedPassword
+				},
+			});
+
+			this.$emit('close');
+		},
+		/**
+		 * Checks if Feed Url exists in Vuex Store Feeds
+		 */
+		feedUrlExists(): boolean {
+			for (let feed of this.$store.state.feeds.feeds) {
+				if (feed.url === this.feedUrl) {
+					return true;
+				}
+			}
+
+			return false;
+		},
+		/**
+		 * Check if Folder Name exists in Vuex Store Folders
+		 */
+		folderNameExists(): boolean {
+			if (this.createNewFolder) {
+				for (let folder of this.$store.state.folders.folders) {
+					if (folder.name === this.newFolderName) {
+						return true;
+					}
+				}
+			}
+			return false;
+		}
+	},
 })
 
 </script>
 
 <style scoped>
 .invalid {
-  border: 1px solid rgb(251, 72, 72) !important;
+	border: 1px solid rgb(251, 72, 72) !important;
 }
 </style>

From 079f691ecc58b7d28c060ed13156b0b95aa0f87d Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 8 Aug 2023 08:28:08 -0700
Subject: [PATCH 09/13] use eslint --fix to clean up linting errors

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue | 67 +++++++++++++++++++-------------------
 src/components/Sidebar.vue |  1 -
 src/store/feed.ts          | 17 +++++-----
 src/store/folder.ts        |  6 ++--
 4 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 4f21b6852..6f57fee9f 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -3,8 +3,8 @@
 		<div id="new-feed">
 			<form name="feedform">
 				<fieldset style="padding: 16px">
-					<input type="text"
-						v-model="feedUrl"
+					<input v-model="feedUrl"
+						type="text"
 						:placeholder="t('news', 'Web address')"
 						:class="{ 'invalid': feedUrlExists() }"
 						name="address"
@@ -13,10 +13,9 @@
 						autofocus
 						style="width: 90%;">
 
-					<p class="error" v-if="feedUrlExists()">
+					<p v-if="feedUrlExists()" class="error">
 						{{ t("news", "Feed exists already!") }}
 					</p>
-										
 
 					<!-- select a folder -->
 					<div style="display:flex;">
@@ -30,8 +29,8 @@
 
 						<!-- add a folder -->
 						<input v-if="createNewFolder"
-							type="text"
 							v-model="newFolderName"
+							type="text"
 							:class="{ 'invalid': folderNameExists() }"
 							:placeholder="t('news', 'Folder name')"
 							name="folderName"
@@ -39,13 +38,13 @@
 							required>
 
 						<NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
-								{{ t("news", "New folder") }}?
+							{{ t("news", "New folder") }}?
 						</NcCheckboxRadioSwitch>
 					</div>
 
-					<p class="error"
-							v-if="folderNameExists()">
-							{{ t("news", "Folder exists already!") }}
+					<p v-if="folderNameExists()"
+						class="error">
+						{{ t("news", "Folder exists already!") }}
 					</p>
 
 					<!-- basic auth -->
@@ -60,19 +59,19 @@
 
 					<div style="display: flex">
 						<NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch" style="flex-grow: 1;">
-								{{ t("news", "Credentials") }}?
+							{{ t("news", "Credentials") }}?
 						</NcCheckboxRadioSwitch>
 
 						<div v-if="withBasicAuth" class="add-feed-basicauth" style="flex-grow: 1;  display: flex;">
-							<input type="text"
-								v-model="feedUser"
+							<input v-model="feedUser"
+								type="text"
 								:placeholder="t('news', 'Username')"
 								name="user"
 								autofocus
 								style="flex-grow: 1">
 
-							<input type="password"
-								v-model="feedPassword"
+							<input v-model="feedPassword"
+								type="password"
 								:placeholder="t('news', 'Password')"
 								name="password"
 								autocomplete="new-password"
@@ -103,7 +102,6 @@ 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 NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 import { Folder } from '../types/Folder'
@@ -111,15 +109,15 @@ import { ACTIONS } from '../store'
 
 type AddFeedState = {
 	folder?: Folder;
-	newFolderName: String;
+	newFolderName: string;
 
 	autoDiscover: boolean;
 	createNewFolder: boolean;
 	withBasicAuth: boolean;
 
-	feedUrl?: String;
-	feedUser?: String;
-	feedPassword?: String;
+	feedUrl?: string;
+	feedUser?: string;
+	feedPassword?: string;
 };
 
 export default Vue.extend({
@@ -127,8 +125,7 @@ export default Vue.extend({
 		NcModal,
 		NcCheckboxRadioSwitch,
 		NcButton,
-		NcMultiselect,
-		NcSelect
+		NcSelect,
 	},
 	data: (): AddFeedState => {
 		return {
@@ -141,7 +138,7 @@ export default Vue.extend({
 
 			feedUrl: '',
 			feedUser: '',
-			feedPassword: ''
+			feedPassword: '',
 		}
 	},
 	computed: {
@@ -149,8 +146,10 @@ export default Vue.extend({
 			return this.$store.state.folders.folders
 		},
 		disableAddFeed(): boolean {
-				return this.feed === "" || this.feedUrlExists() || (this.createNewFolder && this.newFolderName === "" || this.folderNameExists())
-		}
+			return (this.feed === ''
+						|| this.feedUrlExists()
+						|| (this.createNewFolder && (this.newFolderName === '' || this.folderNameExists())))
+		},
 	},
 	methods: {
 		/**
@@ -163,37 +162,37 @@ export default Vue.extend({
 					folder: this.createNewFolder ? { name: this.newFolderName } : this.folder,
 					autoDiscover: this.autoDiscover,
 					user: this.feedUser === '' ? undefined : this.feedUser,
-					password: this.feedPassword === '' ? undefined : this.feedPassword
+					password: this.feedPassword === '' ? undefined : this.feedPassword,
 				},
-			});
+			})
 
-			this.$emit('close');
+			this.$emit('close')
 		},
 		/**
 		 * Checks if Feed Url exists in Vuex Store Feeds
 		 */
 		feedUrlExists(): boolean {
-			for (let feed of this.$store.state.feeds.feeds) {
+			for (const feed of this.$store.state.feeds.feeds) {
 				if (feed.url === this.feedUrl) {
-					return true;
+					return true
 				}
 			}
 
-			return false;
+			return false
 		},
 		/**
 		 * Check if Folder Name exists in Vuex Store Folders
 		 */
 		folderNameExists(): boolean {
 			if (this.createNewFolder) {
-				for (let folder of this.$store.state.folders.folders) {
+				for (const folder of this.$store.state.folders.folders) {
 					if (folder.name === this.newFolderName) {
-						return true;
+						return true
 					}
 				}
 			}
-			return false;
-		}
+			return false
+		},
 	},
 })
 
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index bf7e2b82e..5ef486d85 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -33,7 +33,6 @@
 				</template>
 			</NcAppNavigationItem>
 
-            
 			<NcAppNavigationItem v-for="topLevelItem in topLevelNav"
 				:key="topLevelItem.name || topLevelItem.title"
 				:title="topLevelItem.name || topLevelItem.title"
diff --git a/src/store/feed.ts b/src/store/feed.ts
index 6332fb988..737b90c5a 100644
--- a/src/store/feed.ts
+++ b/src/store/feed.ts
@@ -35,9 +35,8 @@ export const actions = {
 		commit(FEED_MUTATION_TYPES.SET_FEEDS, feeds.data.feeds)
 	},
 	async [FEED_ACTION_TYPES.ADD_FEED](
-		{ commit }: ActionParams, 
-		{ feedReq }: { feedReq: { url: string; folder?: { id: number }, user?: string; password?: string; } })
-	{
+		{ commit }: ActionParams,
+		{ feedReq }: { feedReq: { url: string; folder?: { id: number }, user?: string; password?: string; } }) {
 		let url = feedReq.url.trim()
 		if (!url.startsWith('http')) {
 			url = 'https://' + url
@@ -69,10 +68,10 @@ export const actions = {
 			})
 
 			commit(FEED_MUTATION_TYPES.ADD_FEED, response.data.feeds[0])
-		} catch(e) {
-				// TODO: show error to user if failure
-				console.log(e);
-				return;
+		} catch (e) {
+			// TODO: show error to user if failure
+			console.log(e)
+
 		}
 	},
 }
@@ -84,8 +83,8 @@ export const mutations = {
 		})
 	},
 	[FEED_MUTATION_TYPES.ADD_FEED](state: AppState, feed: Feed) {
-		state.feeds.push(feed);
-	}
+		state.feeds.push(feed)
+	},
 }
 
 export default {
diff --git a/src/store/folder.ts b/src/store/folder.ts
index 140d8b602..e6ef70341 100644
--- a/src/store/folder.ts
+++ b/src/store/folder.ts
@@ -1,9 +1,9 @@
-import { Feed } from '@/types/Feed'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 import { AppState, ActionParams } from '../store'
 import { Folder } from '../types/Folder'
+import { Feed } from '../types/Feed'
 import { FEED_MUTATION_TYPES } from './feed'
 
 export const FOLDER_ACTION_TYPES = {
@@ -72,7 +72,7 @@ export const mutations = {
 				folder.feeds.push(it)
 				folder.feedCount += it.unreadCount
 			}
-		});
+		})
 	},
 	[FEED_MUTATION_TYPES.ADD_FEED](state: AppState, feed: Feed) {
 		const folder = state.folders.find(folder => folder.id === feed.folderId)
@@ -80,7 +80,7 @@ export const mutations = {
 			folder.feeds.push(feed)
 			folder.feedCount += feed.unreadCount
 		}
-	}
+	},
 }
 
 export default {

From 5cd67c94bc62ce612c9d38264e5a83984aed6023 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 8 Aug 2023 16:00:51 -0700
Subject: [PATCH 10/13] fix add + create folder

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/store/feed.ts                          | 43 ++++++++++++----------
 src/store/folder.ts                        | 19 +++-------
 src/store/index.ts                         |  5 ++-
 src/types/ApiRoutes.ts                     |  6 +++
 src/types/MutationTypes.ts                 | 10 +++++
 tests/javascript/unit/store/feed.spec.ts   |  4 +-
 tests/javascript/unit/store/folder.spec.ts |  3 +-
 7 files changed, 52 insertions(+), 38 deletions(-)
 create mode 100644 src/types/ApiRoutes.ts
 create mode 100644 src/types/MutationTypes.ts

diff --git a/src/store/feed.ts b/src/store/feed.ts
index 737b90c5a..b103b7707 100644
--- a/src/store/feed.ts
+++ b/src/store/feed.ts
@@ -1,19 +1,15 @@
 import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
 
 import { ActionParams, AppState } from '../store'
 import { Feed } from '../types/Feed'
+import { API_ROUTES } from '../types/ApiRoutes'
+import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES } from '../types/MutationTypes'
 
 export const FEED_ACTION_TYPES = {
 	ADD_FEED: 'ADD_FEED',
 	FETCH_FEEDS: 'FETCH_FEEDS',
 }
 
-export const FEED_MUTATION_TYPES = {
-	ADD_FEED: 'ADD_FEED',
-	SET_FEEDS: 'SET_FEEDS',
-}
-
 const state = {
 	feeds: [],
 }
@@ -24,41 +20,48 @@ const getters = {
 	},
 }
 
-const feedUrl = generateUrl('/apps/news/feeds')
-
 export const actions = {
 	async [FEED_ACTION_TYPES.FETCH_FEEDS]({ commit }: ActionParams) {
-		const feeds = await axios.get(
-			generateUrl('/apps/news/feeds'),
-		)
+		const feeds = await axios.get(API_ROUTES.FEED)
 
 		commit(FEED_MUTATION_TYPES.SET_FEEDS, feeds.data.feeds)
 	},
 	async [FEED_ACTION_TYPES.ADD_FEED](
 		{ commit }: ActionParams,
-		{ feedReq }: { feedReq: { url: string; folder?: { id: number }, user?: string; password?: string; } }) {
+		{ feedReq }: { 
+			feedReq: { 
+				url: string; 
+				folder?: { id: number; name?: string; }, 
+				user?: string; 
+				password?: string; 
+			} 
+		}
+	) {
 		let url = feedReq.url.trim()
 		if (!url.startsWith('http')) {
 			url = 'https://' + url
 		}
 
-		/**
-      if (title !== undefined) {
-          title = title.trim();
-      }
-		 */
+		let folderId;
+		if (feedReq.folder?.id === undefined && feedReq.folder?.name && feedReq.folder?.name !== '') {
+			const response = await axios.post(API_ROUTES.FOLDER, { folderName: feedReq.folder?.name })
+			folderId = response.data.folders[0].id;
+			commit(FOLDER_MUTATION_TYPES.SET_FOLDERS, response.data.folders);
+		} else {
+			folderId = feedReq.folder?.id || 0
+		}
 
 		const feed: Feed = {
 			url,
-			folderId: feedReq.folder?.id || 0,
-			title: undefined,
+			folderId,
+			title: undefined, // TODO: let user define feed title on create?
 			unreadCount: 0,
 			autoDiscover: undefined, // TODO: autodiscover?
 		}
 
 		// Check that url is resolvable
 		try {
-			const response = await axios.post(feedUrl, {
+			const response = await axios.post(API_ROUTES.FEED, {
 				url: feed.url,
 				parentFolderId: feed.folderId,
 				title: null,
diff --git a/src/store/folder.ts b/src/store/folder.ts
index e6ef70341..b1ae2e59d 100644
--- a/src/store/folder.ts
+++ b/src/store/folder.ts
@@ -1,10 +1,10 @@
 import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
 
 import { AppState, ActionParams } from '../store'
 import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
-import { FEED_MUTATION_TYPES } from './feed'
+import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES } from '../types/MutationTypes'
+import { API_ROUTES } from '../types/ApiRoutes'
 
 export const FOLDER_ACTION_TYPES = {
 	FETCH_FOLDERS: 'FETCH_FOLDERS',
@@ -12,11 +12,6 @@ export const FOLDER_ACTION_TYPES = {
 	DELETE_FOLDER: 'DELETE_FOLDER',
 }
 
-export const FOLDER_MUTATION_TYPES = {
-	SET_FOLDERS: 'SET_FOLDERS',
-	DELETE_FOLDER: 'DELETE_FOLDER',
-}
-
 const state = {
 	folders: [],
 }
@@ -27,18 +22,14 @@ const getters = {
 	},
 }
 
-const folderUrl = generateUrl('/apps/news/folders')
-
 export const actions = {
 	async [FOLDER_ACTION_TYPES.FETCH_FOLDERS]({ commit }: ActionParams) {
-		const folders = await axios.get(
-			generateUrl('/apps/news/folders'),
-		)
+		const folders = await axios.get(API_ROUTES.FOLDER)
 
 		commit(FOLDER_MUTATION_TYPES.SET_FOLDERS, folders.data.folders)
 	},
 	async [FOLDER_ACTION_TYPES.ADD_FOLDERS]({ commit }: ActionParams, { folder }: { folder: Folder}) {
-		const response = await axios.post(folderUrl, { folderName: folder.name })
+		const response = await axios.post(API_ROUTES.FOLDER, { folderName: folder.name })
 		commit(FOLDER_MUTATION_TYPES.SET_FOLDERS, response.data.folders)
 	},
 	async [FOLDER_ACTION_TYPES.DELETE_FOLDER]({ commit }: ActionParams, { folder }: { folder: Folder}) {
@@ -48,7 +39,7 @@ export const actions = {
           promises.push(self.reversiblyDelete(feed.id, false, true));
       });
 		 */
-		await axios.delete(folderUrl + '/' + folder.id)
+		await axios.delete(API_ROUTES.FOLDER + '/' + folder.id)
 		commit(FOLDER_MUTATION_TYPES.DELETE_FOLDER, folder)
 	},
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 1a6dfc1c9..539a1b2de 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,7 +1,8 @@
 import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
-import feeds, { FEED_MUTATION_TYPES, FEED_ACTION_TYPES } from './feed'
-import folders, { FOLDER_MUTATION_TYPES, FOLDER_ACTION_TYPES } from './folder'
+import feeds, { FEED_ACTION_TYPES } from './feed'
+import folders, { FOLDER_ACTION_TYPES } from './folder'
+import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES } from '../types/MutationTypes'
 
 export const MUTATIONS = {
 	...FEED_MUTATION_TYPES,
diff --git a/src/types/ApiRoutes.ts b/src/types/ApiRoutes.ts
new file mode 100644
index 000000000..a82c66dc1
--- /dev/null
+++ b/src/types/ApiRoutes.ts
@@ -0,0 +1,6 @@
+import { generateUrl } from '@nextcloud/router'
+
+export const API_ROUTES = {
+  FOLDER: generateUrl('/apps/news/folders'),
+  FEED: generateUrl('/apps/news/feeds')
+}
\ No newline at end of file
diff --git a/src/types/MutationTypes.ts b/src/types/MutationTypes.ts
new file mode 100644
index 000000000..d561d1d77
--- /dev/null
+++ b/src/types/MutationTypes.ts
@@ -0,0 +1,10 @@
+
+export const FEED_MUTATION_TYPES = {
+	ADD_FEED: 'ADD_FEED',
+	SET_FEEDS: 'SET_FEEDS',
+}
+
+export const FOLDER_MUTATION_TYPES = {
+	SET_FOLDERS: 'SET_FOLDERS',
+	DELETE_FOLDER: 'DELETE_FOLDER',
+}
diff --git a/tests/javascript/unit/store/feed.spec.ts b/tests/javascript/unit/store/feed.spec.ts
index 928820085..ba15c9410 100644
--- a/tests/javascript/unit/store/feed.spec.ts
+++ b/tests/javascript/unit/store/feed.spec.ts
@@ -1,7 +1,9 @@
 import axios from '@nextcloud/axios'
 import { Feed } from '../../../../src/types/Feed'
 import { AppState } from '../../../../src/store'
-import { FEED_ACTION_TYPES, FEED_MUTATION_TYPES, mutations, actions } from '../../../../src/store/feed'
+import { FEED_ACTION_TYPES, mutations, actions } from '../../../../src/store/feed'
+
+import { FEED_MUTATION_TYPES } from '../../../../src/types/MutationTypes'
 
 jest.mock('@nextcloud/axios')
 
diff --git a/tests/javascript/unit/store/folder.spec.ts b/tests/javascript/unit/store/folder.spec.ts
index 68cc04da7..eacfd18cb 100644
--- a/tests/javascript/unit/store/folder.spec.ts
+++ b/tests/javascript/unit/store/folder.spec.ts
@@ -2,7 +2,8 @@ import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { Folder } from '../../../../src/types/Folder'
 import { AppState } from '../../../../src/store'
-import { FOLDER_ACTION_TYPES, FOLDER_MUTATION_TYPES, mutations, actions } from '../../../../src/store/folder'
+import { FOLDER_ACTION_TYPES, mutations, actions } from '../../../../src/store/folder'
+import { FOLDER_MUTATION_TYPES } from '../../../../src/types/MutationTypes'
 
 jest.mock('@nextcloud/axios')
 jest.mock('@nextcloud/router')

From 8debe5b559a7ef4b7627e02cbe8547bd2ee635a8 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 8 Aug 2023 21:36:26 -0700
Subject: [PATCH 11/13] fix wrong property

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 6f57fee9f..6e0aac0a8 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -146,7 +146,7 @@ export default Vue.extend({
 			return this.$store.state.folders.folders
 		},
 		disableAddFeed(): boolean {
-			return (this.feed === ''
+			return (this.feedUrl === ''
 						|| this.feedUrlExists()
 						|| (this.createNewFolder && (this.newFolderName === '' || this.folderNameExists())))
 		},

From 50d0c48f27ef99e16bbc86f0904a15278fea2eca Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Wed, 9 Aug 2023 07:59:03 -0700
Subject: [PATCH 12/13] fix linting errors

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/store/feed.ts                        | 22 +++++++++++-----------
 src/types/ApiRoutes.ts                   |  6 +++---
 src/types/MutationTypes.ts               |  1 -
 tests/javascript/unit/store/feed.spec.ts | 16 +++++++---------
 4 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/store/feed.ts b/src/store/feed.ts
index b103b7707..9a0da520b 100644
--- a/src/store/feed.ts
+++ b/src/store/feed.ts
@@ -28,25 +28,25 @@ export const actions = {
 	},
 	async [FEED_ACTION_TYPES.ADD_FEED](
 		{ commit }: ActionParams,
-		{ feedReq }: { 
-			feedReq: { 
-				url: string; 
-				folder?: { id: number; name?: string; }, 
-				user?: string; 
-				password?: string; 
-			} 
-		}
+		{ feedReq }: {
+			feedReq: {
+				url: string;
+				folder?: { id: number; name?: string; },
+				user?: string;
+				password?: string;
+			}
+		},
 	) {
 		let url = feedReq.url.trim()
 		if (!url.startsWith('http')) {
 			url = 'https://' + url
 		}
 
-		let folderId;
+		let folderId
 		if (feedReq.folder?.id === undefined && feedReq.folder?.name && feedReq.folder?.name !== '') {
 			const response = await axios.post(API_ROUTES.FOLDER, { folderName: feedReq.folder?.name })
-			folderId = response.data.folders[0].id;
-			commit(FOLDER_MUTATION_TYPES.SET_FOLDERS, response.data.folders);
+			folderId = response.data.folders[0].id
+			commit(FOLDER_MUTATION_TYPES.SET_FOLDERS, response.data.folders)
 		} else {
 			folderId = feedReq.folder?.id || 0
 		}
diff --git a/src/types/ApiRoutes.ts b/src/types/ApiRoutes.ts
index a82c66dc1..c05a5f716 100644
--- a/src/types/ApiRoutes.ts
+++ b/src/types/ApiRoutes.ts
@@ -1,6 +1,6 @@
 import { generateUrl } from '@nextcloud/router'
 
 export const API_ROUTES = {
-  FOLDER: generateUrl('/apps/news/folders'),
-  FEED: generateUrl('/apps/news/feeds')
-}
\ No newline at end of file
+	FOLDER: generateUrl('/apps/news/folders'),
+	FEED: generateUrl('/apps/news/feeds'),
+}
diff --git a/src/types/MutationTypes.ts b/src/types/MutationTypes.ts
index d561d1d77..294deaffd 100644
--- a/src/types/MutationTypes.ts
+++ b/src/types/MutationTypes.ts
@@ -1,4 +1,3 @@
-
 export const FEED_MUTATION_TYPES = {
 	ADD_FEED: 'ADD_FEED',
 	SET_FEEDS: 'SET_FEEDS',
diff --git a/tests/javascript/unit/store/feed.spec.ts b/tests/javascript/unit/store/feed.spec.ts
index ba15c9410..922c79f3f 100644
--- a/tests/javascript/unit/store/feed.spec.ts
+++ b/tests/javascript/unit/store/feed.spec.ts
@@ -13,7 +13,7 @@ describe('feed.ts', () => {
 	describe('actions', () => {
 		describe('ADD_FEED', () => {
 			it('should call POST and commit feed to state', async () => {
-				(axios as any).post.mockResolvedValue({ data: { feeds: [] }})
+				(axios as any).post.mockResolvedValue({ data: { feeds: [] } })
 				const commit = jest.fn()
 				await actions[FEED_ACTION_TYPES.ADD_FEED]({ commit }, { feedReq: { url: '' } })
 				expect(axios.post).toBeCalled()
@@ -30,8 +30,6 @@ describe('feed.ts', () => {
 			})
 		})
 
-		
-
 		it('FETCH_FEEDS should call GET and commit returned feeds to state', async () => {
 			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
 			const commit = jest.fn()
@@ -46,23 +44,23 @@ describe('feed.ts', () => {
 			it('should add feeds to state', () => {
 				const state = { feeds: [] as Feed[], folders: [] as any[] } as AppState
 				let feeds = [] as any
-	
+
 				mutations[FEED_MUTATION_TYPES.SET_FEEDS](state, feeds)
 				expect(state.feeds.length).toEqual(0)
-	
+
 				feeds = [{ title: 'test' }] as Feed[]
-	
+
 				mutations[FEED_MUTATION_TYPES.SET_FEEDS](state, feeds)
 				expect(state.feeds.length).toEqual(1)
 				expect(state.feeds[0]).toEqual(feeds[0])
 			})
 		})
-		
+
 		describe('ADD_FEED', () => {
 			it('should add a single feed to state', () => {
 				const state = { feeds: [] as Feed[], folders: [] as any[] } as AppState
-				let feed = { title: 'test' } as any;
-	
+				const feed = { title: 'test' } as any
+
 				mutations[FEED_MUTATION_TYPES.ADD_FEED](state, feed)
 				expect(state.feeds.length).toEqual(1)
 				expect(state.feeds[0]).toEqual(feed)

From 1e3397611b075891c0f04f20a18e6fda6dfca8a2 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Wed, 9 Aug 2023 08:01:43 -0700
Subject: [PATCH 13/13] fix php unit test

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 tests/Unit/Service/FolderServiceTest.php | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/tests/Unit/Service/FolderServiceTest.php b/tests/Unit/Service/FolderServiceTest.php
index a80afeb13..3e47c6136 100644
--- a/tests/Unit/Service/FolderServiceTest.php
+++ b/tests/Unit/Service/FolderServiceTest.php
@@ -66,8 +66,9 @@ protected function setUp(): void
     {
         $this->time = 222;
 
-        $timeFactoryBuilder = $this->getMockBuilder(TimeFactory::class)
-            ->disableOriginalConstructor();
+        $timeFactory = $this->getMockBuilder(TimeFactory::class)
+            ->disableOriginalConstructor()
+            ->getMock();
 
         $mockDateTime = $this->getMockBuilder(\DateTimeImmutable::class)
             ->disableOriginalConstructor()