proto/trying-alternative-approach
KATT 2021-11-19 11:38:42 +01:00
parent fbc5ac4c14
commit d138f59264
1 changed files with 39 additions and 22 deletions

View File

@ -4,10 +4,12 @@ import dayjs, { Dayjs } from "dayjs";
// Then, include dayjs-business-time
import dayjsBusinessTime from "dayjs-business-time";
import utc from "dayjs/plugin/utc";
import Link from "next/link";
import { useEffect, useState } from "react";
import classNames from "@lib/classNames";
import { useLocale } from "@lib/hooks/useLocale";
import { useRouterAsPath } from "@lib/hooks/useRouterPath";
import getSlots from "@lib/slots";
import { WorkingHours } from "@lib/types/schedule";
@ -16,7 +18,6 @@ dayjs.extend(utc);
type DatePickerProps = {
weekStart: string;
onDatePicked: (pickedDate: Dayjs) => void;
workingHours: WorkingHours[];
eventLength: number;
date: Dayjs | null;
@ -30,7 +31,6 @@ type DatePickerProps = {
function DatePicker({
weekStart,
onDatePicked,
workingHours,
eventLength,
date,
@ -43,7 +43,7 @@ function DatePicker({
}: DatePickerProps): JSX.Element {
const { t } = useLocale();
const [days, setDays] = useState<({ disabled: boolean; date: number } | null)[]>([]);
const asPath = useRouterAsPath();
const [selectedMonth, setSelectedMonth] = useState<number>(
date
? periodType === PeriodType.RANGE
@ -194,25 +194,42 @@ function DatePicker({
{day === null ? (
<div key={`e-${idx}`} />
) : (
<button
onClick={() => onDatePicked(inviteeDate().date(day.date))}
disabled={day.disabled}
className={classNames(
"absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto",
"hover:border hover:border-brand dark:hover:border-white",
day.disabled
? "text-gray-400 font-light hover:border-0 cursor-default"
: "dark:text-white text-primary-500 font-medium",
date && date.isSame(inviteeDate().date(day.date), "day")
? "bg-brand text-white-important"
: !day.disabled
? " bg-gray-100 dark:bg-gray-600"
: ""
)}
data-testid="day"
data-disabled={day.disabled}>
{day.date}
</button>
<Link
href={`${
rescheduleUid
? `${asPath}?rescheduleUid=${rescheduleUid}&date=${encodeURIComponent(
inviteeDate().date(day.date).format("YYYY-MM-DDZZ")
)}`
: `${asPath}?date=${encodeURIComponent(
inviteeDate().date(day.date).format("YYYY-MM-DDZZ")
)}`
}`}
scroll={false}>
<a
className={classNames(
"rounded-sm text-center border border-transparent absolute inset-0",
"hover:border hover:border-brand dark:hover:border-white",
day.disabled
? "text-gray-400 font-light hover:border-0 cursor-default"
: "dark:text-white text-primary-500 font-medium",
date && date.isSame(inviteeDate().date(day.date), "day")
? "bg-brand text-white-important"
: !day.disabled
? " bg-gray-100 dark:bg-gray-600"
: ""
)}
onClick={(e) => {
if (day.disabled) {
e.preventDefault();
}
}}
data-testid="day"
data-disabled={day.disabled}>
<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
{day.date}
</span>
</a>
</Link>
)}
</div>
))}