From 8beebce2e4db3411e23e7aff59788fcfdbf1753f Mon Sep 17 00:00:00 2001 From: Anderson Shindy Oki Date: Fri, 5 Jul 2024 09:56:13 +0900 Subject: [PATCH] Updated tanstack table to v8.x (#2564) --- frontend/package-lock.json | 62 +-- frontend/package.json | 3 +- .../src/components/forms/MovieUploadForm.tsx | 127 +++--- .../src/components/forms/ProfileEditForm.tsx | 140 +++--- .../src/components/forms/SeriesUploadForm.tsx | 137 +++--- .../src/components/modals/HistoryModal.tsx | 184 +++++--- .../components/modals/ManualSearchModal.tsx | 147 +++--- .../components/modals/SubtitleToolsModal.tsx | 73 ++- frontend/src/components/tables/BaseTable.tsx | 84 ++-- frontend/src/components/tables/GroupTable.tsx | 88 ++-- frontend/src/components/tables/PageTable.tsx | 63 +-- .../src/components/tables/QueryPageTable.tsx | 2 +- .../src/components/tables/SimpleTable.tsx | 60 ++- .../src/components/tables/plugins/index.ts | 2 - .../tables/plugins/useCustomSelection.tsx | 113 ----- .../tables/plugins/useDefaultSettings.tsx | 33 -- frontend/src/pages/Blacklist/Movies/table.tsx | 74 +-- frontend/src/pages/Blacklist/Series/table.tsx | 82 ++-- frontend/src/pages/Episodes/index.tsx | 31 +- frontend/src/pages/Episodes/table.tsx | 420 +++++++++--------- frontend/src/pages/History/Movies/index.tsx | 107 +++-- frontend/src/pages/History/Series/index.tsx | 121 +++-- frontend/src/pages/Movies/Details/table.tsx | 213 ++++----- frontend/src/pages/Movies/Editor.tsx | 60 ++- frontend/src/pages/Movies/index.tsx | 84 ++-- frontend/src/pages/Series/Editor.tsx | 56 ++- frontend/src/pages/Series/index.tsx | 52 ++- .../src/pages/Settings/Languages/equals.tsx | 53 +-- .../src/pages/Settings/Languages/table.tsx | 60 +-- .../pages/Settings/components/pathMapper.tsx | 29 +- .../src/pages/System/Announcements/table.tsx | 61 ++- frontend/src/pages/System/Backups/table.tsx | 89 ++-- frontend/src/pages/System/Logs/table.tsx | 40 +- frontend/src/pages/System/Providers/table.tsx | 20 +- frontend/src/pages/System/Status/table.tsx | 32 +- frontend/src/pages/System/Tasks/table.tsx | 52 ++- frontend/src/pages/Wanted/Movies/index.tsx | 35 +- frontend/src/pages/Wanted/Series/index.tsx | 51 ++- frontend/src/pages/views/HistoryView.tsx | 4 +- frontend/src/pages/views/ItemView.tsx | 4 +- frontend/src/pages/views/MassEditor.tsx | 25 +- frontend/src/pages/views/WantedView.tsx | 4 +- 42 files changed, 1761 insertions(+), 1416 deletions(-) delete mode 100644 frontend/src/components/tables/plugins/index.ts delete mode 100644 frontend/src/components/tables/plugins/useCustomSelection.tsx delete mode 100644 frontend/src/components/tables/plugins/useDefaultSettings.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b1064664b..981b8acbd 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,6 +16,7 @@ "@mantine/modals": "^7.11.0", "@mantine/notifications": "^7.11.0", "@tanstack/react-query": "^5.40.1", + "@tanstack/react-table": "^8.19.2", "axios": "^1.6.8", "braces": "^3.0.3", "react": "^18.3.1", @@ -39,7 +40,6 @@ "@types/node": "^20.12.6", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", - "@types/react-table": "^7.7.20", "@vitejs/plugin-react": "^4.2.1", "@vitest/coverage-v8": "^1.4.0", "@vitest/ui": "^1.2.2", @@ -57,7 +57,6 @@ "prettier": "^3.2.5", "prettier-plugin-organize-imports": "^3.2.4", "pretty-quick": "^4.0.0", - "react-table": "^7.8.0", "recharts": "^2.12.6", "sass": "^1.74.1", "typescript": "^5.4.4", @@ -3381,6 +3380,39 @@ "react": "^18 || ^19" } }, + "node_modules/@tanstack/react-table": { + "version": "8.19.2", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.19.2.tgz", + "integrity": "sha512-itoSIAkA/Vsg+bjY23FSemcTyPhc5/1YjYyaMsr9QSH/cdbZnQxHVWrpWn0Sp2BWN71qkzR7e5ye8WuMmwyOjg==", + "license": "MIT", + "dependencies": { + "@tanstack/table-core": "8.19.2" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@tanstack/table-core": { + "version": "8.19.2", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.19.2.tgz", + "integrity": "sha512-KpRjhgehIhbfH78ARm/GJDXGnpdw4bCg3qas6yjWSi7czJhI/J6pWln7NHtmBkGE9ZbohiiNtLqwGzKmBfixig==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@testing-library/dom": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.0.0.tgz", @@ -3714,13 +3746,13 @@ "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "devOptional": true + "dev": true }, "node_modules/@types/react": { "version": "18.3.3", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", - "devOptional": true, + "dev": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -3735,15 +3767,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-table": { - "version": "7.7.20", - "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-7.7.20.tgz", - "integrity": "sha512-ahMp4pmjVlnExxNwxyaDrFgmKxSbPwU23sGQw2gJK4EhCvnvmib2s/O/+y1dfV57dXOwpr2plfyBol+vEHbi2w==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/semver": { "version": "7.5.8", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz", @@ -8958,19 +8981,6 @@ } } }, - "node_modules/react-table": { - "version": "7.8.0", - "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz", - "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==", - "dev": true, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - }, - "peerDependencies": { - "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0" - } - }, "node_modules/react-textarea-autosize": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 53e9c4c47..f964fb9f8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,6 +20,7 @@ "@mantine/modals": "^7.11.0", "@mantine/notifications": "^7.11.0", "@tanstack/react-query": "^5.40.1", + "@tanstack/react-table": "^8.19.2", "axios": "^1.6.8", "braces": "^3.0.3", "react": "^18.3.1", @@ -43,7 +44,6 @@ "@types/node": "^20.12.6", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", - "@types/react-table": "^7.7.20", "@vitejs/plugin-react": "^4.2.1", "@vitest/coverage-v8": "^1.4.0", "@vitest/ui": "^1.2.2", @@ -61,7 +61,6 @@ "prettier": "^3.2.5", "prettier-plugin-organize-imports": "^3.2.4", "pretty-quick": "^4.0.0", - "react-table": "^7.8.0", "recharts": "^2.12.6", "sass": "^1.74.1", "typescript": "^5.4.4", diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx index 7e3df4b33..8e318d7ad 100644 --- a/frontend/src/components/forms/MovieUploadForm.tsx +++ b/frontend/src/components/forms/MovieUploadForm.tsx @@ -1,5 +1,4 @@ import { FunctionComponent, useEffect, useMemo } from "react"; -import { Column } from "react-table"; import { Button, Checkbox, @@ -17,10 +16,11 @@ import { faTrash, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ColumnDef } from "@tanstack/react-table"; import { isString } from "lodash"; import { useMovieSubtitleModification } from "@/apis/hooks"; import { Action, Selector } from "@/components/inputs"; -import { SimpleTable } from "@/components/tables"; +import SimpleTable from "@/components/tables/SimpleTable"; import TextPopover from "@/components/TextPopover"; import { useModals, withModal } from "@/modules/modals"; import { task, TaskGroup } from "@/modules/task"; @@ -143,61 +143,77 @@ const MovieUploadForm: FunctionComponent = ({ }); }); - const columns = useMemo[]>( - () => [ - { - accessor: "validateResult", - Cell: ({ cell: { value } }) => { - const icon = useMemo(() => { - switch (value?.state) { - case "valid": - return faCheck; - case "warning": - return faInfoCircle; - case "error": - return faTimes; - default: - return faCircleNotch; - } - }, [value?.state]); + const ValidateResultCell = ({ + validateResult, + }: { + validateResult: SubtitleValidateResult | undefined; + }) => { + const icon = useMemo(() => { + switch (validateResult?.state) { + case "valid": + return faCheck; + case "warning": + return faInfoCircle; + case "error": + return faTimes; + default: + return faCircleNotch; + } + }, [validateResult?.state]); - const color = useMemo(() => { - switch (value?.state) { - case "valid": - return "green"; - case "warning": - return "yellow"; - case "error": - return "red"; - default: - return undefined; - } - }, [value?.state]); + const color = useMemo(() => { + switch (validateResult?.state) { + case "valid": + return "green"; + case "warning": + return "yellow"; + case "error": + return "red"; + default: + return undefined; + } + }, [validateResult?.state]); - return ( - - - - - - ); + return ( + + + + + + ); + }; + + const columns = useMemo[]>( + () => [ + { + id: "validateResult", + cell: ({ + row: { + original: { validateResult }, + }, + }) => { + return ; }, }, { - Header: "File", + header: "File", id: "filename", - accessor: "file", - Cell: ({ value }) => { - return {value.name}; + accessorKey: "file", + cell: ({ + row: { + original: { file }, + }, + }) => { + return {file.name}; }, }, { - Header: "Forced", - accessor: "forced", - Cell: ({ row: { original, index }, value }) => { + header: "Forced", + accessorKey: "forced", + cell: ({ row: { original, index } }) => { return ( { action.mutate(index, { ...original, forced: checked }); }} @@ -206,12 +222,12 @@ const MovieUploadForm: FunctionComponent = ({ }, }, { - Header: "HI", - accessor: "hi", - Cell: ({ row: { original, index }, value }) => { + header: "HI", + accessorKey: "hi", + cell: ({ row: { original, index } }) => { return ( { action.mutate(index, { ...original, hi: checked }); }} @@ -220,14 +236,14 @@ const MovieUploadForm: FunctionComponent = ({ }, }, { - Header: "Language", - accessor: "language", - Cell: ({ row: { original, index }, value }) => { + header: "Language", + accessorKey: "language", + cell: ({ row: { original, index } }) => { return ( { action.mutate(index, { ...original, language: item }); }} @@ -237,8 +253,7 @@ const MovieUploadForm: FunctionComponent = ({ }, { id: "action", - accessor: "file", - Cell: ({ row: { index } }) => { + cell: ({ row: { index } }) => { return ( = ({ } }, [form, languages]); - const columns = useMemo[]>( + const LanguageCell = React.memo( + ({ item, index }: { item: Language.ProfileItem; index: number }) => { + const code = useMemo( + () => + languageOptions.options.find((l) => l.value.code2 === item.language) + ?.value ?? null, + [item.language], + ); + + return ( + { + if (value) { + item.language = value.code2; + action.mutate(index, { ...item, language: value.code2 }); + } + }} + > + ); + }, + ); + + const SubtitleTypeCell = React.memo( + ({ item, index }: { item: Language.ProfileItem; index: number }) => { + const selectValue = useMemo(() => { + if (item.forced === "True") { + return "forced"; + } else if (item.hi === "True") { + return "hi"; + } else { + return "normal"; + } + }, [item.forced, item.hi]); + + return ( + + ); + }, + ); + + const columns = useMemo[]>( () => [ { - Header: "ID", - accessor: "id", + header: "ID", + accessorKey: "id", }, { - Header: "Language", - accessor: "language", - Cell: ({ value: code, row: { original: item, index } }) => { - const language = useMemo( - () => - languageOptions.options.find((l) => l.value.code2 === code) - ?.value ?? null, - [code], - ); - - return ( - { - if (value) { - item.language = value.code2; - action.mutate(index, { ...item, language: value.code2 }); - } - }} - > - ); + header: "Language", + accessorKey: "language", + cell: ({ row: { original: item, index } }) => { + return ; }, }, { - Header: "Subtitles Type", - accessor: "forced", - Cell: ({ row: { original: item, index }, value }) => { - const selectValue = useMemo(() => { - if (item.forced === "True") { - return "forced"; - } else if (item.hi === "True") { - return "hi"; - } else { - return "normal"; - } - }, [item.forced, item.hi]); - - return ( - - ); + header: "Subtitles Type", + accessorKey: "forced", + cell: ({ row: { original: item, index } }) => { + return ; }, }, { - Header: "Exclude If Matching Audio", - accessor: "audio_exclude", - Cell: ({ row: { original: item, index }, value }) => { + header: "Exclude If Matching Audio", + accessorKey: "audio_exclude", + cell: ({ row: { original: item, index } }) => { return ( { action.mutate(index, { ...item, @@ -228,8 +241,7 @@ const ProfileEditForm: FunctionComponent = ({ }, { id: "action", - accessor: "id", - Cell: ({ row }) => { + cell: ({ row }) => { return ( = ({ }, }, ], - [action, languageOptions], + [action, LanguageCell, SubtitleTypeCell], ); return ( diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx index 99a8e8e30..e4482cab4 100644 --- a/frontend/src/components/forms/SeriesUploadForm.tsx +++ b/frontend/src/components/forms/SeriesUploadForm.tsx @@ -1,5 +1,4 @@ import { FunctionComponent, useEffect, useMemo } from "react"; -import { Column } from "react-table"; import { Button, Checkbox, @@ -17,6 +16,7 @@ import { faTrash, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ColumnDef } from "@tanstack/react-table"; import { isString } from "lodash"; import { useEpisodesBySeriesId, @@ -24,7 +24,7 @@ import { useSubtitleInfos, } from "@/apis/hooks"; import { Action, Selector } from "@/components/inputs"; -import { SimpleTable } from "@/components/tables"; +import SimpleTable from "@/components/tables/SimpleTable"; import TextPopover from "@/components/TextPopover"; import { useModals, withModal } from "@/modules/modals"; import { task, TaskGroup } from "@/modules/task"; @@ -169,61 +169,79 @@ const SeriesUploadForm: FunctionComponent = ({ } }, [action, episodes.data, infos.data]); - const columns = useMemo[]>( - () => [ - { - accessor: "validateResult", - Cell: ({ cell: { value } }) => { - const icon = useMemo(() => { - switch (value?.state) { - case "valid": - return faCheck; - case "warning": - return faInfoCircle; - case "error": - return faTimes; - default: - return faCircleNotch; - } - }, [value?.state]); + const ValidateResultCell = ({ + validateResult, + }: { + validateResult: SubtitleValidateResult | undefined; + }) => { + const icon = useMemo(() => { + switch (validateResult?.state) { + case "valid": + return faCheck; + case "warning": + return faInfoCircle; + case "error": + return faTimes; + default: + return faCircleNotch; + } + }, [validateResult?.state]); - const color = useMemo(() => { - switch (value?.state) { - case "valid": - return "green"; - case "warning": - return "yellow"; - case "error": - return "red"; - default: - return undefined; - } - }, [value?.state]); + const color = useMemo(() => { + switch (validateResult?.state) { + case "valid": + return "green"; + case "warning": + return "yellow"; + case "error": + return "red"; + default: + return undefined; + } + }, [validateResult?.state]); - return ( - - - - - - ); + return ( + + + + + + ); + }; + + const columns = useMemo[]>( + () => [ + { + id: "validateResult", + cell: ({ + row: { + original: { validateResult }, + }, + }) => { + return ; }, }, { - Header: "File", + header: "File", id: "filename", - accessor: "file", - Cell: ({ value: { name } }) => { + accessorKey: "file", + cell: ({ + row: { + original: { + file: { name }, + }, + }, + }) => { return {name}; }, }, { - Header: "Forced", - accessor: "forced", - Cell: ({ row: { original, index }, value }) => { + header: "Forced", + accessorKey: "forced", + cell: ({ row: { original, index } }) => { return ( { action.mutate(index, { ...original, @@ -236,12 +254,12 @@ const SeriesUploadForm: FunctionComponent = ({ }, }, { - Header: "HI", - accessor: "hi", - Cell: ({ row: { original, index }, value }) => { + header: "HI", + accessorKey: "hi", + cell: ({ row: { original, index } }) => { return ( { action.mutate(index, { ...original, @@ -254,7 +272,7 @@ const SeriesUploadForm: FunctionComponent = ({ }, }, { - Header: ( + header: () => ( = ({ }} > ), - accessor: "language", - Cell: ({ row: { original, index }, value }) => { + accessorKey: "language", + cell: ({ row: { original, index } }) => { return ( { action.mutate(index, { ...original, language: item }); }} @@ -285,17 +303,17 @@ const SeriesUploadForm: FunctionComponent = ({ }, { id: "episode", - Header: "Episode", - accessor: "episode", - Cell: ({ value, row }) => { + header: "Episode", + accessorKey: "episode", + cell: ({ row: { original, index } }) => { return ( { - action.mutate(row.index, { ...row.original, episode: item }); + action.mutate(index, { ...original, episode: item }); }} > ); @@ -303,8 +321,7 @@ const SeriesUploadForm: FunctionComponent = ({ }, { id: "action", - accessor: "file", - Cell: ({ row: { index } }) => { + cell: ({ row: { index } }) => { return ( = ({ const { data } = history; - const columns = useMemo[]>( + const addMovieToBlacklist = useMovieAddBlacklist(); + + const columns = useMemo[]>( () => [ { - accessor: "action", - Cell: (row) => ( + id: "action", + cell: ({ + row: { + original: { action }, + }, + }) => (
- +
), }, { - Header: "Language", - accessor: "language", - Cell: ({ value }) => { - if (value) { + header: "Language", + accessorKey: "language", + cell: ({ + row: { + original: { language }, + }, + }) => { + if (language) { return ( - + ); } else { @@ -56,17 +66,20 @@ const MovieHistoryView: FunctionComponent = ({ }, }, { - Header: "Provider", - accessor: "provider", + header: "Provider", + accessorKey: "provider", }, { - Header: "Score", - accessor: "score", + header: "Score", + accessorKey: "score", }, { - accessor: "matches", - Cell: (row) => { - const { matches, dont_matches: dont } = row.row.original; + id: "matches", + cell: ({ + row: { + original: { matches, dont_matches: dont }, + }, + }) => { if (matches.length || dont.length) { return ( = ({ }, }, { - Header: "Date", - accessor: "timestamp", - Cell: ({ value, row }) => { + header: "Date", + accessorKey: "timestamp", + cell: ({ + row: { + original: { timestamp, parsed_timestamp: parsedTimestamp }, + }, + }) => { return ( - - {value} + + {timestamp} ); }, }, { // Actions - accessor: "blacklisted", - Cell: ({ row, value }) => { - const add = useMovieAddBlacklist(); - const { radarrId, provider, subs_id, language, subtitles_path } = - row.original; - + id: "blacklisted", + cell: ({ + row: { + original: { + blacklisted, + radarrId, + provider, + subs_id, + language, + subtitles_path, + }, + }, + }) => { if (subs_id && provider && language) { return ( ({ id: radarrId, form: { @@ -123,7 +147,7 @@ const MovieHistoryView: FunctionComponent = ({ }, }, ], - [], + [addMovieToBlacklist], ); return ( @@ -153,24 +177,34 @@ const EpisodeHistoryView: FunctionComponent = ({ const { data } = history; - const columns = useMemo[]>( + const addEpisodeToBlacklist = useEpisodeAddBlacklist(); + + const columns = useMemo[]>( () => [ { - accessor: "action", - Cell: (row) => ( + id: "action", + cell: ({ + row: { + original: { action }, + }, + }) => (
- +
), }, { - Header: "Language", - accessor: "language", - Cell: ({ value }) => { - if (value) { + header: "Language", + accessorKey: "language", + cell: ({ + row: { + original: { language }, + }, + }) => { + if (language) { return ( - + ); } else { @@ -179,16 +213,16 @@ const EpisodeHistoryView: FunctionComponent = ({ }, }, { - Header: "Provider", - accessor: "provider", + header: "Provider", + accessorKey: "provider", }, { - Header: "Score", - accessor: "score", + header: "Score", + accessorKey: "score", }, { - accessor: "matches", - Cell: (row) => { + id: "matches", + cell: (row) => { const { matches, dont_matches: dont } = row.row.original; if (matches.length || dont.length) { return ( @@ -204,21 +238,29 @@ const EpisodeHistoryView: FunctionComponent = ({ }, }, { - Header: "Date", - accessor: "timestamp", - Cell: ({ row, value }) => { + header: "Date", + accessorKey: "timestamp", + cell: ({ + row: { + original: { timestamp, parsed_timestamp: parsedTimestamp }, + }, + }) => { return ( - - {value} + + {timestamp} ); }, }, { - accessor: "description", - Cell: ({ value }) => { + id: "description", + cell: ({ + row: { + original: { description }, + }, + }) => { return ( - + ); @@ -226,25 +268,27 @@ const EpisodeHistoryView: FunctionComponent = ({ }, { // Actions - accessor: "blacklisted", - Cell: ({ row, value }) => { - const { - sonarrEpisodeId, - sonarrSeriesId, - provider, - subs_id, - language, - subtitles_path, - } = row.original; - const add = useEpisodeAddBlacklist(); - + id: "blacklisted", + cell: ({ + row: { + original: { + blacklisted, + sonarrEpisodeId, + sonarrSeriesId, + provider, + subs_id, + language, + subtitles_path, + }, + }, + }) => { if (subs_id && provider && language) { return ( ({ seriesId: sonarrSeriesId, episodeId: sonarrEpisodeId, @@ -263,7 +307,7 @@ const EpisodeHistoryView: FunctionComponent = ({ }, }, ], - [], + [addEpisodeToBlacklist], ); return ( diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx index d29a2deba..81a49f0f3 100644 --- a/frontend/src/components/modals/ManualSearchModal.tsx +++ b/frontend/src/components/modals/ManualSearchModal.tsx @@ -1,5 +1,4 @@ -import { useCallback, useMemo, useState } from "react"; -import { Column } from "react-table"; +import React, { useCallback, useMemo, useState } from "react"; import { Alert, Anchor, @@ -18,10 +17,12 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { UseQueryResult } from "@tanstack/react-query"; +import { ColumnDef } from "@tanstack/react-table"; import { isString } from "lodash"; -import { Action, PageTable } from "@/components"; +import { Action } from "@/components"; import Language from "@/components/bazarr/Language"; import StateIcon from "@/components/StateIcon"; +import PageTable from "@/components/tables/PageTable"; import { withModal } from "@/modules/modals"; import { task, TaskGroup } from "@/modules/task"; import { GetItemId } from "@/utilities"; @@ -51,23 +52,63 @@ function ManualSearchView(props: Props) { void results.refetch(); }, [results]); - const columns = useMemo[]>( + const ReleaseInfoCell = React.memo( + ({ releaseInfo }: { releaseInfo: string[] }) => { + const [open, setOpen] = useState(false); + + const items = useMemo( + () => releaseInfo.slice(1).map((v, idx) => {v}), + [releaseInfo], + ); + + if (releaseInfo.length === 0) { + return Cannot get release info; + } + + return ( + setOpen((o) => !o)}> + + {releaseInfo[0]} + {releaseInfo.length > 1 && ( + + )} + + + <>{items} + + + ); + }, + ); + + const columns = useMemo[]>( () => [ { - Header: "Score", - accessor: "score", - Cell: ({ value }) => { - return {value}%; + header: "Score", + accessorKey: "score", + cell: ({ + row: { + original: { score }, + }, + }) => { + return {score}%; }, }, { - Header: "Language", - accessor: "language", - Cell: ({ row: { original }, value }) => { + header: "Language", + accessorKey: "language", + cell: ({ + row: { + original: { language, hearing_impaired: hi, forced }, + }, + }) => { const lang: Language.Info = { - code2: value, - hi: original.hearing_impaired === "True", - forced: original.forced === "True", + code2: language, + hi: hi === "True", + forced: forced === "True", name: "", }; return ( @@ -78,11 +119,15 @@ function ManualSearchView(props: Props) { }, }, { - Header: "Provider", - accessor: "provider", - Cell: (row) => { - const value = row.value; - const { url } = row.row.original; + header: "Provider", + accessorKey: "provider", + cell: ({ + row: { + original: { provider, url }, + }, + }) => { + const value = provider; + if (url) { return ( (props: Props) { }, }, { - Header: "Release", - accessor: "release_info", - Cell: ({ value }) => { - const [open, setOpen] = useState(false); - - const items = useMemo( - () => value.slice(1).map((v, idx) => {v}), - [value], - ); - - if (value.length === 0) { - return Cannot get release info; - } - - return ( - setOpen((o) => !o)}> - - {value[0]} - {value.length > 1 && ( - - )} - - - <>{items} - - - ); + header: "Release", + accessorKey: "release_info", + cell: ({ + row: { + original: { release_info: releaseInfo }, + }, + }) => { + return ; }, }, { - Header: "Uploader", - accessor: "uploader", - Cell: ({ value }) => { - return {value ?? "-"}; + header: "Uploader", + accessorKey: "uploader", + cell: ({ + row: { + original: { uploader }, + }, + }) => { + return {uploader ?? "-"}; }, }, { - Header: "Match", - accessor: "matches", - Cell: (row) => { + header: "Match", + accessorKey: "matches", + cell: (row) => { const { matches, dont_matches: dont } = row.row.original; return ( (props: Props) { }, }, { - Header: "Get", - accessor: "subtitle", - Cell: ({ row }) => { + header: "Get", + accessorKey: "subtitle", + cell: ({ row }) => { const result = row.original; return ( (props: Props) { }, }, ], - [download, item], + [download, item, ReleaseInfoCell], ); const bSceneNameAvailable = diff --git a/frontend/src/components/modals/SubtitleToolsModal.tsx b/frontend/src/components/modals/SubtitleToolsModal.tsx index 150788b48..dca20d159 100644 --- a/frontend/src/components/modals/SubtitleToolsModal.tsx +++ b/frontend/src/components/modals/SubtitleToolsModal.tsx @@ -1,10 +1,17 @@ import { FunctionComponent, useMemo, useState } from "react"; -import { Column, useRowSelect } from "react-table"; -import { Badge, Button, Divider, Group, Stack, Text } from "@mantine/core"; +import { + Badge, + Button, + Checkbox, + Divider, + Group, + Stack, + Text, +} from "@mantine/core"; +import { ColumnDef } from "@tanstack/react-table"; import Language from "@/components/bazarr/Language"; import SubtitleToolsMenu from "@/components/SubtitleToolsMenu"; -import { SimpleTable } from "@/components/tables"; -import { useCustomSelection } from "@/components/tables/plugins"; +import SimpleTable from "@/components/tables/SimpleTable"; import { withModal } from "@/modules/modals"; import { isMovie } from "@/utilities"; @@ -35,24 +42,53 @@ const SubtitleToolView: FunctionComponent = ({ }) => { const [selections, setSelections] = useState([]); - const columns: Column[] = useMemo[]>( + const columns = useMemo[]>( () => [ { - Header: "Language", - accessor: "raw_language", - Cell: ({ value }) => ( + id: "selection", + header: ({ table }) => { + return ( + + ); + }, + cell: ({ row: { index, getIsSelected, getToggleSelectedHandler } }) => { + return ( + + ); + }, + }, + { + header: "Language", + accessorKey: "raw_language", + cell: ({ + row: { + original: { raw_language: rawLanguage }, + }, + }) => ( - + ), }, { id: "file", - Header: "File", - accessor: "path", - Cell: ({ value }) => { - const path = value; - + header: "File", + accessorKey: "path", + cell: ({ + row: { + original: { path }, + }, + }) => { let idx = path.lastIndexOf("/"); if (idx === -1) { @@ -94,16 +130,15 @@ const SubtitleToolView: FunctionComponent = ({ [payload], ); - const plugins = [useRowSelect, useCustomSelection]; - return ( CanSelectSubtitle(row.original)} + onRowSelectionChanged={(rows) => + setSelections(rows.map((r) => r.original)) + } columns={columns} - onSelect={setSelections} - canSelect={CanSelectSubtitle} data={data} > diff --git a/frontend/src/components/tables/BaseTable.tsx b/frontend/src/components/tables/BaseTable.tsx index 53058032d..b5a867b14 100644 --- a/frontend/src/components/tables/BaseTable.tsx +++ b/frontend/src/components/tables/BaseTable.tsx @@ -1,11 +1,17 @@ -import { ReactNode, useMemo } from "react"; -import { HeaderGroup, Row, TableInstance } from "react-table"; +import React, { ReactNode, useMemo } from "react"; import { Box, Skeleton, Table, Text } from "@mantine/core"; +import { + flexRender, + Header, + Row, + Table as TableInstance, +} from "@tanstack/react-table"; import { useIsLoading } from "@/contexts"; import { usePageSize } from "@/utilities/storage"; -import styles from "./BaseTable.module.scss"; +import styles from "@/components/tables/BaseTable.module.scss"; -export type BaseTableProps = TableInstance & { +export type BaseTableProps = { + instance: TableInstance; tableStyles?: TableStyleProps; }; @@ -15,60 +21,57 @@ export interface TableStyleProps { placeholder?: number; hideHeader?: boolean; fixHeader?: boolean; - headersRenderer?: (headers: HeaderGroup[]) => JSX.Element[]; - rowRenderer?: (row: Row) => Nullable; + headersRenderer?: (headers: Header[]) => React.JSX.Element[]; + rowRenderer?: (row: Row) => Nullable; } function DefaultHeaderRenderer( - headers: HeaderGroup[], -): JSX.Element[] { - return headers.map((col) => ( - - {col.render("Header")} + headers: Header[], +): React.JSX.Element[] { + return headers.map((header) => ( + + {flexRender(header.column.columnDef.header, header.getContext())} )); } -function DefaultRowRenderer(row: Row): JSX.Element | null { +function DefaultRowRenderer( + row: Row, +): React.JSX.Element | null { return ( - - {row.cells.map((cell) => ( - {cell.render("Cell")} + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + ))} ); } export default function BaseTable(props: BaseTableProps) { - const { - headerGroups, - rows: tableRows, - page: tablePages, - prepareRow, - getTableProps, - getTableBodyProps, - tableStyles, - } = props; + const { instance, tableStyles } = props; const headersRenderer = tableStyles?.headersRenderer ?? DefaultHeaderRenderer; const rowRenderer = tableStyles?.rowRenderer ?? DefaultRowRenderer; const colCount = useMemo(() => { - return headerGroups.reduce( - (prev, curr) => (curr.headers.length > prev ? curr.headers.length : prev), - 0, - ); - }, [headerGroups]); + return instance + .getHeaderGroups() + .reduce( + (prev, curr) => + curr.headers.length > prev ? curr.headers.length : prev, + 0, + ); + }, [instance]); - // Switch to usePagination plugin if enabled - const rows = tablePages ?? tableRows; - - const empty = rows.length === 0; + const empty = instance.getRowCount() === 0; const pageSize = usePageSize(); const isLoading = useIsLoading(); let body: ReactNode; + if (isLoading) { body = Array(tableStyles?.placeholder ?? pageSize) .fill(0) @@ -88,27 +91,22 @@ export default function BaseTable(props: BaseTableProps) { ); } else { - body = rows.map((row) => { - prepareRow(row); + body = instance.getRowModel().rows.map((row) => { return rowRenderer(row); }); } return ( - +
- {body} + {body}
 ); diff --git a/frontend/src/components/tables/GroupTable.tsx b/frontend/src/components/tables/GroupTable.tsx index c05182aa6..b14edf3e6 100644 --- a/frontend/src/components/tables/GroupTable.tsx +++ b/frontend/src/components/tables/GroupTable.tsx @@ -1,38 +1,44 @@ -import { - Cell, - HeaderGroup, - Row, - useExpanded, - useGroupBy, - useSortBy, -} from "react-table"; +import React, { Fragment } from "react"; import { Box, Table, Text } from "@mantine/core"; import { faChevronCircleRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import SimpleTable, { SimpleTableProps } from "./SimpleTable"; +import { + Cell, + flexRender, + getExpandedRowModel, + getGroupedRowModel, + Header, + Row, +} from "@tanstack/react-table"; +import SimpleTable, { SimpleTableProps } from "@/components/tables/SimpleTable"; -function renderCell(cell: Cell, row: Row) { - if (cell.isGrouped) { +function renderCell( + cell: Cell, + row: Row, +) { + if (cell.getIsGrouped()) { return ( -
{cell.render("Cell")}
+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
); - } else if (row.canExpand || cell.isAggregated) { + } else if (row.getCanExpand() || cell.getIsAggregated()) { return null; } else { - return cell.render("Cell"); + return flexRender(cell.column.columnDef.cell, cell.getContext()); } } function renderRow(row: Row) { - if (row.canExpand) { - const cell = row.cells.find((cell) => cell.isGrouped); + if (row.getCanExpand()) { + const cell = row.getVisibleCells().find((cell) => cell.getIsGrouped()); + if (cell) { - const rotation = row.isExpanded ? 90 : undefined; + const rotation = row.getIsExpanded() ? 90 : undefined; + return ( - - - - {cell.render("Cell")} + + + row.toggleExpanded()}> + {flexRender(cell.column.columnDef.cell, cell.getContext())} (row: Row) { } } else { return ( - - {row.cells - .filter((cell) => !cell.isPlaceholder) + + {row + .getVisibleCells() + .filter((cell) => !cell.getIsPlaceholder()) .map((cell) => ( - - {renderCell(cell, row)} - + {renderCell(cell, row)} ))} ); @@ -62,27 +67,34 @@ function renderRow(row: Row) { } function renderHeaders( - headers: HeaderGroup[], -): JSX.Element[] { - return headers - .filter((col) => !col.isGrouped) - .map((col) => ( - {col.render("Header")} - )); + headers: Header[], +): React.JSX.Element[] { + return headers.map((header) => { + if (header.column.getIsGrouped()) { + return ; + } + + return ( + + {flexRender(header.column.columnDef.header, header.getContext())} + + ); + }); } type Props = Omit< SimpleTableProps, - "plugins" | "headersRenderer" | "rowRenderer" + "headersRenderer" | "rowRenderer" >; -const plugins = [useGroupBy, useSortBy, useExpanded]; - function GroupTable(props: Props) { return ( ); diff --git a/frontend/src/components/tables/PageTable.tsx b/frontend/src/components/tables/PageTable.tsx index ee4824db6..476ff2c2b 100644 --- a/frontend/src/components/tables/PageTable.tsx +++ b/frontend/src/components/tables/PageTable.tsx @@ -1,55 +1,62 @@ -import { useEffect } from "react"; -import { usePagination, useTable } from "react-table"; +import { MutableRefObject, useEffect } from "react"; +import { + getCoreRowModel, + getPaginationRowModel, + Table, + TableOptions, + useReactTable, +} from "@tanstack/react-table"; +import BaseTable, { TableStyleProps } from "@/components/tables/BaseTable"; import { ScrollToTop } from "@/utilities"; import { usePageSize } from "@/utilities/storage"; -import BaseTable from "./BaseTable"; import PageControl from "./PageControl"; -import { useDefaultSettings } from "./plugins"; -import { SimpleTableProps } from "./SimpleTable"; -type Props = SimpleTableProps & { +type Props = Omit, "getCoreRowModel"> & { + instanceRef?: MutableRefObject | null>; + tableStyles?: TableStyleProps; autoScroll?: boolean; }; -const tablePlugins = [useDefaultSettings, usePagination]; - export default function PageTable(props: Props) { - const { autoScroll = true, plugins, instanceRef, ...options } = props; + const { instanceRef, autoScroll, ...options } = props; - const instance = useTable( - options, - useDefaultSettings, - ...tablePlugins, - ...(plugins ?? []), - ); + const pageSize = usePageSize(); - // use page size as specified in UI settings - instance.state.pageSize = usePageSize(); + const instance = useReactTable({ + ...options, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + initialState: { + pagination: { + pageSize: pageSize, + }, + }, + }); if (instanceRef) { instanceRef.current = instance; } + const pageIndex = instance.getState().pagination.pageIndex; + // Scroll to top when page is changed useEffect(() => { if (autoScroll) { ScrollToTop(); } - }, [instance.state.pageIndex, autoScroll]); + }, [pageIndex, autoScroll]); + + const state = instance.getState(); return ( <> - + ); diff --git a/frontend/src/components/tables/QueryPageTable.tsx b/frontend/src/components/tables/QueryPageTable.tsx index c144b3b54..797d7a08e 100644 --- a/frontend/src/components/tables/QueryPageTable.tsx +++ b/frontend/src/components/tables/QueryPageTable.tsx @@ -1,9 +1,9 @@ import { useEffect } from "react"; import { UsePaginationQueryResult } from "@/apis/queries/hooks"; +import SimpleTable, { SimpleTableProps } from "@/components/tables/SimpleTable"; import { LoadingProvider } from "@/contexts"; import { ScrollToTop } from "@/utilities"; import PageControl from "./PageControl"; -import SimpleTable, { SimpleTableProps } from "./SimpleTable"; type Props = Omit, "data"> & { query: UsePaginationQueryResult; diff --git a/frontend/src/components/tables/SimpleTable.tsx b/frontend/src/components/tables/SimpleTable.tsx index 90f76c7f2..e3e0b7ff3 100644 --- a/frontend/src/components/tables/SimpleTable.tsx +++ b/frontend/src/components/tables/SimpleTable.tsx @@ -1,23 +1,65 @@ -import { PluginHook, TableInstance, TableOptions, useTable } from "react-table"; -import BaseTable, { TableStyleProps } from "./BaseTable"; -import { useDefaultSettings } from "./plugins"; +import { MutableRefObject, useEffect, useMemo } from "react"; +import { + getCoreRowModel, + Row, + Table, + TableOptions, + useReactTable, +} from "@tanstack/react-table"; +import BaseTable, { TableStyleProps } from "@/components/tables/BaseTable"; +import { usePageSize } from "@/utilities/storage"; -export type SimpleTableProps = TableOptions & { - plugins?: PluginHook[]; - instanceRef?: React.MutableRefObject | null>; +export type SimpleTableProps = Omit< + TableOptions, + "getCoreRowModel" +> & { + instanceRef?: MutableRefObject | null>; tableStyles?: TableStyleProps; + onRowSelectionChanged?: (selectedRows: Row[]) => void; + onAllRowsExpandedChanged?: (isAllRowsExpanded: boolean) => void; }; export default function SimpleTable( props: SimpleTableProps, ) { - const { plugins, instanceRef, tableStyles, ...options } = props; + const { + instanceRef, + tableStyles, + onRowSelectionChanged, + onAllRowsExpandedChanged, + ...options + } = props; - const instance = useTable(options, useDefaultSettings, ...(plugins ?? [])); + const pageSize = usePageSize(); + + const instance = useReactTable({ + ...options, + getCoreRowModel: getCoreRowModel(), + autoResetPageIndex: false, + autoResetExpanded: false, + pageCount: pageSize, + }); if (instanceRef) { instanceRef.current = instance; } - return ; + const selectedRows = instance.getSelectedRowModel().rows; + + const memoizedRows = useMemo(() => selectedRows, [selectedRows]); + + // eslint-disable-next-line react-hooks/exhaustive-deps + const memoizedRowSelectionChanged = useMemo(() => onRowSelectionChanged, []); + + const isAllRowsExpanded = instance.getIsAllRowsExpanded(); + + useEffect(() => { + memoizedRowSelectionChanged?.(memoizedRows); + }, [memoizedRowSelectionChanged, memoizedRows]); + + useEffect(() => { + onAllRowsExpandedChanged?.(isAllRowsExpanded); + }, [onAllRowsExpandedChanged, isAllRowsExpanded]); + + return ; } diff --git a/frontend/src/components/tables/plugins/index.ts b/frontend/src/components/tables/plugins/index.ts deleted file mode 100644 index 39490a113..000000000 --- a/frontend/src/components/tables/plugins/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as useCustomSelection } from "./useCustomSelection"; -export { default as useDefaultSettings } from "./useDefaultSettings"; diff --git a/frontend/src/components/tables/plugins/useCustomSelection.tsx b/frontend/src/components/tables/plugins/useCustomSelection.tsx deleted file mode 100644 index 572926093..000000000 --- a/frontend/src/components/tables/plugins/useCustomSelection.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { forwardRef, useEffect, useRef } from "react"; -import { - CellProps, - Column, - ColumnInstance, - ensurePluginOrder, - HeaderProps, - Hooks, - MetaBase, - TableInstance, - TableToggleCommonProps, -} from "react-table"; -import { Checkbox as MantineCheckbox } from "@mantine/core"; - -const pluginName = "useCustomSelection"; - -const checkboxId = "---selection---"; - -interface CheckboxProps { - idIn: string; - disabled?: boolean; -} - -const Checkbox = forwardRef< - HTMLInputElement, - TableToggleCommonProps & CheckboxProps ->(({ indeterminate, checked, disabled, idIn, ...rest }, ref) => { - const defaultRef = useRef(null); - const resolvedRef = ref || defaultRef; - - useEffect(() => { - if (typeof resolvedRef === "object" && resolvedRef.current) { - resolvedRef.current.indeterminate = indeterminate ?? false; - - if (disabled) { - resolvedRef.current.checked = false; - } else { - resolvedRef.current.checked = checked ?? false; - } - } - }, [resolvedRef, indeterminate, checked, disabled]); - - return ( - - ); -}); - -function useCustomSelection(hooks: Hooks) { - hooks.visibleColumns.push(visibleColumns); - hooks.useInstance.push(useInstance); -} - -useCustomSelection.pluginName = pluginName; - -function useInstance(instance: TableInstance) { - const { - plugins, - rows, - onSelect, - canSelect, - state: { selectedRowIds }, - } = instance; - - ensurePluginOrder(plugins, ["useRowSelect"], pluginName); - - useEffect(() => { - // Performance - let items = Object.keys(selectedRowIds).flatMap( - (v) => rows.find((n) => n.id === v)?.original ?? [], - ); - - if (canSelect) { - items = items.filter((v) => canSelect(v)); - } - - onSelect && onSelect(items); - }, [selectedRowIds, onSelect, rows, canSelect]); -} - -function visibleColumns( - columns: ColumnInstance[], - meta: MetaBase, -): Column[] { - const { instance } = meta; - const checkbox: Column = { - id: checkboxId, - Header: ({ getToggleAllRowsSelectedProps }: HeaderProps) => ( - - ), - Cell: ({ row }: CellProps) => { - const canSelect = instance.canSelect; - const disabled = (canSelect && !canSelect(row.original)) ?? false; - return ( - - ); - }, - }; - return [checkbox, ...columns]; -} - -export default useCustomSelection; diff --git a/frontend/src/components/tables/plugins/useDefaultSettings.tsx b/frontend/src/components/tables/plugins/useDefaultSettings.tsx deleted file mode 100644 index ac34334b4..000000000 --- a/frontend/src/components/tables/plugins/useDefaultSettings.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Hooks, TableOptions } from "react-table"; -import { usePageSize } from "@/utilities/storage"; - -const pluginName = "useLocalSettings"; - -function useDefaultSettings(hooks: Hooks) { - hooks.useOptions.push(useOptions); -} -useDefaultSettings.pluginName = pluginName; - -function useOptions(options: TableOptions) { - const pageSize = usePageSize(); - - if (options.autoResetPage === undefined) { - options.autoResetPage = false; - } - - if (options.autoResetExpanded === undefined) { - options.autoResetExpanded = false; - } - - if (options.initialState === undefined) { - options.initialState = {}; - } - - if (options.initialState.pageSize === undefined) { - options.initialState.pageSize = pageSize; - } - - return options; -} - -export default useDefaultSettings; diff --git a/frontend/src/pages/Blacklist/Movies/table.tsx b/frontend/src/pages/Blacklist/Movies/table.tsx index 0ac3bf3a8..00730a850 100644 --- a/frontend/src/pages/Blacklist/Movies/table.tsx +++ b/frontend/src/pages/Blacklist/Movies/table.tsx @@ -1,56 +1,70 @@ import { FunctionComponent, useMemo } from "react"; import { Link } from "react-router-dom"; -import { Column } from "react-table"; import { Anchor, Text } from "@mantine/core"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; +import { ColumnDef } from "@tanstack/react-table"; import { useMovieDeleteBlacklist } from "@/apis/hooks"; -import { PageTable } from "@/components"; import MutateAction from "@/components/async/MutateAction"; import Language from "@/components/bazarr/Language"; +import PageTable from "@/components/tables/PageTable"; import TextPopover from "@/components/TextPopover"; interface Props { - blacklist: readonly Blacklist.Movie[]; + blacklist: Blacklist.Movie[]; } const Table: FunctionComponent = ({ blacklist }) => { - const columns = useMemo[]>( + const remove = useMovieDeleteBlacklist(); + + const columns = useMemo[]>( () => [ { - Header: "Name", - accessor: "title", - Cell: (row) => { - const target = `/movies/${row.row.original.radarrId}`; + header: "Name", + accessorKey: "title", + cell: ({ + row: { + original: { radarrId }, + }, + }) => { + const target = `/movies/${radarrId}`; return ( - {row.value} + {radarrId} ); }, }, { - Header: "Language", - accessor: "language", - Cell: ({ value }) => { - if (value) { - return ; + header: "Language", + accessorKey: "language", + cell: ({ + row: { + original: { language }, + }, + }) => { + if (language) { + return ; } else { return null; } }, }, { - Header: "Provider", - accessor: "provider", + header: "Provider", + accessorKey: "provider", }, { - Header: "Date", - accessor: "timestamp", - Cell: (row) => { - if (row.value) { + header: "Date", + accessorKey: "timestamp", + cell: ({ + row: { + original: { timestamp, parsed_timestamp: parsedTimestamp }, + }, + }) => { + if (timestamp) { return ( - - {row.value} + + {timestamp} ); } else { @@ -59,10 +73,12 @@ const Table: FunctionComponent = ({ blacklist }) => { }, }, { - accessor: "subs_id", - Cell: ({ row, value }) => { - const remove = useMovieDeleteBlacklist(); - + id: "subs_id", + cell: ({ + row: { + original: { subs_id: subsId, provider }, + }, + }) => { return ( = ({ blacklist }) => { args={() => ({ all: false, form: { - provider: row.original.provider, + provider: provider, // eslint-disable-next-line camelcase - subs_id: value, + subs_id: subsId, }, })} > @@ -82,7 +98,7 @@ const Table: FunctionComponent = ({ blacklist }) => { }, }, ], - [], + [remove], ); return ( = ({ blacklist }) => { - const columns = useMemo[]>( + const removeFromBlacklist = useEpisodeDeleteBlacklist(); + + const columns = useMemo[]>( () => [ { - Header: "Series", - accessor: "seriesTitle", - Cell: (row) => { - const target = `/series/${row.row.original.sonarrSeriesId}`; + header: "Series", + accessorKey: "seriesTitle", + cell: ({ + row: { + original: { sonarrSeriesId, seriesTitle }, + }, + }) => { + const target = `/series/${sonarrSeriesId}`; return ( - {row.value} + {seriesTitle} ); }, }, { - Header: "Episode", - accessor: "episode_number", + header: "Episode", + accessorKey: "episode_number", }, { - accessor: "episodeTitle", + id: "episodeTitle", }, { - Header: "Language", - accessor: "language", - Cell: ({ value }) => { - if (value) { - return ; + header: "Language", + accessorKey: "language", + cell: ({ + row: { + original: { language }, + }, + }) => { + if (language) { + return ; } else { return null; } }, }, { - Header: "Provider", - accessor: "provider", + header: "Provider", + accessorKey: "provider", }, { - Header: "Date", - accessor: "timestamp", - Cell: (row) => { - if (row.value) { + header: "Date", + accessorKey: "timestamp", + cell: ({ + row: { + original: { timestamp, parsed_timestamp: parsedTimestamp }, + }, + }) => { + if (timestamp) { return ( - - {row.value} + + {timestamp} ); } else { @@ -66,22 +80,24 @@ const Table: FunctionComponent = ({ blacklist }) => { }, }, { - accessor: "subs_id", - Cell: ({ row, value }) => { - const remove = useEpisodeDeleteBlacklist(); - + id: "subs_id", + cell: ({ + row: { + original: { subs_id: subsId, provider }, + }, + }) => { return ( ({ all: false, form: { - provider: row.original.provider, + provider: provider, // eslint-disable-next-line camelcase - subs_id: value, + subs_id: subsId, }, })} > @@ -89,7 +105,7 @@ const Table: FunctionComponent = ({ blacklist }) => { }, }, ], - [], + [removeFromBlacklist], ); return ( { - const [state, setState] = useState({ - expand: false, - buttonText: "Expand All", - initial: true, - }); - const params = useParams(); const id = Number.parseInt(params.id as string); @@ -102,18 +97,18 @@ const SeriesEpisodesView: FunctionComponent = () => { useDocumentTitle(`${series?.title ?? "Unknown Series"} - Bazarr (Series)`); + const tableRef = useRef | null>(null); + + const [isAllRowExpanded, setIsAllRowExpanded] = useState( + tableRef?.current?.getIsAllRowsExpanded(), + ); + const openDropzone = useRef(null); if (isNaN(id) || (isFetched && !series)) { return ; } - const toggleState = () => { - state.expand - ? setState({ expand: false, buttonText: "Expand All", initial: false }) - : setState({ expand: true, buttonText: "Collapse All", initial: false }); - }; - return ( @@ -210,12 +205,14 @@ const SeriesEpisodesView: FunctionComponent = () => { Edit Series { - toggleState(); + tableRef.current?.toggleAllRowsExpanded(); }} > - {state.buttonText} + {isAllRowExpanded ? "Collapse All" : "Expand All"} @@ -223,11 +220,11 @@ const SeriesEpisodesView: FunctionComponent = () => {
diff --git a/frontend/src/pages/Episodes/table.tsx b/frontend/src/pages/Episodes/table.tsx index b28e0d7e8..7b8d4494f 100644 --- a/frontend/src/pages/Episodes/table.tsx +++ b/frontend/src/pages/Episodes/table.tsx @@ -1,11 +1,4 @@ -import { - FunctionComponent, - useCallback, - useEffect, - useMemo, - useRef, -} from "react"; -import { Column, TableInstance } from "react-table"; +import React, { forwardRef, useCallback, useEffect, useMemo } from "react"; import { Group, Text } from "@mantine/core"; import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons"; import { @@ -14,6 +7,7 @@ import { faUser, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ColumnDef, Table as TableInstance } from "@tanstack/react-table"; import { useDownloadEpisodeSubtitles, useEpisodesProvider } from "@/apis/hooks"; import { useShowOnlyDesired } from "@/apis/hooks/site"; import { Action, GroupTable } from "@/components"; @@ -30,219 +24,227 @@ interface Props { episodes: Item.Episode[] | null; disabled?: boolean; profile?: Language.Profile; - expand?: boolean; - initial?: boolean; + onAllRowsExpandedChanged: (isAllRowsExpanded: boolean) => void; } -const Table: FunctionComponent = ({ - episodes, - profile, - disabled, - expand, - initial, -}) => { - const onlyDesired = useShowOnlyDesired(); - - const profileItems = useProfileItemsToLanguages(profile); - const { mutateAsync } = useDownloadEpisodeSubtitles(); - - const download = useCallback( - (item: Item.Episode, result: SearchResultType) => { - const { - language, - hearing_impaired: hi, - forced, - provider, - subtitle, - original_format: originalFormat, - } = result; - const { sonarrSeriesId: seriesId, sonarrEpisodeId: episodeId } = item; - - return mutateAsync({ - seriesId, - episodeId, - form: { +const Table = forwardRef | null, Props>( + ({ episodes, profile, disabled, onAllRowsExpandedChanged }, ref) => { + const onlyDesired = useShowOnlyDesired(); + + const tableRef = + ref as React.MutableRefObject | null>; + + const profileItems = useProfileItemsToLanguages(profile); + + const { mutateAsync } = useDownloadEpisodeSubtitles(); + + const modals = useModals(); + + const download = useCallback( + (item: Item.Episode, result: SearchResultType) => { + const { language, - hi, + hearing_impaired: hi, forced, provider, subtitle, - // eslint-disable-next-line camelcase original_format: originalFormat, + } = result; + const { sonarrSeriesId: seriesId, sonarrEpisodeId: episodeId } = item; + + return mutateAsync({ + seriesId, + episodeId, + form: { + language, + hi, + forced, + provider, + subtitle, + // eslint-disable-next-line camelcase + original_format: originalFormat, + }, + }); + }, + [mutateAsync], + ); + + const SubtitlesCell = React.memo( + ({ episode }: { episode: Item.Episode }) => { + const seriesId = episode.sonarrSeriesId; + + const elements = useMemo(() => { + const episodeId = episode.sonarrEpisodeId; + + const missing = episode.missing_subtitles.map((val, idx) => ( + + )); + + let rawSubtitles = episode.subtitles; + if (onlyDesired) { + rawSubtitles = filterSubtitleBy(rawSubtitles, profileItems); + } + + const subtitles = rawSubtitles.map((val, idx) => ( + + )); + + return [...missing, ...subtitles]; + }, [episode, seriesId]); + + return ( + + {elements} + + ); + }, + ); + + const columns = useMemo[]>( + () => [ + { + id: "monitored", + cell: ({ + row: { + original: { monitored }, + }, + }) => { + return ( + + ); + }, }, - }); - }, - [mutateAsync], - ); - - const columns: Column[] = useMemo[]>( - () => [ - { - accessor: "monitored", - Cell: (row) => { - return ( - - ); + { + header: "", + accessorKey: "season", + cell: ({ + row: { + original: { season }, + }, + }) => { + return Season {season}; + }, }, - }, - { - accessor: "season", - Cell: (row) => { - return Season {row.value}; + { + header: "Episode", + accessorKey: "episode", }, - }, - { - Header: "Episode", - accessor: "episode", - }, - { - Header: "Title", - accessor: "title", - Cell: ({ value, row }) => { - return ( - - {value} - - ); + { + header: "Title", + accessorKey: "title", + cell: ({ + row: { + original: { sceneName, title }, + }, + }) => { + return ( + + {title} + + ); + }, }, - }, - { - Header: "Audio", - accessor: "audio_language", - Cell: ({ value }) => , - }, - { - Header: "Subtitles", - accessor: "missing_subtitles", - Cell: ({ row }) => { - const episode = row.original; - - const seriesId = episode.sonarrSeriesId; - - const elements = useMemo(() => { - const episodeId = episode.sonarrEpisodeId; - - const missing = episode.missing_subtitles.map((val, idx) => ( - - )); - - let rawSubtitles = episode.subtitles; - if (onlyDesired) { - rawSubtitles = filterSubtitleBy(rawSubtitles, profileItems); - } - - const subtitles = rawSubtitles.map((val, idx) => ( - - )); - - return [...missing, ...subtitles]; - }, [episode, seriesId]); - - return ( - - {elements} - - ); + { + header: "Audio", + accessorKey: "audio_language", + cell: ({ + row: { + original: { audio_language: audioLanguage }, + }, + }) => , }, - }, - { - Header: "Actions", - accessor: "sonarrEpisodeId", - Cell: ({ row }) => { - const modals = useModals(); - return ( - - { - modals.openContextModal(EpisodeSearchModal, { - item: row.original, - download, - query: useEpisodesProvider, - }); - }} - icon={faUser} - > - { - modals.openContextModal( - EpisodeHistoryModal, - { - episode: row.original, - }, - { - title: `History - ${row.original.title}`, - }, - ); - }} - icon={faHistory} - > - - ); + { + header: "Subtitles", + accessorKey: "missing_subtitles", + cell: ({ row: { original } }) => { + return ; + }, }, - }, - ], - [onlyDesired, profileItems, disabled, download], - ); - - const maxSeason = useMemo( - () => - episodes?.reduce( - (prev, curr) => Math.max(prev, curr.season), - 0, - ) ?? 0, - [episodes], - ); - - const instance = useRef | null>(null); - - useEffect(() => { - if (instance.current) { - if (initial) { - // start with all rows collapsed - instance.current.toggleAllRowsExpanded(false); - // expand the last/current season on initial display - instance.current.toggleRowExpanded([`season:${maxSeason}`], true); - } else { - if (expand !== undefined) { - instance.current.toggleAllRowsExpanded(expand); - } - } - } - }, [maxSeason, expand, initial]); - - return ( - - ); -}; + { + header: "Actions", + cell: ({ row }) => { + return ( + + { + modals.openContextModal(EpisodeSearchModal, { + item: row.original, + download, + query: useEpisodesProvider, + }); + }} + icon={faUser} + > + { + modals.openContextModal( + EpisodeHistoryModal, + { + episode: row.original, + }, + { + title: `History - ${row.original.title}`, + }, + ); + }} + icon={faHistory} + > + + ); + }, + }, + ], + [disabled, download, modals, SubtitlesCell], + ); + + const maxSeason = useMemo( + () => + episodes?.reduce( + (prev, curr) => Math.max(prev, curr.season), + 0, + ) ?? 0, + [episodes], + ); + + useEffect(() => { + tableRef?.current?.setExpanded(() => ({ [`season:${maxSeason}`]: true })); + }, [tableRef, maxSeason]); + + return ( + + ); + }, +); export default Table; diff --git a/frontend/src/pages/History/Movies/index.tsx b/frontend/src/pages/History/Movies/index.tsx index 39365e348..92d1aa280 100644 --- a/frontend/src/pages/History/Movies/index.tsx +++ b/frontend/src/pages/History/Movies/index.tsx @@ -1,7 +1,6 @@ /* eslint-disable camelcase */ import { FunctionComponent, useMemo } from "react"; import { Link } from "react-router-dom"; -import { Column } from "react-table"; import { Anchor, Badge, Text } from "@mantine/core"; import { faFileExcel, @@ -9,6 +8,7 @@ import { faRecycle, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ColumnDef } from "@tanstack/react-table"; import { useMovieAddBlacklist, useMovieHistoryPagination } from "@/apis/hooks"; import { MutateAction } from "@/components/async"; import { HistoryIcon } from "@/components/bazarr"; @@ -18,32 +18,40 @@ import TextPopover from "@/components/TextPopover"; import HistoryView from "@/pages/views/HistoryView"; const MoviesHistoryView: FunctionComponent = () => { - const columns: Column[] = useMemo[]>( + const addToBlacklist = useMovieAddBlacklist(); + + const columns = useMemo[]>( () => [ { - accessor: "action", - Cell: (row) => , + id: "action", + cell: ({ row }) => ( + + ), }, { - Header: "Name", - accessor: "title", - Cell: ({ row, value }) => { + header: "Name", + accessorKey: "title", + cell: ({ row }) => { const target = `/movies/${row.original.radarrId}`; return ( - {value} + {row.original.title} ); }, }, { - Header: "Language", - accessor: "language", - Cell: ({ value }) => { - if (value) { + header: "Language", + accessorKey: "language", + cell: ({ + row: { + original: { language }, + }, + }) => { + if (language) { return ( - + ); } else { @@ -52,13 +60,13 @@ const MoviesHistoryView: FunctionComponent = () => { }, }, { - Header: "Score", - accessor: "score", + header: "Score", + accessorKey: "score", }, { - Header: "Match", - accessor: "matches", - Cell: (row) => { + header: "Match", + accessorKey: "matches", + cell: (row) => { const { matches, dont_matches: dont } = row.row.original; if (matches.length || dont.length) { return ( @@ -74,13 +82,17 @@ const MoviesHistoryView: FunctionComponent = () => { }, }, { - Header: "Date", - accessor: "timestamp", - Cell: (row) => { - if (row.value) { + header: "Date", + accessorKey: "timestamp", + cell: ({ + row: { + original: { timestamp, parsed_timestamp }, + }, + }) => { + if (timestamp) { return ( - - {row.value} + + {timestamp} ); } else { @@ -89,21 +101,29 @@ const MoviesHistoryView: FunctionComponent = () => { }, }, { - Header: "Info", - accessor: "description", - Cell: ({ value }) => { + header: "Info", + accessorKey: "description", + cell: ({ + row: { + original: { description }, + }, + }) => { return ( - + ); }, }, { - Header: "Upgrade", - accessor: "upgradable", - Cell: (row) => { - if (row.value) { + header: "Upgrade", + accessorKey: "upgradable", + cell: ({ + row: { + original: { upgradable }, + }, + }) => { + if (upgradable) { return ( @@ -115,20 +135,25 @@ const MoviesHistoryView: FunctionComponent = () => { }, }, { - Header: "Blacklist", - accessor: "blacklisted", - Cell: ({ row, value }) => { - const add = useMovieAddBlacklist(); - const { radarrId, provider, subs_id, language, subtitles_path } = - row.original; + header: "Blacklist", + accessorKey: "blacklisted", + cell: ({ row }) => { + const { + blacklisted, + radarrId, + provider, + subs_id, + language, + subtitles_path, + } = row.original; if (subs_id && provider && language) { return ( ({ id: radarrId, form: { @@ -146,7 +171,7 @@ const MoviesHistoryView: FunctionComponent = () => { }, }, ], - [], + [addToBlacklist], ); const query = useMovieHistoryPagination(); diff --git a/frontend/src/pages/History/Series/index.tsx b/frontend/src/pages/History/Series/index.tsx index 67f18b9d9..a5d75516a 100644 --- a/frontend/src/pages/History/Series/index.tsx +++ b/frontend/src/pages/History/Series/index.tsx @@ -1,7 +1,6 @@ /* eslint-disable camelcase */ import { FunctionComponent, useMemo } from "react"; import { Link } from "react-router-dom"; -import { Column } from "react-table"; import { Anchor, Badge, Text } from "@mantine/core"; import { faFileExcel, @@ -9,6 +8,7 @@ import { faRecycle, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ColumnDef } from "@tanstack/react-table"; import { useEpisodeAddBlacklist, useEpisodeHistoryPagination, @@ -21,44 +21,60 @@ import TextPopover from "@/components/TextPopover"; import HistoryView from "@/pages/views/HistoryView"; const SeriesHistoryView: FunctionComponent = () => { - const columns: Column[] = useMemo[]>( + const addToBlacklist = useEpisodeAddBlacklist(); + + const columns = useMemo[]>( () => [ { - accessor: "action", - Cell: ({ value }) => , + id: "action", + cell: ({ row: { original } }) => ( + + ), }, { - Header: "Series", - accessor: "seriesTitle", - Cell: (row) => { - const target = `/series/${row.row.original.sonarrSeriesId}`; + header: "Series", + accessorKey: "seriesTitle", + cell: ({ + row: { + original: { seriesTitle, sonarrSeriesId }, + }, + }) => { + const target = `/series/${sonarrSeriesId}`; return ( - {row.value} + {seriesTitle} ); }, }, { - Header: "Episode", - accessor: "episode_number", + header: "Episode", + accessorKey: "episode_number", }, { - Header: "Title", - accessor: "episodeTitle", - Cell: ({ value }) => { - return {value}; + header: "Title", + accessorKey: "episodeTitle", + cell: ({ + row: { + original: { episodeTitle }, + }, + }) => { + return {episodeTitle}; }, }, { - Header: "Language", - accessor: "language", - Cell: ({ value }) => { - if (value) { + header: "Language", + accessorKey: "language", + cell: ({ + row: { + original: { language }, + }, + }) => { + if (language) { return ( - + ); } else { @@ -67,13 +83,13 @@ const SeriesHistoryView: FunctionComponent = () => { }, }, { - Header: "Score", - accessor: "score", + header: "Score", + accessorKey: "score", }, { - Header: "Match", - accessor: "matches", - Cell: (row) => { + header: "Match", + accessorKey: "matches", + cell: (row) => { const { matches, dont_matches: dont } = row.row.original; if (matches.length || dont.length) { return ( @@ -89,13 +105,17 @@ const SeriesHistoryView: FunctionComponent = () => { }, }, { - Header: "Date", - accessor: "timestamp", - Cell: (row) => { - if (row.value) { + header: "Date", + accessorKey: "timestamp", + cell: ({ + row: { + original: { timestamp, parsed_timestamp }, + }, + }) => { + if (timestamp) { return ( - - {row.value} + + {timestamp} ); } else { @@ -104,21 +124,29 @@ const SeriesHistoryView: FunctionComponent = () => { }, }, { - Header: "Info", - accessor: "description", - Cell: ({ row, value }) => { + header: "Info", + accessorKey: "description", + cell: ({ + row: { + original: { description }, + }, + }) => { return ( - + ); }, }, { - Header: "Upgrade", - accessor: "upgradable", - Cell: (row) => { - if (row.value) { + header: "Upgrade", + accessorKey: "upgradable", + cell: ({ + row: { + original: { upgradable }, + }, + }) => { + if (upgradable) { return ( @@ -130,9 +158,9 @@ const SeriesHistoryView: FunctionComponent = () => { }, }, { - Header: "Blacklist", - accessor: "blacklisted", - Cell: ({ row, value }) => { + header: "Blacklist", + accessorKey: "blacklisted", + cell: ({ row }) => { const { sonarrEpisodeId, sonarrSeriesId, @@ -140,16 +168,15 @@ const SeriesHistoryView: FunctionComponent = () => { subs_id, language, subtitles_path, + blacklisted, } = row.original; - const add = useEpisodeAddBlacklist(); - if (subs_id && provider && language) { return ( ({ seriesId: sonarrSeriesId, episodeId: sonarrEpisodeId, @@ -168,7 +195,7 @@ const SeriesHistoryView: FunctionComponent = () => { }, }, ], - [], + [addToBlacklist], ); const query = useEpisodeHistoryPagination(); diff --git a/frontend/src/pages/Movies/Details/table.tsx b/frontend/src/pages/Movies/Details/table.tsx index 03593102c..7d0c20a30 100644 --- a/frontend/src/pages/Movies/Details/table.tsx +++ b/frontend/src/pages/Movies/Details/table.tsx @@ -1,13 +1,14 @@ -import { FunctionComponent, useMemo } from "react"; -import { Column } from "react-table"; +import React, { FunctionComponent, useMemo } from "react"; import { Badge, Text, TextProps } from "@mantine/core"; import { faEllipsis, faSearch } from "@fortawesome/free-solid-svg-icons"; +import { ColumnDef } from "@tanstack/react-table"; import { isString } from "lodash"; import { useMovieSubtitleModification } from "@/apis/hooks"; import { useShowOnlyDesired } from "@/apis/hooks/site"; -import { Action, SimpleTable } from "@/components"; +import { Action } from "@/components"; import Language from "@/components/bazarr/Language"; import SubtitleToolsMenu from "@/components/SubtitleToolsMenu"; +import SimpleTable from "@/components/tables/SimpleTable"; import { task, TaskGroup } from "@/modules/task"; import { filterSubtitleBy, toPython } from "@/utilities"; import { useProfileItemsToLanguages } from "@/utilities/languages"; @@ -33,35 +34,125 @@ const Table: FunctionComponent = ({ movie, profile, disabled }) => { const profileItems = useProfileItemsToLanguages(profile); - const columns: Column[] = useMemo[]>( + const { download, remove } = useMovieSubtitleModification(); + + const CodeCell = React.memo(({ item }: { item: Subtitle }) => { + const { code2, path, hi, forced } = item; + + const selections = useMemo(() => { + const list: FormType.ModifySubtitle[] = []; + + if (path && !isSubtitleMissing(path) && movie !== null) { + list.push({ + type: "movie", + path, + id: movie.radarrId, + language: code2, + forced: toPython(forced), + hi: toPython(hi), + }); + } + + return list; + }, [code2, path, forced, hi]); + + if (movie === null) { + return null; + } + + const { radarrId } = movie; + + if (isSubtitleMissing(path)) { + return ( + { + task.create( + movie.title, + TaskGroup.SearchSubtitle, + download.mutateAsync, + { + radarrId, + form: { + language: code2, + forced, + hi, + }, + }, + ); + }} + > + ); + } + + return ( + { + if (action === "delete" && path) { + task.create( + movie.title, + TaskGroup.DeleteSubtitle, + remove.mutateAsync, + { + radarrId, + form: { + language: code2, + forced, + hi, + path, + }, + }, + ); + } else if (action === "search") { + throw new Error("This shouldn't happen, please report the bug"); + } + }} + > + + + ); + }); + + const columns = useMemo[]>( () => [ { - Header: "Subtitle Path", - accessor: "path", - Cell: ({ value }) => { + header: "Subtitle Path", + accessorKey: "path", + cell: ({ + row: { + original: { path }, + }, + }) => { const props: TextProps = { className: "table-primary", }; - if (isSubtitleTrack(value)) { + if (isSubtitleTrack(path)) { return ( Video File Subtitle Track ); - } else if (isSubtitleMissing(value)) { + } else if (isSubtitleMissing(path)) { return ( - {value} + {path} ); } else { - return {value}; + return {path}; } }, }, { - Header: "Language", - accessor: "name", - Cell: ({ row }) => { + header: "Language", + accessorKey: "name", + cell: ({ row }) => { if (row.original.path === missingText) { return ( @@ -78,99 +169,13 @@ const Table: FunctionComponent = ({ movie, profile, disabled }) => { }, }, { - accessor: "code2", - Cell: ({ row }) => { - const { - original: { code2, path, hi, forced }, - } = row; - - const { download, remove } = useMovieSubtitleModification(); - - const selections = useMemo(() => { - const list: FormType.ModifySubtitle[] = []; - - if (path && !isSubtitleMissing(path) && movie !== null) { - list.push({ - type: "movie", - path, - id: movie.radarrId, - language: code2, - forced: toPython(forced), - hi: toPython(hi), - }); - } - - return list; - }, [code2, path, forced, hi]); - - if (movie === null) { - return null; - } - - const { radarrId } = movie; - - if (isSubtitleMissing(path)) { - return ( - { - task.create( - movie.title, - TaskGroup.SearchSubtitle, - download.mutateAsync, - { - radarrId, - form: { - language: code2, - forced, - hi, - }, - }, - ); - }} - > - ); - } - - return ( - { - if (action === "delete" && path) { - task.create( - movie.title, - TaskGroup.DeleteSubtitle, - remove.mutateAsync, - { - radarrId, - form: { - language: code2, - forced, - hi, - path, - }, - }, - ); - } else if (action === "search") { - throw new Error( - "This shouldn't happen, please report the bug", - ); - } - }} - > - - - ); + id: "code2", + cell: ({ row: { original } }) => { + return ; }, }, ], - [movie, disabled], + [CodeCell], ); const data: Subtitle[] = useMemo(() => { diff --git a/frontend/src/pages/Movies/Editor.tsx b/frontend/src/pages/Movies/Editor.tsx index 0c568a5b1..1ec84a52c 100644 --- a/frontend/src/pages/Movies/Editor.tsx +++ b/frontend/src/pages/Movies/Editor.tsx @@ -1,6 +1,7 @@ import { FunctionComponent, useMemo } from "react"; -import { Column } from "react-table"; +import { Checkbox } from "@mantine/core"; import { useDocumentTitle } from "@mantine/hooks"; +import { ColumnDef } from "@tanstack/react-table"; import { useMovieModification, useMovies } from "@/apis/hooks"; import { QueryOverlay } from "@/components/async"; import { AudioList } from "@/components/bazarr"; @@ -11,32 +12,63 @@ const MovieMassEditor: FunctionComponent = () => { const query = useMovies(); const mutation = useMovieModification(); - const columns = useMemo[]>( + useDocumentTitle("Movies - Bazarr (Mass Editor)"); + + const columns = useMemo[]>( () => [ { - Header: "Name", - accessor: "title", + id: "selection", + header: ({ table }) => { + return ( + + ); + }, + cell: ({ row: { index, getIsSelected, getToggleSelectedHandler } }) => { + return ( + + ); + }, + }, + { + header: "Name", + accessorKey: "title", }, { - Header: "Audio", - accessor: "audio_language", - Cell: ({ value }) => { - return ; + header: "Audio", + accessorKey: "audio_language", + cell: ({ + row: { + original: { audio_language: audioLanguage }, + }, + }) => { + return ; }, }, { - Header: "Languages Profile", - accessor: "profileId", - Cell: ({ value }) => { - return ; + header: "Languages Profile", + accessorKey: "profileId", + cell: ({ + row: { + original: { profileId }, + }, + }) => { + return ; }, }, ], [], ); - useDocumentTitle("Movies - Bazarr (Mass Editor)"); - return ( { + const modifyMovie = useMovieModification(); + + const modals = useModals(); + const query = useMoviesPagination(); - const columns: Column[] = useMemo[]>( + const columns = useMemo[]>( () => [ { - accessor: "monitored", - Cell: ({ value }) => ( + id: "monitored", + cell: ({ + row: { + original: { monitored }, + }, + }) => ( ), }, { - Header: "Name", - accessor: "title", - Cell: ({ row, value }) => { - const target = `/movies/${row.original.radarrId}`; + header: "Name", + accessorKey: "title", + cell: ({ + row: { + original: { title, radarrId }, + }, + }) => { + const target = `/movies/${radarrId}`; return ( - {value} + {title} ); }, }, { - Header: "Audio", - accessor: "audio_language", - Cell: ({ value }) => { - return ; + header: "Audio", + accessorKey: "audio_language", + cell: ({ + row: { + original: { audio_language: audioLanguage }, + }, + }) => { + return ; }, }, { - Header: "Languages Profile", - accessor: "profileId", - Cell: ({ value }) => { + header: "Languages Profile", + accessorKey: "profileId", + cell: ({ + row: { + original: { profileId }, + }, + }) => { return ( - + ); }, }, { - Header: "Missing Subtitles", - accessor: "missing_subtitles", - Cell: (row) => { - const missing = row.value; + header: "Missing Subtitles", + accessorKey: "missing_subtitles", + cell: ({ + row: { + original: { missing_subtitles: missingSubtitles }, + }, + }) => { return ( <> - {missing.map((v) => ( + {missingSubtitles.map((v) => ( { }, }, { - accessor: "radarrId", - Cell: ({ row }) => { - const modals = useModals(); - const mutation = useMovieModification(); + id: "radarrId", + cell: ({ row }) => { return ( { modals.openContextModal( ItemEditModal, { - mutation, + mutation: modifyMovie, item: row.original, }, { @@ -105,7 +129,7 @@ const MovieView: FunctionComponent = () => { }, }, ], - [], + [modals, modifyMovie], ); useDocumentTitle("Movies - Bazarr"); diff --git a/frontend/src/pages/Series/Editor.tsx b/frontend/src/pages/Series/Editor.tsx index 239481069..45a277d17 100644 --- a/frontend/src/pages/Series/Editor.tsx +++ b/frontend/src/pages/Series/Editor.tsx @@ -1,6 +1,7 @@ import { FunctionComponent, useMemo } from "react"; -import { Column } from "react-table"; +import { Checkbox } from "@mantine/core"; import { useDocumentTitle } from "@mantine/hooks"; +import { ColumnDef } from "@tanstack/react-table"; import { useSeries, useSeriesModification } from "@/apis/hooks"; import { QueryOverlay } from "@/components/async"; import { AudioList } from "@/components/bazarr"; @@ -11,24 +12,55 @@ const SeriesMassEditor: FunctionComponent = () => { const query = useSeries(); const mutation = useSeriesModification(); - const columns = useMemo[]>( + const columns = useMemo[]>( () => [ { - Header: "Name", - accessor: "title", + id: "selection", + header: ({ table }) => { + return ( + + ); + }, + cell: ({ row: { index, getIsSelected, getToggleSelectedHandler } }) => { + return ( + + ); + }, + }, + { + header: "Name", + accessorKey: "title", }, { - Header: "Audio", - accessor: "audio_language", - Cell: ({ value }) => { - return ; + header: "Audio", + accessorKey: "audio_language", + cell: ({ + row: { + original: { audio_language: audioLanguage }, + }, + }) => { + return ; }, }, { - Header: "Languages Profile", - accessor: "profileId", - Cell: ({ value }) => { - return ; + header: "Languages Profile", + accessorKey: "profileId", + cell: ({ + row: { + original: { profileId }, + }, + }) => { + return ; }, }, ], diff --git a/frontend/src/pages/Series/index.tsx b/frontend/src/pages/Series/index.tsx index 92f63c9ab..229082444 100644 --- a/frontend/src/pages/Series/index.tsx +++ b/frontend/src/pages/Series/index.tsx @@ -1,11 +1,11 @@ import { FunctionComponent, useMemo } from "react"; import { Link } from "react-router-dom"; -import { Column } from "react-table"; import { Anchor, Container, Progress } from "@mantine/core"; import { useDocumentTitle } from "@mantine/hooks"; import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons"; import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ColumnDef } from "@tanstack/react-table"; import { useSeriesModification, useSeriesPagination } from "@/apis/hooks"; import { Action } from "@/components"; import LanguageProfileName from "@/components/bazarr/LanguageProfile"; @@ -18,42 +18,51 @@ const SeriesView: FunctionComponent = () => { const query = useSeriesPagination(); - const columns: Column[] = useMemo[]>( + const modals = useModals(); + + const columns = useMemo[]>( () => [ { - accessor: "monitored", - Cell: ({ value }) => ( + id: "monitored", + cell: ({ + row: { + original: { monitored }, + }, + }) => ( ), }, { - Header: "Name", - accessor: "title", - Cell: ({ row, value }) => { - const target = `/series/${row.original.sonarrSeriesId}`; + header: "Name", + accessorKey: "title", + cell: ({ row: { original } }) => { + const target = `/series/${original.sonarrSeriesId}`; return ( - {value} + {original.title} ); }, }, { - Header: "Languages Profile", - accessor: "profileId", - Cell: ({ value }) => { + header: "Languages Profile", + accessorKey: "profileId", + cell: ({ row: { original } }) => { return ( - + ); }, }, { - Header: "Episodes", - accessor: "episodeFileCount", - Cell: (row) => { + header: "Episodes", + accessorKey: "episodeFileCount", + cell: (row) => { const { episodeFileCount, episodeMissingCount, profileId, title } = row.row.original; let progress = 0; @@ -80,9 +89,8 @@ const SeriesView: FunctionComponent = () => { }, }, { - accessor: "sonarrSeriesId", - Cell: ({ row: { original } }) => { - const modals = useModals(); + id: "sonarrSeriesId", + cell: ({ row: { original } }) => { return ( { }, }, ], - [mutation], + [mutation, modals], ); useDocumentTitle("Series - Bazarr"); diff --git a/frontend/src/pages/Settings/Languages/equals.tsx b/frontend/src/pages/Settings/Languages/equals.tsx index dae20a75a..08642f27e 100644 --- a/frontend/src/pages/Settings/Languages/equals.tsx +++ b/frontend/src/pages/Settings/Languages/equals.tsx @@ -1,11 +1,12 @@ import { FunctionComponent, useCallback, useMemo } from "react"; -import { Column } from "react-table"; import { Button, Checkbox } from "@mantine/core"; import { faEquals, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ColumnDef } from "@tanstack/react-table"; import { useLanguages } from "@/apis/hooks"; -import { Action, SimpleTable } from "@/components"; +import { Action } from "@/components"; import LanguageSelector from "@/components/bazarr/LanguageSelector"; +import SimpleTable from "@/components/tables/SimpleTable"; import { languageEqualsKey } from "@/pages/Settings/keys"; import { useFormActions } from "@/pages/Settings/utilities/FormValues"; import { useSettingValue } from "@/pages/Settings/utilities/hooks"; @@ -196,22 +197,22 @@ const EqualsTable: FunctionComponent = () => { [equals, setEquals], ); - const columns = useMemo[]>( + const columns = useMemo[]>( () => [ { - Header: "Source", + header: "Source", id: "source-lang", - accessor: "source", - Cell: ({ value: { content }, row }) => { + accessorKey: "source", + cell: ({ row: { original, index } }) => { return ( { if (result !== null) { - update(row.index, { - ...row.original, - source: { ...row.original.source, content: result }, + update(index, { + ...original, + source: { ...original.source, content: result }, }); } }} @@ -221,12 +222,11 @@ const EqualsTable: FunctionComponent = () => { }, { id: "source-hi", - accessor: "source", - Cell: ({ value: { hi }, row }) => { + cell: ({ row }) => { return ( { update(row.index, { ...row.original, @@ -243,12 +243,11 @@ const EqualsTable: FunctionComponent = () => { }, { id: "source-forced", - accessor: "source", - Cell: ({ value: { forced }, row }) => { + cell: ({ row }) => { return ( { update(row.index, { ...row.original, @@ -265,19 +264,18 @@ const EqualsTable: FunctionComponent = () => { }, { id: "equal-icon", - Cell: () => { + cell: () => { return ; }, }, { - Header: "Target", + header: "Target", id: "target-lang", - accessor: "target", - Cell: ({ value: { content }, row }) => { + cell: ({ row }) => { return ( { if (result !== null) { update(row.index, { @@ -292,12 +290,11 @@ const EqualsTable: FunctionComponent = () => { }, { id: "target-hi", - accessor: "target", - Cell: ({ value: { hi }, row }) => { + cell: ({ row }) => { return ( { update(row.index, { ...row.original, @@ -314,12 +311,11 @@ const EqualsTable: FunctionComponent = () => { }, { id: "target-forced", - accessor: "target", - Cell: ({ value: { forced }, row }) => { + cell: ({ row }) => { return ( { update(row.index, { ...row.original, @@ -336,8 +332,7 @@ const EqualsTable: FunctionComponent = () => { }, { id: "action", - accessor: "target", - Cell: ({ row }) => { + cell: ({ row }) => { return ( { const updateProfile = useCallback( (profile: Language.Profile) => { const list = [...profiles]; + const idx = list.findIndex((v) => v.profileId === profile.profileId); if (idx !== -1) { @@ -57,18 +59,20 @@ const Table: FunctionComponent = () => { submitProfiles(fn(list)); }); - const columns = useMemo[]>( + const columns = useMemo[]>( () => [ { - Header: "Name", - accessor: "name", + header: "Name", + accessorKey: "name", }, { - Header: "Languages", - accessor: "items", - Cell: (row) => { - const items = row.value; - const cutoff = row.row.original.cutoff; + header: "Languages", + accessorKey: "items", + cell: ({ + row: { + original: { items, cutoff }, + }, + }) => { return ( {items.map((v) => { @@ -82,16 +86,19 @@ const Table: FunctionComponent = () => { }, }, { - Header: "Must contain", - accessor: "mustContain", - Cell: (row) => { - const items = row.value; - if (!items) { + header: "Must contain", + accessorKey: "mustContain", + cell: ({ + row: { + original: { mustContain }, + }, + }) => { + if (!mustContain) { return null; } return ( <> - {items.map((v, idx) => { + {mustContain.map((v, idx) => { return ( {v} @@ -103,16 +110,19 @@ const Table: FunctionComponent = () => { }, }, { - Header: "Must not contain", - accessor: "mustNotContain", - Cell: (row) => { - const items = row.value; - if (!items) { + header: "Must not contain", + accessorKey: "mustNotContain", + cell: ({ + row: { + original: { mustNotContain }, + }, + }) => { + if (!mustNotContain) { return null; } return ( <> - {items.map((v, idx) => { + {mustNotContain.map((v, idx) => { return ( {v} @@ -124,8 +134,8 @@ const Table: FunctionComponent = () => { }, }, { - accessor: "profileId", - Cell: ({ row }) => { + id: "profileId", + cell: ({ row }) => { const profile = row.original; return ( @@ -160,7 +170,7 @@ const Table: FunctionComponent = () => { return ( <> - +