frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🏗️ Abstracted heading/subheading into Header

Browse Source
This commit is contained in:
Rishi Ghan
2024-01-30 06:09:17 -05:00
parent a3b1e68b06
commit d8a45408cb
6 changed files with 38 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/client/components/Dashboard/Dashboard.tsx
View File

@@ -1,29 +1,19 @@
import React, { ReactElement, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import React, { ReactElement } from "react";
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, isNil, isUndefined } from "lodash";
import Header from "../shared/Header";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Card } from "../shared/Carda";
import {
LIBRARY_SERVICE_BASE_URI,
LIBRARY_SERVICE_HOST,
} from "../../constants/endpoints";
import {
determineCoverFile,
determineExternalMetadata,
} from "../../shared/utils/metadata.utils";
export const Dashboard = (): ReactElement => {
const { data: recentComics } = useQuery({
@@ -69,43 +59,6 @@ export const Dashboard = (): ReactElement => {
queryKey: ["volumeGroups"],
});
console.log("hari om", volumeGroups);
// useEffect(() => {
// dispatch(fetchVolumeGroups());
// dispatch(
// getComicBooks({
// paginationOptions: {
// page: 0,
// limit: 5,
// sort: { updatedAt: "-1" },
// },
// predicate: { "acquisition.source.wanted": false },
// comicStatus: "recent",
// }),
// );
// dispatch(
// getComicBooks({
// paginationOptions: {
// page: 0,
// limit: 5,
// sort: { updatedAt: "-1" },
// },
// predicate: { "acquisition.source.wanted": true },
// comicStatus: "wanted",
// }),
// );
// dispatch(getLibraryStatistics());
// }, []);
//
// const recentComics = useSelector(
// (state: RootState) => state.fileOps.recentComics,
// );
// const wantedComics = useSelector(
// (state: RootState) => state.fileOps.wantedComics,
// );
// const volumeGroups = useSelector(
// (state: RootState) => state.fileOps.comicVolumeGroups,
// );
//
// const libraryStatistics = useSelector(
// (state: RootState) => state.comicInfo.libraryStatistics,

29
src/client/components/Dashboard/PullList.tsx
View File

@@ -1,5 +1,5 @@
import { isNil, map } from "lodash";
import React, { createRef, ReactElement, useCallback, useEffect } from "react";
import React, { ReactElement } from "react";
import { map } from "lodash";
import Card from "../shared/Carda";
import Header from "../shared/Header";
import { importToDB } from "../../actions/fileops.actions";
@@ -24,7 +24,7 @@ const http = rateLimiter(axios.create(), {
});
const cachedAxios = setupCache(axios);
export const PullList = (): ReactElement => {
// blaze slider
// keen slider
const [sliderRef, instanceRef] = useKeenSlider(
{
loop: true,
@@ -34,7 +34,6 @@ export const PullList = (): ReactElement => {
perView: 5,
spacing: 15,
},
slideChanged() {
console.log("slide changed");
},
@@ -52,7 +51,7 @@ export const PullList = (): ReactElement => {
queryFn: async () =>
await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
method: "get",
params: { startDate: "2023-9-9", pageSize: "15", currentPage: "1" },
params: { startDate: "2024-2-15", pageSize: "15", currentPage: "1" },
}),
queryKey: ["pullList"],
});
@@ -60,20 +59,6 @@ export const PullList = (): ReactElement => {
const addToLibrary = (sourceName: string, locgMetadata) =>
importToDB(sourceName, { locg: locgMetadata });
/*
const foo = {
coverFile: {}, // pointer to which cover file to use
rawFileDetails: {}, // #1
sourcedMetadata: {
comicInfo: {},
comicvine: {}, // #2
locg: {}, // #2
},
};
*/
// const pullList = useSelector((state: RootState) => state.comicInfo.pullList);
const next = () => {
// sliderRef.slickNext();
};
@@ -116,10 +101,10 @@ export const PullList = (): ReactElement => {
orientation={"vertical-2"}
imageUrl={issue.cover}
hasDetails
title={ellipsize(issue.name, 18)}
title={ellipsize(issue.name, 25)}
>
<div className="">
<span className="">{issue.publisher}</span>
<div className="px-1 py-1">
<span className="text-xs ">{issue.publisher}</span>
<button
className=""
onClick={() => addToLibrary("locg", issue)}

19
src/client/components/Dashboard/RecentlyImported.tsx
View File

@@ -9,6 +9,7 @@ import {
determineExternalMetadata,
} from "../../shared/utils/metadata.utils";
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
import Header from "../shared/Header";
type RecentlyImportedProps = {
comics: any;
@@ -17,19 +18,13 @@ type RecentlyImportedProps = {
export const RecentlyImported = (
comics: RecentlyImportedProps,
): ReactElement => {
console.log(comics);
return (
<div className="mt-7">
<div className="">
<a className="" onClick={() => {}}>
<span className="text-xl">
<i className=""></i> Recently Imported
</span>
</a>
<p className="">
Recent Library activity such as imports, tagging, etc.
</p>
</div>
<div>
<Header
headerContent="Recently Imported"
subHeaderContent="Recent Library activity such as imports, tagging, etc."
iconClassNames="fa-solid fa-binoculars mr-2"
/>
<div className="grid grid-cols-5 gap-6 mt-3">
{comics?.comics.map(
(

19
src/client/components/Dashboard/VolumeGroups.tsx
View File

@@ -3,6 +3,7 @@ import React, { ReactElement } from "react";
import ellipsize from "ellipsize";
import { Link, useNavigate } from "react-router-dom";
import Card from "../shared/Carda";
import Header from "../shared/Header";
export const VolumeGroups = (props): ReactElement => {
// Till mongo gives us back the deduplicated results with the ObjectId
@@ -13,18 +14,12 @@ export const VolumeGroups = (props): ReactElement => {
};
return (
<section className="mt-7">
<div className="">
<a className="" onClick={navigateToVolumes}>
<span className="text-xl">
<i className="fa-solid fa-layer-group"></i> Volumes
</span>
<span className="icon mt-1">
<i className="fa-solid fa-angle-right"></i>
</span>
</a>
<p className="">Based on ComicVine Volume information</p>
</div>
<section>
<Header
headerContent="Volumes"
subHeaderContent="Based on ComicVine Volume information"
iconClassNames="fa-solid fa-binoculars mr-2"
/>
<div className="grid grid-cols-5 gap-6 mt-3">
{map(deduplicatedGroups, (data) => {
return (

17
src/client/components/Dashboard/WantedComicsList.tsx
View File

@@ -5,6 +5,7 @@ import ellipsize from "ellipsize";
import { isEmpty, isNil, isUndefined, map } from "lodash";
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
import { determineCoverFile } from "../../shared/utils/metadata.utils";
import Header from "../shared/Header";
type WantedComicsListProps = {
comics: any;
@@ -19,17 +20,11 @@ export const WantedComicsList = ({
};
return (
<>
<div className="mt-7">
<a className="" onClick={navigateToWantedComics}>
<span className="text-xl">
<i className=""></i> Wanted Comics
</span>
<span className="">
<i className=""></i>
</span>
</a>
<p className="">Comics marked as wanted from various sources.</p>
</div>
<Header
headerContent="Wanted Comics"
subHeaderContent="Comics marked as wanted from various sources"
iconClassNames="fa-solid fa-binoculars mr-2"
/>
<div className="grid grid-cols-5 gap-6 mt-3">
{map(
comics,

16
src/client/components/shared/Header.tsx
View File

@@ -8,12 +8,16 @@ type IHeaderProps = {
export const Header = (props: IHeaderProps): ReactElement => {
return (
<>
<h4 className="title is-4">
<i className={props.iconClassNames}></i> {props.headerContent}
</h4>
<p className="subtitle is-7">{props.subHeaderContent}</p>
</>
<div className="mt-7">
<div className="">
<a className="" onClick={() => {}}>
<span className="text-xl">
<i className=""></i> {props.headerContent}
</span>
</a>
<p className="">{props.subHeaderContent}</p>
</div>
</div>
);
};