mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

extracted classNames into helpers

Browse source
This commit is contained in:
Peer Richelsen 2021-08-03 10:30:35 +02:00
parent 0bc0119362
commit 8340fce157
9 changed files with 79 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/Settings.tsx
View file

@ -1,10 +1,7 @@
import Link from "next/link";
import { CreditCardIcon, UserIcon, CodeIcon, KeyIcon, UserGroupIcon } from "@heroicons/react/solid";
import { useRouter } from "next/router";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
import classNames from "@lib/classNames";
export default function SettingsShell(props) {
const router = useRouter();

4
components/Shell.tsx
View file

@ -17,9 +17,7 @@ import {
} from "@heroicons/react/solid";
import Logo from "./Logo";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Shell(props) {
const router = useRouter();

5
components/booking/TimeOptions.tsx
View file

@ -2,10 +2,7 @@ import { Switch } from "@headlessui/react";
import TimezoneSelect from "react-timezone-select";
import { useEffect, useState } from "react";
import { is24h, timeZone } from "../../lib/clock";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
import classNames from "@lib/classNames";
const TimeOptions = (props) => {
const [selectedTimeZone, setSelectedTimeZone] = useState("");

3
lib/classNames.ts Normal file
View file

@ -0,0 +1,3 @@
export default function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}

97
pages/bookings/index.tsx
View file

@ -4,6 +4,9 @@ import { getSession, useSession } from "next-auth/client";
import Shell from "../../components/Shell";
import { useRouter } from "next/router";
import dayjs from "dayjs";
import {Fragment} from 'react';
import {Menu, Transition} from '@headlessui/react';
import {DotsHorizontalIcon, ExternalLinkIcon, LinkIcon} from '@heroicons/react/solid';
export default function Bookings({ bookings }) {
@ -41,11 +44,6 @@ export default function Bookings({ bookings }) {
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Person
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@ -73,35 +71,20 @@ export default function Bookings({ bookings }) {
Unconfirmed
</span>
)}
<div className="text-sm font-medium text-gray-900">
{booking.attendees[0].name}
<div className="text-sm text-neutral-900 font-medium truncate">
{booking.title}
</div>
<div className="text-sm text-gray-500">{booking.attendees[0].email}</div>
<div
style={{ maxWidth: 150 }}
className="block lg:hidden font-medium text-xs text-gray-900 truncate">
{booking.title}
</div>
</td>
<td
className={
"px-6 py-4 max-w-20 w-full" + (booking.rejected ? " line-through" : "")
}>
<div className="hidden lg:block text-sm text-neutral-900 font-medium">
{booking.title}
</div>
<div className="hidden lg:block text-sm text-neutral-500">
You and {booking.attendees[0].name}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">
{dayjs(booking.startTime).format("D MMMM YYYY")}
</div>
<div className="text-sm text-gray-500">
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
{dayjs(booking.startTime).format("HH:mm")} -{" "}
{dayjs(booking.endTime).format("HH:mm")}
</div>
</td>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
{!booking.confirmed && !booking.rejected && (
<>
@ -129,6 +112,68 @@ export default function Bookings({ bookings }) {
className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
Reschedule
</a>
<Menu as="div" className="inline-block text-left">
{({ open }) => (
<>
<div>
<Menu.Button className="text-neutral-400 mt-1">
<span className="sr-only">Open options</span>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button>
</div>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
<Menu.Items
static
className="origin-top-right absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none divide-y divide-neutral-100">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<a
href={"/" + session.user.username + "/" + type.slug}
target="_blank"
rel="noreferrer"
className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex items-center px-4 py-2 text-sm font-medium"
)}>
<ExternalLinkIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Preview
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex items-center px-4 py-2 text-sm w-full font-medium"
)}>
<LinkIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Copy link to event
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
</>
)}
{!booking.confirmed && booking.rejected && (
@ -184,7 +229,7 @@ export async function getServerSideProps(context) {
},
});
const bookings = b.map(booking=>{
const bookings = b.reverse().map(booking=>{
return ({...booking, startTime:booking.startTime.toISOString(), endTime:booking.endTime.toISOString(),})
});

4
pages/cancel/[uid].tsx
View file

@ -15,10 +15,6 @@ dayjs.extend(isBetween);
dayjs.extend(utc);
dayjs.extend(timezone);
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Type(props) {
// Get router variables
const router = useRouter();

7
pages/cancel/success.tsx
View file

@ -1,4 +1,3 @@
import {useState} from 'react';
import Head from 'next/head';
import prisma from '../../lib/prisma';
import {useRouter} from 'next/router';
@ -14,16 +13,10 @@ dayjs.extend(isBetween);
dayjs.extend(utc);
dayjs.extend(timezone);
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Type(props) {
// Get router variables
const router = useRouter();
const [is24h, setIs24h] = useState(false);
return (
<div>
<Head>

5
pages/event-types/index.tsx
View file

@ -7,10 +7,6 @@ import { getSession, useSession } from "next-auth/client";
import { Fragment, useRef, useState } from "react";
import { Menu, Transition } from "@headlessui/react";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
import {
ClockIcon,
DotsHorizontalIcon,
@ -21,6 +17,7 @@ import {
UserIcon,
} from "@heroicons/react/solid";
import Loader from "@components/Loader";
import classNames from "@lib/classNames";
export default function Availability({ user, types }) {
const [session, loading] = useSession();

5
pages/integrations/index.tsx
View file

@ -14,6 +14,7 @@ import {
import { InformationCircleIcon } from "@heroicons/react/outline";
import { Switch } from "@headlessui/react";
import Loader from '@components/Loader';
import classNames from "@lib/classNames";
export default function Home({ integrations }) {
const [session, loading] = useSession();
@ -81,10 +82,6 @@ export default function Home({ integrations }) {
}
}
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
useEffect(loadCalendars, [integrations]);
if (loading) {