From b50fe165663a7918bb90a67e589e563c07e3e072 Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Mon, 21 Jun 2021 20:26:04 +0000 Subject: [PATCH] Moved DatePicker and PoweredByCalendso to seperate components --- components/booking/DatePicker.tsx | 109 ++++++++++++++++++++ components/ui/PoweredByCalendso.tsx | 22 +++++ pages/[user]/[type].tsx | 148 ++++------------------------ 3 files changed, 149 insertions(+), 130 deletions(-) create mode 100644 components/booking/DatePicker.tsx create mode 100644 components/ui/PoweredByCalendso.tsx diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx new file mode 100644 index 0000000000..98a7efe430 --- /dev/null +++ b/components/booking/DatePicker.tsx @@ -0,0 +1,109 @@ +import dayjs from "dayjs"; +import {ChevronLeftIcon, ChevronRightIcon} from "@heroicons/react/solid"; +import {useEffect, useState} from "react"; + +const DatePicker = ({ weekStart, onDatePicked }) => { + + const [selectedMonth, setSelectedMonth] = useState(dayjs().month()); + const [selectedDay, setSelectedDay] = useState(dayjs().date()); + const [hasPickedDate, setHasPickedDate] = useState(false); + + useEffect(() => { + if (hasPickedDate) { + onDatePicked(dayjs().month(selectedMonth).date(selectedDay)); + } + }, [hasPickedDate, selectedDay]); + + // Handle month changes + const incrementMonth = () => { + setSelectedMonth(selectedMonth + 1); + } + + const decrementMonth = () => { + setSelectedMonth(selectedMonth - 1); + } + + // Set up calendar + var daysInMonth = dayjs().month(selectedMonth).daysInMonth(); + var days = []; + for (let i = 1; i <= daysInMonth; i++) { + days.push(i); + } + + // Create placeholder elements for empty days in first week + let weekdayOfFirst = dayjs().month(selectedMonth).date(1).day(); + if (weekStart === 'Monday') { + weekdayOfFirst -= 1; + if (weekdayOfFirst < 0) + weekdayOfFirst = 6; + } + const emptyDays = Array(weekdayOfFirst).fill(null).map((day, i) => +
+ {null} +
+ ); + + // Combine placeholder days with actual days + const calendar = [...emptyDays, ...days.map((day) => + + )]; + + return ( +
+
+ + {dayjs().month(selectedMonth).format("MMMM YYYY")} + +
+ + +
+
+
+ { + ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + .sort( (a, b) => weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0 ) + .map( (weekDay) => +
{weekDay}
+ ) + } + {calendar} +
+
+ ); +} + +export default DatePicker; \ No newline at end of file diff --git a/components/ui/PoweredByCalendso.tsx b/components/ui/PoweredByCalendso.tsx new file mode 100644 index 0000000000..2022fa931e --- /dev/null +++ b/components/ui/PoweredByCalendso.tsx @@ -0,0 +1,22 @@ +import Link from "next/link"; + +const PoweredByCalendso = (props) => ( +
+ + + powered by{" "} + Calendso Logo + + +
+); + +export default PoweredByCalendso; \ No newline at end of file diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx index 1a9d7c47d8..c56b720218 100644 --- a/pages/[user]/[type].tsx +++ b/pages/[user]/[type].tsx @@ -2,7 +2,6 @@ import {useEffect, useState, useMemo} from 'react'; import Head from 'next/head'; import Link from 'next/link'; import prisma from '../../lib/prisma'; -import { useRouter } from 'next/router'; import dayjs, { Dayjs } from 'dayjs'; import { ClockIcon, GlobeIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid'; import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; @@ -17,16 +16,16 @@ import AvailableTimes from "../../components/booking/AvailableTimes"; import TimeOptions from "../../components/booking/TimeOptions" import Avatar from '../../components/Avatar'; import {timeZone} from "../../lib/clock"; +import DatePicker from "../../components/booking/DatePicker"; +import PoweredByCalendso from "../../components/ui/PoweredByCalendso"; +import {useRouter} from "next/router"; export default function Type(props) { - // Get router variables const router = useRouter(); const { rescheduleUid } = router.query; - // Initialise state const [selectedDate, setSelectedDate] = useState(); - const [selectedMonth, setSelectedMonth] = useState(dayjs().month()); const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false); const [timeFormat, setTimeFormat] = useState('hh:mm'); const telemetry = useTelemetry(); @@ -35,47 +34,11 @@ export default function Type(props) { telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters())) }, []); - // Handle month changes - const incrementMonth = () => { - setSelectedMonth(selectedMonth + 1); - } - - const decrementMonth = () => { - setSelectedMonth(selectedMonth - 1); - } - - // Set up calendar - var daysInMonth = dayjs().month(selectedMonth).daysInMonth(); - var days = []; - for (let i = 1; i <= daysInMonth; i++) { - days.push(i); - } - - // Create placeholder elements for empty days in first week - let weekdayOfFirst = dayjs().month(selectedMonth).date(1).day(); - if (props.user.weekStart === 'Monday') { - weekdayOfFirst -= 1; - if (weekdayOfFirst < 0) - weekdayOfFirst = 6; - } - const emptyDays = Array(weekdayOfFirst).fill(null).map((day, i) => -
- {null} -
- ); - - const changeDate = (day) => { + const changeDate = (date: Dayjs) => { telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters())) - setSelectedDate(dayjs().month(selectedMonth).date(day)) + setSelectedDate(date); }; - // Combine placeholder days with actual days - const calendar = [...emptyDays, ...days.map((day) => - - )]; - const handleSelectTimeZone = (selectedTimeZone: string) => { if (selectedDate) { setSelectedDate(selectedDate.tz(selectedTimeZone)) @@ -120,102 +83,27 @@ export default function Type(props) { {props.eventType.length} minutes

- { isTimeOptionsOpen && } -

- {props.eventType.description} -

- -
-
- - {dayjs().month(selectedMonth).format("MMMM YYYY")} - -
- - -
-
-
- {props.user.weekStart !== 'Monday' ? ( -
- Sun -
- ) : null} -
- Mon -
-
- Tue -
-
- Wed -
-
- Thu -
-
- Fri -
-
- Sat -
- {props.user.weekStart === 'Monday' ? ( -
- Sun -
- ) : null} - {calendar} -
-
+ + {timeZone()} + + + { isTimeOptionsOpen && } +

+ {props.eventType.description} +

+ + {selectedDate && } {/* note(peer): you can remove calendso branding here, but we'd also appreciate it, if you don't <3 */} - + );