From f8d97ff3c518bf1382dedcc35d7027d9d953238e Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sun, 31 Jul 2022 19:59:03 +0300 Subject: [PATCH] Badge prize preview inside tags --- TODO.md | 1 + app/db/models/calendar.server.ts | 7 ++-- app/routes/calendar/$id.tsx | 45 ++++++------------------- app/routes/calendar/components/Tags.tsx | 18 ++++++++-- app/routes/calendar/index.tsx | 16 +++++++-- app/routes/calendar/tags.json | 2 +- app/styles/calendar-event.css | 20 ----------- app/styles/common.css | 9 +++++ 8 files changed, 54 insertions(+), 64 deletions(-) diff --git a/TODO.md b/TODO.md index 43f8bc1f2..9b54b3ee3 100644 --- a/TODO.md +++ b/TODO.md @@ -22,6 +22,7 @@ Calendar ## Other +- [x] badges inside tag? - [ ] Move "BADGE" tag resolving to DB? - [x] Tags selector can remove - [x] Calendar new title diff --git a/app/db/models/calendar.server.ts b/app/db/models/calendar.server.ts index da0266c80..d39e6964f 100644 --- a/app/db/models/calendar.server.ts +++ b/app/db/models/calendar.server.ts @@ -136,7 +136,7 @@ const findAllBetweenTwoTimestampsStm = sql.prepare(` "CalendarEvent"."discordUrl", "CalendarEvent"."bracketUrl", "CalendarEvent"."tags", - "CalendarEventDate"."id", + "CalendarEventDate"."id" as "eventDateId", "CalendarEventDate"."eventId", "CalendarEventDate"."startTime", "User"."discordName", @@ -184,8 +184,9 @@ export function findAllBetweenTwoTimestamps({ endTime: dateToDatabaseTimestamp(endTime), }) as Array< Pick & - Pick & - Pick & { + Pick & { + eventDateId: CalendarEventDate["id"]; + } & Pick & { nthAppearance: number; } & { hasBadge: number } >; diff --git a/app/routes/calendar/$id.tsx b/app/routes/calendar/$id.tsx index 0a5b1d5d3..e1c79bfec 100644 --- a/app/routes/calendar/$id.tsx +++ b/app/routes/calendar/$id.tsx @@ -11,7 +11,6 @@ import * as React from "react"; import { useTranslation } from "react-i18next"; import { z } from "zod"; import { Avatar } from "~/components/Avatar"; -import { Badge } from "~/components/Badge"; import { LinkButton } from "~/components/Button"; import { Main } from "~/components/Main"; import { db } from "~/db"; @@ -26,7 +25,6 @@ import { discordFullName, makeTitle } from "~/utils/strings"; import { calendarEditPage, resolveBaseUrl } from "~/utils/urls"; import { actualNumber, id } from "~/utils/zod"; import { Tags } from "./components/Tags"; -import allTags from "./tags.json"; export const links: LinksFunction = () => { return [{ rel: "stylesheet", href: styles }]; @@ -63,12 +61,12 @@ export const loader = async ({ params, request }: LoaderArgs) => { export default function CalendarEventPage() { const user = useUser(); - const { event } = useLoaderData(); + const { event, badgePrizes } = useLoaderData(); const { i18n } = useTranslation(); const isMounted = useIsMounted(); return ( -
+
{event.startTimes.map((startTime, i) => ( @@ -100,7 +98,7 @@ export default function CalendarEventPage() {

{event.name}

- +
{event.discordUrl ? ( @@ -130,39 +128,16 @@ export default function CalendarEventPage() {
-
-
- - {discordFullName(event)} -
- +
+ + {discordFullName(event)}
{event.description}
); } - -function PrizeBadges() { - const { badgePrizes } = useLoaderData(); - - if (badgePrizes.length === 0) return null; - - return ( -
- Win! -
- {badgePrizes.map((badge) => ( - - ))} -
-
- ); -} diff --git a/app/routes/calendar/components/Tags.tsx b/app/routes/calendar/components/Tags.tsx index d3ee02305..8a6a7095a 100644 --- a/app/routes/calendar/components/Tags.tsx +++ b/app/routes/calendar/components/Tags.tsx @@ -1,15 +1,19 @@ +import clsx from "clsx"; import React from "react"; import { useTranslation } from "react-i18next"; +import { Badge } from "~/components/Badge"; import { Button } from "~/components/Button"; import { CrossIcon } from "~/components/icons/Cross"; -import type { CalendarEventTag } from "~/db/types"; +import type { Badge as BadgeType, CalendarEventTag } from "~/db/types"; import allTags from "../tags.json"; export function Tags({ tags, + badges, onDelete, }: { tags: Array; + badges?: Array; /** Called when tag delete button clicked. If undefined delete buttons won't be shown. */ onDelete?: (tag: CalendarEventTag) => void; }) { @@ -21,7 +25,10 @@ export function Tags({
    {tags.map((tag) => ( -
  • +
  • {t(`tag.name.${tag}`)} {onDelete && (
    • ))} diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx index d1ce30640..0cc14e4b3 100644 --- a/app/routes/calendar/index.tsx +++ b/app/routes/calendar/index.tsx @@ -115,7 +115,14 @@ function fetchEventsOfWeek(args: { week: number; year: number }) { // so we get all events of sunday even from US west coast perspective endTime.setHours(endTime.getHours() + 12); - return db.calendarEvents.findAllBetweenTwoTimestamps({ startTime, endTime }); + return db.calendarEvents + .findAllBetweenTwoTimestamps({ startTime, endTime }) + .map((event) => ({ + ...event, + badgePrizes: event.tags.includes("BADGE") + ? db.calendarEvents.findBadgesById(event.eventId) + : [], + })); } export default function CalendarPage() { @@ -290,7 +297,7 @@ function EventsList() {
    {events.map((calendarEvent, i) => { return ( - +
    - +
    diff --git a/app/routes/calendar/tags.json b/app/routes/calendar/tags.json index 072c41237..7e6e289e9 100644 --- a/app/routes/calendar/tags.json +++ b/app/routes/calendar/tags.json @@ -1,6 +1,6 @@ { "BADGE": { - "color": "#FDFD96" + "color": "#000" }, "SPECIAL": { "color": "#CE93D8" diff --git a/app/styles/calendar-event.css b/app/styles/calendar-event.css index cd2881e09..f086228c6 100644 --- a/app/styles/calendar-event.css +++ b/app/styles/calendar-event.css @@ -17,26 +17,6 @@ height: 1.25rem; } -.event__author-badges-container { - display: flex; - align-items: flex-end; - justify-content: space-between; -} - -.event__badges__container { - font-size: var(--fonts-xs); - font-weight: var(--semi-bold); - text-align: center; -} - -.event__badges__gifs { - display: flex; - flex-wrap: wrap; - padding: var(--s-2); - background-color: var(--bg-badge); - border-radius: var(--rounded); -} - .event__author { display: flex; align-items: center; diff --git a/app/styles/common.css b/app/styles/common.css index 552340680..63435bce2 100644 --- a/app/styles/common.css +++ b/app/styles/common.css @@ -551,10 +551,19 @@ dialog::backdrop { padding-inline: var(--s-1-5); } +.calendar__event__badge-tag { + color: var(--badge-text); +} + .calendar__event__tag-delete-button { margin-left: auto; } +.calendar__event__tag-badges { + display: flex; + margin-inline-start: var(--s-1); +} + .calendar__event__tag-delete-button > svg { width: 0.85rem !important; color: var(--black-text);