connect actions to backend

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

7 files changed, 66 insertions, 30 deletions

diff --git a/src/components/FeedItem.vue b/src/components/FeedItem.vue
index 5eabf30cf..a78983343 100644
--- a/src/components/FeedItem.vue
+++ b/src/components/FeedItem.vue
@@ -33,7 +33,7 @@
 					</template>
 					<NcActionButton>
 						<template #default>
-							<!-- TODO: --> TODO
+							<!-- TODO: Share Menu --> TODO
 						</template>
 						<template #icon>
 							<ShareVariant />
@@ -64,7 +64,7 @@
 					{{ t('news', 'by') }} {{ item.author }}
 				</span>
 				<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
-					<!-- TODO: Fix this -->
+					<!-- TODO: Fix link to feed -->
 					<a :href="`#/items/feeds/${item.feedId}/`">
 						{{ getFeed(item.feedId).title }}
 						<img v-if="getFeed(item.feedId).faviconLink && isCompactView()" :src="getFeed(item.feedId).faviconLink" alt="favicon">
@@ -77,7 +77,7 @@
 				</span>
 			</div>
 
-			<!-- TODO: Test this -->
+			<!-- TODO: Test audio/video -->
 			<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure">
 				<button @click="play(item)">
 					{{ t('news', 'Play audio') }}
@@ -129,6 +129,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 import { Feed } from '../types/Feed'
 import { FeedItem } from '../types/FeedItem'
+import { ACTIONS, MUTATIONS } from '../store'
 
 export default Vue.extend({
 	name: 'FeedItem',
@@ -199,26 +200,23 @@ export default Vue.extend({
 			return this.$store.getters.feeds.find((feed: Feed) => feed.id === id)
 		},
 		getMediaType(mime: any): 'audio' | 'video' | false {
-			// TODO: figure out how to check
+			// TODO: figure out how to check media type
 			return false
 		},
 		play(item: any) {
-			// TODO: implement this
+			// TODO: implement play audio/video
 		},
 		markRead(item: FeedItem): void {
 			if (!this.keepUnread) {
-				// TODO: update state
-				item.unread = false
+				this.$store.dispatch(ACTIONS.MARK_READ, { item })
 			}
 		},
 		toggleKeepUnread(item: FeedItem): void {
 			this.keepUnread = !this.keepUnread
-			// TODO: update state
-			item.unread = true
+			this.$store.dispatch(ACTIONS.MARK_UNREAD, { item })
 		},
 		toggleStarred(item: FeedItem): void {
-			// TODO: update state
-			item.starred = !item.starred
+			this.$store.dispatch(item.starred ? ACTIONS.UNSTAR_ITEM : ACTIONS.STAR_ITEM, { item })
 		},
 	},
 })
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 0cad27654..a9c128b15 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -181,9 +181,6 @@ export default Vue.extend({
 		...mapState(['feeds', 'folders', 'items']),
 		...mapState(SideBarState),
 	},
-	created() {
-		// TODO: init?
-	},
 	methods: {
 		newFolder(value: string) {
 			const folderName = value.trim()
diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index 521ccda1e..4dbfd9f5f 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -7,9 +7,9 @@
 			</NcCounterBubble>
 		</div>
 		<VirtualScroll :reached-end="reachedEnd" @load-more="fetchMore()">
-			<template v-if="items.starredItems && items.starredItems.length > 0">
-				<template v-for="item in items.starredItems">
-					<FeedItem :key="item.id" :item="item" />
+			<template v-if="starred && starred.length > 0">
+				<template v-for="item in starred">
+					<FeedItemComponent :key="item.id" :item="item" />
 				</template>
 			</template>
 		</VirtualScroll>
@@ -23,13 +23,15 @@ import { mapState } from 'vuex'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import VirtualScroll from './VirtualScroll.vue'
-import FeedItem from './FeedItem.vue'
+import FeedItemComponent from './FeedItem.vue'
+
+import { FeedItem } from '../types/FeedItem'
 
 export default Vue.extend({
 	components: {
 		NcCounterBubble,
 		VirtualScroll,
-		FeedItem,
+		FeedItemComponent,
 	},
 	data() {
 		return {
@@ -38,6 +40,9 @@ export default Vue.extend({
 	},
 	computed: {
 		...mapState(['items']),
+		starred(): FeedItem[] {
+			return this.$store.getters.starred
+		},
 		reachedEnd(): boolean {
 			return this.mounted && this.$store.state.items.starredLoaded
 		},
@@ -47,7 +52,7 @@ export default Vue.extend({
 	},
 	methods: {
 		async fetchMore() {
-			// TODO
+			// TODO: fetch more starred
 		},
 	},
 })
diff --git a/src/components/VirtualScroll.vue b/src/components/VirtualScroll.vue
index 2f19e606e..cf5aeb24e 100644
--- a/src/components/VirtualScroll.vue
+++ b/src/components/VirtualScroll.vue
@@ -4,8 +4,6 @@
   - This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
   -->
 <script>
-import { h } from 'vue'
-
 import ItemSkeleton from './ItemSkeleton.vue'
 
 const GRID_ITEM_HEIGHT = 200 + 10
diff --git a/src/store/item.ts b/src/store/item.ts
index c10360c04..dbe343cb5 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -7,6 +7,10 @@ import { FeedItem } from '../types/FeedItem'
 
 export const FEED_ITEM_ACTION_TYPES = {
 	FETCH_STARRED: 'FETCH_STARRED',
+	MARK_READ: 'MARK_READ',
+	MARK_UNREAD: 'MARK_UNREAD',
+	STAR_ITEM: 'STAR_ITEM',
+	UNSTAR_ITEM: 'UNSTAR_ITEM',
 }
 
 export type ItemState = {
@@ -16,7 +20,6 @@ export type ItemState = {
 	starredCount: number;
 
 	allItems: FeedItem[];
-	starredItems: FeedItem[];
 }
 
 const state: ItemState = {
@@ -26,12 +29,11 @@ const state: ItemState = {
 	starredCount: 0,
 
 	allItems: [],
-	starredItems: [],
 }
 
 const getters = {
 	starred(state: ItemState) {
-		return state.starredItems
+		return state.allItems.filter((item) => item.starred)
 	},
 }
 
@@ -49,7 +51,7 @@ export const actions = {
 			},
 		})
 
-		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED, response.data.items)
+		commit(FEED_ITEM_MUTATION_TYPES.SET_ITEMS, response.data.items)
 		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, response.data.starred)
 
 		if (response.data.items.length < 40) {
@@ -57,18 +59,51 @@ export const actions = {
 		}
 		state.fetchingItems = false
 	},
+	[FEED_ITEM_ACTION_TYPES.MARK_READ]({ commit }: ActionParams, { item }: { item: FeedItem}) {
+		axios.post(API_ROUTES.ITEMS + `/${item.id}/read`, {
+			isRead: true,
+		})
+		item.unread = false
+		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
+	},
+	[FEED_ITEM_ACTION_TYPES.MARK_UNREAD]({ commit }: ActionParams, { item }: { item: FeedItem}) {
+		axios.post(API_ROUTES.ITEMS + `/${item.id}/read`, {
+			isRead: false,
+		})
+		item.unread = true
+		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
+	},
+	[FEED_ITEM_ACTION_TYPES.STAR_ITEM]({ commit }: ActionParams, { item }: { item: FeedItem}) {
+		axios.post(API_ROUTES.ITEMS + `/${item.feedId}/${item.guidHash}/star`, {
+			isStarred: true,
+		})
+		item.starred = true
+		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
+		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount + 1)
+	},
+	[FEED_ITEM_ACTION_TYPES.UNSTAR_ITEM]({ commit }: ActionParams, { item }: { item: FeedItem}) {
+		axios.post(API_ROUTES.ITEMS + `/${item.feedId}/${item.guidHash}/star`, {
+			isStarred: false,
+		})
+		item.starred = false
+		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
+		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount - 1)
+	},
 }
 
 export const mutations = {
-	[FEED_ITEM_MUTATION_TYPES.SET_STARRED](state: ItemState, items: FeedItem[]) {
+	[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](state: ItemState, items: FeedItem[]) {
 		items.forEach(it => {
-			state.starredItems.push(it)
+			state.allItems.push(it)
 		})
 	},
 	[FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT](state: ItemState, count: number) {
 		state.starredCount = count
 	},
-
+	[FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM](state: ItemState, { item }: { item: FeedItem }) {
+		const idx = state.allItems.findIndex((it) => it.id === item.id)
+		state.allItems.splice(idx, 1, item)
+	},
 }
 
 export default {
diff --git a/src/types/FeedItem.ts b/src/types/FeedItem.ts
index d7dabe75e..dcd8c255a 100644
--- a/src/types/FeedItem.ts
+++ b/src/types/FeedItem.ts
@@ -3,4 +3,6 @@ export type FeedItem = {
   title: string;
   unread: boolean;
   starred: boolean;
+  feedId: number;
+  guidHash: string;
 };
diff --git a/src/types/MutationTypes.ts b/src/types/MutationTypes.ts
index cb87a1719..8c00e714b 100644
--- a/src/types/MutationTypes.ts
+++ b/src/types/MutationTypes.ts
@@ -9,6 +9,7 @@ export const FOLDER_MUTATION_TYPES = {
 }
 
 export const FEED_ITEM_MUTATION_TYPES = {
-	SET_STARRED: 'SET_STARRED',
+	SET_ITEMS: 'SET_ITEMS',
 	SET_STARRED_COUNT: 'SET_STARRED_COUNT',
+	UPDATE_ITEM: 'UPDATE_ITEM',
 }