From 51fdc6c7fb6c4eb617fe0b75a18907ea566a7a13 Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Mon, 25 Jul 2022 21:59:28 +0300 Subject: [PATCH] Single event page initial --- app/db/index.ts | 1 + app/db/models/calendar.server.ts | 26 ++++++++++ app/db/seed.ts | 2 +- app/routes/calendar/$id.tsx | 89 ++++++++++++++++++++++++++++++++ app/routes/calendar/index.tsx | 2 + app/styles/calendar-event.css | 7 +++ app/styles/calendar.css | 3 +- 7 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 app/routes/calendar/$id.tsx create mode 100644 app/styles/calendar-event.css diff --git a/app/db/index.ts b/app/db/index.ts index d359266fb..0fd5814fa 100644 --- a/app/db/index.ts +++ b/app/db/index.ts @@ -9,5 +9,6 @@ export const db = { plusSuggestions, plusVotes, badges, + // xxx: rename to events.... or calendarEvents? calendar, }; diff --git a/app/db/models/calendar.server.ts b/app/db/models/calendar.server.ts index c951dfbc7..f56fb2e79 100644 --- a/app/db/models/calendar.server.ts +++ b/app/db/models/calendar.server.ts @@ -35,3 +35,29 @@ export function findAllBetweenTwoTimestamps({ Pick >; } + +const findByIdStm = sql.prepare(` + select + "CalendarEvent"."name", + "CalendarEvent"."description", + "CalendarEvent"."discordUrl", + "CalendarEvent"."bracketUrl", + "CalendarEventDate"."startTime", + "CalendarEventDate"."eventId", + "User"."discordName", + "User"."discordDiscriminator", + "User"."discordId", + "User"."discordAvatar" + from "CalendarEvent" + join "CalendarEventDate" on "CalendarEvent"."id" = "CalendarEventDate"."eventId" + join "User" on "CalendarEvent"."authorId" = "User"."id" + where "CalendarEvent"."id" = $id +`); + +export function findById(id: CalendarEvent["id"]) { + return findByIdStm.get({ id }) as Nullable< + Pick & + Pick & + Pick + >; +} diff --git a/app/db/seed.ts b/app/db/seed.ts index ec0e9dcdb..b6c2b5d86 100644 --- a/app/db/seed.ts +++ b/app/db/seed.ts @@ -12,7 +12,7 @@ import shuffle from "just-shuffle"; import { dateToDatabaseTimestamp } from "~/utils/dates"; import capitalize from "just-capitalize"; -const ADMIN_TEST_AVATAR = "fcfd65a3bea598905abb9ca25296816b"; +const ADMIN_TEST_AVATAR = "e424e1ba50d2019fdc4730d261e56c55"; const NZAP_TEST_DISCORD_ID = "455039198672453645"; const NZAP_TEST_AVATAR = "f809176af93132c3db5f0a5019e96339"; // https://cdn.discordapp.com/avatars/455039198672453645/f809176af93132c3db5f0a5019e96339.webp?size=160 diff --git a/app/routes/calendar/$id.tsx b/app/routes/calendar/$id.tsx new file mode 100644 index 000000000..d546c70a0 --- /dev/null +++ b/app/routes/calendar/$id.tsx @@ -0,0 +1,89 @@ +import { json, type LinksFunction, type LoaderArgs } from "@remix-run/node"; +import { useLoaderData } from "@remix-run/react"; +import { useTranslation } from "react-i18next"; +import { z } from "zod"; +import { LinkButton } from "~/components/Button"; +import { Main } from "~/components/Main"; +import { db } from "~/db"; +import { useIsMounted } from "~/hooks/useIsMounted"; +import { databaseTimestampToDate } from "~/utils/dates"; +import { notFoundIfFalsy } from "~/utils/remix"; +import { resolveBaseUrl } from "~/utils/urls"; +import { actualNumber, id } from "~/utils/zod"; +import styles from "~/styles/calendar-event.css"; + +export const links: LinksFunction = () => { + return [{ rel: "stylesheet", href: styles }]; +}; + +export const loader = ({ params }: LoaderArgs) => { + const parsedParams = z + .object({ id: z.preprocess(actualNumber, id) }) + .parse(params); + const event = notFoundIfFalsy(db.calendar.findById(parsedParams.id)); + + return json({ + event, + }); +}; + +export default function CalendarEventPage() { + const { event } = useLoaderData(); + const { i18n } = useTranslation(); + const isMounted = useIsMounted(); + + // TODO: -> next user info with avatar + // xxx: time doesn't take space, not taking in account many dates + + return ( +
+
+
+ +
+

{event.name}

+ {event.discordUrl || event.bracketUrl ? ( +
+ {event.discordUrl ? ( + + Discord + + ) : null} + {event.bracketUrl ? ( + + {resolveBaseUrl(event.bracketUrl)} + + ) : null} +
+ ) : null} +
+
{event.description}
+
+ ); +} diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx index b5bff8402..b3306fc0d 100644 --- a/app/routes/calendar/index.tsx +++ b/app/routes/calendar/index.tsx @@ -114,6 +114,8 @@ export default function CalendarPage() { // dates/times on the server const isMounted = useIsMounted(); + // xxx: scrolls down on page load? + // xxx: instead calculate into object const datesRendered = new Set(); return (
diff --git a/app/styles/calendar-event.css b/app/styles/calendar-event.css new file mode 100644 index 000000000..ac515e833 --- /dev/null +++ b/app/styles/calendar-event.css @@ -0,0 +1,7 @@ +.event__title { + line-height: 1.35; +} + +.event__time { + font-weight: var(--semi-bold); +} diff --git a/app/styles/calendar.css b/app/styles/calendar.css index 4ce4760ee..5992fcb16 100644 --- a/app/styles/calendar.css +++ b/app/styles/calendar.css @@ -72,7 +72,7 @@ } .calendar__events-container { - background-color: var(--theme-transparent-vibrant); + background-color: var(--bg-lighter); margin-block-start: var(--s-8); } @@ -113,6 +113,7 @@ color: var(--text); font-size: var(--fonts-xl); line-height: 1.35; + margin-block: var(--s-1); } .calendar__event__bottom-info-container {