From 0ea5a497862ea9bec52f81c04563badc9558fcc0 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Tue, 6 Feb 2024 21:43:41 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Added=20stats=20to=20da?= =?UTF-8?q?shboard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/components/Dashboard/Dashboard.tsx | 16 ++- .../Dashboard/LibraryStatistics.tsx | 116 ++++++++---------- src/client/components/Dashboard/PullList.tsx | 17 ++- src/client/components/shared/Header.tsx | 2 +- 4 files changed, 78 insertions(+), 73 deletions(-) diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx index e088307..04098a8 100644 --- a/src/client/components/Dashboard/Dashboard.tsx +++ b/src/client/components/Dashboard/Dashboard.tsx @@ -5,7 +5,6 @@ import { WantedComicsList } from "./WantedComicsList"; import { VolumeGroups } from "./VolumeGroups"; import { LibraryStatistics } from "./LibraryStatistics"; import { PullList } from "./PullList"; -import { getLibraryStatistics } from "../../actions/comicinfo.actions"; import { useQuery } from "@tanstack/react-query"; import axios from "axios"; import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints"; @@ -54,16 +53,23 @@ export const Dashboard = (): ReactElement => { queryKey: ["volumeGroups"], }); - // - // const libraryStatistics = useSelector( - // (state: RootState) => state.comicInfo.libraryStatistics, - // ); + const { data: statistics } = useQuery({ + queryFn: async () => + await axios({ + url: `${LIBRARY_SERVICE_BASE_URI}/libraryStatistics`, + method: "GET", + }), + queryKey: ["libraryStatistics"], + }); + return (
{recentComics && } {/* Wanted comics */} + {/* Library Statistics */} + {statistics && } {/* Volume groups */}
diff --git a/src/client/components/Dashboard/LibraryStatistics.tsx b/src/client/components/Dashboard/LibraryStatistics.tsx index 5d5eca8..76fe2d6 100644 --- a/src/client/components/Dashboard/LibraryStatistics.tsx +++ b/src/client/components/Dashboard/LibraryStatistics.tsx @@ -1,113 +1,99 @@ import React, { ReactElement, useEffect } from "react"; import prettyBytes from "pretty-bytes"; import { isEmpty, isUndefined, map } from "lodash"; +import Header from "../shared/Header"; export const LibraryStatistics = ( props: ILibraryStatisticsProps, ): ReactElement => { - // const { stats } = props; + const { stats } = props; return (
-

- Your Library In Numbers -

-

A brief snapshot of your library.

-
-
-
-
- - {props.stats.totalDocuments} - {" "} - files +
A brief snapshot of your library. + } + iconClassNames="fa-solid fa-binoculars mr-2" + /> + +
+
+
+
Library size
+
+ {props.stats.totalDocuments} files
-
- Library size - - {" "} +
+ {props.stats.comicDirectorySize && prettyBytes(props.stats.comicDirectorySize)}
+
+ {/* comicinfo and comicvine tagged issues */} +
{!isUndefined(props.stats.statistics) && !isEmpty(props.stats.statistics[0].issues) && ( -
- +
+ {props.stats.statistics[0].issues.length} {" "} tagged with ComicVine -
+
)} {!isUndefined(props.stats.statistics) && !isEmpty(props.stats.statistics[0].issuesWithComicInfoXML) && ( -
- +
+ {props.stats.statistics[0].issuesWithComicInfoXML.length} {" "} - with - ComicInfo.xml + with ComicInfo.xml -
+
)} -
-
+
-
-
-
- Issues -
-
- 304 Volumes -
-
- {!isUndefined(props.stats.statistics) && - !isEmpty(props.stats.statistics[0].fileTypes) && - map(props.stats.statistics[0].fileTypes, (fileType, idx) => { - return ( - - - {fileType.data.length} - - - {fileType._id} - - - ); - })} -
-
-
+
+ {!isUndefined(props.stats.statistics) && + !isEmpty(props.stats.statistics[0].fileTypes) && + map(props.stats.statistics[0].fileTypes, (fileType, idx) => { + return ( + + {fileType.data.length} {fileType._id} + + ); + })} +
- {/* file types */} -
- {/* publisher with most issues */} -
+ {/* file types */} +
+ {/* publisher with most issues */} {!isUndefined(props.stats.statistics) && !isEmpty( props.stats.statistics[0].publisherWithMostComicsInLibrary[0], ) && ( -
- + <> + { props.stats.statistics[0] .publisherWithMostComicsInLibrary[0]._id } {" has the most issues "} - + { props.stats.statistics[0] .publisherWithMostComicsInLibrary[0].count } -
+ )} -
- 304 Volumes -
-
+
diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx index 346bac2..8ea16f7 100644 --- a/src/client/components/Dashboard/PullList.tsx +++ b/src/client/components/Dashboard/PullList.tsx @@ -82,7 +82,17 @@ export const PullList = (): ReactElement => {
+ Pull List aggregated for the week from{" "} + + + League Of Comic Geeks + + + + + } iconClassNames="fa-solid fa-binoculars mr-2" link="/pull-list/all/" /> @@ -101,7 +111,10 @@ export const PullList = (): ReactElement => { /> {inputValue && (
- Showing pull list for {inputValue} + Showing pull list for{" "} + + {inputValue} +
)}
diff --git a/src/client/components/shared/Header.tsx b/src/client/components/shared/Header.tsx index 95bf3c6..4b00744 100644 --- a/src/client/components/shared/Header.tsx +++ b/src/client/components/shared/Header.tsx @@ -3,7 +3,7 @@ import { Link } from "react-router-dom"; type IHeaderProps = { headerContent: string; - subHeaderContent: string; + subHeaderContent: ReactElement; iconClassNames: string; link?: string; };