From da365da17c7a05ea5dee032a65cbbf82645fa40d Mon Sep 17 00:00:00 2001 From: soup Date: Thu, 14 Dec 2023 22:20:36 +0100 Subject: [PATCH] feat(releases): incognito mode (#1282) * feat(web): incognito mode * removed unused variable * move RandomLinuxIsos into utils/index --- web/src/screens/dashboard/ActivityTable.tsx | 44 ++- web/src/screens/releases/ReleaseTable.tsx | 292 +++++++++++--------- web/src/utils/index.ts | 29 +- 3 files changed, 231 insertions(+), 134 deletions(-) diff --git a/web/src/screens/dashboard/ActivityTable.tsx b/web/src/screens/dashboard/ActivityTable.tsx index 0be960f..606ea6b 100644 --- a/web/src/screens/dashboard/ActivityTable.tsx +++ b/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 @@ -201,14 +203,46 @@ export const ActivityTable = () => { ); } - + + + const [modifiedData, setModifiedData] = useState([]); + 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 ( -
-

+
+

Recent activity

- +
+ + ); }; diff --git a/web/src/screens/releases/ReleaseTable.tsx b/web/src/screens/releases/ReleaseTable.tsx index e192cae..575a0b6 100644 --- a/web/src/screens/releases/ReleaseTable.tsx +++ b/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([]); + 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,138 +412,154 @@ export const ReleaseTable = () => { )) )} -
-
- - {headerGroups.map((headerGroup) => { - const { key: rowKey, ...rowRest } = headerGroup.getHeaderGroupProps(); - return ( - - {headerGroup.headers.map((column) => { - const { key: columnKey, ...columnRest } = column.getHeaderProps(column.getSortByToggleProps()); - return ( +
+
+
+ + {headerGroups.map((headerGroup) => { + const { key: rowKey, ...rowRest } = headerGroup.getHeaderGroupProps(); + return ( + + {headerGroup.headers.map((column) => { + const { key: columnKey, ...columnRest } = column.getHeaderProps(column.getSortByToggleProps()); + return ( // Add the sorting props to control sorting. For this example // we can add them into the header props - - ); - })} - - ); - })} - - - {page.map((row) => { - prepareRow(row); + + )} + + + + ); + })} + + ); + })} + + + {page.map((row) => { + prepareRow(row); - const { key: bodyRowKey, ...bodyRowRest } = row.getRowProps(); - return ( - - {row.cells.map((cell) => { - const { key: cellRowKey, ...cellRowRest } = cell.getCellProps(); - return ( - - ); - })} - - ); - })} - -
-
- <>{column.render("Header")} - {/* Add a sort direction indicator */} - - {column.isSorted ? ( - column.isSortedDesc ? ( - +
+
+ <>{column.render("Header")} + {/* Add a sort direction indicator */} + + {column.isSorted ? ( + column.isSortedDesc ? ( + + ) : ( + + ) ) : ( - - ) - ) : ( - - )} - -
-
- <>{cell.render("Cell")} -
- {/* Pagination */} -
-
- previousPage()} disabled={!canPreviousPage}>Previous - nextPage()} disabled={!canNextPage}>Next -
-
-
- + const { key: bodyRowKey, ...bodyRowRest } = row.getRowProps(); + return ( + + {row.cells.map((cell) => { + const { key: cellRowKey, ...cellRowRest } = cell.getCellProps(); + return ( + + <>{cell.render("Cell")} + + ); + })} + + ); + })} + + + {/* Pagination */} +
+
+ previousPage()} disabled={!canPreviousPage}>Previous + nextPage()} disabled={!canNextPage}>Next +
+
+
+ Page {pageIndex + 1} of {pageOptions.length} - - -
-
- + + +
+
+ +
+
+ +
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts index a9c1ddb..6c61467 100644 --- a/web/src/utils/index.ts +++ b/web/src/utils/index.ts @@ -70,7 +70,7 @@ export function slugify(str: string) { // it might not work for some edge cases. Test your code! export const get = (obj: T, path: string|Array, defValue?: string) => { // If path is not defined or it has false value - if (!path) + if (!path) return undefined; // Check if path is string or array. Regex : ensure that we do not have '.' and brackets. // Regex explained: https://regexr.com/58j0k @@ -83,3 +83,30 @@ export const get = (obj: T, path: string|Array, 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)]); +};