From 892ba8a335db7efdd71daafc1c9322b5170131ca Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Tue, 22 Jun 2021 17:42:32 +0000 Subject: [PATCH] Lowercase the router.query.user & some typescript fixes --- .eslintrc.json | 3 +- pages/[user].tsx | 167 +++++++++++++++-------------- pages/[user]/[type].tsx | 231 +++++++++++++++++++--------------------- 3 files changed, 199 insertions(+), 202 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0ea5d0ab..182300ba 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -18,7 +18,8 @@ "rules": { "prettier/prettier": ["error"], "@typescript-eslint/no-unused-vars": "error", - "react/react-in-jsx-scope": "off" + "react/react-in-jsx-scope": "off", + "react/prop-types": "off" }, "env": { "browser": true, diff --git a/pages/[user].tsx b/pages/[user].tsx index 62499c4f..faebbfb1 100644 --- a/pages/[user].tsx +++ b/pages/[user].tsx @@ -1,92 +1,95 @@ -import Head from 'next/head'; -import Link from 'next/link'; -import prisma from '../lib/prisma'; -import Avatar from '../components/Avatar'; +import { GetServerSideProps } from "next"; +import Head from "next/head"; +import Link from "next/link"; +import prisma from "../lib/prisma"; +import Avatar from "../components/Avatar"; -export default function User(props) { - const eventTypes = props.eventTypes.map(type => -
  • - - -
    -

    {type.title}

    -

    {type.description}

    -     - -
    • - ); - return ( -
    - - {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} -
    - {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}
    + {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; -} \ No newline at end of file +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 f2ac3452..ffd3c402 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) => - - )]; + )), + ]; - const handleSelectTimeZone = (selectedTimeZone: string) => { + const handleSelectTimeZone = (selectedTimeZone: string): void => { if (selectedDate) { - setSelectedDate(selectedDate.tz(selectedTimeZone)) + setSelectedDate(selectedDate.tz(selectedTimeZone)); } }; - const handleToggle24hClock = (is24hClock: boolean) => { + const handleToggle24hClock = (is24hClock: boolean): void => { if (selectedDate) { - setTimeFormat(is24hClock ? 'HH:mm' : 'h:mma'); + setTimeFormat(is24hClock ? "HH:mm" : "h:mma"); } - } + }; return (
    @@ -101,60 +125,41 @@ export default function Type(props) { className={ "mx-auto my-24 transition-max-width ease-in-out duration-500 " + (selectedDate ? "max-w-6xl" : "max-w-3xl") - } - > + }>
    -
    +

    {props.user.name}

    -

    - {props.eventType.title} -

    +

    {props.eventType.title}

    {props.eventType.length} minutes

    - { isTimeOptionsOpen && } -

    - {props.eventType.description} -

    + {isTimeOptionsOpen && ( + + )} +

    {props.eventType.description}

    + className={"mt-8 sm:mt-0 " + (selectedDate ? "sm:w-1/3 border-r sm:px-4" : "sm:w-1/2 sm:pl-4")}>
    - - {dayjs().month(selectedMonth).format("MMMM YYYY")} - + {dayjs().month(selectedMonth).format("MMMM YYYY")}
    - {props.user.weekStart !== 'Monday' ? ( -
    - Sun -
    + {props.user.weekStart !== "Monday" ? ( +
    Sun
    ) : null} -
    - Mon -
    -
    - Tue -
    -
    - Wed -
    -
    - Thu -
    -
    - Fri -
    -
    - Sat -
    - {props.user.weekStart === 'Monday' ? ( -
    - Sun -
    +
    Mon
    +
    Tue
    +
    Wed
    +
    Thu
    +
    Fri
    +
    Sat
    + {props.user.weekStart === "Monday" ? ( +
    Sun
    ) : null} {calendar}
    - {selectedDate && } + {selectedDate && ( + + )}
    {/* note(peer): @@ -202,10 +198,7 @@ export default function Type(props) { */}