[Vue Rewrite] Fix CI Jobs (#1816)

* attempt to fix linting

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* working linting/stylelint

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* fix npm build

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* working with node 16 and npm build

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* fix linting

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* add @babel/eslint-parser

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* remove babel-eslint

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* use node 16 in lint

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* proper syntax

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* fix syntax

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* update version

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* attempt to undo indentation changes

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* revert indentation on css and update stylelint rule for now (for simpler PR)

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* revert indentation changes in vue/js files and update eslint to pass this (for now)

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* try to cleanup disabled rules

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* remove last disabled rules in js files

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* add basic changelog

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* update calendar-js to 3.0

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

* remove npm test with TODO (this will fail CI) and remove calendar-js dependency

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

5 files changed, 281 insertions, 222 deletions

diff --git a/src/App.vue b/src/App.vue
index b4119937e..2dbcd70fe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <template>
-	<Content app-name="news">
-		<Sidebar />
+    <Content app-name="news">
+        <Sidebar />
         <AppContent>
-            <router-view></router-view>
+            <router-view />
         </AppContent>
-	</Content>
+    </Content>
 </template>
 
 <script>
@@ -13,14 +13,14 @@ import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import Sidebar from './components/Sidebar.vue'
 
 export default {
-	components: {
-		Content,
-		Sidebar,
+    components: {
+        Content,
+        Sidebar,
         AppContent,
-	},
+    },
     created() {
         this.$store.dispatch('loadFolder')
-    }
+    },
 
 }
 </script>
diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 2adacd8ad..a07125d3a 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -1,41 +1,45 @@
 <template>
     <Modal @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">
+                ng-init="Navigation.feed.autoDiscover=true"
+                name="feedform">
                 <fieldset ng-disabled="Navigation.addingFeed" style="padding: 16px">
                     <input type="text"
-                           :value="feed"
-                           ng-model="Navigation.feed.url"
-                           ng-class="{'ng-invalid':
+                        :value="feed"
+                        ng-model="Navigation.feed.url"
+                        ng-class="{'ng-invalid':
                         !Navigation.addingFeed &&
                         Navigation.feedUrlExists(Navigation.feed.url)
                     }"
-                           :placeholder="t('news','Web address')"
-                           name="address"
-                           pattern="[^\s]+"
-                           required
-                           autofocus>
+                        :placeholder="t('news', 'Web address')"
+                        name="address"
+                        pattern="[^\s]+"
+                        required
+                        autofocus />
 
                     <p class="error"
-                       ng-show="!Navigation.addingFeed &&
+                        ng-show="!Navigation.addingFeed &&
                         Navigation.feedUrlExists(Navigation.feed.url)">
-                        {{ t('news', 'Feed exists already!') }}
+                        {{ t("news", "Feed exists already!") }}
                     </p>
 
                     <!-- select a folder -->
                     <CheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
-                        {{ t('news', 'New folder') }}?
+                        {{ t("news", "New folder") }}?
                     </CheckboxRadioSwitch>
 
-                    <Multiselect v-if="!createNewFolder" v-model="folder" :options="folders" track-by="id" label="name"/>
+                    <Multiselect v-if="!createNewFolder"
+                        v-model="folder"
+                        :options="folders"
+                        track-by="id"
+                        label="name" />
 
                     <!-- add a folder -->
-                    <input type="text"
-                           ng-model="Navigation.feed.newFolder"
-                           ng-class="{'ng-invalid':
+                    <input v-if="createNewFolder"
+                        type="text"
+                        ng-model="Navigation.feed.newFolder"
+                        ng-class="{'ng-invalid':
                             !Navigation.addingFeed &&
                             !Navigation.addingFeed &&
                             Navigation.showNewFolder &&
@@ -43,52 +47,59 @@
                                 Navigation.feed.newFolder
                             )
                         }"
-                           :placeholder="t('news','Folder name')"
-                           name="folderName"
-                           v-if="createNewFolder"
-                           style="width: 90%"
-                           required>
-
+                        :placeholder="t('news', 'Folder name')"
+                        name="folderName"
+                        style="width: 90%"
+                        required />
 
-                    <p class="error" ng-show="!Navigation.addingFeed &&
+                    <p class="error"
+                        ng-show="!Navigation.addingFeed &&
                     Navigation.folderNameExists(Navigation.feed.newFolder)">
-                        {{ t('news', 'Folder exists already!') }}
+                        {{ t("news", "Folder exists already!") }}
                     </p>
 
                     <!-- basic auth -->
 
                     <CheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch">
-                        {{ t('news', 'Credentials') }}?
+                        {{ t("news", "Credentials") }}?
                     </CheckboxRadioSwitch>
 
                     <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>
+                        <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>
+                            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">
+                            ng-model="Navigation.feed.password"
+                            :placeholder="t('news', 'Password')"
+                            name="password"
+                            autocomplete="new-password" />
                     </div>
 
                     <CheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
-                        {{ t('news', 'Auto discover Feed') }}?
+                        {{ t("news", "Auto discover Feed") }}?
                     </CheckboxRadioSwitch>
 
-                    <Button :wide="true" type="primary" @click="addFeed()" ng-disabled="
+                    <Button :wide="true"
+                        type="primary"
+                        ng-disabled="
                         Navigation.feedUrlExists(Navigation.feed.url) ||
                                 (
                                     Navigation.showNewFolder &&
                                     Navigation.folderNameExists(folder.name)
-                                )">
-                        {{t('news','Subscribe')}}
+                                )"
+                        @click="addFeed()">
+                        {{ t("news", "Subscribe") }}
                     </Button>
                 </fieldset>
             </form>
@@ -97,6 +108,8 @@
 </template>
 
 <script>
+/* eslint-disable vue/require-prop-type-constructor */
+
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
 import Button from '@nextcloud/vue/dist/Components/Button'
@@ -107,42 +120,51 @@ export default {
         Modal,
         CheckboxRadioSwitch,
         Button,
-        Multiselect
+        Multiselect,
+    },
+    props: {
+        feed: '',
+    },
+    emits: ['close'],
+    data() {
+        return {
+            folder: {},
+            autoDiscover: true,
+            createNewFolder: false,
+            withBasicAuth: false,
+        }
     },
     computed: {
         folders() {
             return this.$store.state.folders
-        }
+        },
     },
     methods: {
         newFolder() {
-            this.createNewFolder = true;
+            this.createNewFolder = true
         },
         abortNewFolder() {
-            this.createNewFolder = false;
+            this.createNewFolder = false
         },
         addFeed() {
-            this.$store.dispatch('addFeed', {feedReq: { url: this.feed, folder: this.folder, autoDiscover: true}})
-        }
-    },
-    props: {
-        feed: '',
-        folder: {},
-        autoDiscover: true,
-        withBasicAuth: false,
-        createNewFolder: false
+            this.$store.dispatch('addFeed', {
+                feedReq: {
+                    url: this.feed,
+                    folder: this.folder,
+                    autoDiscover: true,
+                },
+            })
+        },
     },
-    emits: ['close']
 }
 </script>
 
 <style scoped>
+input {
+    width: 100%
+}
 
-    input {
-        width: 100%;
-    }
-    .multiselect {
-        width: 100%;
-    }
-
+.multiselect {
+    width: 100%
+}
 </style>
diff --git a/src/components/Explore.vue b/src/components/Explore.vue
index 5738649cf..e37f66aa7 100644
--- a/src/components/Explore.vue
+++ b/src/components/Explore.vue
@@ -1,13 +1,18 @@
 <template>
     <div id="explore">
-        <AddFeed v-if="showAddFeed" @close="closeShowAddFeed()" :feed="feed"></AddFeed>
+        <AddFeed v-if="showAddFeed" :feed="feed" @close="closeShowAddFeed()" />
         <div class="grid-container">
-            <div v-for="entry in explorableSites" class="explore-feed grid-item">
-                <h2 class="explore-title" v-if="entry.favicon"
-                    :style="{ backgroundImage: 'url(' + entry.favicon + ')'}">
-                    <a target="_blank" rel="noreferrer" :href="entry.url">{{ entry.title }}</a>
+            <div v-for="entry in explorableSites"
+                :key="entry.title"
+                class="explore-feed grid-item">
+                <h2 v-if="entry.favicon"
+                    class="explore-title"
+                    :style="{ backgroundImage: 'url(' + entry.favicon + ')' }">
+                    <a target="_blank" rel="noreferrer" :href="entry.url">{{
+                        entry.title
+                    }}</a>
                 </h2>
-                <h2 class="icon-rss explore-title" v-if="!entry.favicon">
+                <h2 v-if="!entry.favicon" class="icon-rss explore-title">
                     {{ entry.title }}
                 </h2>
                 <div class="explore-content">
@@ -18,7 +23,7 @@
                     </div>
                 </div>
                 <Button @click="subscribe(entry.feed)">
-                    {{ t('news', 'Subscribe to') }} {{ entry.title }}
+                    {{ t("news", "Subscribe to") }} {{ entry.title }}
                 </Button>
             </div>
         </div>
@@ -26,53 +31,57 @@
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+/* eslint-disable vue/require-prop-type-constructor */
+
+// import Modal from '@nextcloud/vue/dist/Components/Modal'
 import Button from '@nextcloud/vue/dist/Components/Button'
-import axios from "@nextcloud/axios";
-import AddFeed from "./AddFeed";
-import {generateUrl} from "@nextcloud/router";
+import axios from '@nextcloud/axios'
+import AddFeed from './AddFeed'
+import { generateUrl } from '@nextcloud/router'
 
 export default {
     components: {
-        Modal,
+        // Modal,
         Button,
-        AddFeed
+        AddFeed,
     },
     props: {
-        explorableSites: {
-            type: Array,
-            default: () => [],
-            required: true,
-        },
-        showAddFeed: false,
-        feed: ''
+        feed: '',
+    },
+    data() {
+        return {
+            explorableSites: [],
+            showAddFeed: false,
+        }
+    },
+    created() {
+        this.sites()
     },
     methods: {
         async sites() {
-            const settings = await axios.get(generateUrl("/apps/news/settings"));
-            console.log(settings.data);
-            console.log(settings.data.settings.exploreUrl);
+            const settings = await axios.get(
+                generateUrl('/apps/news/settings')
+            )
+            // console.log(settings.data)
+            // console.log(settings.data.settings.exploreUrl)
 
-            const exploreUrl = settings.data.settings.exploreUrl + 'feeds.en.json';
-            const explore = await axios.get(exploreUrl);
-            console.log(explore.data);
+            const exploreUrl
+                = settings.data.settings.exploreUrl + 'feeds.en.json'
+            const explore = await axios.get(exploreUrl)
 
-            Object.keys(explore.data).forEach(key =>
-                explore.data[key].forEach(value =>
+            Object.keys(explore.data).forEach((key) =>
+                explore.data[key].forEach((value) =>
                     this.explorableSites.push(value)
                 )
-            );
+            )
         },
         async subscribe(feed) {
-            this.feed = feed;
-            this.showAddFeed = true;
+            // this.feed = feed
+            this.showAddFeed = true
         },
         closeShowAddFeed() {
-            this.showAddFeed = false;
-        }
+            this.showAddFeed = false
+        },
     },
-    created() {
-        this.sites();
-    }
 }
 </script>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 33923f89b..e73719fff 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,20 +1,18 @@
 <template>
     <AppNavigation>
-        <AddFeed v-if="showAddFeed" @close="closeShowAddFeed()"></AddFeed>
-        <AppNavigationNew
-            :text="t('news','Subscribe')"
+        <AddFeed v-if="showAddFeed" @close="closeShowAddFeed()" />
+        <AppNavigationNew :text="t('news', 'Subscribe')"
             button-id="new-feed-button"
             button-class="icon-add"
-            @click="showShowAddFeed()"/>
+            @click="showShowAddFeed()" />
 
         <ul id="locations" class="with-icon">
+            <AppNavigationNewItem :title="t('news', 'New folder')"
+                icon="icon-add-folder"
+                @new-item="newFolder" />
 
-            <AppNavigationNewItem :title="t('news','New folder')"
-                                  icon="icon-add-folder"
-                                  @new-item="newFolder">
-            </AppNavigationNewItem>
-
-            <AppNavigationItem :title="t('news','Unread articles')" icon="icon-rss">
+            <AppNavigationItem :title="t('news', 'Unread articles')"
+                icon="icon-rss">
                 <template #actions>
                     <ActionButton icon="icon-checkmark" @click="alert('Edit')">
                         t('news','Mark read')
@@ -24,86 +22,109 @@
                     <CounterBubble>5</CounterBubble>
                 </template>
             </AppNavigationItem>
-            <AppNavigationItem :title="t('news','All articles')" icon="icon-rss">
+            <AppNavigationItem :title="t('news', 'All articles')"
+                icon="icon-rss">
                 <template #actions>
                     <ActionButton icon="icon-checkmark" @click="alert('Edit')">
                         t('news','Mark read')
                     </ActionButton>
                 </template>
             </AppNavigationItem>
-            <AppNavigationItem :title="t('news','Starred')" icon="icon-starred">
+            <AppNavigationItem :title="t('news', 'Starred')"
+                icon="icon-starred">
                 <template #counter>
                     <CounterBubble>35</CounterBubble>
                 </template>
             </AppNavigationItem>
 
-            <AppNavigationItem v-for="folder in folders" :title="folder.name" icon="icon-folder"
-                               :allowCollapse="true">
+            <AppNavigationItem v-for="folder in folders"
+                :key="folder.name"
+                :title="folder.name"
+                icon="icon-folder"
+                :allow-collapse="true">
                 <template #default>
-                    <AppNavigationItem v-for="feed in folder.feeds" :title="feed.title" >
+                    <AppNavigationItem v-for="feed in folder.feeds"
+                        :key="feed.name"
+                        :title="feed.title">
                         <template #icon>
-                            <img :src="feed.faviconLink" v-if="feed.faviconLink" alt="feedIcon">
-                            <div class="icon-rss"  v-if="!feed.faviconLink"></div>
+                            <img v-if="feed.faviconLink"
+                                :src="feed.faviconLink"
+                                alt="feedIcon">
+                            <div v-if="!feed.faviconLink" class="icon-rss" />
                         </template>
                         <template #actions>
-                            <ActionButton icon="icon-checkmark" @click="alert('Mark read')">
-                                {{ t('news', 'Mark read') }}
+                            <ActionButton icon="icon-checkmark"
+                                @click="alert('Mark read')">
+                                {{ t("news", "Mark read") }}
                             </ActionButton>
-                            <ActionButton icon="icon-pinned" @click="alert('Rename')">
-                                {{ t('news', 'Unpin from top') }}
+                            <ActionButton icon="icon-pinned"
+                                @click="alert('Rename')">
+                                {{ t("news", "Unpin from top") }}
                             </ActionButton>
-                            <ActionButton icon="icon-caret-dark" @click="deleteFolder(folder)">
-                                {{ t('news', 'Newest first') }}
+                            <ActionButton icon="icon-caret-dark"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Newest first") }}
                             </ActionButton>
-                            <ActionButton icon="icon-caret-dark" @click="deleteFolder(folder)">
-                                {{ t('news', 'Oldest first') }}
+                            <ActionButton icon="icon-caret-dark"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Oldest first") }}
                             </ActionButton>
-                            <ActionButton icon="icon-caret-dark" @click="deleteFolder(folder)">
-                                {{ t('news', 'Default order') }}
+                            <ActionButton icon="icon-caret-dark"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Default order") }}
                             </ActionButton>
-                            <ActionButton icon="icon-full-text-disabled" @click="deleteFolder(folder)">
-                                {{ t('news', 'Enable full text') }}
+                            <ActionButton icon="icon-full-text-disabled"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Enable full text") }}
                             </ActionButton>
-                            <ActionButton icon="icon-full-text-enabled" @click="deleteFolder(folder)">
-                                {{ t('news', 'Disable full text') }}
+                            <ActionButton icon="icon-full-text-enabled"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Disable full text") }}
                             </ActionButton>
-                            <ActionButton icon="icon-updatemode-default" @click="deleteFolder(folder)">
-                                {{ t('news', 'Unread updated') }}
+                            <ActionButton icon="icon-updatemode-default"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Unread updated") }}
                             </ActionButton>
-                            <ActionButton icon="icon-updatemode-unread" @click="deleteFolder(folder)">
-                                {{ t('news', 'Ignore updated') }}
+                            <ActionButton icon="icon-updatemode-unread"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Ignore updated") }}
                             </ActionButton>
-                            <ActionButton icon="icon-icon-rss" @click="deleteFolder(folder)">
-                                {{ t('news', 'Open feed URL') }}
+                            <ActionButton icon="icon-icon-rss"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Open feed URL") }}
                             </ActionButton>
-                            <ActionButton icon="icon-icon-rename" @click="deleteFolder(folder)">
-                                {{ t('news', 'Rename') }}
+                            <ActionButton icon="icon-icon-rename"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Rename") }}
                             </ActionButton>
-                            <ActionButton icon="icon-delete" @click="deleteFolder(folder)">
-                                {{ t('news', 'Delete') }}
+                            <ActionButton icon="icon-delete"
+                                @click="deleteFolder(folder)">
+                                {{ t("news", "Delete") }}
                             </ActionButton>
                         </template>
                     </AppNavigationItem>
                 </template>
-                <template #counter v-if="folder.feedCount > 0">
+                <template v-if="folder.feedCount > 0" #counter>
                     <CounterBubble>{{ folder.feedCount }}</CounterBubble>
                 </template>
                 <template #actions>
-                    <ActionButton icon="icon-checkmark" @click="alert('Mark read')">
-                        {{ t('news', 'Mark read') }}
+                    <ActionButton icon="icon-checkmark"
+                        @click="alert('Mark read')">
+                        {{ t("news", "Mark read") }}
                     </ActionButton>
                     <ActionButton icon="icon-rename" @click="alert('Rename')">
-                        {{ t('news', 'Rename') }}
+                        {{ t("news", "Rename") }}
                     </ActionButton>
-                    <ActionButton icon="icon-delete" @click="deleteFolder(folder)">
-                        {{ t('news', 'Delete') }}
+                    <ActionButton icon="icon-delete"
+                        @click="deleteFolder(folder)">
+                        {{ t("news", "Delete") }}
                     </ActionButton>
                 </template>
             </AppNavigationItem>
 
-            <AppNavigationItem :title="t('news','Explore')"
-                               icon="icon-link"
-                               :to="{ name: 'explore' }">
+            <AppNavigationItem :title="t('news', 'Explore')"
+                icon="icon-link"
+                :to="{ name: 'explore' }">
                 <template #counter>
                     <CounterBubble>35</CounterBubble>
                 </template>
@@ -113,14 +134,15 @@
 </template>
 
 <script>
+
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import AppNavigationNewItem from '@nextcloud/vue/dist/Components/AppNavigationNewItem'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
+// import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
 import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import AddFeed from "./AddFeed";
+import AddFeed from './AddFeed'
 
 export default {
     components: {
@@ -128,37 +150,38 @@ export default {
         AppNavigationNew,
         AppNavigationItem,
         AppNavigationNewItem,
-        AppNavigationCounter,
+        // AppNavigationCounter,
         CounterBubble,
         ActionButton,
-        AddFeed
+        AddFeed,
     },
-    props: {
-        showAddFeed: false,
+    data() {
+        return {
+            showAddFeed: false,
+        }
     },
     computed: {
         folders() {
             return this.$store.state.folders
         },
     },
+    created() {},
     methods: {
         newFolder(value) {
-            const folderName = value.trim();
-            const folder = {name: folderName};
-            this.$store.dispatch('addFolder', {folder})
+            const folderName = value.trim()
+            const folder = { name: folderName }
+            this.$store.dispatch('addFolder', { folder })
         },
         deleteFolder(folder) {
-            this.$store.dispatch('deleteFolder', {folder})
-            window.location.reload(true);
+            this.$store.dispatch('deleteFolder', { folder })
+            window.location.reload(true)
         },
         showShowAddFeed() {
-            this.showAddFeed = true;
+            this.showAddFeed = true
         },
         closeShowAddFeed() {
-            this.showAddFeed = false;
-        }
+            this.showAddFeed = false
+        },
     },
-    created() {
-    }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 51aec5617..54fecf3d9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,13 @@
+
 import Vue from 'vue'
 import App from './App'
 import VueRouter from 'vue-router'
 import Explore from './components/Explore'
-import {generateUrl} from "@nextcloud/router";
+import { generateUrl } from '@nextcloud/router'
 import Vuex from 'vuex'
-import axios from "@nextcloud/axios";
+import axios from '@nextcloud/axios'
+
+import { Tooltip } from '@nextcloud/vue'
 
 Vue.prototype.t = t
 Vue.prototype.n = n
@@ -14,55 +17,57 @@ Vue.prototype.OCA = OCA
 Vue.use(Vuex)
 Vue.use(VueRouter)
 
-import { Tooltip } from '@nextcloud/vue'
-
 Vue.directive('tooltip', Tooltip)
 
-const feedUrl = generateUrl("/apps/news/feeds")
-const folderUrl = generateUrl("/apps/news/folders")
+const feedUrl = generateUrl('/apps/news/feeds')
+const folderUrl = generateUrl('/apps/news/folders')
 
 const routes = [
     {
         name: 'explore',
         path: '#explore',
-        component: Explore
+        component: Explore,
     },
 ]
 
 const router = new VueRouter({
     mode: 'history',
     base: generateUrl('apps/news'),
-    routes
-});
+    routes,
+})
 
 const store = new Vuex.Store({
     state: {
         folders: [],
-        feeds: []
+        feeds: [],
     },
     mutations: {
         addFolders(state, folders) {
-            folders.forEach(it => {
+            folders.forEach((it) => {
                 it.feedCount = 0
                 state.folders.push(it)
             })
         },
         addFeeds(state, feeds) {
-            feeds.forEach(it => {
+            feeds.forEach((it) => {
                 state.feeds.push(it)
-                const folder = state.folders.find(folder => folder.id === it.folderId)
+                const folder = state.folders.find(
+                    (folder) => folder.id === it.folderId
+                )
                 folder.feeds.push(it)
                 folder.feedCount += it.unreadCount
             })
-        }
+        },
     },
     actions: {
-        addFolder({commit}, {folder}) {
-            axios.post(folderUrl, {folderName: folder.name}).then(
-                response => commit('addFolders', response.data.folders)
-            );
+        addFolder({ commit }, { folder }) {
+            axios
+                .post(folderUrl, { folderName: folder.name })
+                .then((response) =>
+                    commit('addFolders', response.data.folders)
+                )
         },
-        deleteFolder({commit}, {folder}) {
+        deleteFolder({ commit }, { folder }) {
             /**
             this.getByFolderId(folderId).forEach(function (feed) {
                 promises.push(self.reversiblyDelete(feed.id, false, true));
@@ -72,22 +77,20 @@ const store = new Vuex.Store({
              */
             axios.delete(folderUrl + '/' + folder.id).then()
         },
-        loadFolder({commit}) {
-            console.log('loading folders')
-            axios.get(folderUrl).then(
-                response => {
-                    commit('addFolders', response.data.folders);
-                    axios.get(feedUrl).then(
-                        response => commit('addFeeds', response.data.feeds)
+        loadFolder({ commit }) {
+            axios.get(folderUrl).then((response) => {
+