diff --git a/package.json b/package.json
index 29992e8..dd59557 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/utilities": "^3.2.1",
"@fortawesome/fontawesome-free": "^6.3.0",
+ "@popperjs/core": "^2.11.8",
"@rollup/plugin-node-resolve": "^15.0.1",
"@tanstack/react-query": "^5.0.5",
"@tanstack/react-table": "^8.9.3",
@@ -37,6 +38,7 @@
"filename-parser": "^1.0.2",
"final-form": "^4.20.2",
"final-form-arrays": "^3.0.2",
+ "focus-trap-react": "^10.2.3",
"history": "^5.3.0",
"html-to-text": "^8.1.0",
"immer": "^10.0.3",
@@ -49,13 +51,14 @@
"react": "^18.2.0",
"react-collapsible": "^2.9.0",
"react-comic-viewer": "^0.4.0",
- "react-day-picker": "^8.6.0",
+ "react-day-picker": "^8.10.0",
"react-dom": "^18.2.0",
"react-fast-compare": "^3.2.0",
"react-final-form": "^6.5.9",
"react-final-form-arrays": "^3.1.4",
"react-loader-spinner": "^4.0.0",
"react-modal": "^3.15.1",
+ "react-popper": "^2.3.0",
"react-router": "^6.9.0",
"react-router-dom": "^6.9.0",
"react-select": "^5.8.0",
diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx
index 0aeac8a..e088307 100644
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -6,14 +6,9 @@ import { VolumeGroups } from "./VolumeGroups";
import { LibraryStatistics } from "./LibraryStatistics";
import { PullList } from "./PullList";
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 { useQuery } from "@tanstack/react-query";
import axios from "axios";
-import {
- LIBRARY_SERVICE_BASE_URI,
- LIBRARY_SERVICE_HOST,
-} from "../../constants/endpoints";
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
export const Dashboard = (): ReactElement => {
const { data: recentComics } = useQuery({
@@ -65,9 +60,7 @@ export const Dashboard = (): ReactElement => {
// );
return (
-
Dashboard
-
{recentComics &&
}
{/* Wanted comics */}
diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx
index 7275add..a7e69bc 100644
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -1,10 +1,11 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useState } from "react";
import { map } from "lodash";
import Card from "../shared/Carda";
import Header from "../shared/Header";
import { importToDB } from "../../actions/fileops.actions";
import ellipsize from "ellipsize";
import { Link } from "react-router-dom";
+
import axios from "axios";
import rateLimiter from "axios-rate-limit";
import { setupCache } from "axios-cache-interceptor";
@@ -12,6 +13,8 @@ import { useQuery } from "@tanstack/react-query";
import "keen-slider/keen-slider.min.css";
import { useKeenSlider } from "keen-slider/react";
import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
+import { Field, Form } from "react-final-form";
+import DatePickerDialog from "../shared/DatePicker";
type PullListProps = {
issues: any;
@@ -24,6 +27,13 @@ const http = rateLimiter(axios.create(), {
});
const cachedAxios = setupCache(axios);
export const PullList = (): ReactElement => {
+ // datepicker
+ const [selected, setSelected] = useState
();
+ let footer = Please pick a day.
;
+ if (selected) {
+ footer = You picked {format(selected, "PP")}.
;
+ }
+
// keen slider
const [sliderRef, instanceRef] = useKeenSlider(
{
@@ -47,15 +57,15 @@ export const PullList = (): ReactElement => {
data: pullList,
isSuccess,
isLoading,
+ isError,
} = useQuery({
- queryFn: async () =>
+ queryFn: async (): any =>
await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
method: "get",
- params: { startDate: "2024-2-15", pageSize: "15", currentPage: "1" },
+ params: { startDate: "2024-2-20", pageSize: "15", currentPage: "1" },
}),
queryKey: ["pullList"],
});
- console.log(pullList?.data.result);
const addToLibrary = (sourceName: string, locgMetadata) =>
importToDB(sourceName, { locg: locgMetadata });
@@ -65,6 +75,7 @@ export const PullList = (): ReactElement => {
const previous = () => {
// sliderRef.slickPrev();
};
+
return (
<>
@@ -73,22 +84,28 @@ export const PullList = (): ReactElement => {
subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
iconClassNames="fa-solid fa-binoculars mr-2"
/>
-
+
{/* select week */}
-
-
-
- Select Week
- With options
-
+
+
+ )}
+ />
+
+ {/* See all pull list issues */}
+
+
+ View all issues
+
+
- {/* See all pull list issues */}
-
-
- View all issues
-
-
@@ -103,14 +120,19 @@ export const PullList = (): ReactElement => {
hasDetails
title={ellipsize(issue.name, 25)}
>
-
-
{issue.publisher}
-
addToLibrary("locg", issue)}
- >
- Want
-
+
+
+ {issue.publisher}
+
+
+ addToLibrary("locg", issue)}
+ >
+ {" "}
+ Want
+
+
@@ -118,6 +140,10 @@ export const PullList = (): ReactElement => {
})}
)}
+ {isLoading ?
Loading...
: null}
+ {isError ? (
+
An error occurred while retrieving the pull list.
+ ) : null}
>
);
};
diff --git a/src/client/components/Dashboard/VolumeGroups.tsx b/src/client/components/Dashboard/VolumeGroups.tsx
index 0aa73a2..ebf0382 100644
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/src/client/components/Dashboard/VolumeGroups.tsx
@@ -19,6 +19,7 @@ export const VolumeGroups = (props): ReactElement => {
headerContent="Volumes"
subHeaderContent="Based on ComicVine Volume information"
iconClassNames="fa-solid fa-binoculars mr-2"
+ link={"/volumes"}
/>
{map(deduplicatedGroups, (data) => {
@@ -36,7 +37,7 @@ export const VolumeGroups = (props): ReactElement => {
{ellipsize(data.volumes.name, 48)}
-
+ {/* issue count */}
diff --git a/src/client/components/Dashboard/WantedComicsList.tsx b/src/client/components/Dashboard/WantedComicsList.tsx
index 74fcfe2..cff9968 100644
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/src/client/components/Dashboard/WantedComicsList.tsx
@@ -15,15 +15,14 @@ export const WantedComicsList = ({
comics,
}: WantedComicsListProps): ReactElement => {
const navigate = useNavigate();
- const navigateToWantedComics = (row) => {
- navigate(`/wanted/all`);
- };
+
return (
<>
{map(
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index b4525af..6d1f299 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -248,7 +248,7 @@ export const Library = (): ReactElement => {
-
+
diff --git a/src/client/components/Search/Search.tsx b/src/client/components/Search/Search.tsx
index 90d1e49..07fe3db 100644
--- a/src/client/components/Search/Search.tsx
+++ b/src/client/components/Search/Search.tsx
@@ -26,7 +26,6 @@ export const Search = ({}: ISearchProps): ReactElement => {
const [searchQuery, setSearchQuery] = useState("");
const [comicVineMetadata, setComicVineMetadata] = useState({});
const getCVSearchResults = (searchQuery) => {
- console.log(searchQuery);
setSearchQuery(searchQuery.search);
// queryClient.invalidateQueries({ queryKey: ["comicvineSearchResults"] });
};
@@ -84,7 +83,6 @@ export const Search = ({}: ISearchProps): ReactElement => {
enabled: !isNil(comicVineMetadata.comicData),
});
- console.log(comicVineMetadata);
const addToLibrary = (sourceName: string, comicData) =>
setComicVineMetadata({ sourceName, comicData });
@@ -93,11 +91,24 @@ export const Search = ({}: ISearchProps): ReactElement => {
};
return (
- <>
-
-
-
Search
+
+
+
+
+
+
+
+ Search
+
+
+ Browse your comic book collection.
+
+
+
+
+
+