feat(releases): incognito mode (#1282)

* feat(web): incognito mode

* removed unused variable

* move RandomLinuxIsos into utils/index

web/src/screens/dashboard/ActivityTable.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import * as React from "react";
+import React, { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import {
   useTable,
@@ -16,7 +16,9 @@ import {
 import { APIClient } from "@api/APIClient";
 import { EmptyListState } from "@components/emptystates";
 import * as Icons from "@components/Icons";
+import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import * as DataTable from "@components/data-table";
+import { RandomLinuxIsos } from "@utils/index";
 
 // This is a custom filter UI for selecting
 // a unique option from a list
@@ -202,13 +204,45 @@ export const ActivityTable = () => {
     );
   }
 
+
+  const [modifiedData, setModifiedData] = useState<Release[]>([]);
+  const [showLinuxIsos, setShowLinuxIsos] = useState(false);
+
+  const toggleReleaseNames = () => {
+    setShowLinuxIsos(!showLinuxIsos);
+    if (!showLinuxIsos && data && data.data) {
+      const randomNames = RandomLinuxIsos(data.data.length);
+      const newData: Release[] = data.data.map((item, index) => ({
+        ...item,
+        torrent_name: `${randomNames[index]}.iso`,
+        indexer: index % 2 === 0 ? "distrowatch" : "linuxtracker"
+      }));
+      setModifiedData(newData);
+    }
+  };
+
+  const displayData = showLinuxIsos ? modifiedData : (data?.data ?? []);
+
   return (
-    <div className="flex flex-col mt-12">
+    <div className="flex flex-col mt-12 relative">
-      <h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
+      <h3 className="text-2xl font-medium leading-6 text-black dark:text-white">
         Recent activity
       </h3>
 
-      <Table columns={columns} data={data?.data ?? []} />
+      <Table columns={columns} data={displayData} />
+
+      <button
+        onClick={toggleReleaseNames}
+        className="p-2 absolute -bottom-8 right-0 bg-gray-750 text-white rounded-full opacity-10 hover:opacity-100 transition-opacity duration-300"
+        aria-label="Toggle view"
+        title="Go incognito"
+      >
+        {showLinuxIsos ? (
+          <EyeIcon className="h-4 w-4" />
+        ) : (
+          <EyeSlashIcon className="h-4 w-4" />
+        )}
+      </button>
     </div>
   );
 };

web/src/screens/releases/ReleaseTable.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import * as React from "react";
+import React, { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { CellProps, Column, useFilters, usePagination, useSortBy, useTable } from "react-table";
 import {
@@ -12,7 +12,9 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon
 } from "@heroicons/react/24/solid";
+import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 
+import { RandomLinuxIsos } from "@utils/index";
 import { APIClient } from "@api/APIClient";
 import { EmptyListState } from "@components/emptystates";
 
@@ -148,7 +150,25 @@ export const ReleaseTable = () => {
     staleTime: 5000
   });
 
-  // Use the state and functions returned from useTable to build your UI
+  const [modifiedData, setModifiedData] = useState<Release[]>([]);
+  const [showLinuxIsos, setShowLinuxIsos] = useState(false);
+
+  const toggleReleaseNames = () => {
+    setShowLinuxIsos(!showLinuxIsos);
+    if (!showLinuxIsos && data && data.data) {
+      const randomNames = RandomLinuxIsos(data.data.length);
+      const newData: Release[] = data.data.map((item, index) => ({
+        ...item,
+        torrent_name: `${randomNames[index]}.iso`,
+        indexer: index % 2 === 0 ? "distrowatch" : "linuxtracker"
+      }));
+      setModifiedData(newData);
+    }
+  };
+
+  const displayData = showLinuxIsos ? modifiedData : (data?.data ?? []);
+
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -170,7 +190,7 @@ export const ReleaseTable = () => {
   } = useTable(
     {
       columns,
-      data: data && isSuccess ? data.data : [],
+      data: displayData, // Use displayData here
       initialState: {
         pageIndex: queryPageIndex,
         pageSize: queryPageSize,
@@ -392,6 +412,7 @@ export const ReleaseTable = () => {
           ))
         )}
       </div>
+      <div className="relative">
         <div className="bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 shadow-table rounded-md overflow-auto">
           <table {...getTableProps()} className="min-w-full rounded-md divide-y divide-gray-200 dark:divide-gray-750">
             <thead className="bg-gray-100 dark:bg-gray-850">
@@ -525,6 +546,21 @@ export const ReleaseTable = () => {
               </div>
             </div>
           </div>
+          <div className="absolute -bottom-11 right-0 p-2">
+            <button
+              onClick={toggleReleaseNames}
+              className="p-2 absolute bottom-0 right-0 bg-gray-750 text-white rounded-full opacity-10 hover:opacity-100 transition-opacity duration-300"
+              aria-label="Toggle view"
+              title="Go incognito"
+            >
+              {showLinuxIsos ? (
+                <EyeIcon className="h-4 w-4" />
+              ) : (
+                <EyeSlashIcon className="h-4 w-4" />
+              )}
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );

web/src/utils/index.ts

@@ -83,3 +83,30 @@ export const get = <T> (obj: T, path: string|Array<any>, defValue?: string) => {
   // If found value is undefined return default value; otherwise return the value
   return result === undefined ? defValue : result;
 };
+
+export const RandomLinuxIsos = (count: number) => {
+  const linuxIsos = [
+    "ubuntu-20.04.4-lts-focal-fossa-desktop-amd64-secure-boot",
+    "debian-11.3.0-bullseye-amd64-DVD-1-with-nonfree-firmware-netinst",
+    "fedora-36-workstation-x86_64-live-iso-with-rpmfusion-free-and-nonfree",
+    "archlinux-2023.04.01-x86_64-advanced-installation-environment",
+    "linuxmint-20.3-uma-cinnamon-64bit-full-multimedia-support-edition",
+    "centos-stream-9-x86_64-dvd1-full-install-iso-with-extended-repositories",
+    "opensuse-tumbleweed-20230415-DVD-x86_64-full-packaged-desktop-environments",
+    "manjaro-kde-21.1.6-210917-linux514-full-hardware-support-edition",
+    "elementaryos-6.1-odin-amd64-20230104-iso-with-pantheon-desktop-environment",
+    "pop_os-21.10-amd64-nvidia-proprietary-drivers-included-live",
+    "kali-linux-2023.2-live-amd64-iso-with-persistent-storage-and-custom-tools",
+    "zorin-os-16-pro-ultimate-edition-64-bit-r1-iso-with-windows-app-support",
+    "endeavouros-2023.04.15-x86_64-iso-with-offline-installer-and-xfce4",
+    "mx-linux-21.2-aarch64-xfce-iso-with-ahs-enabled-kernel-and-snapshot-feature",
+    "solus-4.3-budgie-desktop-environment-full-iso-with-software-center",
+    "slackware-15.0-install-dvd-iso-with-extended-documentation-and-extras",
+    "alpine-standard-3.15.0-x86_64-iso-for-container-and-server-use",
+    "gentoo-livecd-amd64-minimal-20230407-stage3-tarball-included",
+    "peppermint-11-20210903-amd64-iso-with-hybrid-lxde-xfce-desktop",
+    "deepin-20.3-amd64-iso-with-deepin-desktop-environment-and-app-store"
+  ];
+
+  return Array.from({ length: count }, () => linuxIsos[Math.floor(Math.random() * linuxIsos.length)]);
+};