Skip to content

Commit

Permalink
Merge pull request #437 from emrysal/bugfix/fixes-saving-event-type
Browse files Browse the repository at this point in the history 
Resolved errors on the pages/event-types/[type].tsx page
  • Loading branch information
@baileypumfleet
baileypumfleet committed Aug 11, 2021
2 parents 2a45f3c + abdfd1d commit b5cd38b
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 84 deletions.
42 changes: 42 additions & 0 deletions components/dialog/ConfirmationDialogContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { DialogClose, DialogContent } from "@components/Dialog";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { ExclamationIcon } from "@heroicons/react/outline";
import React from "react";

export default function ConfirmationDialogContent({
title,
alert,
confirmBtnText,
cancelBtnText,
onConfirm,
children,
}) {
confirmBtnText = confirmBtnText || "Confirm";
cancelBtnText = cancelBtnText || "Cancel";

return (
<DialogContent>
<div className="flex">
{alert && (
<div className="mr-3 mt-0.5">
{alert === "danger" && (
<div className="text-center p-2 rounded-full mx-auto bg-red-100">
<ExclamationIcon className="w-5 h-5 text-red-600" />
</div>
)}
</div>
)}
<div>
<DialogPrimitive.Title className="text-xl font-bold text-gray-900">{title}</DialogPrimitive.Title>
<DialogPrimitive.Description className="text-neutral-500">{children}</DialogPrimitive.Description>
</div>
</div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<DialogClose onClick={onConfirm} className="btn btn-primary">
{confirmBtnText}
</DialogClose>
<DialogClose className="btn btn-white mx-2">{cancelBtnText}</DialogClose>
</div>
</DialogContent>
);
}
140 changes: 56 additions & 84 deletions pages/event-types/[type].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,25 @@ import { GetServerSideProps } from "next";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import Select, { OptionBase } from "react-select";
import prisma from "@lib/prisma";
import { LocationType } from "@lib/location";
import Shell from "@components/Shell";
import { getSession } from "next-auth/client";
import { Scheduler } from "@components/ui/Scheduler";
import { Disclosure, RadioGroup } from "@headlessui/react";

import { PhoneIcon, XIcon } from "@heroicons/react/outline";
import { EventTypeCustomInput, EventTypeCustomInputType } from "@lib/eventTypeInput";
import {
ChevronRightIcon,
ClockIcon,
DocumentIcon,
ExternalLinkIcon,
LinkIcon,
LocationMarkerIcon,
LinkIcon,
PlusIcon,
DocumentIcon,
ChevronRightIcon,
ClockIcon,
TrashIcon,
ExternalLinkIcon,
} from "@heroicons/react/solid";

import dayjs from "dayjs";
Expand All @@ -34,6 +33,9 @@ import throttle from "lodash.throttle";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker, OrientationShape, toMomentObject } from "react-dates";
import Switch from "@components/ui/Switch";
import { Dialog, DialogTrigger } from "@components/Dialog";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";

dayjs.extend(utc);
dayjs.extend(timezone);
Expand All @@ -57,24 +59,27 @@ type DateOverride = {
endTime: number;
};

type EventTypeInput = {
type AdvancedOptions = {
eventName?: string;
periodType?: string;
periodDays?: number;
periodStartDate?: Date | string;
periodEndDate?: Date | string;
periodCountCalendarDays?: boolean;
requiresConfirmation?: boolean;
};

type EventTypeInput = AdvancedOptions & {
id: number;
title: string;
slug: string;
description: string;
length: number;
hidden: boolean;
locations: unknown;
eventName: string;
customInputs: EventTypeCustomInput[];
timeZone: string;
availability?: { openingHours: OpeningHours[]; dateOverrides: DateOverride[] };
periodType?: string;
periodDays?: number;
periodStartDate?: Date | string;
periodEndDate?: Date | string;
periodCountCalendarDays?: boolean;
enteredRequiresConfirmation: boolean;
};

const PERIOD_TYPES = [
Expand All @@ -100,7 +105,6 @@ export default function EventTypePage({
}: Props): JSX.Element {
const router = useRouter();

console.log(eventType);
const inputOptions: OptionBase[] = [
{ value: EventTypeCustomInputType.Text, label: "Text" },
{ value: EventTypeCustomInputType.TextLong, label: "Multiline Text" },
Expand Down Expand Up @@ -176,11 +180,11 @@ export default function EventTypePage({
);
});

const [hidden, setHidden] = useState<boolean>(eventType.hidden);
const titleRef = useRef<HTMLInputElement>();
const slugRef = useRef<HTMLInputElement>();
const descriptionRef = useRef<HTMLTextAreaElement>();
const lengthRef = useRef<HTMLInputElement>();
const isHiddenRef = useRef<HTMLInputElement>();
const requiresConfirmationRef = useRef<HTMLInputElement>();
const eventNameRef = useRef<HTMLInputElement>();
const periodDaysRef = useRef<HTMLInputElement>();
Expand All @@ -197,50 +201,32 @@ export default function EventTypePage({
const enteredSlug: string = slugRef.current.value;
const enteredDescription: string = descriptionRef.current.value;
const enteredLength: number = parseInt(lengthRef.current.value);
const enteredIsHidden: boolean = isHiddenRef.current.checked;
const enteredRequiresConfirmation: boolean = requiresConfirmationRef.current.checked;
const enteredEventName: string = eventNameRef.current.value;

const type = periodType.type;
const enteredPeriodDays = parseInt(periodDaysRef?.current?.value);
const enteredPeriodDaysType = Boolean(parseInt(periodDaysTypeRef?.current.value));

const enteredPeriodStartDate = periodStartDate ? periodStartDate.toDate() : null;
const enteredPeriodEndDate = periodEndDate ? periodEndDate.toDate() : null;

console.log("values", {
type,
periodDaysTypeRef,
enteredPeriodDays,
enteredPeriodDaysType,
enteredPeriodStartDate,
enteredPeriodEndDate,
});
// TODO: Add validation

const advancedOptionsPayload: AdvancedOptions = {};
if (requiresConfirmationRef.current) {
advancedOptionsPayload.requiresConfirmation = requiresConfirmationRef.current.checked;
advancedOptionsPayload.eventName = eventNameRef.current.value;
advancedOptionsPayload.periodType = periodType.type;
advancedOptionsPayload.periodDays = parseInt(periodDaysRef?.current?.value);
advancedOptionsPayload.periodCountCalendarDays = Boolean(parseInt(periodDaysTypeRef?.current.value));
advancedOptionsPayload.periodStartDate = periodStartDate ? periodStartDate.toDate() : null;
advancedOptionsPayload.periodEndDate = periodEndDate ? periodEndDate.toDate() : null;
}

const payload: EventTypeInput = {
id: eventType.id,
title: enteredTitle,
slug: enteredSlug,
description: enteredDescription,
length: enteredLength,
hidden: enteredIsHidden,
hidden,
locations,
eventName: enteredEventName,
customInputs,
timeZone: selectedTimeZone,
periodType: type,
periodDays: enteredPeriodDays,
periodStartDate: enteredPeriodStartDate,
periodEndDate: enteredPeriodEndDate,
periodCountCalendarDays: enteredPeriodDaysType,
requiresConfirmation: enteredRequiresConfirmation,
availability: enteredAvailability || null,
...advancedOptionsPayload,
};

if (enteredAvailability) {
payload.availability = enteredAvailability;
}

await fetch("/api/availability/eventtype", {
method: "PATCH",
body: JSON.stringify(payload),
Expand All @@ -249,7 +235,7 @@ export default function EventTypePage({
},
});

router.push("/availability");
router.push("/event-types");
}

async function deleteEventTypeHandler(event) {
Expand Down Expand Up @@ -696,33 +682,6 @@ export default function EventTypePage({
</ul>
</div>
</div>
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="hidden" className="text-sm flex font-medium text-neutral-700">
Hide event type
</label>
</div>
<div className="w-full">
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
ref={isHiddenRef}
id="ishidden"
name="ishidden"
type="checkbox"
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
defaultChecked={eventType.hidden}
/>
</div>
<div className="ml-3 text-sm">
<p className="text-neutral-900">
Hide the event type from your page, so it can only be booked through its
URL.
</p>
</div>
</div>
</div>
</div>
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label
Expand Down Expand Up @@ -895,6 +854,12 @@ export default function EventTypePage({
</div>
<div className="w-full sm:w-2/12 ml-2 px-4 mt-8 sm:mt-0 min-w-32">
<div className="space-y-4">
<Switch
name="isHidden"
defaultChecked={hidden}
onCheckedChange={setHidden}
label="Hide event type"
/>
<a
href={"/" + user.username + "/" + eventType.slug}
target="_blank"
Expand All @@ -914,13 +879,20 @@ export default function EventTypePage({
<LinkIcon className="w-4 h-4 mt-1 mr-2 text-neutral-500" />
Copy link
</button>
<button
onClick={deleteEventTypeHandler}
type="button"
className="flex text-md font-medium text-neutral-700">
<TrashIcon className="w-4 h-4 mt-1 mr-2 text-neutral-500" />
Delete
</button>
<Dialog>
<DialogTrigger className="flex text-md font-medium text-neutral-700">
<TrashIcon className="w-4 h-4 mt-1 mr-2 text-neutral-500" />
Delete
</DialogTrigger>
<ConfirmationDialogContent
alert="danger"
title="Delete Event Type"
confirmBtnText="Yes, delete event type"
onConfirm={deleteEventTypeHandler}>
Are you sure you want to delete this event type? Anyone who you&apos;ve shared this link
with will no longer be able to book using it.
</ConfirmationDialogContent>
</Dialog>
</div>
</div>
</div>
Expand Down

2 comments on commit b5cd38b

@vercel
Copy link

@vercel vercel bot commented on b5cd38b Aug 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

staging – ./

staging.calendso.com
staging-git-main-calend-so.vercel.app
staging-calend-so.vercel.app
*.staging.calendso.com

@vercel
Copy link

@vercel vercel bot commented on b5cd38b Aug 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

calendso – ./

calendso-git-main-calend-so.vercel.app
pure.calendso.com
calendso-calend-so.vercel.app

Please sign in to comment.