From 03b982858de2f4650ed834de07cae704e216d8b3 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sat, 26 Mar 2022 11:27:41 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=A5=A1=20Started=20making=20react-table?= =?UTF-8?q?=20re-usable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docker-compose.yml | 2 +- src/client/actions/comicinfo.actions.tsx | 2 +- src/client/assets/img/comicinfoxml.svg | 4 +- src/client/assets/scss/App.scss | 4 +- src/client/components/ComicDetail.tsx | 11 +- .../ComicDetail/Tabs/ComicInfoXML.tsx | 53 +++++ src/client/components/Library/Library.tsx | 223 +++--------------- src/client/components/shared/T2Table.tsx | 200 ++++++++++++++++ 8 files changed, 296 insertions(+), 203 deletions(-) create mode 100644 src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx create mode 100644 src/client/components/shared/T2Table.tsx diff --git a/docker-compose.yml b/docker-compose.yml index 3315307..7bc1726 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -95,7 +95,7 @@ services: - elasticsearch environment: name: core-services - SERVICES: import,libraryqueue,settings,imagetransformation + SERVICES: library,queue,settings,search,imagetransformation env_file: docker-compose.env volumes: - *comics-volume diff --git a/src/client/actions/comicinfo.actions.tsx b/src/client/actions/comicinfo.actions.tsx index 6829c6b..afb2957 100644 --- a/src/client/actions/comicinfo.actions.tsx +++ b/src/client/actions/comicinfo.actions.tsx @@ -43,7 +43,7 @@ export const getWeeklyPullList = (options) => async (dispatch) => { url: `${COMICVINE_SERVICE_URI}/getWeeklyPullList`, method: "get", params: { - startDate: "2022-3-21", + startDate: "2022-4-8", pageSize: "15", currentPage: "1", }, diff --git a/src/client/assets/img/comicinfoxml.svg b/src/client/assets/img/comicinfoxml.svg index cc6eb5a..7769778 100644 --- a/src/client/assets/img/comicinfoxml.svg +++ b/src/client/assets/img/comicinfoxml.svg @@ -1,6 +1,6 @@ - + - + diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index fc99877..2cec7d7 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -273,8 +273,8 @@ pre { } } -.comicvine-metadata { - background-color: #EBFCFF; +.comicInfo-metadata { + background-color: #F7EBDD; padding: 0.8rem; border-radius: 0.5rem; } diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 0be9c2b..7223f18 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -6,6 +6,7 @@ import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel"; import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation"; import { RawFileDetails } from "./ComicDetail/RawFileDetails"; import { ArchiveOperations } from "./ComicDetail/Tabs/ArchiveOperations"; +import { ComicInfoXML } from "./ComicDetail/Tabs/ComicInfoXML"; import AcquisitionPanel from "./ComicDetail/AcquisitionPanel"; import DownloadsPanel from "./ComicDetail/DownloadsPanel"; import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel"; @@ -168,13 +169,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
{!isNil(comicBookDetailData.sourcedMetadata) && !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && ( - 
-                  {JSON.stringify(
-                    comicBookDetailData.sourcedMetadata.comicInfo,
-                    null,
-                    2,
-                  )}
-
+ )}
diff --git a/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx b/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx new file mode 100644 index 0000000..fbd25f5 --- /dev/null +++ b/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx @@ -0,0 +1,53 @@ +import React, { ReactElement } from "react"; + +export const ComicInfoXML = (data): ReactElement => { + const { json } = data; + console.log(data); + return ( +
+
+
{json.series[0]}
+
+
+
+ + Pages + + {json.publisher[0]} + + +
+
+ + Issue # + + {parseInt(json.number[0], 10)} + + +
+
+ + Pages + + {json.pagecount[0]} + + +
+
+ + Genre + {json.genre[0]} + +
+
+
+
+ {json.notes[0]} +
+
{json.summary[0]}
+
+
+ ); +}; + +export default ComicInfoXML; diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx index a0bf7f0..6f8c29b 100644 --- a/src/client/components/Library/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -7,8 +7,8 @@ import React, { } from "react"; import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; -import { useTable, usePagination, useFlexLayout } from "react-table"; -import { flatten, isEmpty, isNil, isUndefined, map } from "lodash"; +import T2Table from "../shared/T2Table"; +import { isEmpty, isNil, isUndefined } from "lodash"; import RawFileDetails from "./RawFileDetails"; import ComicVineDetails from "./ComicVineDetails"; import SearchBar from "./SearchBar"; @@ -24,16 +24,11 @@ interface IComicBookLibraryProps { export const Library = (data: IComicBookLibraryProps): ReactElement => { const { searchResults } = data.data; - const pageTotal = searchResults.hits.total.value; - const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] = - useState(false); - const togglePageSizeDropdown = () => - collapsePageSizeDropdown(!isPageSizeDropdownCollapsed); // programatically navigate to comic detail const navigate = useNavigate(); - const navigateToComicDetail = (id) => { - navigate(`/comic/details/${id}`); + const navigateToComicDetail = (row) => { + navigate(`/comic/details/${row.original._id}`); }; const ImportStatus = ({ value }) => { @@ -42,7 +37,9 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
Series - {ellipsize(value.series[0], 25)} + + {ellipsize(value.series[0], 25)} +
@@ -50,7 +47,9 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
Pages - {value.pagecount[0]} + + {value.pagecount[0]} +
@@ -58,7 +57,9 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { Issue {!isNil(value.number) && ( - {parseInt(value.number[0], 10)} + + {parseInt(value.number[0], 10)} + )} @@ -71,7 +72,8 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { }; const WantedStatus = ({ value }) => { - return value ? Wanted : null; + console.log(value); + return !value ? Wanted : null; }; console.log(searchResults); @@ -130,7 +132,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { Header: "Something", accessor: "_source.acquisition.wanted", Cell: (props) => { - return
asda
+ return ; }, }, ], @@ -142,39 +144,11 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { ImportStatus.propTypes = { value: PropTypes.bool.isRequired, }; - const { - getTableProps, - getTableBodyProps, - headerGroups, - prepareRow, - page, - canPreviousPage, - canNextPage, - pageOptions, - pageCount, - gotoPage, - nextPage, - previousPage, - setPageSize, - state: { pageIndex, pageSize }, - } = useTable( - { - columns, - data: searchResults.hits.hits, - manualPagination: true, - initialState: { - pageIndex: 1, - pageSize: 25, - }, - pageCount: searchResults.hits.total.value, - }, - usePagination, - useFlexLayout, - ); + const dispatch = useDispatch(); - const goToNextPage = useCallback(() => { + const goToNextPage = useCallback((pageIndex, pageSize) => { // incremement pageIndex - nextPage(); + // nextPage(); console.log(pageIndex); console.log("from", pageSize * pageIndex + 1); dispatch( @@ -190,10 +164,10 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { }, ), ); - }, [pageIndex]); + }, []); - const goToPreviousPage = useCallback(() => { - previousPage(); + const goToPreviousPage = useCallback((pageIndex, pageSize) => { + // previousPage(); let from = 0; if (pageIndex === 2) { from = (pageIndex - 1) * pageSize + 2 - 27; @@ -213,7 +187,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { }, ), ); - }, [pageIndex]); + }, []); return (
@@ -224,148 +198,17 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { {!isUndefined(searchResults) && (
- - - {headerGroups.map((headerGroup, idx) => ( - - {headerGroup.headers.map((column, idx) => ( - - ))} - - ))} - - - - {page.map((row, idx) => { - prepareRow(row); - return ( - navigateToComicDetail(row.original._id)} - > - {row.cells.map((cell, idx) => { - return ( - - ); - })} - - ); - })} - -
- {column.render("Header")} -
- {cell.render("Cell")} -
- + {/* pagination controls */} -
)} diff --git a/src/client/components/shared/T2Table.tsx b/src/client/components/shared/T2Table.tsx new file mode 100644 index 0000000..9e1329c --- /dev/null +++ b/src/client/components/shared/T2Table.tsx @@ -0,0 +1,200 @@ +import React, { ReactElement, useState } from "react"; +import PropTypes from "prop-types"; +import { useTable, usePagination, useFlexLayout } from "react-table"; + +export const T2Table = (tableOptions): ReactElement => { + const { rowData, columns, paginationHandlers, totalPages, rowClickHandler } = + tableOptions; + const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] = + useState(false); + const togglePageSizeDropdown = () => + collapsePageSizeDropdown(!isPageSizeDropdownCollapsed); + const { + getTableProps, + getTableBodyProps, + headerGroups, + prepareRow, + page, + canPreviousPage, + canNextPage, + pageOptions, + pageCount, + gotoPage, + nextPage, + previousPage, + setPageSize, + state: { pageIndex, pageSize }, + } = useTable( + { + columns, + data: rowData, + manualPagination: true, + initialState: { + pageIndex: 1, + pageSize: 25, + }, + pageCount: totalPages, + }, + usePagination, + useFlexLayout, + ); + return ( + <> + + + {headerGroups.map((headerGroup, idx) => ( + + {headerGroup.headers.map((column, idx) => ( + + ))} + + ))} + + + + {page.map((row, idx) => { + prepareRow(row); + return ( + rowClickHandler(row)} + > + {row.cells.map((cell, idx) => { + return ( + + ); + })} + + ); + })} + +
+ {column.render("Header")} +
+ {cell.render("Cell")} +
+ + {/* pagination control */} + + + ); +}; + +T2Table.propTypes = { + rowData: PropTypes.array, + totalPages: PropTypes.number, + columns: PropTypes.array, + paginationHandlers: PropTypes.shape({ + nextPage: PropTypes.func, + previousPage: PropTypes.func, + }), + rowClickHandler: PropTypes.func, +}; +export default T2Table;