diff --git a/app/companies/AddCompany.tsx b/app/companies/AddCompany.tsx index 2b72dc02..83995914 100644 --- a/app/companies/AddCompany.tsx +++ b/app/companies/AddCompany.tsx @@ -43,7 +43,7 @@ const AddCompanyForm = ({ close }: { close: () => void }) => { - + {SLUG_START} setSlug(e.target.value)} /> @@ -68,7 +68,7 @@ export const AddCompany = () => { return ( - Add Company + Company ) diff --git a/app/companies/CompanyAdminActions.tsx b/app/companies/CompanyAdminActions.tsx index f79a6556..75a15edf 100644 --- a/app/companies/CompanyAdminActions.tsx +++ b/app/companies/CompanyAdminActions.tsx @@ -11,7 +11,7 @@ export const CompanyAdminActions = () => { Admin Actions - + diff --git a/app/companies/[slug]/CompanyManagement.tsx b/app/companies/[slug]/CompanyManagement.tsx index 9ea759f0..87190f1e 100644 --- a/app/companies/[slug]/CompanyManagement.tsx +++ b/app/companies/[slug]/CompanyManagement.tsx @@ -16,7 +16,7 @@ export const CompanyManagement = ({ company }: { company: CompanyProfile & { com Company Management - + diff --git a/app/companies/[slug]/page.tsx b/app/companies/[slug]/page.tsx index 9c5944f7..2cdf2671 100644 --- a/app/companies/[slug]/page.tsx +++ b/app/companies/[slug]/page.tsx @@ -185,7 +185,7 @@ const CompanyPage = async ({ params }: { params: { slug: string } }) => { - + Opportunities panel diff --git a/app/events/[id]/FormattedClientDateTime.tsx b/app/events/[id]/FormattedClientDateTime.tsx new file mode 100644 index 00000000..625b8cb8 --- /dev/null +++ b/app/events/[id]/FormattedClientDateTime.tsx @@ -0,0 +1,89 @@ +"use client" + +import { Flex, Spinner, Text } from "@radix-ui/themes" +import { format, formatDistanceStrict, isSameDay } from "date-fns" +import React, { useEffect, useState } from "react" +import { BsCalendar } from "react-icons/bs" + +/** + * Format an event's date to JSX + * @param dateStart The start date time + * @param dateEnd The end date time + * @example + * formatEventDateTime( + * new Date("2022-01-01T12:00:00Z"), + * new Date("2022-01-01T14:00:00Z") + * ) => + * <> + * - GMT+0 (2 hours) + * + * @example + * formatEventDateTime( + * new Date("2022-01-01T12:00:00Z"), + * new Date("2022-01-02T14:00:00Z") + * ) => + * <> + * to GMT+0 (1 day) + * + */ +const formatEventDateTime = (dateStart: Date, dateEnd: Date | null) => { + const formattedStart = ( + + + + ) + const formattedEnd = dateEnd ? ( + isSameDay(dateStart, dateEnd) ? ( + <> + - + + + + + ) : ( + <> + {" "} + to{" "} + + + + + ) + ) : ( + "" + ) + const timezone = format(dateStart, "O") + const formattedDuration = dateEnd ? <>{formatDistanceStrict(dateStart, dateEnd)} : "" + + return ( + <> + {formattedStart} + {formattedEnd} {timezone} ({formattedDuration}) + + ) +} + +const FormattedClientDateTime = ({ dateStart, dateEnd }: { dateStart: Date; dateEnd: Date | null }) => { + const [isClient, setIsClient] = useState(false) + + useEffect(() => { + setIsClient(true) + }, []) + + if (!isClient) { + return ( + + + Loading + + ) + } + return ( + + + {formatEventDateTime(dateStart, dateEnd)} + + ) +} + +export default FormattedClientDateTime diff --git a/app/events/[id]/page.tsx b/app/events/[id]/page.tsx index b9173e4d..af8bb1ec 100644 --- a/app/events/[id]/page.tsx +++ b/app/events/[id]/page.tsx @@ -5,66 +5,18 @@ import Link from "@/components/Link" import MdViewer from "@/components/MdViewer" import { EditEvent } from "@/components/UpsertEvent" import RestrictedAreaCompany from "@/components/rbac/RestrictedAreaCompany" -import RestrictedAreaStudent from "@/components/rbac/RestrictedAreaStudent" import prisma from "@/lib/db" +import FormattedClientDateTime from "./FormattedClientDateTime" import styles from "./page.module.scss" import { Role } from "@prisma/client" import { Box, Button, Card, Flex, Heading, Inset, Separator, Text } from "@radix-ui/themes" -import { format, formatDistanceStrict, isSameDay } from "date-fns" +import { format } from "date-fns" import Image from "next/image" import { notFound } from "next/navigation" import React from "react" -import { BsBoxArrowUpRight, BsCalendar, BsPinMap } from "react-icons/bs" - -/** - * Format an event's date to JSX - * @param dateStart The start date time - * @param dateEnd The end date time - * @example - * formatEventDateTime( - * new Date("2022-01-01T12:00:00Z"), - * new Date("2022-01-01T14:00:00Z") - * ) => - * <> - * Sat, 01 Jan 12:00-14:00 GMT+0 (2 hours) - * - * @example - * formatEventDateTime( - * new Date("2022-01-01T12:00:00Z"), - * new Date("2022-01-02T14:00:00Z") - * ) => - * <> - * Sat, 01 Jan 12:00 to Sun, 02 Jan 14:00 GMT+0 (1 day) - * - */ -const formatEventDateTime = (dateStart: Date, dateEnd: Date | null) => { - const formattedStart = {format(dateStart, "E, dd MMM kk:mm")} - const formattedEnd = dateEnd ? ( - isSameDay(dateStart, dateEnd) ? ( - <> - -{format(dateEnd, "kk:mm")} - - ) : ( - <> - {" "} - to {format(dateEnd, "E, dd MMM kk:mm")} - - ) - ) : ( - "" - ) - const timezone = format(dateStart, "O") - const formattedDuration = dateEnd ? <>{formatDistanceStrict(dateStart, dateEnd)} : "" - - return ( - <> - {formattedStart} - {formattedEnd} {timezone} ({formattedDuration}) - - ) -} +import { BsBoxArrowUpRight, BsPinMap } from "react-icons/bs" const EventPage = async ({ params }: { params: { id: string } }) => { const session = await auth() @@ -141,8 +93,7 @@ const EventPage = async ({ params }: { params: { id: string } }) => { Date & Time - - {formatEventDateTime(event.dateStart, event.dateEnd)} + diff --git a/components/EditCompany.tsx b/components/EditCompany.tsx index 4ecc2d4f..4237f90d 100644 --- a/components/EditCompany.tsx +++ b/components/EditCompany.tsx @@ -55,7 +55,7 @@ const EditCompanyForm = ({ close, prevCompanyProfile }: { close: () => void; pre - + {SLUG_START} setSlug(e.target.value)} /> diff --git a/components/MdEditor.tsx b/components/MdEditor.tsx index ff79a883..85ce3885 100644 --- a/components/MdEditor.tsx +++ b/components/MdEditor.tsx @@ -3,7 +3,6 @@ import { BlockTypeSelect, BoldItalicUnderlineToggles, - CodeToggle, InsertTable, InsertThematicBreak, ListsToggle, @@ -13,7 +12,6 @@ import { UndoRedo, headingsPlugin, listsPlugin, - quotePlugin, tablePlugin, thematicBreakPlugin, toolbarPlugin, @@ -38,25 +36,24 @@ const MdEditor: FC = ({ markdown, editorRef, onChange }) => { plugins={[ toolbarPlugin({ toolbarContents: () => ( - <> - {/* HACK: avoid unintented focus on the first button on hover*/} +
+ {/* HACK: avoid unintended focus on the first button on hover*/} + - - - + +
), }), tablePlugin(), thematicBreakPlugin(), listsPlugin(), headingsPlugin(), - quotePlugin(), ]} markdown={markdown} ref={editorRef} diff --git a/components/UpsertEvent.tsx b/components/UpsertEvent.tsx index 74f0c2b7..31615f16 100644 --- a/components/UpsertEvent.tsx +++ b/components/UpsertEvent.tsx @@ -12,9 +12,9 @@ import { InfoCallout } from "./Callouts" import { Event } from "@prisma/client" import { Pencil1Icon } from "@radix-ui/react-icons" -import { Card, Grid, IconButton, Text, TextField } from "@radix-ui/themes" +import { Card, Flex, IconButton, Text, TextField } from "@radix-ui/themes" import dynamic from "next/dynamic" -import { useState } from "react" +import React, { useState } from "react" const MdEditor = dynamic(() => import("@/components/MdEditor"), { ssr: false }) @@ -84,8 +84,8 @@ const UpsertEventForm = ({ - - +