diff --git a/src/tribler/ui/src/pages/Popular/index.tsx b/src/tribler/ui/src/pages/Popular/index.tsx index c0430c2d5d..4f3e907d5d 100644 --- a/src/tribler/ui/src/pages/Popular/index.tsx +++ b/src/tribler/ui/src/pages/Popular/index.tsx @@ -1,6 +1,6 @@ import SimpleTable from "@/components/ui/simple-table"; import SaveAs from "@/dialogs/SaveAs"; -import { useState } from "react"; +import { useCallback, useMemo, useState } from "react"; import { triblerService } from "@/services/tribler.service"; import { Torrent } from "@/models/torrent.model"; import { ColumnDef } from "@tanstack/react-table"; @@ -9,7 +9,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp import { useInterval } from '@/hooks/useInterval'; -const torrentColumns: ColumnDef[] = [ +const getColumns = ({ onDownload }: { onDownload: (torrent: Torrent) => void }): ColumnDef[] => [ { accessorKey: "category", header: "", @@ -30,7 +30,11 @@ const torrentColumns: ColumnDef[] = [ accessorKey: "name", header: translateHeader('Name'), cell: ({ row }) => { - return {row.original.name} + return onDownload(row.original)}> + {row.original.name} + }, }, { @@ -59,10 +63,12 @@ export default function Popular() { setTorrents(filterDuplicates(popular, 'infohash')); }, 5000, true); - const OnDoubleClick = (torrent: Torrent) => { + const handleDownload = useCallback((torrent: Torrent) => { setTorrentDoubleClicked(torrent); setOpen(true); - } + }, []); + + const torrentColumns = useMemo(() => getColumns({ onDownload: handleDownload }), [handleDownload]); return ( <> @@ -79,7 +85,6 @@ export default function Popular() { { if (torrent) { OnDoubleClick(torrent) } }} /> ) diff --git a/src/tribler/ui/src/pages/Search/index.tsx b/src/tribler/ui/src/pages/Search/index.tsx index 3f3ddbcf29..ac2658c58f 100644 --- a/src/tribler/ui/src/pages/Search/index.tsx +++ b/src/tribler/ui/src/pages/Search/index.tsx @@ -1,5 +1,5 @@ import SimpleTable from "@/components/ui/simple-table"; -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useMemo, useState } from "react"; import { triblerService } from "@/services/tribler.service"; import { Torrent } from "@/models/torrent.model"; import { ColumnDef } from "@tanstack/react-table"; @@ -10,7 +10,7 @@ import { useSearchParams } from "react-router-dom"; import { SwarmHealth } from "@/components/swarm-health"; -const torrentColumns: ColumnDef[] = [ +const getColumns = ({ onDownload }: { onDownload: (torrent: Torrent) => void }): ColumnDef[] => [ { accessorKey: "category", header: "", @@ -31,7 +31,11 @@ const torrentColumns: ColumnDef[] = [ accessorKey: "name", header: "Name", cell: ({ row }) => { - return {row.original.name} + return onDownload(row.original)}> + {row.original.name} + }, }, { @@ -116,10 +120,12 @@ export default function Search() { } } - const OnDoubleClick = (torrent: Torrent) => { + const handleDownload = useCallback((torrent: Torrent) => { setTorrentDoubleClicked(torrent); setOpen(true); - } + }, []); + + const torrentColumns = useMemo(() => getColumns({ onDownload: handleDownload }), [handleDownload]); return ( <> @@ -136,7 +142,6 @@ export default function Search() { { if (torrent) { OnDoubleClick(torrent) } }} /> )