From 86d68ac81ca5879311ac8f17723930b626919eb6 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Mon, 24 Jun 2024 11:26:14 -0600
Subject: [PATCH] add title to `TenorMedia` schema type

---
 .../admin/components/MediaContainer/MediaContainer.tsx    | 3 ++-
 .../client/admin/components/MediaContainer/TenorMedia.tsx | 5 +++--
 .../components/ModerateCard/CommentRevisionContainer.tsx  | 8 ++++++++
 server/src/core/server/app/handlers/api/tenor/index.ts    | 1 +
 server/src/core/server/graph/schema/schema.graphql        | 8 ++++++++
 5 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx b/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx
index ed08b3af43..d01ecdb607 100644
--- a/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx
+++ b/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx
@@ -59,7 +59,7 @@ const MediaContainer: FunctionComponent<Props> = ({ comment }) => {
         />
       );
     case "TenorMedia":
-      return <TenorMedia url={media.url} />;
+      return <TenorMedia url={media.url} title={media.title} />;
     case "%other":
       return null;
   }
@@ -85,6 +85,7 @@ const enhanced = withFragmentContainer<Props>({
           }
           ... on TenorMedia {
             url
+            title
           }
           ... on TwitterMedia {
             url
diff --git a/client/src/core/client/admin/components/MediaContainer/TenorMedia.tsx b/client/src/core/client/admin/components/MediaContainer/TenorMedia.tsx
index 5feecbf1db..506a432df7 100644
--- a/client/src/core/client/admin/components/MediaContainer/TenorMedia.tsx
+++ b/client/src/core/client/admin/components/MediaContainer/TenorMedia.tsx
@@ -6,9 +6,10 @@ import styles from "./Media.css";
 
 interface Props {
   url: string | null;
+  title: string | null;
 }
 
-const TenorMedia: FunctionComponent<Props> = ({ url }) => {
+const TenorMedia: FunctionComponent<Props> = ({ url, title }) => {
   const [showAnimated, setShowAnimated] = useState(false);
   const toggleImage = useCallback(() => {
     setShowAnimated(!showAnimated);
@@ -21,7 +22,7 @@ const TenorMedia: FunctionComponent<Props> = ({ url }) => {
           className={styles.image}
           loading="lazy"
           referrerPolicy="no-referrer"
-          alt=""
+          alt={title ?? ""}
         />
       </BaseButton>
     </div>
diff --git a/client/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx b/client/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx
index e0ca1f4a5e..cc8dbc6a47 100644
--- a/client/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx
+++ b/client/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx
@@ -11,6 +11,7 @@ import YouTubeMedia from "../MediaContainer/YouTubeMedia";
 import { CommentRevisionContainer_comment as CommentData } from "coral-admin/__generated__/CommentRevisionContainer_comment.graphql";
 
 import { CommentContent } from "../Comment";
+import TenorMedia from "../MediaContainer/TenorMedia";
 
 interface Props {
   comment: CommentData;
@@ -63,6 +64,9 @@ const CommentRevisionContainer: FunctionComponent<Props> = ({ comment }) => {
                 title={c.media.title}
               />
             )}
+            {c.media && c.media.__typename === "TenorMedia" && (
+              <TenorMedia url={c.media.url} title={c.media.title} />
+            )}
           </div>
         ))}
     </HorizontalGutter>
@@ -93,6 +97,10 @@ const enhanced = withFragmentContainer<Props>({
             still
             video
           }
+          ... on TenorMedia {
+            url
+            title
+          }
           ... on TwitterMedia {
             url
           }
diff --git a/server/src/core/server/app/handlers/api/tenor/index.ts b/server/src/core/server/app/handlers/api/tenor/index.ts
index be32191d9a..ba81ff7e3e 100644
--- a/server/src/core/server/app/handlers/api/tenor/index.ts
+++ b/server/src/core/server/app/handlers/api/tenor/index.ts
@@ -111,6 +111,7 @@ export const tenorSearchHandler =
       json.results.map((r) => {
         return {
           id: r.id,
+          title: r.title,
           url: r.media_formats.gif.url,
           preview: r.media_formats.tinygif.url,
         };
diff --git a/server/src/core/server/graph/schema/schema.graphql b/server/src/core/server/graph/schema/schema.graphql
index 8cef98ce87..0bd243e1ec 100644
--- a/server/src/core/server/graph/schema/schema.graphql
+++ b/server/src/core/server/graph/schema/schema.graphql
@@ -3999,7 +3999,15 @@ type CommentRevisionMetadata {
 TenorMedia is a particular GIF that is provided by the Tenor platform.
 """
 type TenorMedia {
+  """
+  url is the URL to a image of the GIF.
+  """
   url: String!
+
+  """
+  title is the title of the GIF.
+  """
+  title: String
 }
 
 """