From 5873721308d11f143289bad5b780014dcb767226 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sun, 4 Feb 2024 21:58:15 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Continued=20refactoring?= =?UTF-8?q?=20of=20PullList,=20Volumes=20etc.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 +- src/client/components/Dashboard/Dashboard.tsx | 11 +- src/client/components/Dashboard/PullList.tsx | 76 ++++-- .../components/Dashboard/VolumeGroups.tsx | 3 +- .../components/Dashboard/WantedComicsList.tsx | 5 +- src/client/components/Library/Library.tsx | 2 +- src/client/components/Search/Search.tsx | 214 +++++++++-------- src/client/components/Volumes/Volumes.tsx | 224 +++++++++--------- .../components/WantedComics/WantedComics.tsx | 179 ++++++++------ src/client/components/shared/DatePicker.tsx | 103 ++++++++ src/client/components/shared/Header.tsx | 19 +- .../components/shared/MetadataPanel.tsx | 43 +--- src/client/components/shared/Navbar2.tsx | 12 +- src/client/index.tsx | 5 + yarn.lock | 39 ++- 15 files changed, 563 insertions(+), 377 deletions(-) create mode 100644 src/client/components/shared/DatePicker.tsx 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 */} -
-
- +
+
{}} + render={({ handleSubmit }) => ( + + {/* week selection for pull list */} + + + + )} + /> +
+ {/* See all pull list issues */} + + +
- {/* See all pull list issues */} -
- - - -
@@ -103,14 +120,19 @@ export const PullList = (): ReactElement => { hasDetails title={ellipsize(issue.name, 25)} > -
- {issue.publisher} - +
+ + {issue.publisher} + +
+ +
@@ -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. +

+
+
+
+
+
{ }} render={({ handleSubmit, form, submitting, pristine, values }) => ( -
- - {({ input, meta }) => { - return ( - - ); - }} - -
-
-
)} /> - {!isNil(comicVineSearchResults?.data.results) && - !isEmpty(comicVineSearchResults?.data.results) ? ( -
- {comicVineSearchResults.data.results.map((result) => { - return isSuccess ? ( -
-
-
- +
+ {!isNil(comicVineSearchResults?.data.results) && + !isEmpty(comicVineSearchResults?.data.results) ? ( +
+ {comicVineSearchResults.data.results.map((result) => { + return isSuccess ? ( +
+
+
+ +
+
+
+ {!isEmpty(result.volume.name) ? ( + result.volume.name + ) : ( + No Name + )}
-
-
- {!isEmpty(result.volume.name) ? ( - result.volume.name - ) : ( - No Name - )} -
-
-
-
- Cover date - - {dayjs(result.cover_date).format("MMM D, YYYY")} - -
-
- -
-
- - {result.id} - -
+
+
+
+ Cover date + + {dayjs(result.cover_date).format("MMM D, YYYY")} +
- - {result.api_detail_url} - -

- {ellipsize( - convert(result.description, { - baseElements: { - selectors: ["p", "div"], - }, - }), - 320, - )} -

-
- +
+
+ {result.id} +
+ + + {result.api_detail_url} + +

+ {ellipsize( + convert(result.description, { + baseElements: { + selectors: ["p", "div"], + }, + }), + 320, + )} +

+
+ +
- ) : ( -
Loading
- ); - })} -
- ) : ( -
-
-

- - Search the ComicVine database - +

+ ) : ( +
Loading
+ ); + })} +
+ ) : ( +
+
+
+

Search the ComicVine database

+

+ Note that you need an instance of AirDC++ already running to + use this form to connect to it. +

+

Search and add issues, series and trade paperbacks to your library. Then, download them using the configured AirDC++ or torrent clients.

- )} -
+
+ )}
- +
); }; diff --git a/src/client/components/Volumes/Volumes.tsx b/src/client/components/Volumes/Volumes.tsx index 897209b..b7b65fb 100644 --- a/src/client/components/Volumes/Volumes.tsx +++ b/src/client/components/Volumes/Volumes.tsx @@ -4,124 +4,82 @@ import Card from "../shared/Carda"; import T2Table from "../shared/T2Table"; import ellipsize from "ellipsize"; import { convert } from "html-to-text"; -import { isUndefined } from "lodash"; +import { useQuery } from "@tanstack/react-query"; +import axios from "axios"; +import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints"; export const Volumes = (props): ReactElement => { // const volumes = useSelector((state: RootState) => state.fileOps.volumes); - useEffect(() => { - // dispatch( - // searchIssue( - // { - // query: {}, - // }, - // { - // pagination: { - // size: 25, - // from: 0, - // }, - // type: "volumes", - // trigger: "volumesPage", - // }, - // ), - // ); - }, []); + const { + data: volumes, + isSuccess, + isError, + isLoading, + } = useQuery({ + queryFn: async () => + await axios({ + url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`, + method: "POST", + data: { + query: {}, + pagination: { + size: 25, + from: 0, + }, + type: "volumes", + trigger: "volumesPage", + }, + }), + queryKey: ["volumes"], + }); + console.log(volumes); const columnData = useMemo( - () => [ + (): any => [ { header: "Volume Details", id: "volumeDetails", minWidth: 450, accessorKey: "_source", - cell: (row) => { + cell: (row): any => { const foo = row.getValue(); return ( -
-
-
-
-
-
-
- -
-
-
-
-
- { - foo.sourcedMetadata.comicvine - .volumeInformation.name - } -
-
-
- published by{" "} - - { - foo.sourcedMetadata.comicvine - .volumeInformation.publisher.name - } - -
- -
- - {ellipsize( - convert( - foo.sourcedMetadata.comicvine - .volumeInformation.description, - { - baseElements: { - selectors: ["p"], - }, - }, - ), - 120, - )} - -
- -
-
-
- - - Total Issues - - - { - foo.sourcedMetadata.comicvine - .volumeInformation.count_of_issues - } - - -
-
-
-
-
-
-
-
-
+
+ +
+ + {foo.sourcedMetadata.comicvine.volumeInformation.name} + +

+ {ellipsize( + convert( + foo.sourcedMetadata.comicvine.volumeInformation + .description, + { + baseElements: { + selectors: ["p"], + }, + }, + ), + 120, + )} +

); }, }, { - header: "Download Status", + header: "Other Details", columns: [ { - header: "Files", + header: "Downloads", accessorKey: "_source.acquisition.directconnect", align: "right", cell: (props) => { @@ -142,12 +100,34 @@ export const Volumes = (props): ReactElement => { }, }, { - header: "Type", - id: "Air", + header: "Publisher", + accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation", + cell: (props): any => { + const row = props.getValue(); + return
{row.publisher.name}
; + }, }, { - header: "Type", - id: "dcc", + header: "Issue Count", + accessorKey: + "_source.sourcedMetadata.comicvine.volumeInformation.count_of_issues", + cell: (props): any => { + const row = props.getValue(); + return ( +
+ {/* issue count */} + + + + + + + {row} + + +
+ ); + }, }, ], }, @@ -155,17 +135,29 @@ export const Volumes = (props): ReactElement => { [], ); return ( -
-
-
-

Volumes

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

+ Volumes +

+ +

+ Browse your collection of volumes. +

+
+
+
+
+ {isSuccess ? (
{}, previousPage: () => {}, @@ -174,9 +166,13 @@ export const Volumes = (props): ReactElement => { />
- )} -
-
+ ) : null} + {isError ? ( +
An error was encountered while retrieving volumes
+ ) : null} + {isLoading ? <>Loading... : null} +
+

); }; diff --git a/src/client/components/WantedComics/WantedComics.tsx b/src/client/components/WantedComics/WantedComics.tsx index 9125368..48435b0 100644 --- a/src/client/components/WantedComics/WantedComics.tsx +++ b/src/client/components/WantedComics/WantedComics.tsx @@ -1,32 +1,36 @@ import React, { ReactElement, useCallback, useEffect, useMemo } from "react"; -import { searchIssue } from "../../actions/fileops.actions"; import SearchBar from "../Library/SearchBar"; import T2Table from "../shared/T2Table"; -import { isEmpty, isUndefined } from "lodash"; import MetadataPanel from "../shared/MetadataPanel"; +import { useQuery } from "@tanstack/react-query"; +import axios from "axios"; +import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints"; export const WantedComics = (props): ReactElement => { - // const wantedComics = useSelector( - // (state: RootState) => state.fileOps.wantedComics, - // ); - useEffect(() => { - // dispatch( - // searchIssue( - // { - // query: {}, - // }, - // { - // pagination: { - // size: 25, - // from: 0, - // }, - // type: "wanted", - // trigger: "wantedComicsPage" - // }, - // ), - // ); - }, []); + const { + data: wantedComics, + isSuccess, + isError, + isLoading, + } = useQuery({ + queryFn: async () => + await axios({ + url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`, + method: "POST", + data: { + query: {}, + pagination: { + size: 25, + from: 0, + }, + type: "wanted", + trigger: "wantedComicsPage", + }, + }), + queryKey: ["wantedComics"], + enabled: true, + }); const columnData = [ { header: "Comic Information", @@ -36,7 +40,10 @@ export const WantedComics = (props): ReactElement => { id: "comicDetails", minWidth: 350, accessorFn: (data) => data, - cell: (value) => , + cell: (value) => { + const row = value.getValue()._source; + return row && ; + }, }, ], }, @@ -45,8 +52,8 @@ export const WantedComics = (props): ReactElement => { columns: [ { header: "Files", - accessorKey: "acquisition", align: "right", + accessorKey: "_source.acquisition", cell: (props) => { const { directconnect: { downloads }, @@ -69,7 +76,7 @@ export const WantedComics = (props): ReactElement => { { header: "Download Details", id: "downloadDetails", - accessorKey: "acquisition", + accessorKey: "_source.acquisition", cell: (data) => (
    {data.getValue().directconnect.downloads.map((download, idx) => { @@ -98,23 +105,23 @@ export const WantedComics = (props): ReactElement => { * @returns void * **/ - const nextPage = useCallback((pageIndex: number, pageSize: number) => { - dispatch( - searchIssue( - { - query: {}, - }, - { - pagination: { - size: pageSize, - from: pageSize * pageIndex + 1, - }, - type: "wanted", - trigger: "wantedComicsPage", - }, - ), - ); - }, []); + // const nextPage = useCallback((pageIndex: number, pageSize: number) => { + // dispatch( + // searchIssue( + // { + // query: {}, + // }, + // { + // pagination: { + // size: pageSize, + // from: pageSize * pageIndex + 1, + // }, + // type: "wanted", + // trigger: "wantedComicsPage", + // }, + // ), + // ); + // }, []); /** * Pagination control that fetches the previous x (pageSize) items @@ -123,55 +130,71 @@ export const WantedComics = (props): ReactElement => { * @param {number} pageSize * @returns void **/ - const previousPage = useCallback((pageIndex: number, pageSize: number) => { - let from = 0; - if (pageIndex === 2) { - from = (pageIndex - 1) * pageSize + 2 - 17; - } else { - from = (pageIndex - 1) * pageSize + 2 - 16; - } - dispatch( - searchIssue( - { - query: {}, - }, - { - pagination: { - size: pageSize, - from, - }, - type: "wanted", - trigger: "wantedComicsPage", - }, - ), - ); - }, []); + // const previousPage = useCallback((pageIndex: number, pageSize: number) => { + // let from = 0; + // if (pageIndex === 2) { + // from = (pageIndex - 1) * pageSize + 2 - 17; + // } else { + // from = (pageIndex - 1) * pageSize + 2 - 16; + // } + // dispatch( + // searchIssue( + // { + // query: {}, + // }, + // { + // pagination: { + // size: pageSize, + // from, + // }, + // type: "wanted", + // trigger: "wantedComicsPage", + // }, + // ), + // ); + // }, []); return ( -
    -
    -
    -

    Wanted Comics

    -
    - {!isEmpty(wantedComics) && ( +
    +
    +
    +
    +
    +
    +

    + Wanted Comics +

    + +

    + Browse through comics you marked as "wanted." +

    +
    +
    +
    +
    + {isSuccess ? (
    {}, + previousPage: () => {}, }} // rowClickHandler={navigateToComicDetail} /> {/* pagination controls */}
    - )} -
    -
    + ) : null} + {isLoading ?
    Loading...
    : null} + {isError ? ( +
    An error occurred while retrieving the pull list.
    + ) : null} +
+
); }; diff --git a/src/client/components/shared/DatePicker.tsx b/src/client/components/shared/DatePicker.tsx new file mode 100644 index 0000000..7aebf83 --- /dev/null +++ b/src/client/components/shared/DatePicker.tsx @@ -0,0 +1,103 @@ +import React, { ChangeEventHandler, useRef, useState } from "react"; + +import { format, isValid, parse } from "date-fns"; +import FocusTrap from "focus-trap-react"; +import { DayPicker, SelectSingleEventHandler } from "react-day-picker"; +import { usePopper } from "react-popper"; + +export default function DatePickerDialog() { + const [selected, setSelected] = useState(); + const [inputValue, setInputValue] = useState(""); + const [isPopperOpen, setIsPopperOpen] = useState(false); + + const popperRef = useRef(null); + const buttonRef = useRef(null); + const [popperElement, setPopperElement] = useState( + null, + ); + + const popper = usePopper(popperRef.current, popperElement, { + placement: "bottom-start", + }); + + const closePopper = () => { + setIsPopperOpen(false); + buttonRef?.current?.focus(); + }; + + const handleInputChange: ChangeEventHandler = (e) => { + setInputValue(e.currentTarget.value); + const date = parse(e.currentTarget.value, "y-MM-dd", new Date()); + if (isValid(date)) { + setSelected(date); + } else { + setSelected(undefined); + } + }; + + const handleButtonClick = () => { + setIsPopperOpen(true); + }; + + const handleDaySelect: SelectSingleEventHandler = (date) => { + setSelected(date); + if (date) { + setInputValue(format(date, "y-MM-dd")); + closePopper(); + } else { + setInputValue(""); + } + }; + + return ( +
+
+ + +
+ {isPopperOpen && ( + +
+ +
+ + )} +
+ ); +} diff --git a/src/client/components/shared/Header.tsx b/src/client/components/shared/Header.tsx index e8e950a..95bf3c6 100644 --- a/src/client/components/shared/Header.tsx +++ b/src/client/components/shared/Header.tsx @@ -1,20 +1,29 @@ import React, { ReactElement } from "react"; +import { Link } from "react-router-dom"; type IHeaderProps = { headerContent: string; subHeaderContent: string; iconClassNames: string; + link?: string; }; export const Header = (props: IHeaderProps): ReactElement => { return (
- {}}> - - {props.headerContent} - - + {props.link ? ( + + + + {props.headerContent}{" "} + + + + + ) : ( +
{props.headerContent}
+ )}

{props.subHeaderContent}

diff --git a/src/client/components/shared/MetadataPanel.tsx b/src/client/components/shared/MetadataPanel.tsx index 3016f71..f339548 100644 --- a/src/client/components/shared/MetadataPanel.tsx +++ b/src/client/components/shared/MetadataPanel.tsx @@ -16,6 +16,7 @@ interface IMetadatPanelProps { containerStyle: any; } export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => { + console.log(props); const { rawFileDetails, inferredMetadata, @@ -114,7 +115,6 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => { -
{ellipsize( @@ -127,42 +127,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => { )}
-
-
-
- - - {comicvine.volumeInformation.start_year} - - - {comicvine.volumeInformation.count_of_issues} - - -
-
-
- - ComicVine ID - - - {comicvine.id} - -
-
-
+ + {comicvine.volumeInformation.start_year} + + {comicvine.volumeInformation.count_of_issues} + ComicVine ID + {comicvine.id}
), diff --git a/src/client/components/shared/Navbar2.tsx b/src/client/components/shared/Navbar2.tsx index c509a90..6b6e2e3 100644 --- a/src/client/components/shared/Navbar2.tsx +++ b/src/client/components/shared/Navbar2.tsx @@ -52,12 +52,12 @@ export const Navbar2 = (): ReactElement => {
  • - Volumes - +
  • @@ -69,12 +69,12 @@ export const Navbar2 = (): ReactElement => {
  • - Comicvine Search - +
    • diff --git a/src/client/index.tsx b/src/client/index.tsx index ef91bb3..688374e 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -14,6 +14,8 @@ import Dashboard from "./components/Dashboard/Dashboard"; import Search from "./components/Search/Search"; import TabulatedContentContainer from "./components/Library/TabulatedContentContainer"; import { ComicDetailContainer } from "./components/ComicDetail/ComicDetailContainer"; +import Volumes from "./components/Volumes/Volumes"; +import WantedComics from "./components/WantedComics/WantedComics"; const queryClient = new QueryClient(); @@ -23,6 +25,7 @@ const router = createBrowserRouter([ element: , errorElement: , children: [ + { path: "/", element: }, { path: "dashboard", element: }, { path: "settings", element: }, { @@ -35,6 +38,8 @@ const router = createBrowserRouter([ }, { path: "import", element: }, { path: "search", element: }, + { path: "volumes", element: }, + { path: "wanted", element: }, ], }, ]); diff --git a/yarn.lock b/yarn.lock index 7f0b71a..72e39d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1914,6 +1914,11 @@ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== +"@popperjs/core@^2.11.8": + version "2.11.8" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" + integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== + "@radix-ui/number@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.1.tgz#644161a3557f46ed38a042acf4a770e826021674" @@ -6012,6 +6017,21 @@ flow-parser@0.*: resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.227.0.tgz#e50b65be9dc6810438c975e816a68005fbcd5107" integrity sha512-nOygtGKcX/siZK/lFzpfdHEfOkfGcTW7rNroR1Zsz6T/JxSahPALXVt5qVHq/fgvMJuv096BTKbgxN3PzVBaDA== +focus-trap-react@^10.2.3: + version "10.2.3" + resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-10.2.3.tgz#a5a2ea7fbb042ffa4337fde72758325ed0fb793a" + integrity sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw== + dependencies: + focus-trap "^7.5.4" + tabbable "^6.2.0" + +focus-trap@^7.5.4: + version "7.5.4" + resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.4.tgz#6c4e342fe1dae6add9c2aa332a6e7a0bbd495ba2" + integrity sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w== + dependencies: + tabbable "^6.2.0" + follow-redirects@^1.15.4: version "1.15.5" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020" @@ -8896,7 +8916,7 @@ react-confetti@^6.1.0: dependencies: tween-functions "^1.2.0" -react-day-picker@^8.6.0: +react-day-picker@^8.10.0: version "8.10.0" resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.0.tgz#729c5b9564967a924213978fb9c0751884a60595" integrity sha512-mz+qeyrOM7++1NCb1ARXmkjMkzWVh2GL9YiPbRjKe0zHccvekk4HE+0MPOZOrosn8r8zTHIIeOUXTmXRqmkRmg== @@ -8939,7 +8959,7 @@ react-element-to-jsx-string@^15.0.0: is-plain-object "5.0.0" react-is "18.1.0" -react-fast-compare@^3.2.0: +react-fast-compare@^3.0.1, react-fast-compare@^3.2.0: version "3.2.2" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== @@ -9012,6 +9032,14 @@ react-modal@^3.14.3, react-modal@^3.15.1: react-lifecycles-compat "^3.0.0" warning "^4.0.3" +react-popper@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba" + integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q== + dependencies: + react-fast-compare "^3.0.1" + warning "^4.0.2" + react-refresh@^0.14.0: version "0.14.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" @@ -9950,6 +9978,11 @@ synchronous-promise@^2.0.15: resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.17.tgz#38901319632f946c982152586f2caf8ddc25c032" integrity sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g== +tabbable@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== + taffydb@2.6.2: version "2.6.2" resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.6.2.tgz#7cbcb64b5a141b6a2efc2c5d2c67b4e150b2a268" @@ -10595,7 +10628,7 @@ walker@^1.0.8: dependencies: makeerror "1.0.12" -warning@^4.0.3: +warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==