Add feature to Group starred Items per Feed

CHANGELOG.md

@@ -7,7 +7,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 # Unreleased
 ## [26.x.x]
 ### Changed
-
+- Add feature to Group starred Items per Feed
 
 ### Fixed
 

lib/Controller/ItemController.php

@@ -155,7 +155,8 @@ public function index(
                         $limit,
                         $offset,
                         $oldestFirst,
-                        $search_items
+                        $search_items,
+                        $id
                     );
                     break;
             }

lib/Db/Feed.php

@@ -53,6 +53,8 @@ class Feed extends Entity implements IAPI, \JsonSerializable
     protected $folderId;
     /** @var int */
     protected $unreadCount;
+    /** @var int */
+    protected $starredCount;
     /** @var string|null */
     protected $link = null;
     /** @var bool */
@@ -322,6 +324,7 @@ public function jsonSerialize(): array
             'added',
             'folderId',
             'unreadCount',
+            'starredCount',
             'link',
             'preventUpdate',
             'deletedAt',
@@ -594,6 +597,19 @@ public function setUnreadCount(int $unreadCount): Feed
         return $this;
     }
 
+    /**
+     * @param int $starredCount
+     */
+    public function setStarredCount(int $starredCount): Feed
+    {
+        if ($this->starredCount !== $starredCount) {
+            $this->starredCount = $starredCount;
+            $this->markFieldUpdated('starredCount');
+        }
+
+        return $this;
+    }
+
     /**
      * @param int $updateErrorCount
      */

lib/Db/FeedMapperV2.php

@@ -52,13 +52,24 @@ public function __construct(IDBConnection $db, Time $time)
     public function findAllFromUser(string $userId, array $params = []): array
     {
         $builder = $this->db->getQueryBuilder();
-        $builder->select('feeds.*', $builder->func()->count('items.id', 'unreadCount'))
+        $builder
+            ->select(
+                'feeds.*',
+                $builder->func()->count('items_unread.id', 'unreadCount'),
+                $builder->func()->count('items_starred.id', 'starredCount')
+            )
             ->from(static::TABLE_NAME, 'feeds')
             ->leftJoin(
                 'feeds',
                 ItemMapperV2::TABLE_NAME,
-                'items',
-                'items.feed_id = feeds.id AND items.unread = :unread'
+                'items_unread',
+                'items_unread.feed_id = feeds.id AND items_unread.unread = :unread'
+            )
+            ->leftJoin(
+                'feeds',
+                ItemMapperV2::TABLE_NAME,
+                'items_starred',
+                'items_starred.feed_id = feeds.id AND items_starred.starred = 1'
             )
             ->where('feeds.user_id = :user_id')
             ->andWhere('feeds.deleted_at = 0')

lib/Db/ItemMapperV2.php

@@ -556,6 +556,7 @@ public function findAllFolder(
      * @throws ServiceValidationException
      */
     public function findAllItems(
+        int $feedId,
         string $userId,
         int $type,
         int $limit,
@@ -588,6 +589,10 @@ public function findAllItems(
             case ListType::STARRED:
                 $builder->andWhere('items.starred = :starred')
                         ->setParameter('starred', true);
+                if ($feedId !== 0) {
+                    $builder->andWhere('items.feed_id = :feedId')
+                            ->setParameter('feedId', $feedId);
+                }
                 break;
             case ListType::UNREAD:
                 $builder->andWhere('items.unread = :unread')

lib/Service/ItemServiceV2.php

@@ -388,8 +388,9 @@ public function findAllWithFilters(
         int $limit,
         int $offset,
         bool $oldestFirst,
-        array $search = []
+        array $search = [],
+        int $id = 0
     ): array {
-        return $this->mapper->findAllItems($userId, $type, $limit, $offset, $oldestFirst, $search);
+        return $this->mapper->findAllItems($id, $userId, $type, $limit, $offset, $oldestFirst, $search);
     }
 }

src/components/Sidebar.vue

@@ -41,7 +41,27 @@
 					<RssIcon />
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem :name="t('news', 'Starred')" icon="icon-starred" :to="{ name: ROUTES.STARRED }">
+			<NcAppNavigationItem :name="t('news', 'Starred')"
+				icon="icon-starred"
+				:to="{ name: ROUTES.STARRED }"
+				:allow-collapse="true"
+				:exact="true"
+				:force-menu="true">
+				<NcAppNavigationItem v-for="group in GroupedStars"
+					:key="group.id"
+					:ref="'starredfeed-' + group.id"
+					:name="group.title"
+					:icon="''"
+					:exact="true"
+					:to="{ name: ROUTES.STARREDFEED, params: { feedId: group.id.toString() } }">
+					<template #icon>
+						<RssIcon v-if="!group.faviconLink" />
+						<span v-if="group.faviconLink" style="width: 16px; height: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + group.faviconLink + ')' }" />
+					</template>
+					<template #counter>
+						<NcCounterBubble :count="group.starredCount" />
+					</template>
+				</NcAppNavigationItem>
 				<template #counter>
 					<NcCounterBubble :count="items.starredCount" />
 				</template>
@@ -371,6 +391,9 @@ export default Vue.extend({
 
 			return navItems
 		},
+		GroupedStars(): Array<Feed> {
+			return this.$store.getters.feeds.filter((item: Feed) => item.starredCount !== 0)
+		},
 		loading: {
 			get() {
 				return this.$store.getters.loading

src/components/routes/Starred.vue

@@ -1,10 +1,10 @@
 <template>
 	<ContentTemplate :items="starred"
-		:fetch-key="'starred'"
+		:fetch-key="feedId ? 'starredfeed-'+feedId : 'starred'"
 		@load-more="fetchMore()">
 		<template #header>
 			{{ t('news', 'Starred') }}
-			<NcCounterBubble class="counter-bubble" :count="items.starredCount" />
+			<NcCounterBubble class="counter-bubble" :count="feedId ? starred.length : items.starredCount" />
 		</template>
 	</ContentTemplate>
 </template>
@@ -18,26 +18,33 @@ import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import ContentTemplate from '../ContentTemplate.vue'
 
 import { FeedItem } from '../../types/FeedItem'
-import { ACTIONS, MUTATIONS } from '../../store'
+import { ACTIONS } from '../../store'
 
 export default Vue.extend({
 	components: {
 		ContentTemplate,
 		NcCounterBubble,
 	},
+	props: {
+		feedId: {
+			type: String,
+			required: false,
+			default: undefined,
+		},
+	},
 	computed: {
 		...mapState(['items']),
 		starred(): FeedItem[] {
+			if (this.feedId) {
+				return this.$store.getters.starred.filter((item: FeedItem) => item.feedId === Number(this.feedId))
+			}
 			return this.$store.getters.starred
 		},
 	},
-	created() {
-		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
-	},
 	methods: {
 		async fetchMore() {
 			if (!this.$store.state.items.fetchingItems.starred) {
-			  this.$store.dispatch(ACTIONS.FETCH_STARRED)
+			  this.$store.dispatch(ACTIONS.FETCH_STARRED, { feedId: this.feedId === undefined ? 0 : Number(this.feedId) })
 			}
 		},
 	},

src/dataservices/item.service.ts

@@ -45,10 +45,11 @@ export class ItemService {
 	/**
 	 * Makes backend call to retrieve starred items
 	 *
+	 * @param feedId (id of the feed to retrieve starred items for)
 	 * @param start (id of last starred item loaded)
 	 * @return {AxiosResponse} response object containing backend request response
 	 */
-	static async fetchStarred(start: number): Promise<AxiosResponse> {
+	static async fetchStarred(feedId: number, start: number): Promise<AxiosResponse> {
 		return await axios.get(API_ROUTES.ITEMS, {
 			params: {
 				limit: 40,
@@ -57,6 +58,7 @@ export class ItemService {
 				showAll: store.state.showAll,
 				type: ITEM_TYPES.STARRED,
 				offset: start,
+				...(feedId !== 0 ? { id: feedId } : {}),
 			},
 		})
 	}

src/routes/index.ts

@@ -12,6 +12,7 @@ import store from './../store/app'
 export const ROUTES = {
 	EXPLORE: 'explore',
 	STARRED: 'starred',
+	STARREDFEED: 'starredfeed',
 	UNREAD: 'unread',
 	FEED: 'feed',
 	FOLDER: 'folder',
@@ -35,7 +36,16 @@ const getInitialRoute = function() {
 			params,
 		}
 	case '2':
-		return { name: ROUTES.STARRED }
+		if (store.state.lastViewedFeedId) {
+			params.feedId = store.state.lastViewedFeedId
+			return {
+				name: ROUTES.STARREDFEED,
+				params,
+			}
+		}
+		return {
+			name: ROUTES.STARRED,
+		}
 	case '3':
 		return { name: ROUTES.ALL }
 	case '5':
@@ -63,7 +73,18 @@ const routes = [
 		name: ROUTES.STARRED,
 		path: '/starred',
 		component: StarredPanel,
+		redirect: { name: 'starredItems' },
 		props: true,
+		children: [
+			{
+				name: 'starredItems',
+				path: '',
+			},
+			{
+				name: ROUTES.STARREDFEED,
+				path: ':feedId',
+			},
+		],
 	},
 	{
 		name: ROUTES.UNREAD,

src/store/feed.ts

@@ -280,6 +280,18 @@ export const mutations = {
 		}
 	},
 
+	[FEED_MUTATION_TYPES.MODIFY_STARRED_COUNT](
+		state: FeedState,
+		{ feedId, add }: { feedId: number, add: boolean },
+	) {
+		const feed = state.feeds.find((feed: Feed) => {
+			return feed.id === feedId
+		})
+		if (feed) {
+			_.assign(feed, { starredCount: feed.starredCount + (add ? 1 : -1) })
+		}
+	},
+
 	[FEED_MUTATION_TYPES.FEED_DELETE](
 		state: FeedState,
 		feedId: number,

src/store/item.ts

@@ -144,14 +144,20 @@ export const actions = {
 	 * @param param0 ActionParams
 	 * @param param0.commit Commit param
 	 * @param param1 ActionArgs
+	 * @param param1.feedId ID of the feed
 	 * @param param1.start Start data
 	 */
 	async [FEED_ITEM_ACTION_TYPES.FETCH_STARRED](
 		{ commit }: ActionParams<ItemState>,
-		{ start }: { start: number } = { start: 0 },
+		{ feedId, start }: { feedId: number, start: number } = { feedId: 0, start: 0 },
 	) {
-		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'starred', fetching: true })
-		const response = await ItemService.debounceFetchStarred(start || state.lastItemLoaded.starred)
+		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: feedId ? 'starredfeed-' + feedId : 'starred', fetching: true })
+
+		const lastLoadedStarred = feedId
+			? state.lastItemLoaded['starredfeed-' + feedId]
+			: state.lastItemLoaded.starred
+		const offset = start || lastLoadedStarred
+		const response = await ItemService.debounceFetchStarred(feedId, offset)
 		if (response?.data.newestItemId && response?.data.newestItemId !== state.newestItemId) {
 			state.syncNeeded = true
 		}
@@ -162,15 +168,15 @@ export const actions = {
 		}
 
 		if (response?.data.items.length < 40) {
-			commit(FEED_ITEM_MUTATION_TYPES.SET_ALL_LOADED, { key: 'starred', loaded: true })
+			commit(FEED_ITEM_MUTATION_TYPES.SET_ALL_LOADED, { key: feedId ? 'starredfeed-' + feedId : 'starred', loaded: true })
 		} else {
-			commit(FEED_ITEM_MUTATION_TYPES.SET_ALL_LOADED, { key: 'starred', loaded: false })
+			commit(FEED_ITEM_MUTATION_TYPES.SET_ALL_LOADED, { key: feedId ? 'starredfeed-' + feedId : 'starred', loaded: false })
 		}
 		if (response?.data.items.length > 0) {
 			const lastItem = response?.data.items[response?.data.items.length - 1].id
-			commit(FEED_ITEM_MUTATION_TYPES.SET_LAST_ITEM_LOADED, { key: 'starred', lastItem })
+			commit(FEED_ITEM_MUTATION_TYPES.SET_LAST_ITEM_LOADED, { key: feedId ? 'starredfeed-' + feedId : 'starred', lastItem })
 		}
-		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'starred', fetching: false })
+		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: feedId ? 'starredfeed-' + feedId : 'starred', fetching: false })
 	},
 
 	/**
@@ -300,8 +306,10 @@ export const actions = {
 		ItemService.markStarred(item, true)
 
 		item.starred = true
+		const feedId = item.feedId
 		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
 		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount + 1)
+		commit(FEED_MUTATION_TYPES.MODIFY_STARRED_COUNT, { feedId, add: true })
 	},
 
 	/**
@@ -319,8 +327,10 @@ export const actions = {
 		ItemService.markStarred(item, false)
 
 		item.starred = false
+		const feedId = item.feedId
 		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
 		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount - 1)
+		commit(FEED_MUTATION_TYPES.MODIFY_STARRED_COUNT, { feedId, add: false })
 	},
 
 	/**

src/types/Feed.ts

@@ -3,6 +3,7 @@ import { FEED_ORDER, FEED_UPDATE_MODE } from '../dataservices/feed.service'
 export type Feed = {
   folderId?: number;
   unreadCount: number;
+  starredCount: number;
   url: string;
   title?: string;
   autoDiscover?: boolean;

src/types/MutationTypes.ts

@@ -7,6 +7,7 @@ export const FEED_MUTATION_TYPES = {
 	SET_NEWEST_ITEM_ID: 'SET_NEWEST_ITEM_ID',
 	SET_FEED_ALL_READ: 'SET_FEED_ALL_READ',
 	MODIFY_FEED_UNREAD_COUNT: 'MODIFY_FEED_UNREAD_COUNT',
+	MODIFY_STARRED_COUNT: 'MODIFY_STARRED_COUNT',
 
 	FEED_DELETE: 'FEED_DELETE',
 }

tests/Unit/Db/ItemMapperPaginatedTest.php

@@ -174,7 +174,7 @@ public function testFindAllItemsFullInverted()
                 false
             );
 
-        $result = $this->class->findAllItems('jack', 3, 10, 10, true, []);
+        $result = $this->class->findAllItems(0, 'jack', 3, 10, 10, true, []);
         $this->assertEquals([Item::fromRow(['id' => 4])], $result);
     }
 

tests/javascript/unit/services/item.service.spec.ts

@@ -29,7 +29,7 @@ describe('item.service.ts', () => {
 		it('should call GET with offset set to start param and STARRED item type', async () => {
 			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
 
-			await ItemService.fetchStarred(0)
+			await ItemService.fetchStarred(0, 0)
 
 			expect(axios.get).toBeCalled()
 			const queryParams = (axios.get as any).mock.calls[0][1].params