From 7babf9f73d74a747de8b2317c44e4c480ed7179b Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Tue, 15 Nov 2022 17:22:50 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20=F0=9F=8F=97=EF=B8=8F=20Massive?= =?UTF-8?q?=20tables=20refactor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Abstracted a table component that can be configured to display issues, volumes or pull list items --- src/client/actions/fileops.actions.tsx | 10 ++- src/client/components/App.tsx | 10 +-- src/client/components/Dashboard/PullList.tsx | 4 +- src/client/components/Library/Library.tsx | 2 +- ...iner.tsx => TabulatedContentContainer.tsx} | 61 ++++++++-------- src/client/components/PullList/PullList.tsx | 60 +++++++++------- src/client/components/Volumes/Volumes.tsx | 71 ++++++++++--------- src/client/components/shared/T2Table.tsx | 1 + src/client/constants/action-types.ts | 1 + src/client/reducers/comicinfo.reducer.ts | 6 +- src/client/reducers/fileops.reducer.ts | 10 ++- 11 files changed, 134 insertions(+), 102 deletions(-) rename src/client/components/Library/{LibraryContainer.tsx => TabulatedContentContainer.tsx} (50%) diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 399b09c..d5b1404 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -32,6 +32,8 @@ import { SS_SEARCH_FAILED, SS_SEARCH_RESULTS_FETCHED_SPECIAL, WANTED_COMICS_FETCHED, + VOLUMES_FETCHED, + CV_WEEKLY_PULLLIST_FETCHED, } from "../constants/action-types"; import { success } from "react-notification-system-redux"; import { removeLeadingPeriod } from "../shared/utils/formatting.utils"; @@ -316,12 +318,16 @@ export const searchIssue = (query, options) => async (dispatch) => { data: response.data.body, }); break; + case "volumesPage": + dispatch({ + type: VOLUMES_FETCHED, + data: response.data.body, + }); + break; default: break; } - - }; export const analyzeImage = (imageFilePath: string | Buffer) => async (dispatch) => { diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index d6a60ee..4411137 100644 --- a/src/client/components/App.tsx +++ b/src/client/components/App.tsx @@ -3,7 +3,7 @@ import Dashboard from "./Dashboard/Dashboard"; import Import from "./Import"; import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer"; -import LibraryContainer from "./Library/LibraryContainer"; +import TabulatedContentContainer from "./Library/TabulatedContentContainer"; import LibraryGrid from "./Library/LibraryGrid"; import Search from "./Search"; import Settings from "./Settings"; @@ -92,7 +92,7 @@ export const App = (): ReactElement => { } /> } /> - } /> + } /> } /> } /> } /> @@ -105,9 +105,9 @@ export const App = (): ReactElement => { element={} /> } /> - } /> - } /> - } /> + } /> + } /> + } /> diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx index 3ef7d31..4b62d86 100644 --- a/src/client/components/Dashboard/PullList.tsx +++ b/src/client/components/Dashboard/PullList.tsx @@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => { useEffect(() => { dispatch( getWeeklyPullList({ - startDate: "2022-11-9", + startDate: "2022-11-15", pageSize: "15", currentPage: "1", }), @@ -127,7 +127,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => { (sliderRef = c)}> {!isNil(pullList) && pullList && - map(pullList, (issue, idx) => { + map(pullList, ({issue}, idx) => { return ( { const WantedStatus = ({ value }) => { return !value ? Wanted : null; }; - const columns = React.useMemo(() => [ + const columns = useMemo(() => [ { header: "Comic Metadata", footer: 1, diff --git a/src/client/components/Library/LibraryContainer.tsx b/src/client/components/Library/TabulatedContentContainer.tsx similarity index 50% rename from src/client/components/Library/LibraryContainer.tsx rename to src/client/components/Library/TabulatedContentContainer.tsx index 7769ab0..14479a8 100644 --- a/src/client/components/Library/LibraryContainer.tsx +++ b/src/client/components/Library/TabulatedContentContainer.tsx @@ -1,39 +1,34 @@ -import { isEmpty, isUndefined } from "lodash"; -import React, { ReactElement, useEffect } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { searchIssue } from "../../actions/fileops.actions"; +import React, { ReactElement } from "react"; +import PullList from "../PullList/PullList"; +import { Volumes } from "../Volumes/Volumes"; +import WantedComics from "../WantedComics/WantedComics"; import { Library } from "./Library"; -const LibraryContainer = (): ReactElement => { - // const dispatch = useDispatch(); - // useEffect(() => { - // dispatch( - // searchIssue( - // { - // query: {}, - // }, - // { - // pagination: { - // size: 25, - // from: 0, - // }, - // type: "all", - // trigger: "libraryPage" - // }, - // ), - // ); - // }, []); +interface ITabulatedContentContainerProps { + category: string; +} - // const searchResults = useSelector( - // (state: RootState) => state.fileOps.libraryComics, - // ); - // const searchError = useSelector( - // (state: RootState) => state.fileOps.librarySearchError, - // ); +const TabulatedContentContainer = ( + props: ITabulatedContentContainerProps, +): ReactElement => { + const { category } = props; + const renderTabulatedContent = () => { + switch (category) { + case "library": + return ; + case "pullList": + return ; + case "wanted": + return ; + case "volumes": + return ; + default: + return <>; + } + }; - return ( - ) - // : ( + return renderTabulatedContent(); + // : ( //
//
//
@@ -59,4 +54,4 @@ const LibraryContainer = (): ReactElement => { // ); }; -export default LibraryContainer; +export default TabulatedContentContainer; diff --git a/src/client/components/PullList/PullList.tsx b/src/client/components/PullList/PullList.tsx index 175dc1b..0fa2518 100644 --- a/src/client/components/PullList/PullList.tsx +++ b/src/client/components/PullList/PullList.tsx @@ -4,18 +4,19 @@ import { getWeeklyPullList } from "../../actions/comicinfo.actions"; import { useDispatch, useSelector } from "react-redux"; import Card from "../Carda"; import ellipsize from "ellipsize"; +import { isNil, isUndefined } from "lodash"; export const PullList = (): ReactElement => { const pullListComics = useSelector( (state: RootState) => state.comicInfo.pullList, ); - console.log(pullListComics); + const dispatch = useDispatch(); useEffect(() => { dispatch( getWeeklyPullList({ - startDate: "2022-6-1", - pageSize: "100", + startDate: "2022-11-15", + pageSize: "15", currentPage: "1", }), ); @@ -25,24 +26,25 @@ export const PullList = (): ReactElement => { const columnData = useMemo( () => [ { - Header: "Comic Information", + header: "Comic Information", columns: [ { - Header: "Details", + header: "Details", id: "comicDetails", minWidth: 450, - accessor: (row) => { - console.log(row); + accessorKey: "issue", + cell: (row) => { + const item = row.getValue(); return (
-
+
{
- {row.name} + {item.name}
published by{" "} - {row.publisher} + {item.publisher}
- {ellipsize(row.description, 190)} + + {ellipsize(item.description, 190)} +
@@ -71,10 +75,10 @@ export const PullList = (): ReactElement => {
- {row.price} + {item.price} - {row.pulls} + {item.pulls}
@@ -99,16 +103,24 @@ export const PullList = (): ReactElement => { return (
-

Weekly Pull List

- +
+

Weekly Pull List

+
+ {!isNil(pullListComics) && ( +
+
+ +
+
+ )}
); diff --git a/src/client/components/Volumes/Volumes.tsx b/src/client/components/Volumes/Volumes.tsx index 8c7aa10..fe811eb 100644 --- a/src/client/components/Volumes/Volumes.tsx +++ b/src/client/components/Volumes/Volumes.tsx @@ -2,16 +2,13 @@ import React, { ReactElement, useEffect, useMemo } from "react"; import { useDispatch, useSelector } from "react-redux"; import { searchIssue } from "../../actions/fileops.actions"; import Card from "../Carda"; -import SearchBar from "../Library/SearchBar"; import T2Table from "../shared/T2Table"; import ellipsize from "ellipsize"; -import { isUndefined } from "lodash"; import { convert } from "html-to-text"; +import { isUndefined } from "lodash"; export const Volumes = (props): ReactElement => { - const volumes = useSelector( - (state: RootState) => state.fileOps.librarySearchResults, - ); + const volumes = useSelector((state: RootState) => state.fileOps.volumes); const dispatch = useDispatch(); useEffect(() => { dispatch( @@ -25,19 +22,20 @@ export const Volumes = (props): ReactElement => { from: 0, }, type: "volumes", + trigger: "volumesPage", }, ), ); }, []); - console.log(volumes); - const columnData = useMemo( () => [ { - Header: "Volume Details", + header: "Volume Details", id: "volumeDetails", minWidth: 450, - accessor: (row) => { + accessorKey: "_source", + cell: (row) => { + const foo = row.getValue(); return (
@@ -45,11 +43,11 @@ export const Volumes = (props): ReactElement => {
-
+
{
{ - row._source.sourcedMetadata.comicvine + foo.sourcedMetadata.comicvine .volumeInformation.name }
@@ -70,7 +68,7 @@ export const Volumes = (props): ReactElement => { published by{" "} { - row._source.sourcedMetadata.comicvine + foo.sourcedMetadata.comicvine .volumeInformation.publisher.name } @@ -80,7 +78,7 @@ export const Volumes = (props): ReactElement => { {ellipsize( convert( - row._source.sourcedMetadata.comicvine + foo.sourcedMetadata.comicvine .volumeInformation.description, { baseElements: { @@ -102,7 +100,7 @@ export const Volumes = (props): ReactElement => { { - row._source.sourcedMetadata.comicvine + foo.sourcedMetadata.comicvine .volumeInformation.count_of_issues } @@ -122,36 +120,35 @@ export const Volumes = (props): ReactElement => { }, }, { - Header: "Download Status", + header: "Download Status", columns: [ { - Header: "Files", - accessor: "_source.acquisition.directconnect", + header: "Files", + accessorKey: "_source.acquisition.directconnect", align: "right", - Cell: (props) => { + cell: (props) => { + const row = props.getValue(); return (
- {props.cell.value.length > 0 ? ( - - {props.cell.value.length} - + {row.length > 0 ? ( + {row.length} ) : null}
); }, }, { - Header: "Type", + header: "Type", id: "Air", }, { - Header: "Type", + header: "Type", id: "dcc", }, ], @@ -162,16 +159,24 @@ export const Volumes = (props): ReactElement => { return (
- {volumes.hits ? ( +
+

Volumes

+
+ {!isUndefined(volumes.hits) && (
-

Volumes

- {/* Search bar */} - - + {}, + previousPage: () => {}, + }} + columns={columnData} + />
- ) : null} + )}
); diff --git a/src/client/components/shared/T2Table.tsx b/src/client/components/shared/T2Table.tsx index e08106e..d066bc5 100644 --- a/src/client/components/shared/T2Table.tsx +++ b/src/client/components/shared/T2Table.tsx @@ -20,6 +20,7 @@ export const T2Table = (tableOptions): ReactElement => { pageIndex: 1, pageSize: 15, }); + console.log(sourceData) const pagination = useMemo( diff --git a/src/client/constants/action-types.ts b/src/client/constants/action-types.ts index 27a5a7d..a6be92d 100644 --- a/src/client/constants/action-types.ts +++ b/src/client/constants/action-types.ts @@ -51,6 +51,7 @@ export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS = "IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS"; export const IMS_COMIC_BOOK_GROUPS_CALL_FAILED = "IMS_COMIC_BOOK_GROUPS_CALL_FAILED"; +export const VOLUMES_FETCHED="VOLUMES_FETCHED"; // search results from the Search service export const SS_SEARCH_RESULTS_FETCHED = "SS_SEARCH_RESULTS_FETCHED"; diff --git a/src/client/reducers/comicinfo.reducer.ts b/src/client/reducers/comicinfo.reducer.ts index d2cced6..c3d8809 100644 --- a/src/client/reducers/comicinfo.reducer.ts +++ b/src/client/reducers/comicinfo.reducer.ts @@ -109,10 +109,14 @@ function comicinfoReducer(state = initialState, action) { ...state, }; case CV_WEEKLY_PULLLIST_FETCHED: { + const foo = []; + action.data.map((item) => { + foo.push({issue: item}) + }); return { ...state, inProgress: false, - pullList: [...action.data], + pullList: foo, }; } case LIBRARY_STATISTICS_CALL_IN_PROGRESS: diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts index c379ba5..2060797 100644 --- a/src/client/reducers/fileops.reducer.ts +++ b/src/client/reducers/fileops.reducer.ts @@ -28,6 +28,7 @@ import { LS_IMPORT_CALL_IN_PROGRESS, SS_SEARCH_FAILED, SS_SEARCH_RESULTS_FETCHED_SPECIAL, + VOLUMES_FETCHED, } from "../constants/action-types"; const initialState = { IMSCallInProgress: false, @@ -45,6 +46,7 @@ const initialState = { recentComics: [], wantedComics: [], libraryComics: [], + volumes: [], librarySearchResultsFormatted: [], librarySearchResultCount: 0, libraryQueueResults: [], @@ -188,7 +190,6 @@ function fileOpsReducer(state = initialState, action) { } case SS_SEARCH_RESULTS_FETCHED: { - console.log(action.data); return { ...state, libraryComics: action.data, @@ -221,6 +222,13 @@ function fileOpsReducer(state = initialState, action) { SSCallInProgress: false, }; } + + case VOLUMES_FETCHED: + return { + ...state, + volumes: action.data, + SSCallInProgress: false, + }; case SS_SEARCH_FAILED: { return {