📆 Wired up the datepicker to LoCG pull list
This commit is contained in:
@@ -15,6 +15,7 @@ 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";
|
||||
import { format } from "date-fns";
|
||||
|
||||
type PullListProps = {
|
||||
issues: any;
|
||||
@@ -28,11 +29,10 @@ const http = rateLimiter(axios.create(), {
|
||||
const cachedAxios = setupCache(axios);
|
||||
export const PullList = (): ReactElement => {
|
||||
// datepicker
|
||||
const [selected, setSelected] = useState<Date>();
|
||||
let footer = <p>Please pick a day.</p>;
|
||||
if (selected) {
|
||||
footer = <p>You picked {format(selected, "PP")}.</p>;
|
||||
}
|
||||
const date = new Date();
|
||||
const [inputValue, setInputValue] = useState<string>(
|
||||
format(date, "M-dd-yyyy"),
|
||||
);
|
||||
|
||||
// keen slider
|
||||
const [sliderRef, instanceRef] = useKeenSlider(
|
||||
@@ -55,6 +55,7 @@ export const PullList = (): ReactElement => {
|
||||
|
||||
const {
|
||||
data: pullList,
|
||||
refetch,
|
||||
isSuccess,
|
||||
isLoading,
|
||||
isError,
|
||||
@@ -62,9 +63,9 @@ export const PullList = (): ReactElement => {
|
||||
queryFn: async (): any =>
|
||||
await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
|
||||
method: "get",
|
||||
params: { startDate: "2024-2-20", pageSize: "15", currentPage: "1" },
|
||||
params: { startDate: inputValue, pageSize: "15", currentPage: "1" },
|
||||
}),
|
||||
queryKey: ["pullList"],
|
||||
queryKey: ["pullList", inputValue],
|
||||
});
|
||||
const addToLibrary = (sourceName: string, locgMetadata) =>
|
||||
importToDB(sourceName, { locg: locgMetadata });
|
||||
@@ -83,28 +84,30 @@ export const PullList = (): ReactElement => {
|
||||
headerContent="Discover"
|
||||
subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
|
||||
iconClassNames="fa-solid fa-binoculars mr-2"
|
||||
link="/pull-list/all/"
|
||||
/>
|
||||
<div className="flex flex-row gap-5 mb-5">
|
||||
<div className="flex flex-row gap-5 mb-3">
|
||||
{/* select week */}
|
||||
<div className="flex flex-row gap-4 my-3">
|
||||
<Form
|
||||
onSubmit={() => {}}
|
||||
render={({ handleSubmit }) => (
|
||||
<form>
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* week selection for pull list */}
|
||||
|
||||
<DatePickerDialog />
|
||||
<DatePickerDialog
|
||||
inputValue={inputValue}
|
||||
setter={setInputValue}
|
||||
/>
|
||||
{inputValue && (
|
||||
<div className="text-sm">
|
||||
Showing pull list for <span>{inputValue}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
/>
|
||||
<div>
|
||||
{/* See all pull list issues */}
|
||||
<Link to={"/pull-list/all/"}>
|
||||
<button className="flex space-x-1 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500">
|
||||
View all issues
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import React, { ChangeEventHandler, useRef, useState } from "react";
|
||||
|
||||
import { format, isValid, parse } from "date-fns";
|
||||
import { format, isValid, parse, parseISO } 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() {
|
||||
export const DatePickerDialog = (props) => {
|
||||
console.log(props);
|
||||
const { setter, apiAction } = props;
|
||||
const [selected, setSelected] = useState<Date>();
|
||||
const [inputValue, setInputValue] = useState<string>("");
|
||||
const [isPopperOpen, setIsPopperOpen] = useState(false);
|
||||
|
||||
const popperRef = useRef<HTMLDivElement>(null);
|
||||
@@ -16,6 +17,39 @@ export default function DatePickerDialog() {
|
||||
null,
|
||||
);
|
||||
|
||||
const customStyles = {
|
||||
container: {
|
||||
// Style for the entire container
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: "4px",
|
||||
padding: "10px",
|
||||
width: "300px",
|
||||
},
|
||||
day: {
|
||||
// Style for individual days
|
||||
|
||||
padding: "5px",
|
||||
margin: "2px",
|
||||
},
|
||||
selected: {
|
||||
// Style for selected days
|
||||
backgroundColor: "#007bff",
|
||||
color: "#fff",
|
||||
},
|
||||
disabled: {
|
||||
// Style for disabled days
|
||||
color: "#ccc",
|
||||
},
|
||||
today: {
|
||||
// Style for today's date
|
||||
backgroundColor: "#f0f0f0",
|
||||
},
|
||||
dayWrapper: {
|
||||
// Style for the wrapper around each day
|
||||
display: "inline-block",
|
||||
},
|
||||
};
|
||||
|
||||
const popper = usePopper(popperRef.current, popperElement, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
@@ -25,16 +59,6 @@ export default function DatePickerDialog() {
|
||||
buttonRef?.current?.focus();
|
||||
};
|
||||
|
||||
const handleInputChange: ChangeEventHandler<HTMLInputElement> = (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);
|
||||
};
|
||||
@@ -42,29 +66,27 @@ export default function DatePickerDialog() {
|
||||
const handleDaySelect: SelectSingleEventHandler = (date) => {
|
||||
setSelected(date);
|
||||
if (date) {
|
||||
setInputValue(format(date, "y-MM-dd"));
|
||||
setter(format(date, "M-dd-yyyy"));
|
||||
apiAction();
|
||||
closePopper();
|
||||
} else {
|
||||
setInputValue("");
|
||||
setter("");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div ref={popperRef}>
|
||||
<input
|
||||
size={12}
|
||||
type="text"
|
||||
placeholder={format(new Date(), "y-MM-dd")}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
aria-label="Pick a date"
|
||||
onClick={handleButtonClick}
|
||||
className="flex space-x-1 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
>
|
||||
<span className="pr-1 pt-0.5 h-8">
|
||||
<span className="icon-[solar--calendar-date-bold-duotone] w-6 h-6"></span>
|
||||
</span>
|
||||
Pick a date
|
||||
</button>
|
||||
</div>
|
||||
@@ -82,7 +104,7 @@ export default function DatePickerDialog() {
|
||||
<div
|
||||
tabIndex={-1}
|
||||
style={popper.styles.popper}
|
||||
className="bg-slate-200 p-2 rounded-lg z-50"
|
||||
className="bg-slate-200 mt-3 p-2 rounded-lg z-50"
|
||||
{...popper.attributes.popper}
|
||||
ref={setPopperElement}
|
||||
role="dialog"
|
||||
@@ -94,10 +116,13 @@ export default function DatePickerDialog() {
|
||||
defaultMonth={selected}
|
||||
selected={selected}
|
||||
onSelect={handleDaySelect}
|
||||
styles={customStyles}
|
||||
/>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default DatePickerDialog;
|
||||
|
||||
Reference in New Issue
Block a user