From f20a150f8731850b7c6efa4e30dfdd64092d2a1a Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Thu, 2 Nov 2023 18:00:33 +0100
Subject: [PATCH] Add gql id building functions

---
 frontend/src/routes/Embed.tsx               | 5 ++---
 frontend/src/routes/Series.tsx              | 4 ++--
 frontend/src/routes/Video.tsx               | 7 +++----
 frontend/src/routes/manage/Video/Shared.tsx | 4 ++--
 frontend/src/util/index.ts                  | 6 ++++++
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/routes/Embed.tsx b/frontend/src/routes/Embed.tsx
index 4502691af..c2a5649a4 100644
--- a/frontend/src/routes/Embed.tsx
+++ b/frontend/src/routes/Embed.tsx
@@ -4,7 +4,7 @@ import { Translation, useTranslation } from "react-i18next";
 import { graphql, PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { unreachable } from "@opencast/appkit";
 
-import { isSynced } from "../util";
+import { eventId, isSynced } from "../util";
 import { GlobalErrorBoundary } from "../util/err";
 import { loadQuery } from "../relay";
 import { makeRoute } from "../rauta";
@@ -46,9 +46,8 @@ export const EmbedVideoRoute = makeRoute(url => {
         return null;
     }
     const videoId = decodeURIComponent(params[1]);
-    const eventId = `ev${videoId}`;
 
-    const queryRef = loadQuery<EmbedQuery>(query, { id: eventId });
+    const queryRef = loadQuery<EmbedQuery>(query, { id: eventId(videoId) });
 
     return {
         render: () => <ErrorBoundary>
diff --git a/frontend/src/routes/Series.tsx b/frontend/src/routes/Series.tsx
index 619ab1099..ea472db4c 100644
--- a/frontend/src/routes/Series.tsx
+++ b/frontend/src/routes/Series.tsx
@@ -8,7 +8,7 @@ import { RootLoader } from "../layout/Root";
 import { Nav } from "../layout/Navigation";
 import { PageTitle } from "../layout/header/ui";
 import { WaitingPage } from "../ui/Waiting";
-import { isSynced } from "../util";
+import { isSynced, seriesId } from "../util";
 
 import { NotFound } from "./NotFound";
 import { SeriesByOpencastIdQuery } from "./__generated__/SeriesByOpencastIdQuery.graphql";
@@ -65,7 +65,7 @@ export const DirectSeriesRoute = makeRoute(url => {
             rootRealm { ... NavigationData }
         }
     `;
-    const queryRef = loadQuery<SeriesByIdQuery>(query, { id: `sr${id}` });
+    const queryRef = loadQuery<SeriesByIdQuery>(query, { id: seriesId(id) });
 
 
     return {
diff --git a/frontend/src/routes/Video.tsx b/frontend/src/routes/Video.tsx
index e2d29b7c5..b8b0ef3ff 100644
--- a/frontend/src/routes/Video.tsx
+++ b/frontend/src/routes/Video.tsx
@@ -31,6 +31,7 @@ import {
     translatedConfig,
     currentRef,
     secondsToTimeString,
+    eventId,
 } from "../util";
 import { BREAKPOINT_SMALL, BREAKPOINT_MEDIUM } from "../GlobalStyle";
 import { Button, LinkButton } from "../ui/Button";
@@ -102,8 +103,7 @@ export const VideoRoute = makeRoute(url => {
         }
     `;
     const realmPath = "/" + realmPathParts.join("/");
-    const eventId = `ev${videoId}`;
-    const queryRef = loadQuery<VideoPageInRealmQuery>(query, { id: eventId, realmPath });
+    const queryRef = loadQuery<VideoPageInRealmQuery>(query, { id: eventId(videoId), realmPath });
 
     return {
         render: () => <RootLoader
@@ -154,8 +154,7 @@ export const DirectVideoRoute = makeRoute(url => {
         }
     `;
     const videoId = decodeURIComponent(params[1]);
-    const eventId = `ev${videoId}`;
-    const queryRef = loadQuery<VideoPageDirectLinkQuery>(query, { id: eventId });
+    const queryRef = loadQuery<VideoPageDirectLinkQuery>(query, { id: eventId(videoId) });
 
     return matchedDirectRoute(query, queryRef);
 });
diff --git a/frontend/src/routes/manage/Video/Shared.tsx b/frontend/src/routes/manage/Video/Shared.tsx
index 9e7ce4b52..cfb0e10f1 100644
--- a/frontend/src/routes/manage/Video/Shared.tsx
+++ b/frontend/src/routes/manage/Video/Shared.tsx
@@ -13,7 +13,7 @@ import { b64regex } from "../../util";
 import { Thumbnail } from "../../../ui/Video";
 import { SharedVideoManageQuery } from "./__generated__/SharedVideoManageQuery.graphql";
 import { Link } from "../../../router";
-import { isExperimentalFlagSet, keyOfId } from "../../../util";
+import { eventId, isExperimentalFlagSet, keyOfId } from "../../../util";
 
 
 export const PAGE_WIDTH = 1100;
@@ -38,7 +38,7 @@ export const makeManageVideoRoute = (
         }
 
         const videoId = decodeURIComponent(params[1]);
-        const queryRef = loadQuery<SharedVideoManageQuery>(query, { id: `ev${videoId}` });
+        const queryRef = loadQuery<SharedVideoManageQuery>(query, { id: eventId(videoId) });
 
         return {
             render: () => <RootLoader
diff --git a/frontend/src/util/index.ts b/frontend/src/util/index.ts
index a924c581a..3ea09e0c3 100644
--- a/frontend/src/util/index.ts
+++ b/frontend/src/util/index.ts
@@ -12,6 +12,12 @@ export function keyOfId(id: string): string {
     return id.substring(2);
 }
 
+/** Constructs event ID for graphQL by adding the "ev" prefix. */
+export const eventId = (key: string) => `ev${key}`;
+
+/** Constructs series ID for graphQL by adding the "sr" prefix. */
+export const seriesId = (key: string) => `sr${key}`;
+
 /**
  * Create a comparison function for `Array.prototype.sort` comparing whatever
  * the given key function returns as numbers.