Filter calendar events by tags (#1972)

* backend

* Tournament docs only visible when adding tournament

* Progress

* Finish?

* Fix

app/db/seed/index.ts

@@ -33,7 +33,7 @@ import { mySlugify } from "~/utils/urls";
 import type { SeedVariation } from "~/features/api-private/routes/seed";
 import * as BuildRepository from "~/features/builds/BuildRepository.server";
 import * as CalendarRepository from "~/features/calendar/CalendarRepository.server";
-import { tags } from "~/features/calendar/calendar-constants";
+import { persistedTags } from "~/features/calendar/calendar-constants";
 import * as LFGRepository from "~/features/lfg/LFGRepository.server";
 import { TIMEZONES } from "~/features/lfg/lfg-constants";
 import * as PlusSuggestionRepository from "~/features/plus-suggestions/PlusSuggestionRepository.server";
@@ -698,9 +698,7 @@ function calendarEvents() {
 	const userIds = userIdsInRandomOrder();
 
 	for (let id = 1; id <= AMOUNT_OF_CALENDAR_EVENTS; id++) {
-		const shuffledTags = shuffle(Object.keys(tags)).filter(
-			(tag) => tag !== "BADGE",
-		);
+		const shuffledTags = shuffle(Object.keys(persistedTags));
 
 		sql
 			.prepare(

app/db/types.ts

@@ -1,4 +1,7 @@
-import type { tags } from "~/features/calendar/calendar-constants";
+import type {
+	persistedTags,
+	tags,
+} from "~/features/calendar/calendar-constants";
 import type { TieredSkill } from "~/features/mmr/tiered.server";
 import type { TEAM_MEMBER_ROLES } from "~/features/team";
 import type {
@@ -135,6 +138,7 @@ export interface CalendarEvent {
 	tournamentId: number | null;
 }
 
+export type PersistedCalendarEventTag = keyof typeof persistedTags;
 export type CalendarEventTag = keyof typeof tags;
 
 export interface CalendarEventDate {

app/features/api-public/routes/calendar.$year.$week.ts

@@ -44,5 +44,10 @@ function fetchEventsOfWeek(args: { week: number; year: number }) {
 	const endTime = new Date(startTime);
 	endTime.setDate(endTime.getDate() + 7);
 
-	return CalendarRepository.findAllBetweenTwoTimestamps({ startTime, endTime });
+	return CalendarRepository.findAllBetweenTwoTimestamps({
+		startTime,
+		endTime,
+		tagsToFilterBy: [],
+		onlyTournaments: false,
+	});
 }

app/features/calendar/CalendarRepository.server.ts

@@ -3,7 +3,7 @@ import { sql } from "kysely";
 import { jsonArrayFrom, jsonObjectFrom } from "kysely/helpers/sqlite";
 import { db } from "~/db/sql";
 import type { DB, Tables, TournamentSettings } from "~/db/tables";
-import type { CalendarEventTag } from "~/db/types";
+import type { CalendarEventTag, PersistedCalendarEventTag } from "~/db/types";
 import { MapPool } from "~/features/map-list-generator/core/map-pool";
 import * as Progression from "~/features/tournament-bracket/core/Progression";
 import { databaseTimestampNow, dateToDatabaseTimestamp } from "~/utils/dates";
@@ -143,11 +143,15 @@ export type FindAllBetweenTwoTimestampsItem = Unwrapped<
 export async function findAllBetweenTwoTimestamps({
 	startTime,
 	endTime,
+	tagsToFilterBy,
+	onlyTournaments,
 }: {
 	startTime: Date;
 	endTime: Date;
+	tagsToFilterBy: Array<PersistedCalendarEventTag>;
+	onlyTournaments: boolean;
 }) {
-	const rows = await db
+	let query = db
 		.selectFrom("CalendarEvent")
 		.innerJoin(
 			"CalendarEventDate",
@@ -211,8 +215,17 @@ export async function findAllBetweenTwoTimestamps({
 			"<=",
 			dateToDatabaseTimestamp(endTime),
 		)
-		.orderBy("CalendarEventDate.startTime", "asc")
-		.execute();
+		.orderBy("CalendarEventDate.startTime", "asc");
+
+	for (const tag of tagsToFilterBy) {
+		query = query.where("CalendarEvent.tags", "like", `%${tag}%`);
+	}
+
+	if (onlyTournaments) {
+		query = query.where("CalendarEvent.tournamentId", "is not", null);
+	}
+
+	const rows = await query.execute();
 
 	return Promise.all(
 		rows
@@ -305,17 +318,30 @@ async function tournamentParticipantCount({
 export async function startTimesOfRange({
 	startTime,
 	endTime,
+	tagsToFilterBy,
+	onlyTournaments,
 }: {
 	startTime: Date;
 	endTime: Date;
+	tagsToFilterBy: Array<PersistedCalendarEventTag>;
+	onlyTournaments: boolean;
 }) {
-	const rows = await db
+	let query = db
 		.selectFrom("CalendarEventDate")
+		.innerJoin("CalendarEvent", "CalendarEvent.id", "CalendarEventDate.eventId")
 		.select(["startTime"])
 		.where("startTime", ">=", dateToDatabaseTimestamp(startTime))
-		.where("startTime", "<=", dateToDatabaseTimestamp(endTime))
-		.execute();
+		.where("startTime", "<=", dateToDatabaseTimestamp(endTime));
+
+	for (const tag of tagsToFilterBy) {
+		query = query.where("CalendarEvent.tags", "like", `%${tag}%`);
+	}
+
+	if (onlyTournaments) {
+		query = query.where("CalendarEvent.tournamentId", "is not", null);
+	}
 
+	const rows = await query.execute();
 	return rows.map((row) => row.startTime);
 }
 

app/features/calendar/actions/calendar.new.server.ts

@@ -2,7 +2,7 @@ import type { ActionFunction } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { z } from "zod";
 import { TOURNAMENT_STAGE_TYPES } from "~/db/tables";
-import type { CalendarEventTag } from "~/db/types";
+import type { CalendarEventTag, PersistedCalendarEventTag } from "~/db/types";
 import { requireUser } from "~/features/auth/core/user.server";
 import * as CalendarRepository from "~/features/calendar/CalendarRepository.server";
 import * as ShowcaseTournaments from "~/features/front-page/core/ShowcaseTournaments.server";
@@ -212,6 +212,12 @@ export const bracketProgressionSchema = z.preprocess(
 		),
 );
 
+export const calendarEventTagSchema = z
+	.string()
+	.refine((val) =>
+		CALENDAR_EVENT.PERSISTED_TAGS.includes(val as PersistedCalendarEventTag),
+	);
+
 export const newCalendarEventActionSchema = z
 	.object({
 		eventToEditId: z.preprocess(actualNumber, id.nullish()),
@@ -252,15 +258,7 @@ export const newCalendarEventActionSchema = z
 		),
 		tags: z.preprocess(
 			processMany(safeJSONParse, removeDuplicates),
-			z
-				.array(
-					z
-						.string()
-						.refine((val) =>
-							CALENDAR_EVENT.TAGS.includes(val as CalendarEventTag),
-						),
-				)
-				.nullable(),
+			z.array(calendarEventTagSchema).nullable(),
 		),
 		badges: z.preprocess(
 			processMany(safeJSONParse, removeDuplicates),

app/features/calendar/calendar-constants.ts

@@ -1,9 +1,6 @@
-import type { CalendarEventTag } from "~/db/types";
+import type { CalendarEventTag, PersistedCalendarEventTag } from "~/db/types";
 
-export const tags = {
-	BADGE: {
-		color: "#000",
-	},
+export const persistedTags = {
 	SPECIAL: {
 		color: "#CE93D8",
 	},
@@ -60,6 +57,13 @@ export const tags = {
 	},
 };
 
+export const tags = {
+	...persistedTags,
+	BADGE: {
+		color: "#000",
+	},
+};
+
 export const CALENDAR_EVENT = {
 	NAME_MIN_LENGTH: 2,
 	NAME_MAX_LENGTH: 100,
@@ -68,6 +72,11 @@ export const CALENDAR_EVENT = {
 	DISCORD_INVITE_CODE_MAX_LENGTH: 50,
 	BRACKET_URL_MAX_LENGTH: 200,
 	MAX_AMOUNT_OF_DATES: 5,
+	/** Calendar event tag that is persisted in the database */
+	PERSISTED_TAGS: Object.keys(
+		persistedTags,
+	) as Array<PersistedCalendarEventTag>,
+	/** Calendar event tag, both those persisted in the database and those that are computed */
 	TAGS: Object.keys(tags) as Array<CalendarEventTag>,
 	AVATAR_SIZE: 512,
 };

app/features/calendar/routes/calendar.new.tsx

@@ -110,15 +110,17 @@ export default function CalendarNewEventPage() {
 					<h1 className="text-lg">
 						{data.isAddingTournament ? "New tournament" : "New calendar event"}
 					</h1>
-					<a
-						href={CREATING_TOURNAMENT_DOC_LINK}
-						className="text-lg text-bold"
-						title="Documentation about creating tournaments"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						?
-					</a>
+					{data.isAddingTournament ? (
+						<a
+							href={CREATING_TOURNAMENT_DOC_LINK}
+							className="text-lg text-bold"
+							title="Documentation about creating tournaments"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							?
+						</a>
+					) : null}
 				</div>
 				{data.isAddingTournament ? <TemplateTournamentForm /> : null}
 				<EventForm key={baseEvent?.eventId} />
@@ -572,9 +574,8 @@ function TagsAdder() {
 	const [tags, setTags] = React.useState(baseEvent?.tags ?? []);
 	const id = React.useId();
 
-	const tagsForSelect = CALENDAR_EVENT.TAGS.filter(
-		// @ts-expect-error TODO: fix this (5.5 version)
-		(tag) => !tags.includes(tag) && tag !== "BADGE",
+	const tagsForSelect = CALENDAR_EVENT.PERSISTED_TAGS.filter(
+		(tag) => !tags.includes(tag),
 	);
 
 	return (