feat(channels): add an option to remove channel videos on channel rem…

…oval

src/store/reducers/videos.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { VideoCache, Video, VideoFlags, VideoFlag } from 'types';
+import { VideoCache, Video, VideoFlags, VideoFlag, Channel } from 'types';
 
 type VideoWithId = Pick<VideoCache, 'id'>;
 type AddVideoPayload = Video | Omit<VideoCache, 'flags'>;
@@ -213,6 +213,10 @@ export const videosSlice = createSlice({
         });
       }
     },
+    removeChannelVideos: (state, action: PayloadAction<Channel>) => {
+      const { id: channelId } = action.payload;
+      state.list = state.list.filter((video) => video.channelId !== channelId);
+    },
   },
 });
 
@@ -228,6 +232,7 @@ export const {
   archiveVideosByFlag,
   setVideosFlag,
   saveVideos,
+  removeChannelVideos,
 } = videosSlice.actions;
 
 export default videosSlice.reducer;

src/ui/components/pages/Channels/ChannelCard/ChannelDialogs/RemoveChannelDialog.tsx

@@ -1,33 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   Button,
+  Checkbox,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
+  FormControlLabel,
+  FormGroup,
 } from '@mui/material';
 import { Channel } from 'types';
 import ChannelPicture from '../ChannelPicture';
 
 interface RemoveChannelDialogProps {
   open: boolean;
   channel: Channel;
-  onClose: (confirmed?: boolean) => void;
+  onClose: (confirmed?: boolean, shouldRemoveVideos?: boolean) => void;
 }
 
 export default function RemoveChannelDialog(props: RemoveChannelDialogProps) {
   const { open, channel, onClose } = props;
+  const [shouldRemoveVideos, setShouldRemoveVideos] = useState(false);
 
   const handleConfirm = () => {
-    onClose(true);
+    onClose(true, shouldRemoveVideos);
   };
 
   const handleClose = () => {
     onClose(false);
   };
 
+  const handleRemoveVideosToggle = () => {
+    setShouldRemoveVideos(!shouldRemoveVideos);
+  };
+
   return (
     <Dialog open={open} onClose={handleClose}>
       <DialogContent>
@@ -47,6 +55,18 @@ export default function RemoveChannelDialog(props: RemoveChannelDialogProps) {
             <DialogContentText>
               Are you sure that you want to remove this channel?
             </DialogContentText>
+            <FormGroup sx={{ pt: 1 }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={shouldRemoveVideos}
+                    size="small"
+                    onClick={handleRemoveVideosToggle}
+                  />
+                }
+                label="Remove the channel videos as well?"
+              />
+            </FormGroup>
           </Box>
         </Box>
       </DialogContent>

src/ui/components/pages/Channels/ChannelCard/ChannelDialogs/index.tsx

@@ -4,6 +4,7 @@ import { useAppDispatch } from 'store';
 import { removeChannel, setChannelFilters } from 'store/reducers/channels';
 import RemoveChannelDialog from './RemoveChannelDialog';
 import ChannelFiltersDialog from './ChannelFiltersDialog';
+import { removeChannelVideos } from 'store/reducers/videos';
 
 interface ChannelDialogsProps {
   channel: Channel;
@@ -20,9 +21,12 @@ function ChannelDialogs(props: ChannelDialogsProps) {
       <RemoveChannelDialog
         open={openedDialog === 'remove-channel'}
         channel={channel}
-        onClose={(confirmed) => {
+        onClose={(confirmed, shouldRemoveVideos) => {
           if (confirmed) {
             dispatch(removeChannel(channel));
+            if (shouldRemoveVideos) {
+              dispatch(removeChannelVideos(channel));
+            }
           }
           onClose();
         }}