mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 00:39:13 +00:00
feat(releases): incognito mode (#1282)
* feat(web): incognito mode * removed unused variable * move RandomLinuxIsos into utils/index
This commit is contained in:
soup
GitHub
parent
3580472cbd
commit
da365da17c
3 changed files with 231 additions and 134 deletions
|
|
@ -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">
|
||||
<h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
|
||||
<div className="flex flex-col mt-12 relative">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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)]);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue