From 0cd142153c2d87ab93fa145882d47b4db2bcd79c Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Wed, 6 Apr 2022 00:10:36 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=96=BC=20Some=20UI=20fixes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/client/components/Dashboard/Dashboard.tsx | 114 +---------------- .../Dashboard/LibraryStatistics.tsx | 115 ++++++++++++++++++ .../components/Dashboard/WantedComicsList.tsx | 9 +- .../components/Library/ComicVineDetails.tsx | 82 +++++++++---- src/client/components/Library/Library.tsx | 8 +- .../components/WantedComics/WantedComics.tsx | 0 yarn.lock | 8 +- 8 files changed, 198 insertions(+), 140 deletions(-) create mode 100644 src/client/components/Dashboard/LibraryStatistics.tsx create mode 100644 src/client/components/WantedComics/WantedComics.tsx diff --git a/package.json b/package.json index bc7b51a..e756847 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@bluelovers/fast-glob": "https://github.com/rishighan/fast-glob-v2-api.git", "@dnd-kit/core": "^4.0.0", "@dnd-kit/sortable": "^5.0.0", - "@fortawesome/fontawesome-free": "^6.0.0", + "@fortawesome/fontawesome-free": "^6.1.1", "@types/mime-types": "^2.1.0", "@types/react": "^17.0.3", "@types/react-dom": "^17.0.2", diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx index 5c1c830..da90cf7 100644 --- a/src/client/components/Dashboard/Dashboard.tsx +++ b/src/client/components/Dashboard/Dashboard.tsx @@ -4,14 +4,14 @@ import ZeroState from "./ZeroState"; import { RecentlyImported } from "./RecentlyImported"; import { WantedComicsList } from "./WantedComicsList"; import { VolumeGroups } from "./VolumeGroups"; +import { LibraryStatistics } from "./LibraryStatistics"; import { PullList } from "./PullList"; import { fetchVolumeGroups, getComicBooks, } from "../../actions/fileops.actions"; import { getLibraryStatistics } from "../../actions/comicinfo.actions"; -import { isEmpty, isUndefined, map } from "lodash"; -import prettyBytes from "pretty-bytes"; +import { isEmpty } from "lodash"; export const Dashboard = (): ReactElement => { const dispatch = useDispatch(); @@ -66,115 +66,7 @@ export const Dashboard = (): ReactElement => { {/* stats */} - -

Statistics

-
-
-
-
- - {libraryStatistics.totalDocuments} - {" "} - files -
-
- Library size - - {" "} - {libraryStatistics.comicDirectorySize && - prettyBytes(libraryStatistics.comicDirectorySize)} - -
- {!isUndefined(libraryStatistics.statistics) && - !isEmpty(libraryStatistics.statistics[0].issues) && ( -
- - {libraryStatistics.statistics[0].issues.length} - {" "} - tagged with ComicVine -
- )} - {!isUndefined(libraryStatistics.statistics) && - !isEmpty( - libraryStatistics.statistics[0].issuesWithComicInfoXML, - ) && ( -
- - { - libraryStatistics.statistics[0] - .issuesWithComicInfoXML.length - } - {" "} - with - - ComicInfo.xml - -
- )} -
-
- -
-
-
- Issues -
-
- 304 Volumes -
-
- {!isUndefined(libraryStatistics.statistics) && - !isEmpty(libraryStatistics.statistics[0].fileTypes) && - map( - libraryStatistics.statistics[0].fileTypes, - (fileType, idx) => { - return ( - - - {fileType.data.length} - - - {fileType._id} - - - ); - }, - )} -
-
-
- - {/* file types */} -
- {/* publisher with most issues */} -
- {!isUndefined(libraryStatistics.statistics) && - !isEmpty( - libraryStatistics.statistics[0] - .publisherWithMostComicsInLibrary[0], - ) && ( -
- - { - libraryStatistics.statistics[0] - .publisherWithMostComicsInLibrary[0]._id - } - - {" has the most issues "} - - { - libraryStatistics.statistics[0] - .publisherWithMostComicsInLibrary[0].count - } - -
- )} -
- 304 Volumes -
-
-
-
+ diff --git a/src/client/components/Dashboard/LibraryStatistics.tsx b/src/client/components/Dashboard/LibraryStatistics.tsx new file mode 100644 index 0000000..e9982eb --- /dev/null +++ b/src/client/components/Dashboard/LibraryStatistics.tsx @@ -0,0 +1,115 @@ +import React, { ReactElement, useEffect } from "react"; +import prettyBytes from "pretty-bytes"; +import { isEmpty, isUndefined, map } from "lodash"; + +export const LibraryStatistics = ( + props: ILibraryStatisticsProps, +): ReactElement => { + // const { stats } = props; + console.log(props); + return ( + <> +

Statistics

+
+
+
+
+ + {props.stats.totalDocuments} + {" "} + files +
+
+ Library size + + {" "} + {props.stats.comicDirectorySize && + prettyBytes(props.stats.comicDirectorySize)} + +
+ {!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 + +
+ )} +
+
+ +
+
+
+ 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} + + + ); + })} +
+
+
+ + {/* 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 +
+
+
+
+ + ); +}; + +export default LibraryStatistics; diff --git a/src/client/components/Dashboard/WantedComicsList.tsx b/src/client/components/Dashboard/WantedComicsList.tsx index 5ecc1ec..c179479 100644 --- a/src/client/components/Dashboard/WantedComicsList.tsx +++ b/src/client/components/Dashboard/WantedComicsList.tsx @@ -23,7 +23,14 @@ export const WantedComicsList = ({ return ( <>
-

Wanted Comics

+ + + Wanted Comics + + + + +

Comics marked as wanted from various sources.

diff --git a/src/client/components/Library/ComicVineDetails.tsx b/src/client/components/Library/ComicVineDetails.tsx index be88bf6..868a43e 100644 --- a/src/client/components/Library/ComicVineDetails.tsx +++ b/src/client/components/Library/ComicVineDetails.tsx @@ -1,33 +1,73 @@ import React, { ReactElement } from "react"; import PropTypes from "prop-types"; import ellipsize from "ellipsize"; +import Card from "../Carda"; +import convert from "html-to-text"; export const ComicVineDetails = (comicVineData): ReactElement => { const { data } = comicVineData; + console.log(data); return ( -
-
-
-
-
- -
-
-
    -
  • - {ellipsize(data.name, 18)} -
    • -
  • -
    -
    - ComicVine ID - - {data.comicvine.id} - +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + {ellipsize(data.name, 18)} +
    +
    +
    +
    {data.comicvine.name && data.comicvine.name}
    + + Is a part of{" "} + + {data.comicvine.volumeInformation.name} + + +
    + +
    +
    +
    + + + {data.comicvine.volumeInformation.start_year} + + + {data.comicvine.volumeInformation.count_of_issues} + + +
    +
    +
    + + ComicVine ID + + + {data.comicvine.id} + +
    +
    +
    +
    +
    -
    • -
+ +
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx index f7e37c7..acb5567 100644 --- a/src/client/components/Library/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -102,7 +102,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { }, }, { - Header: "Import Status", + Header: "ComicInfo.xml", accessor: "_source.sourcedMetadata.comicInfo", minWidth: 300, align: "right", @@ -124,7 +124,11 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { "_source.sourcedMetadata.comicvine.volumeInformation.publisher", Cell(props) { return ( - !isNil(props.cell.value) &&
{props.cell.value.name}
+ !isNil(props.cell.value) && ( +
+ {props.cell.value.name} +
+ ) ); }, }, diff --git a/src/client/components/WantedComics/WantedComics.tsx b/src/client/components/WantedComics/WantedComics.tsx new file mode 100644 index 0000000..e69de29 diff --git a/yarn.lock b/yarn.lock index ac848b9..7aa3619 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1190,10 +1190,10 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" -"@fortawesome/fontawesome-free@^6.0.0": - version "6.0.0" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.0.0.tgz#6f3bd8e42997c7d536a1246877ed8bcd4f005a54" - integrity sha512-6LB4PYBST1Rx40klypw1SmSDArjFOcfBf2LeX9Zg5EKJT2eXiyiJq+CyBYKeXyK0sXS2FsCJWSPr/luyhuvh0Q== +"@fortawesome/fontawesome-free@^6.1.1": + version "6.1.1" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz#bf5d45611ab74890be386712a0e5d998c65ee2a1" + integrity sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg== "@gar/promisify@^1.0.1": version "1.1.2"