[CORL-1183] Fix edit comment form (#3022)

* Fix edit comment form

* clean up editcomment stack for media attachments

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx

@@ -15,7 +15,6 @@ import CLASSES from "coral-stream/classes";
 import { EditCommentFormContainer_comment as CommentData } from "coral-stream/__generated__/EditCommentFormContainer_comment.graphql";
 import { EditCommentFormContainer_settings as SettingsData } from "coral-stream/__generated__/EditCommentFormContainer_settings.graphql";
 import { EditCommentFormContainer_story as StoryData } from "coral-stream/__generated__/EditCommentFormContainer_story.graphql";
-
 import {
   getSubmitStatus,
   shouldTriggerSettingsRefresh,
@@ -46,11 +45,36 @@ interface State {
   submitStatus: SubmitStatus | null;
 }
 
+function getMediaFromComment(comment: CommentData) {
+  if (!comment.revision || !comment.revision.media) {
+    return;
+  }
+  switch (comment.revision.media.__typename) {
+    case "YouTubeMedia":
+      return {
+        type: "youtube",
+        url: comment.revision.media.url,
+      };
+    case "GiphyMedia":
+      return {
+        type: "giphy",
+        url: comment.revision.media.url,
+      };
+    case "TwitterMedia":
+      return {
+        type: "twitter",
+        url: comment.revision.media.url,
+      };
+    default:
+      return;
+  }
+}
+
 export class EditCommentFormContainer extends Component<Props, State> {
   private expiredTimer: any;
   private intitialValues = {
     body: this.props.comment.body || "",
-    media: this.props.comment.revision && this.props.comment.revision.media,
+    media: getMediaFromComment(this.props.comment),
   };
 
   public state: State = {

src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx

@@ -19,7 +19,7 @@ interface Props {
   setMedia: (media: MediaLink | null) => void;
 }
 
-interface Media {
+export interface Media {
   type: "giphy" | "twitter" | "youtube";
   url: string;
   id?: string;
@@ -38,9 +38,7 @@ interface MediaConfig {
 }
 
 const MediaField: FunctionComponent<Props> = (props) => {
-  const field = useField<Media | undefined>("media", {
-    initialValue: undefined,
-  });
+  const field = useField<Media | undefined>("media");
 
   const onGIFSelect = useCallback(
     (gif: GiphyGif) => {
@@ -92,7 +90,9 @@ const MediaField: FunctionComponent<Props> = (props) => {
             onRemove={onRemoveMedia}
           />
         ) : (
-          <GifPreview url={media.url} onRemove={onGIFRemove} title="" />
+          !props.showGIFSelector && (
+            <GifPreview url={media.url} onRemove={onGIFRemove} title="" />
+          )
         ))}
     </>
   );

src/core/server/stacks/editComment.ts

@@ -14,9 +14,11 @@ import { createCommentModerationAction } from "coral-server/models/action/modera
 import {
   editComment,
   EditCommentInput,
-  getLatestRevision,
+  GiphyMedia,
   retrieveComment,
+  TwitterMedia,
   validateEditable,
+  YouTubeMedia,
 } from "coral-server/models/comment";
 import { retrieveStory } from "coral-server/models/story";
 import { Tenant } from "coral-server/models/tenant";
@@ -83,9 +85,6 @@ export default async function edit(
     throw new CommentNotFoundError(input.id);
   }
 
-  // Get the original stale revision.
-  const originalStaleRevision = getLatestRevision(originalStaleComment);
-
   // The editable time is based on the current time, and the edit window
   // length. By subtracting the current date from the edit window length, we
   // get the maximum value for the `createdAt` time that would be permitted
@@ -111,7 +110,7 @@ export default async function edit(
     throw new StoryNotFoundError(originalStaleComment.storyID);
   }
 
-  let media = originalStaleRevision.media;
+  let media: GiphyMedia | TwitterMedia | YouTubeMedia | undefined;
   if (input.media) {
     // TODO: (wyattjoh) check to see if the media is the same.
     media = await attachMedia(tenant, input.media, input.body);