diff --git a/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx index 3837684f8..6168bb198 100644 --- a/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx +++ b/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 { 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 = { diff --git a/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx b/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx index 37c4ae912..bc9da154d 100644 --- a/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx +++ b/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) => { - const field = useField("media", { - initialValue: undefined, - }); + const field = useField("media"); const onGIFSelect = useCallback( (gif: GiphyGif) => { @@ -92,7 +90,9 @@ const MediaField: FunctionComponent = (props) => { onRemove={onRemoveMedia} /> ) : ( - + !props.showGIFSelector && ( + + ) ))} ); diff --git a/src/core/server/stacks/editComment.ts b/src/core/server/stacks/editComment.ts index 72b6d50b1..3b63fa9aa 100644 --- a/src/core/server/stacks/editComment.ts +++ b/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);