From f81f56a3a43166d48e12fdd250befc8443799120 Mon Sep 17 00:00:00 2001 From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com> Date: Fri, 26 Mar 2021 20:50:43 +0200 Subject: [PATCH] date picker component --- app/calendar/components/EventModal.tsx | 64 ++++++++++++-------------- app/calendar/utils.ts | 2 +- components/common/DatePicker.tsx | 35 ++++++++++++++ utils/validators/event.ts | 20 ++++++-- 4 files changed, 83 insertions(+), 38 deletions(-) create mode 100644 components/common/DatePicker.tsx diff --git a/app/calendar/components/EventModal.tsx b/app/calendar/components/EventModal.tsx index d3e0a3ec5..2bd1f3f57 100644 --- a/app/calendar/components/EventModal.tsx +++ b/app/calendar/components/EventModal.tsx @@ -6,7 +6,7 @@ import { FormLabel, } from "@chakra-ui/form-control"; import { Input } from "@chakra-ui/input"; -import { Flex, Stack } from "@chakra-ui/layout"; +import { Stack } from "@chakra-ui/layout"; import { Modal, ModalBody, @@ -21,7 +21,9 @@ import { Select } from "@chakra-ui/select"; import { zodResolver } from "@hookform/resolvers/zod"; import { t, Trans } from "@lingui/macro"; import { useLingui } from "@lingui/react"; +import DatePicker from "components/common/DatePicker"; import MarkdownTextarea from "components/common/MarkdownTextarea"; +import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { FiTrash } from "react-icons/fi"; import { eventSchema, EVENT_DESCRIPTION_LIMIT } from "utils/validators/event"; @@ -38,35 +40,17 @@ export function EventModal({ onClose: () => void; event: boolean; }) { + const [value, setValue] = useState(""); const { i18n } = useLingui(); const { handleSubmit, errors, register, watch, control } = useForm({ resolver: zodResolver(eventSchema), - // defaultValues: { - // headAbilities: ([ - // "UNKNOWN", - // "UNKNOWN", - // "UNKNOWN", - // "UNKNOWN", - // ] as unknown) as Ability[], - // clothingAbilities: ([ - // "UNKNOWN", - // "UNKNOWN", - // "UNKNOWN", - // "UNKNOWN", - // ] as unknown) as Ability[], - // shoesAbilities: ([ - // "UNKNOWN", - // "UNKNOWN", - // "UNKNOWN", - // "UNKNOWN", - // ] as unknown) as Ability[], - // weapon: weapons.includes(weaponFromQuery as any) - // ? weaponFromQuery - // : undefined, - // ...build, - // }, + defaultValues: { + isTournament: true, + }, }); + console.log("value", value); + const watchDescription = watch("description", /*team.bio*/ ""); const onSubmit = (values: any) => { @@ -125,7 +109,7 @@ export function EventModal({ - + {errors.name} @@ -134,10 +118,14 @@ export function EventModal({ - - - - + { + return ; + }} + /> Input the time in your local time zone:{" "} {Intl.DateTimeFormat().resolvedOptions().timeZone} @@ -150,7 +138,11 @@ export function EventModal({ - + {errors.discordInviteUrl} @@ -159,7 +151,11 @@ export function EventModal({ - + {errors.eventUrl} @@ -183,8 +179,8 @@ export function EventModal({ value={watchDescription ?? ""} maxLength={EVENT_DESCRIPTION_LIMIT} placeholder={i18n._( - t`# I'm a header - I'm **bolded**. Embedding weapon images is easy too: :luna_blaster:` + t`# Header + All the relevant info about tournament goes here. We can even use **bolding**.` )} /> diff --git a/app/calendar/utils.ts b/app/calendar/utils.ts index 754f50767..89f731f30 100644 --- a/app/calendar/utils.ts +++ b/app/calendar/utils.ts @@ -76,6 +76,6 @@ export const EVENT_FORMATS = [ { code: "GROUPS2DE", name: t`Groups to Double Elimination` }, { code: "SWISS2SE", name: t`Swiss to Single Elimination` }, { code: "SWISS2DE", name: t`Swiss to Double Elimination` }, - { code: "SWISS", name: t`SWISS` }, + { code: "SWISS", name: t`Swiss` }, { code: "OTHER", name: t`Other` }, ] as const; diff --git a/components/common/DatePicker.tsx b/components/common/DatePicker.tsx new file mode 100644 index 000000000..11d360ebf --- /dev/null +++ b/components/common/DatePicker.tsx @@ -0,0 +1,35 @@ +import { Input } from "@chakra-ui/input"; +import { Flex } from "@chakra-ui/layout"; + +export default function DatePicker({ + date, + onChange, +}: { + date: Date; + onChange: (date: Date) => void; +}) { + const dateString = `${date.getFullYear()}-${ + date.getMonth() < 10 ? "0" : "" + }${date.getMonth()}-${date.getDate()}`; + const timeString = `${date.getHours()}:${date.getMinutes()}`; + return ( + + + onChange(new Date(`${e.target.value} ${timeString}`)) + } + type="date" + mr={2} + /> + + onChange(new Date(`${dateString} ${e.target.value}`)) + } + type="time" + ml={2} + /> + + ); +} diff --git a/utils/validators/event.ts b/utils/validators/event.ts index 48047e411..c3c9230b8 100644 --- a/utils/validators/event.ts +++ b/utils/validators/event.ts @@ -9,15 +9,29 @@ export const eventSchema = z.object({ const now = new Date(); if (now.getTime() < val.getTime()) return false; - now.setMonth(now.getMonth() + 3); + now.setMonth(now.getMonth() + 12); if (now.getTime() < val.getTime()) return false; return true; }), eventUrl: z.string().url(), - discordInviteUrl: z.string().optional().nullable(), - tags: z.array(z.enum(["SZ_ONLY"])), + discordInviteUrl: z.string().url().optional().nullable(), + tags: z.array( + z.enum([ + "SZ", + "TW", + "SPECIAL", + "ART", + "MONEY", + "REGION", + "LOW", + "COUNT", + "MULTIPLE", + "S1", + "LAN", + ]) + ), isTournament: z.boolean(), format: z.array( z.enum([