chore(home): display the number of videos to remove on confirmation m…

…odals of the watch later view

src/ui/components/pages/Home/TabActions/RecentViewActions.tsx

@@ -7,9 +7,7 @@ import { selectViewFilters } from 'store/selectors/settings';
 import { setViewFilters } from 'store/reducers/settings';
 import { HomeView, Nullable } from 'types';
 
-interface RecentViewActionsProps {
-  hasVideos: boolean;
-}
+interface RecentViewActionsProps {}
 
 function RecentViewActions(props: RecentViewActionsProps) {
   const filters = useAppSelector(selectViewFilters(HomeView.Recent));

src/ui/components/pages/Home/TabActions/WatchLaterViewActions/WatchLaterViewOptions.tsx

@@ -27,9 +27,12 @@ import {
 import { Nullable } from 'types';
 import { downloadFile } from 'helpers/file';
 
-interface WatchLaterViewOptionsProps {}
+interface WatchLaterViewOptionsProps {
+  videosCount: number;
+}
 
 function WatchLaterViewOptions(props: WatchLaterViewOptionsProps) {
+  const { videosCount } = props;
   const watchLaterVideos = useAppSelector(selectWatchLaterVideos());
   const viewedCount = useAppSelector(selectViewedWatchLaterVideosCount);
   const dispatch = useAppDispatch();
@@ -72,7 +75,7 @@ function WatchLaterViewOptions(props: WatchLaterViewOptionsProps) {
   const handleRemoveAll = () => {
     setConfirmationDialogProps({
       open: true,
-      title: 'Remove all videos',
+      title: `Remove all videos (${videosCount})`,
       text: 'Are you sure that you want to remove all the videos from the watch later list?',
       onClose: (confirmed) => {
         if (confirmed) {
@@ -90,7 +93,7 @@ function WatchLaterViewOptions(props: WatchLaterViewOptionsProps) {
   const handleRemoveViewed = () => {
     setConfirmationDialogProps({
       open: true,
-      title: 'Remove viewed videos',
+      title: `Remove viewed videos (${viewedCount})`,
       text: 'Are you sure that you want to remove all viewed videos from the watch later list?',
       onClose: (confirmed) => {
         if (confirmed) {

src/ui/components/pages/Home/TabActions/WatchLaterViewActions/index.tsx

@@ -4,11 +4,11 @@ import WatchLaterViewFilters from './WatchLaterViewFilters';
 import WatchLaterViewOptions from './WatchLaterViewOptions';
 
 interface WatchLaterViewActionsProps {
-  hasVideos: boolean;
+  videosCount: number;
 }
 
 function WatchLaterViewActions(props: WatchLaterViewActionsProps) {
-  const { hasVideos } = props;
+  const { videosCount } = props;
 
   return (
     <Box
@@ -19,7 +19,9 @@ function WatchLaterViewActions(props: WatchLaterViewActionsProps) {
       }}
     >
       <WatchLaterViewFilters />
-      {hasVideos ? <WatchLaterViewOptions /> : null}
+      {videosCount > 0 ? (
+        <WatchLaterViewOptions videosCount={videosCount} />
+      ) : null}
     </Box>
   );
 }

src/ui/components/pages/Home/TabActions/index.tsx

@@ -12,17 +12,15 @@ interface TabActionsProps {
 }
 
 function TabActions(props: TabActionsProps) {
-  const { tab, recentVideosCount, watchLaterVideosCount } = props;
+  const { tab, watchLaterVideosCount } = props;
   const channelsCount = useAppSelector(selectActiveChannelsCount);
 
   switch (tab) {
     case HomeView.Recent:
-      return channelsCount > 0 ? (
-        <RecentViewActions hasVideos={recentVideosCount > 0} />
-      ) : null;
+      return channelsCount > 0 ? <RecentViewActions /> : null;
     case HomeView.WatchLater:
       return channelsCount > 0 ? (
-        <WatchLaterViewActions hasVideos={watchLaterVideosCount > 0} />
+        <WatchLaterViewActions videosCount={watchLaterVideosCount} />
       ) : null;
     default:
       return null;