fix(webext): ensure to add missing channels on context menu actions

src/store/services/youtube/endpoints.ts

@@ -15,6 +15,16 @@ type FindChannelByNameResponse = {
   total: number;
 };
 
+type FindChannelByIdArgs = {
+  id: string;
+  maxResults?: number;
+};
+
+type FindChannelByIdResponse = {
+  items: Channel[];
+  total: number;
+};
+
 type GetChannelActivitiesArgs = {
   channel: Channel;
   publishedAfter?: string;
@@ -69,6 +79,28 @@ const queries = {
       total: response.pageInfo.totalResults,
     }),
   },
+  // Channel find by id query
+  findChannelById: {
+    query: ({ id, maxResults = 10 }: FindChannelByIdArgs) => ({
+      url: 'channels',
+      params: {
+        part: 'snippet,id',
+        fields: 'pageInfo,items(snippet,id)',
+        maxResults,
+        id,
+      },
+    }),
+    transformResponse: (response: Response): FindChannelByIdResponse => ({
+      items: response.items.map((item) => ({
+        title: item.snippet.title,
+        url: `https://www.youtube.com/channel/${item.snippet.channelId}/videos`,
+        description: item.snippet.description,
+        thumbnail: item.snippet.thumbnails.medium.url,
+        id: item.id,
+      })),
+      total: response.pageInfo.totalResults,
+    }),
+  },
   // Channel activities query
   getChannelActivities: {
     query: ({
@@ -128,12 +160,16 @@ const queries = {
   },
 };
 
-const extendedApi = youtubeApi.injectEndpoints({
+export const extendedApi = youtubeApi.injectEndpoints({
   endpoints: (builder) => ({
     findChannelByName: builder.query<
       FindChannelByNameResponse,
       FindChannelByNameArgs
     >(queries.findChannelByName),
+    findChannelById: builder.query<
+      FindChannelByIdResponse,
+      FindChannelByIdArgs
+    >(queries.findChannelById),
     getChannelActivities: builder.query<
       GetChannelActivitiesResponse,
       GetChannelActivitiesArgs
@@ -263,6 +299,7 @@ const extendedApi = youtubeApi.injectEndpoints({
 
 export const {
   useFindChannelByNameQuery,
+  useFindChannelByIdQuery,
   useGetChannelActivitiesQuery,
   useGetVideosByIdQuery,
   useGetChannelVideosQuery,

src/store/thunks.ts

@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { RootState } from 'store';
+import { Channel } from 'types';
+import { addChannel } from './reducers/channels';
+import { extendedApi } from './services/youtube';
+
+export const fetchChannelById = createAsyncThunk<
+  Channel | undefined,
+  { id: string },
+  { state: RootState }
+>('channels/fetchChannelById', async ({ id }, { getState, dispatch }) => {
+  const { channels } = getState();
+  // check for existing channel
+  const found = channels.list.find((channel: Channel) => channel.id === id);
+  if (found) {
+    return found;
+  }
+
+  // fetch channel by id
+  const result = dispatch(
+    extendedApi.endpoints.findChannelById.initiate({ id })
+  );
+  result.unsubscribe();
+  const response = await result;
+  const channel = response.data?.items[0];
+  if (channel) {
+    // save to channels list
+    dispatch(addChannel(channel));
+  }
+  return channel;
+});

src/store/utils/persist.ts

@@ -1,14 +1,18 @@
 import store, { RootState } from 'store';
 import storage from 'helpers/storage';
-import { AnyAction } from '@reduxjs/toolkit';
 import { log } from 'helpers/logger';
 
 export const storageKey = 'APP_YOUTUBE_VIEWER';
 
 let canPersistState = true;
 let prevSerializedState = '';
 
-export const dispatch = (action: AnyAction, persist: boolean = false) => {
+type DispatchParams = Parameters<typeof store.dispatch>;
+
+export const dispatch = (
+  action: DispatchParams[0],
+  persist: boolean = false
+) => {
   canPersistState = persist;
   store.dispatch(action);
 };

src/ui/components/webext/Background/ContextMenus.tsx

@@ -12,6 +12,7 @@ import {
   selectWatchLaterVideos,
 } from 'store/selectors/videos';
 import { getVideoId } from 'helpers/utils';
+import { fetchChannelById } from 'store/thunks';
 
 declare var browser: any;
 
@@ -60,6 +61,8 @@ export default function ContextMenus(props: ContextMenusProps) {
               }),
               true
             );
+            // ensure to add channel too (if it does not exist)
+            dispatch(fetchChannelById({ id: channelId }), true);
             browser.contextMenus.update(menuItemId, { enabled: false });
           });
           break;
@@ -74,6 +77,8 @@ export default function ContextMenus(props: ContextMenusProps) {
                 }),
                 true
               );
+              // ensure to add channel too (if it does not exist)
+              dispatch(fetchChannelById({ id: channelId }), true);
             } else {
               dispatch(removeViewedVideo({ id }), true);
             }