-
-
{props.user.name || props.user.username} | Calendso
-
-
-
-
+export default function User(props): User {
+ const eventTypes = props.eventTypes.map((type) => (
+
+
+
+
+ {type.title}
+ {type.description}
+
+
+
+ ));
+ return (
+
+
+
{props.user.name || props.user.username} | Calendso
+
+
-
-
-
-
{props.user.name || props.user.username}
-
{props.user.bio}
-
-
- {eventTypes.length == 0 &&
-
-
Uh oh!
-
This user hasn't set up any event types yet.
-
- }
-
+
+
+
+
+ {props.user.name || props.user.username}
+
+
{props.user.bio}
+
+ {eventTypes.length == 0 && (
+
+
Uh oh!
+
This user hasn't set up any event types yet.
+
+ )}
+
+
+ );
}
-export async function getServerSideProps(context) {
- const user = await prisma.user.findFirst({
- where: {
- username: context.query.user,
- },
- select: {
- id: true,
- username: true,
- email:true,
- name: true,
- bio: true,
- avatar: true,
- eventTypes: true
- }
- });
-
- if (!user) {
- return {
- notFound: true,
- }
- }
-
- const eventTypes = await prisma.eventType.findMany({
- where: {
- userId: user.id,
- hidden: false
- }
- });
+export const getServerSideProps: GetServerSideProps = async (context) => {
+ const user = await prisma.user.findFirst({
+ where: {
+ username: context.query.user.toLowerCase(),
+ },
+ select: {
+ id: true,
+ username: true,
+ email: true,
+ name: true,
+ bio: true,
+ avatar: true,
+ eventTypes: true,
+ },
+ });
+ if (!user) {
return {
- props: {
- user,
- eventTypes
- },
- }
-}
+ notFound: true,
+ };
+ }
+
+ const eventTypes = await prisma.eventType.findMany({
+ where: {
+ userId: user.id,
+ hidden: false,
+ },
+ });
+
+ return {
+ props: {
+ user,
+ eventTypes,
+ },
+ };
+};
// Auxiliary methods
-
-export function getRandomColorCode() {
- let color = '#';
- for (let idx = 0; idx < 6; idx++) {
- color += Math.floor(Math.random() * 10);
- }
- return color;
+export function getRandomColorCode(): string {
+ let color = "#";
+ for (let idx = 0; idx < 6; idx++) {
+ color += Math.floor(Math.random() * 10);
+ }
+ return color;
}
diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx
index a07157fb..14c7bc04 100644
--- a/pages/[user]/[type].tsx
+++ b/pages/[user]/[type].tsx
@@ -1,25 +1,31 @@
-import {useEffect, useMemo, useState} 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';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
+import { useEffect, useState } from "react";
+import { GetServerSideProps } from "next";
+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";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
dayjs.extend(isSameOrBefore);
dayjs.extend(utc);
dayjs.extend(timezone);
-import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../../lib/telemetry";
+import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry";
import AvailableTimes from "../../components/booking/AvailableTimes";
-import TimeOptions from "../../components/booking/TimeOptions"
-import Avatar from '../../components/Avatar';
-import {timeZone} from "../../lib/clock";
-
-export default function Type(props) {
+import TimeOptions from "../../components/booking/TimeOptions";
+import Avatar from "../../components/Avatar";
+import { timeZone } from "../../lib/clock";
+export default function Type(props): Type {
// Get router variables
const router = useRouter();
const { rescheduleUid } = router.query;
@@ -28,65 +34,83 @@ export default function Type(props) {
const [selectedDate, setSelectedDate] = useState
();
const [selectedMonth, setSelectedMonth] = useState(dayjs().month());
const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
- const [timeFormat, setTimeFormat] = useState('h:mma');
+ const [timeFormat, setTimeFormat] = useState("h:mma");
const telemetry = useTelemetry();
- useEffect(() => {
- telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters()))
- }, []);
+ useEffect((): void => {
+ telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters()));
+ }, [telemetry]);
// Handle month changes
const incrementMonth = () => {
- setSelectedMonth(selectedMonth + 1);
- }
+ setSelectedMonth(selectedMonth + 1);
+ };
const decrementMonth = () => {
- setSelectedMonth(selectedMonth - 1);
- }
+ setSelectedMonth(selectedMonth - 1);
+ };
// Set up calendar
- var daysInMonth = dayjs().month(selectedMonth).daysInMonth();
- var days = [];
+ const daysInMonth = dayjs().month(selectedMonth).daysInMonth();
+ const days = [];
for (let i = 1; i <= daysInMonth; i++) {
- days.push(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') {
+ if (props.user.weekStart === "Monday") {
weekdayOfFirst -= 1;
- if (weekdayOfFirst < 0)
- weekdayOfFirst = 6;
+ if (weekdayOfFirst < 0) weekdayOfFirst = 6;
}
- const emptyDays = Array(weekdayOfFirst).fill(null).map((day, i) =>
+ const emptyDays = Array(weekdayOfFirst)
+ .fill(null)
+ .map((day, i) => (
- {null}
+ {null}
- );
+ ));
- const changeDate = (day) => {
- telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters()))
- setSelectedDate(dayjs().month(selectedMonth).date(day))
+ const changeDate = (day): void => {
+ telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters()));
+ setSelectedDate(dayjs().month(selectedMonth).date(day));
};
// Combine placeholder days with actual days
- const calendar = [...emptyDays, ...days.map((day) =>
-