From 394be8612b81f1683b05d1b0de5367287590d11a Mon Sep 17 00:00:00 2001 From: mihaic195 Date: Thu, 22 Jul 2021 15:16:21 +0300 Subject: [PATCH 1/7] fix: settings page was missing value prop and restyled dark theme elements on booking page --- pages/[user]/book.tsx | 8 ++++++-- pages/settings/profile.tsx | 15 ++++++++------- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx index 34430e30..4bc1eea2 100644 --- a/pages/[user]/book.tsx +++ b/pages/[user]/book.tsx @@ -218,7 +218,9 @@ export default function Book(props: any): JSX.Element { {locations.length > 1 && (
- Location + + Location + {locations.map((location) => ( ))}
diff --git a/pages/settings/profile.tsx b/pages/settings/profile.tsx index 6f7836eb..86f99256 100644 --- a/pages/settings/profile.tsx +++ b/pages/settings/profile.tsx @@ -12,6 +12,11 @@ import TimezoneSelect from "react-timezone-select"; import { UsernameInput } from "../../components/ui/UsernameInput"; import ErrorAlert from "../../components/ui/alerts/Error"; +const themeOptions = [ + { value: "light", label: "Light" }, + { value: "dark", label: "Dark" }, +]; + export default function Settings(props) { const [successModalOpen, setSuccessModalOpen] = useState(false); const usernameRef = useRef(); @@ -19,18 +24,13 @@ export default function Settings(props) { const descriptionRef = useRef(); const avatarRef = useRef(); const hideBrandingRef = useRef(); - const [selectedTheme, setSelectedTheme] = useState({ value: "" }); + const [selectedTheme, setSelectedTheme] = useState({ value: props.user.theme }); const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone }); - const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: "" }); + const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: props.user.weekStart }); const [hasErrors, setHasErrors] = useState(false); const [errorMessage, setErrorMessage] = useState(""); - const themeOptions = [ - { value: "light", label: "Light" }, - { value: "dark", label: "Dark" }, - ]; - useEffect(() => { setSelectedTheme( props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : null @@ -182,6 +182,7 @@ export default function Settings(props) { id="theme" isDisabled={!selectedTheme} defaultValue={selectedTheme || themeOptions[0]} + value={selectedTheme || themeOptions[0]} onChange={setSelectedTheme} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" options={themeOptions} From c745416a6a94a3c1eb9204f2beadaa9ccdcdcd11 Mon Sep 17 00:00:00 2001 From: Pedro Duarte Date: Thu, 22 Jul 2021 14:16:54 +0200 Subject: [PATCH 2/7] Make collapsible time options accessible to screen readers --- package.json | 1 + pages/[user]/[type].tsx | 29 ++++++++------ yarn.lock | 87 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 104 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 2875cf53..3194fd27 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@heroicons/react": "^1.0.1", "@jitsu/sdk-js": "^2.0.1", "@prisma/client": "^2.23.0", + "@radix-ui/react-collapsible": "^0.0.16", "@tailwindcss/forms": "^0.2.1", "async": "^3.2.0", "bcryptjs": "^2.4.3", diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx index 04cdbd76..ec8677f4 100644 --- a/pages/[user]/[type].tsx +++ b/pages/[user]/[type].tsx @@ -4,6 +4,7 @@ import Head from "next/head"; import { ChevronDownIcon, ClockIcon, GlobeIcon } from "@heroicons/react/solid"; import { useRouter } from "next/router"; import dayjs, { Dayjs } from "dayjs"; +import * as Collapsible from "@radix-ui/react-collapsible"; import prisma, { whereAndSelect } from "@lib/prisma"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry"; @@ -139,19 +140,21 @@ export default function Type(props): Type { {props.eventType.length} minutes

- - {isTimeOptionsOpen && ( - - )} + + + + + {timeZone()} + + + + + + +

{props.eventType.description}

Date: Fri, 30 Jul 2021 15:19:40 +0300 Subject: [PATCH 3/7] fix chevron text color --- components/booking/DatePicker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx index c6a49fa0..92d94773 100644 --- a/components/booking/DatePicker.tsx +++ b/components/booking/DatePicker.tsx @@ -171,10 +171,10 @@ const DatePicker = ({ {dayjs().month(selectedMonth).format("MMMM YYYY")} -
+
From 9f8b1f372e4a619652f08e4524342c628473a113 Mon Sep 17 00:00:00 2001 From: Marc Seitz Date: Fri, 30 Jul 2021 15:48:51 +0300 Subject: [PATCH 4/7] add dark and light variants chevron color --- components/booking/DatePicker.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx index 92d94773..3dddd1e5 100644 --- a/components/booking/DatePicker.tsx +++ b/components/booking/DatePicker.tsx @@ -171,10 +171,13 @@ const DatePicker = ({ {dayjs().month(selectedMonth).format("MMMM YYYY")} -
+
From 81bcd021df6c0808a02e78c17b24b119b0ca80be Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Mon, 2 Aug 2021 22:11:36 +0000 Subject: [PATCH 5/7] Improved 'Create your first event type' layouting --- pages/event-types/index.tsx | 43 ++++++++++++++++++++++--------------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index 00cf1d89..93b4e83c 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -20,7 +20,7 @@ import { PlusIcon, UserIcon, } from "@heroicons/react/solid"; -import Loader from '@components/Loader'; +import Loader from "@components/Loader"; export default function Availability({ user, types }) { const [session, loading] = useSession(); @@ -42,7 +42,7 @@ export default function Availability({ user, types }) { // TODO: Add validation - const response = await fetch("/api/availability/eventtype", { + await fetch("/api/availability/eventtype", { method: "POST", body: JSON.stringify({ title: enteredTitle, @@ -66,7 +66,7 @@ export default function Availability({ user, types }) { } if (loading) { - return ; + return ; } return ( @@ -79,12 +79,14 @@ export default function Availability({ user, types }) { heading="Event Types" subtitle="Create events to share for people to book on your calendar." CTA={ - + types.length !== 0 && ( + + ) }>
    @@ -261,9 +263,9 @@ export default function Availability({ user, types }) {
{types.length === 0 && ( -
+
@@ -500,12 +502,19 @@ export default function Availability({ user, types }) { - -

Create your first event type

-

- Event types enable you to share links that show available times on your calendar and allow - people to make bookings with you. -

+
+

Create your first event type

+

+ Event types enable you to share links that show available times on your calendar and allow + people to make bookings with you. +

+ +
)} {showAddModal && ( From 5388ea0610900a5d226418476d58da06444624c5 Mon Sep 17 00:00:00 2001 From: Syed Ali Shahbaz Date: Tue, 3 Aug 2021 05:52:17 +0530 Subject: [PATCH 6/7] Added date and time to booking entries --- pages/bookings/index.tsx | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx index dbcaadf8..0880f37a 100644 --- a/pages/bookings/index.tsx +++ b/pages/bookings/index.tsx @@ -3,6 +3,8 @@ import prisma from "../../lib/prisma"; import { getSession, useSession } from "next-auth/client"; import Shell from "../../components/Shell"; import { useRouter } from "next/router"; +import dayjs from "dayjs"; + export default function Bookings({ bookings }) { const [, loading] = useSession(); @@ -49,11 +51,12 @@ export default function Bookings({ bookings }) { className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Event - {/* Date - */} + + {console.log(bookings)} Actions @@ -86,11 +89,14 @@ export default function Bookings({ bookings }) {
{booking.title}
{booking.description}
- {/* -
- {dayjs(booking.startTime).format("D MMMM YYYY HH:mm")} -
- */} + +
+ {dayjs(booking.startTime).format("D MMMM YYYY")} +
+
+ {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")} +
+ {!booking.confirmed && !booking.rejected && ( <> @@ -153,7 +159,7 @@ export async function getServerSideProps(context) { }, }); - const bookings = await prisma.booking.findMany({ + let b = await prisma.booking.findMany({ where: { userId: user.id, }, @@ -165,11 +171,17 @@ export async function getServerSideProps(context) { confirmed: true, rejected: true, id: true, + startTime: true, + endTime: true, }, orderBy: { - startTime: "desc", + startTime: "asc", }, }); + const bookings = b.map(booking=>{ + return ({...booking, startTime:booking.startTime.toISOString(), endTime:booking.endTime.toISOString(),}) + }); + return { props: { bookings } }; } From 4becb21d53a1b3561f11cb85d0db98e068956d25 Mon Sep 17 00:00:00 2001 From: Syed Ali Shahbaz Date: Tue, 3 Aug 2021 05:59:38 +0530 Subject: [PATCH 7/7] Cleaned up the code --- pages/bookings/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx index 0880f37a..23b10824 100644 --- a/pages/bookings/index.tsx +++ b/pages/bookings/index.tsx @@ -56,7 +56,6 @@ export default function Bookings({ bookings }) { className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Date - {console.log(bookings)} Actions @@ -159,7 +158,7 @@ export async function getServerSideProps(context) { }, }); - let b = await prisma.booking.findMany({ + const b = await prisma.booking.findMany({ where: { userId: user.id, },