Add Ignored tab to Channel page (#927)

* Add Ignored tab to Channel page

* fix for Ignored button action

* use ignored parameter as bool

---------

Co-authored-by: Simon <simobilleter@gmail.com>

frontend/src/api/loader/loadChannelNav.ts

@@ -5,6 +5,7 @@ export type ChannelNavResponseType = {
   has_shorts: boolean;
   has_playlists: boolean;
   has_pending: boolean;
+  has_ignored: boolean;
 };
 
 const loadChannelNav = async (youtubeChannelId: string) => {

frontend/src/configuration/routes/RouteList.ts

@@ -10,7 +10,8 @@ const Routes = {
   Playlists: '/playlist/',
   Playlist: (id: string) => `/playlist/${id}`,
   Downloads: '/downloads/',
-  DownloadsByChannelId: (channelId: string) => `/downloads/?channel=${channelId}`,
+  DownloadsByChannelId: (channelId: string) => `/downloads/?channel=${channelId}&ignored=false`,
+  IgnoredByChannelId: (channelId: string) => `/downloads/?channel=${channelId}&ignored=true`,
   Search: '/search/',
   SettingsDashboard: '/settings/',
   SettingsUser: '/settings/user/',

frontend/src/pages/ChannelBase.tsx

@@ -27,7 +27,7 @@ const ChannelBase = () => {
   const { data: channelNavData } = channelNav ?? {};
 
   const channel = channelResponseData;
-  const { has_streams, has_shorts, has_playlists, has_pending } = channelNavData || {};
+  const { has_streams, has_shorts, has_playlists, has_pending, has_ignored } = channelNavData || {};
 
   useEffect(() => {
     (async () => {
@@ -84,6 +84,11 @@ const ChannelBase = () => {
               <h3>Downloads</h3>
             </Link>
           )}
+          {has_ignored && isAdmin && (
+            <Link to={Routes.IgnoredByChannelId(channelId)}>
+              <h3>Ignored</h3>
+            </Link>
+          )}
         </div>
 
         <Notifications

frontend/src/pages/Download.tsx

@@ -52,6 +52,7 @@ const Download = () => {
   const { currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
 
   const channelFilterFromUrl = searchParams.get('channel');
+  const ignoredOnlyParam = searchParams.get('ignored');
 
   const [refresh, setRefresh] = useState(false);
   const [showHiddenForm, setShowHiddenForm] = useState(false);
@@ -82,7 +83,8 @@ const Download = () => {
 
   const view = userConfig.view_style_downloads;
   const gridItems = userConfig.grid_items;
-  const showIgnored = userConfig.show_ignored_only;
+  const showIgnored =
+    ignoredOnlyParam !== null ? ignoredOnlyParam === 'true' : userConfig.show_ignored_only;
   const isGridView = view === ViewStyles.grid;
   const gridView = isGridView ? `boxed-${gridItems}` : '';
   const gridViewGrid = isGridView ? `grid-${gridItems}` : '';
@@ -234,6 +236,9 @@ const Download = () => {
                 id="showIgnored"
                 onChange={() => {
                   handleUserConfigUpdate({ show_ignored_only: !showIgnored });
+                  const newParams = new URLSearchParams(searchParams.toString());
+                  newParams.set('ignored', String(!showIgnored));
+                  setSearchParams(newParams);
                   setRefresh(true);
                 }}
                 type="checkbox"