hot-fix: correctly calculate watch later & bookmarked videos count

AXeL-dev · Nov 7, 2022 · 39d7dfd · 39d7dfd
1 parent 6a2f25e
commit 39d7dfd
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 41 deletions.
diff --git a/src/providers/ChannelVideosProvider.tsx b/src/providers/ChannelVideosProvider.tsx
@@ -27,7 +27,7 @@ export interface ChannelVideosCount {
 }
 
 type ChannelVideosContextType = {
-  videosCount: { [key: string]: ChannelVideosCount };
+  getAllVideosCount: (view: HomeView) => number;
   getChannelData: (view: HomeView, channel: Channel) => ChannelData | undefined;
   setChannelData: (view: HomeView, data: ChannelData) => void;
   clearChannelsData: (view: HomeView) => void;
@@ -59,8 +59,9 @@ const ChannelVideosContext = createContext<
 >(undefined);
 
 export const ChannelVideosProvider: FC = memo(({ children }) => {
-  const [videosCount, setVideosCount] =
-    useState<ChannelVideosContextType['videosCount']>(initialVideosCount);
+  const [videosCount, setVideosCount] = useState<{
+    [key: string]: ChannelVideosCount;
+  }>(initialVideosCount);
   const channelsMap = useRef<{ [key: string]: Map<string, ChannelData> }>(
     initialChannelsMap,
   );
@@ -76,24 +77,28 @@ export const ChannelVideosProvider: FC = memo(({ children }) => {
     [],
   );
 
-  const getCount = (view: HomeView) => {
+  const getCount = (
+    view: HomeView,
+    filterCallback: (data: ChannelData) => boolean = () => true,
+  ) => {
     const channelsData = Array.from(channelsMap.current[view].values());
-    const hiddenChannelsIds = hiddenChannels.map(({ id }) => id);
-    const count = channelsData
-      .filter(({ channel }) => !hiddenChannelsIds.includes(channel.id))
-      .reduce(
-        (acc, data) => ({
-          current: acc.current + (data.items?.length || 0),
-          total: acc.total + (data.total || 0),
-        }),
-        { current: 0, total: 0 },
-      );
+    const count = channelsData.filter(filterCallback).reduce(
+      (acc, data) => ({
+        current: acc.current + (data.items?.length || 0),
+        total: acc.total + (data.total || 0),
+      }),
+      { current: 0, total: 0 },
+    );
     return count;
   };
 
   useDidMountEffect(() => {
     // update videos count for the all view (since it is the only view where we hide channels)
-    const count = getCount(HomeView.All);
+    const hiddenChannelsIds = hiddenChannels.map(({ id }) => id);
+    const count = getCount(
+      HomeView.All,
+      ({ channel }) => !hiddenChannelsIds.includes(channel.id),
+    );
     updateCount(HomeView.All, count);
   }, [hiddenChannels]);
 
@@ -135,9 +140,19 @@ export const ChannelVideosProvider: FC = memo(({ children }) => {
     }
   };
 
+  const getAllVideosCount = (view: HomeView) => {
+    const count = videosCount[view];
+    switch (view) {
+      case HomeView.All:
+        return count.current;
+      default:
+        return count.total;
+    }
+  };
+
   const value = useMemo(
     () => ({
-      videosCount,
+      getAllVideosCount,
       getChannelData,
       setChannelData,
       clearChannelsData,
@@ -155,7 +170,7 @@ export const ChannelVideosProvider: FC = memo(({ children }) => {
 });
 
 type ChannelVideosHookType = {
-  videosCount: ChannelVideosCount;
+  getAllVideosCount: () => number;
   getChannelData: (channel: Channel) => ChannelData | undefined;
   setChannelData: (data: ChannelData) => void;
   clearChannelsData: () => void;
@@ -173,7 +188,7 @@ export function useChannelVideos(view: HomeView): ChannelVideosHookType {
   }
 
   const {
-    videosCount,
+    getAllVideosCount,
     getChannelData,
     setChannelData,
     clearChannelsData,
@@ -182,7 +197,7 @@ export function useChannelVideos(view: HomeView): ChannelVideosHookType {
   } = context;
 
   return {
-    videosCount: videosCount[view],
+    getAllVideosCount: () => getAllVideosCount(view),
     getChannelData: (channel) => getChannelData(view, channel),
     setChannelData: (data) => setChannelData(view, data),
     clearChannelsData: () => clearChannelsData(view),

diff --git a/src/ui/components/pages/Home/ChannelRenderer/StaticRenderer.tsx b/src/ui/components/pages/Home/ChannelRenderer/StaticRenderer.tsx
@@ -25,7 +25,7 @@ function StaticRenderer(props: StaticRendererProps) {
   const { data, error, isLoading, isFetching } = useGetVideosByIdQuery(
     {
       ids,
-      maxResults: Math.max(maxResults, itemsPerRow),
+      maxResults,
     },
     {
       skip: itemsPerRow === 0,
@@ -48,7 +48,11 @@ function StaticRenderer(props: StaticRendererProps) {
 
   useEffect(() => {
     if (!isFetching && data) {
-      setChannelData({ channel, items: videos, total });
+      setChannelData({
+        channel,
+        items: videos,
+        total: total - (maxResults - videos.length),
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFetching, data]);

diff --git a/src/ui/components/pages/Home/Tab/index.tsx b/src/ui/components/pages/Home/Tab/index.tsx
@@ -3,12 +3,7 @@ import { Box } from '@mui/material';
 import MuiTab, { TabProps as MuiTabProps } from '@mui/material/Tab';
 import Badge from './Badge';
 import { HomeView } from 'types';
-import { useAppSelector } from 'store';
 import { useChannelVideos } from 'providers';
-import {
-  selectBookmarkedVideosCount,
-  selectWatchLaterVideosCount,
-} from 'store/selectors/videos';
 
 interface TabProps extends MuiTabProps {
   value: HomeView;
@@ -17,21 +12,8 @@ interface TabProps extends MuiTabProps {
 
 export default function Tab(props: TabProps) {
   const { label, value: view, selected, ...rest } = props;
-  const { videosCount } = useChannelVideos(view);
-  const watchLaterVideosCount = useAppSelector(selectWatchLaterVideosCount);
-  const bookmarkedVideosCount = useAppSelector(selectBookmarkedVideosCount);
-  const badgeContent: string | number = (() => {
-    switch (view) {
-      case HomeView.All:
-        return videosCount.current;
-      case HomeView.WatchLater:
-        return watchLaterVideosCount;
-      case HomeView.Bookmarks:
-        return bookmarkedVideosCount;
-      default:
-        return '';
-    }
-  })();
+  const { getAllVideosCount } = useChannelVideos(view);
+  const badgeContent = getAllVideosCount();
 
   return (
     <MuiTab