From 404ce309b87f4876559c01520f52b9672c563998 Mon Sep 17 00:00:00 2001
From: dominic <domw30@gmail.com>
Date: Tue, 3 Sep 2024 14:16:23 +0100
Subject: [PATCH 1/3] feat(post-input): create and add new post input component
 with media selection functionality

---
 .../feed/components/create-post/index.tsx     | 104 --------
 .../components/create-post/styles.module.scss |  64 -----
 .../feed/components/post-input/container.tsx  |  61 +++++
 .../feed/components/post-input/index.test.tsx | 104 ++++++++
 .../feed/components/post-input/index.tsx      | 231 ++++++++++++++++++
 .../feed/components/post-input/styles.scss    |  80 ++++++
 src/components/messenger/feed/index.test.tsx  |   4 +-
 src/components/messenger/feed/index.tsx       |  18 +-
 8 files changed, 485 insertions(+), 181 deletions(-)
 delete mode 100644 src/components/messenger/feed/components/create-post/index.tsx
 delete mode 100644 src/components/messenger/feed/components/create-post/styles.module.scss
 create mode 100644 src/components/messenger/feed/components/post-input/container.tsx
 create mode 100644 src/components/messenger/feed/components/post-input/index.test.tsx
 create mode 100644 src/components/messenger/feed/components/post-input/index.tsx
 create mode 100644 src/components/messenger/feed/components/post-input/styles.scss

diff --git a/src/components/messenger/feed/components/create-post/index.tsx b/src/components/messenger/feed/components/create-post/index.tsx
deleted file mode 100644
index e7daed194..000000000
--- a/src/components/messenger/feed/components/create-post/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import { motion, AnimatePresence } from 'framer-motion';
-import { Avatar, Button } from '@zero-tech/zui/components';
-
-import { Key } from '../../../../../lib/keyboard-search';
-
-import styles from './styles.module.scss';
-
-interface CreatePostProps {
-  avatarUrl?: string;
-  isSubmitting?: boolean;
-
-  onSubmit: (message: string) => void;
-}
-
-export const CreatePost = ({ avatarUrl, isSubmitting, onSubmit }: CreatePostProps) => {
-  const [value, setValue] = useState('');
-  const isDisabled = !value.trim() || isSubmitting;
-
-  const handleOnChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (!event.shiftKey && event.key === Key.Enter) {
-      event.preventDefault();
-      handleOnSubmit();
-    }
-  };
-
-  const handleOnSubmit = () => {
-    if (value.trim()) {
-      onSubmit(value);
-      setValue('');
-    }
-  };
-
-  return (
-    <div className={styles.Container}>
-      <div className={styles.Avatar}>
-        <Avatar imageURL={avatarUrl} size={'regular'} />
-      </div>
-      <div className={styles.Create}>
-        <div className={styles.Input}>
-          <AnimatePresence>
-            {isSubmitting && (
-              <motion.div
-                className={styles.Loading}
-                initial={{ width: 0, opacity: 1 }}
-                animate={{ width: '60%', opacity: 1 }}
-                exit={{ width: '100%', opacity: 0 }}
-                transition={{ duration: 0.4 }}
-              />
-            )}
-          </AnimatePresence>
-          <PostInput value={value} onChange={handleOnChange} onKeyDown={handleKeyDown} />
-          <hr />
-        </div>
-        <div className={styles.Actions}>
-          <div className={styles.Media}></div>
-          <Button isDisabled={isDisabled} isLoading={isSubmitting} className={styles.Button} onPress={handleOnSubmit}>
-            Create
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface PostInputProps {
-  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-  value: string;
-}
-
-const PostInput = ({ onChange, onKeyDown, value }: PostInputProps) => {
-  const ref = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.style.height = 'auto';
-      ref.current.style.height = `${ref.current.scrollHeight}px`;
-
-      // Auto-resize on input
-      ref.current.addEventListener('input', () => {
-        ref.current.style.height = 'auto';
-        ref.current.style.height = `${ref.current.scrollHeight}px`;
-      });
-    }
-  }, []);
-
-  return (
-    <textarea
-      className={styles.Input}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-      placeholder='Write a post'
-      ref={ref}
-      rows={2}
-      value={value}
-    />
-  );
-};
diff --git a/src/components/messenger/feed/components/create-post/styles.module.scss b/src/components/messenger/feed/components/create-post/styles.module.scss
deleted file mode 100644
index b93945bc1..000000000
--- a/src/components/messenger/feed/components/create-post/styles.module.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.Container {
-  display: flex;
-  gap: 8px;
-  padding: 16px 8px;
-}
-
-.Create {
-  align-items: flex-end;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 8px;
-  position: relative;
-
-  hr {
-    border: none;
-    border-bottom: 1px solid rgba(245, 245, 245, 0.12);
-    outline: none;
-    width: 100%;
-  }
-}
-
-.Input {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 16px;
-  height: auto;
-  outline: none;
-  resize: none;
-  width: 100%;
-}
-
-.Actions,
-.Media {
-  display: flex;
-  width: 100%;
-  gap: 8px;
-
-  svg {
-    color: var(--color-secondary-11) !important;
-  }
-}
-
-.Button {
-  border-radius: 8px;
-}
-
-.Avatar {
-  pointer-events: none;
-}
-
-.Input {
-  position: relative;
-}
-
-.Loading {
-  background: var(--color-secondary-9);
-  height: 2px;
-  left: 0;
-  position: absolute;
-  top: calc(100% - 8px - 1px);
-  width: 0;
-}
diff --git a/src/components/messenger/feed/components/post-input/container.tsx b/src/components/messenger/feed/components/post-input/container.tsx
new file mode 100644
index 000000000..6addcdc89
--- /dev/null
+++ b/src/components/messenger/feed/components/post-input/container.tsx
@@ -0,0 +1,61 @@
+import React, { RefObject } from 'react';
+
+import { RootState } from '../../../../../store/reducer';
+import { connectContainer } from '../../../../../store/redux-container';
+import { AuthenticationState } from '../../../../../store/authentication/types';
+
+import { PostInput } from '.';
+
+// should move this to a shared location
+import { Media } from '../../../../message-input/utils';
+
+export interface PublicProperties {
+  id?: string;
+  initialValue?: string;
+  isSubmitting?: boolean;
+
+  onSubmit: (message: string, media: Media[]) => void;
+  onPostInputRendered?: (textareaRef: RefObject<HTMLTextAreaElement>) => void;
+}
+
+export interface Properties extends PublicProperties {
+  user: AuthenticationState['user'];
+}
+
+export class Container extends React.Component<Properties> {
+  static mapState(state: RootState): Partial<Properties> {
+    const {
+      authentication: { user },
+    } = state;
+
+    return { user };
+  }
+
+  static mapActions(_props: Properties): Partial<Properties> {
+    return {};
+  }
+
+  onPostInputRendered = (textareaRef: RefObject<HTMLTextAreaElement>) => {
+    const activeConversationId = this.props.id;
+    if (textareaRef && textareaRef.current) {
+      if ((activeConversationId && activeConversationId === textareaRef.current.id) || !activeConversationId) {
+        textareaRef.current.focus();
+      }
+    }
+  };
+
+  render() {
+    return (
+      <PostInput
+        id={this.props.id}
+        initialValue={this.props.initialValue}
+        isSubmitting={this.props.isSubmitting}
+        onSubmit={this.props.onSubmit}
+        onPostInputRendered={this.onPostInputRendered}
+        avatarUrl={this.props.user.data?.profileSummary.profileImage}
+      />
+    );
+  }
+}
+
+export const PostInputContainer = connectContainer<PublicProperties>(Container);
diff --git a/src/components/messenger/feed/components/post-input/index.test.tsx b/src/components/messenger/feed/components/post-input/index.test.tsx
new file mode 100644
index 000000000..fca26eb51
--- /dev/null
+++ b/src/components/messenger/feed/components/post-input/index.test.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { PostInput, Properties } from '.';
+import { Key } from '../../../../../lib/keyboard-search';
+import Dropzone from 'react-dropzone';
+import { config } from '../../../../../config';
+import { Button } from '@zero-tech/zui/components';
+
+describe('PostInput', () => {
+  const subject = (props: Partial<Properties>, child: any = <div />) => {
+    const allProps: Properties = {
+      onSubmit: () => undefined,
+      onPostInputRendered: () => undefined,
+      clipboard: {
+        addPasteListener: (_) => {},
+        removePasteListener: (_) => {},
+      },
+      ...props,
+    };
+
+    return shallow(<PostInput {...allProps}>{child}</PostInput>);
+  };
+
+  it('does not submit post when post state is empty', () => {
+    const onSubmit = jest.fn();
+    const wrapper = subject({ onSubmit });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    const textarea = dropzone.find('textarea');
+    textarea.simulate('keydown', { preventDefault() {}, key: Key.Enter, shiftKey: false });
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('submits post when Enter is pressed', () => {
+    const onSubmit = jest.fn();
+    const wrapper = subject({ onSubmit });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    const textarea = dropzone.find('textarea');
+    textarea.simulate('change', { target: { value: 'Hello' } });
+    textarea.simulate('keydown', { preventDefault() {}, key: Key.Enter, shiftKey: false });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith('Hello', []);
+  });
+
+  it('submits post when Enter is pressed and images have been added', () => {
+    const onSubmit = jest.fn();
+    const dropzoneToMedia = (files) => files;
+    const wrapper = subject({ onSubmit, dropzoneToMedia });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    const textarea = dropzone.find('textarea');
+    wrapper.find(Dropzone).simulate('drop', [{ name: 'image1' }]);
+    textarea.simulate('keydown', { preventDefault() {}, key: Key.Enter, shiftKey: false });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith('', [{ name: 'image1' }]);
+  });
+
+  it('submits post when submit button is clicked', () => {
+    const onSubmit = jest.fn();
+    const wrapper = subject({ onSubmit });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    dropzone.find('textarea').simulate('change', { target: { value: 'Hello' } });
+    dropzone.find(Button).simulate('press');
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith('Hello', []);
+  });
+
+  it('submits post when submit button is clicked and images have been added', () => {
+    const onSubmit = jest.fn();
+    const dropzoneToMedia = (files) => files;
+    const wrapper = subject({ onSubmit, dropzoneToMedia });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    wrapper.find(Dropzone).simulate('drop', [{ name: 'image1' }]);
+    dropzone.find(Button).simulate('press');
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith('', [{ name: 'image1' }]);
+  });
+
+  it('renders Dropzone with correct mime types and max size', () => {
+    const wrapper = subject({});
+    const dropZone = wrapper.find(Dropzone);
+
+    expect(dropZone.prop('accept')).toEqual({ 'image/*': [] });
+    expect(dropZone.prop('maxSize')).toEqual(config.cloudinary.max_file_size);
+  });
+
+  it('call after render', () => {
+    const onPostInputRendered = jest.fn();
+
+    subject({ onPostInputRendered });
+
+    expect(onPostInputRendered).toHaveBeenCalledWith({
+      current: null,
+    });
+  });
+});
diff --git a/src/components/messenger/feed/components/post-input/index.tsx b/src/components/messenger/feed/components/post-input/index.tsx
new file mode 100644
index 000000000..bd6db8130
--- /dev/null
+++ b/src/components/messenger/feed/components/post-input/index.tsx
@@ -0,0 +1,231 @@
+import React, { RefObject } from 'react';
+import Dropzone from 'react-dropzone';
+
+import { config } from '../../../../../config';
+import { Key } from '../../../../../lib/keyboard-search';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Avatar, Button } from '@zero-tech/zui/components';
+import ImageCards from '../../../../../platform-apps/channels/image-cards';
+import { PublicProperties as PublicPropertiesContainer } from './container';
+
+import { bemClassName } from '../../../../../lib/bem';
+import './styles.scss';
+
+// should move these to a shared location
+import Menu from '../../../../message-input/menu/menu';
+import { MediaType } from '../../../../../store/messages';
+import { Media, addImagePreview, dropzoneToMedia, windowClipboard } from '../../../../message-input/utils';
+
+const cn = bemClassName('post-input-container');
+
+export interface Properties extends PublicPropertiesContainer {
+  avatarUrl?: string;
+  isSubmitting?: boolean;
+  clipboard?: {
+    addPasteListener: (listener: EventListenerOrEventListenerObject) => void;
+    removePasteListener: (listener: EventListenerOrEventListenerObject) => void;
+  };
+
+  dropzoneToMedia?: (files: any[]) => Media[];
+}
+
+interface State {
+  value: string;
+  media: Media[];
+}
+
+export class PostInput extends React.Component<Properties, State> {
+  state = {
+    value: this.props.initialValue || '',
+    media: [],
+  };
+
+  private textareaRef: RefObject<HTMLTextAreaElement>;
+
+  constructor(props) {
+    super(props);
+
+    this.textareaRef = React.createRef<HTMLTextAreaElement>();
+  }
+
+  componentDidMount() {
+    if (this.props.onPostInputRendered) {
+      this.props.onPostInputRendered(this.textareaRef);
+    }
+
+    this.clipboard.addPasteListener(this.clipboardEvent);
+    this.adjustTextareaHeight();
+  }
+
+  get clipboard() {
+    return this.props.clipboard || windowClipboard();
+  }
+
+  componentDidUpdate(_prevProps, prevState) {
+    if (prevState.value !== this.state.value) {
+      this.adjustTextareaHeight();
+    }
+
+    if (this.props.onPostInputRendered) {
+      this.props.onPostInputRendered(this.textareaRef);
+    }
+  }
+
+  componentWillUnmount() {
+    this.clipboard.removePasteListener(this.clipboardEvent);
+  }
+
+  adjustTextareaHeight = () => {
+    if (this.textareaRef.current) {
+      const textarea = this.textareaRef.current;
+      textarea.style.height = 'auto';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+
+  get mimeTypes() {
+    return {
+      'image/*': [],
+    };
+  }
+
+  get images() {
+    return this.state.media.filter((m) => m.mediaType === MediaType.Image);
+  }
+
+  onSubmit = (): void => {
+    const { value, media } = this.state;
+    if (value || media.length) {
+      this.props.onSubmit(value, media);
+      this.setState({ value: '', media: [] });
+    }
+  };
+
+  onKeyDown = (event): void => {
+    if (!event.shiftKey && event.key === Key.Enter) {
+      event.preventDefault();
+      this.onSubmit();
+    }
+  };
+
+  onChange = (event): void => {
+    this.setState({ value: event.target.value });
+  };
+
+  removeMediaPreview = (mediaToRemove: { id: string }) => {
+    const media = this.state.media;
+
+    this.setState({
+      media: media.filter((m) => m.id !== mediaToRemove.id),
+    });
+
+    this.props.onPostInputRendered(this.textareaRef);
+  };
+
+  mediaSelected = (newMedia: Media[]): void => {
+    this.setState({ media: [...this.state.media, ...newMedia] });
+    this.props.onPostInputRendered(this.textareaRef);
+  };
+
+  imagesSelected = (acceptedFiles): void => {
+    const newImages: Media[] = this.props.dropzoneToMedia
+      ? this.props.dropzoneToMedia(acceptedFiles)
+      : dropzoneToMedia(acceptedFiles);
+    if (newImages.length) {
+      this.mediaSelected(newImages);
+    }
+  };
+
+  clipboardEvent = async (event) => {
+    if (document.activeElement !== this.textareaRef.current) {
+      return;
+    }
+
+    const items = event.clipboardData.items;
+
+    const newImages: any[] = Array.from(items)
+      .filter((item: any) => item.kind === 'file' && /image\/*/.test(item.type))
+      .map((file: any) => file.getAsFile())
+      .filter(Boolean);
+
+    if (newImages.length !== 0) {
+      this.imagesSelected(await addImagePreview(newImages));
+    }
+  };
+
+  renderInput() {
+    const isDisabled = (!this.state.value.trim() && !this.state.media.length) || this.props.isSubmitting;
+
+    return (
+      <div {...cn('')}>
+        <Dropzone
+          onDrop={this.imagesSelected}
+          noClick
+          accept={this.mimeTypes}
+          maxSize={config.cloudinary.max_file_size}
+        >
+          {({ getRootProps }) => (
+            <div {...getRootProps({ ...cn('drop-zone-text-area') })}>
+              <div {...cn('create-outer')}>
+                <div>
+                  <Avatar {...cn('avatar')} imageURL={this.props.avatarUrl} size={'regular'} />
+                </div>
+                <div {...cn('create-inner')}>
+                  <div {...cn('input')}>
+                    <AnimatePresence>
+                      {this.props.isSubmitting && (
+                        <motion.div
+                          {...cn('loading')}
+                          initial={{ width: 0, opacity: 1 }}
+                          animate={{ width: '60%', opacity: 1 }}
+                          exit={{ width: '100%', opacity: 0 }}
+                          transition={{ duration: 0.4 }}
+                        />
+                      )}
+                    </AnimatePresence>
+                    <textarea
+                      {...cn('input')}
+                      onChange={this.onChange}
+                      onKeyDown={this.onKeyDown}
+                      placeholder='Write a post'
+                      ref={this.textareaRef}
+                      rows={2}
+                      value={this.state.value}
+                    />
+                    <hr />
+                  </div>
+
+                  <div {...cn('image')}>
+                    <ImageCards images={this.images} onRemoveImage={this.removeMediaPreview} size='small' />
+                  </div>
+
+                  <div {...cn('actions')}>
+                    <div {...cn('media')}>
+                      <Menu
+                        onSelected={this.mediaSelected}
+                        mimeTypes={this.mimeTypes}
+                        maxSize={config.cloudinary.max_file_size}
+                      />
+                    </div>
+                    <Button
+                      {...cn('button')}
+                      isDisabled={isDisabled}
+                      isLoading={this.props.isSubmitting}
+                      onPress={this.onSubmit}
+                    >
+                      Create
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </Dropzone>
+      </div>
+    );
+  }
+
+  render() {
+    return <div {...cn('')}>{this.renderInput()}</div>;
+  }
+}
diff --git a/src/components/messenger/feed/components/post-input/styles.scss b/src/components/messenger/feed/components/post-input/styles.scss
new file mode 100644
index 000000000..9ca99260b
--- /dev/null
+++ b/src/components/messenger/feed/components/post-input/styles.scss
@@ -0,0 +1,80 @@
+@use '~@zero-tech/zui/styles/theme' as theme;
+
+@import '../../../../../glass';
+
+.post-input-container {
+  &__create-outer {
+    display: flex;
+    gap: 8px;
+    padding: 16px 8px;
+  }
+
+  &__create-inner {
+    align-items: flex-end;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 4px;
+    position: relative;
+
+    hr {
+      border: none;
+      border-bottom: 1px solid rgba(245, 245, 245, 0.12);
+      outline: none;
+      width: 100%;
+    }
+  }
+
+  &__input {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 16px;
+    height: auto;
+    outline: none;
+    resize: none;
+    width: 100%;
+  }
+
+  &__image {
+    width: 100%;
+  }
+
+  &__actions,
+  &__media {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+
+    svg {
+      color: var(--color-secondary-11) !important;
+    }
+  }
+
+  &__button {
+    border-radius: 8px;
+  }
+
+  &__avatar {
+    pointer-events: none;
+  }
+
+  &__drop-zone-text-area {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+  }
+
+  &__loading {
+    background: var(--color-secondary-9);
+    height: 2px;
+    left: 0;
+    position: absolute;
+    top: calc(100% - 8px - 1px);
+    width: 0;
+  }
+
+  &__input {
+    position: relative;
+  }
+}
diff --git a/src/components/messenger/feed/index.test.tsx b/src/components/messenger/feed/index.test.tsx
index aa0f795a1..e8b34bef2 100644
--- a/src/components/messenger/feed/index.test.tsx
+++ b/src/components/messenger/feed/index.test.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Container as MessengerFeed, Properties } from '.';
 import { StoreBuilder, stubConversation } from '../../../store/test/store';
+import { PostInputContainer } from './components/post-input/container';
 
 describe(MessengerFeed, () => {
   const subject = (props: Partial<Properties>) => {
     const allProps: Properties = {
-      user: { data: null },
       channel: null,
       activeConversationId: 'channel-id',
       isSocialChannel: false,
@@ -22,7 +22,7 @@ describe(MessengerFeed, () => {
     const channel = stubConversation({ name: 'convo-1', hasLoadedMessages: true, messages: [] });
 
     const wrapper = subject({ channel: channel as any, isSocialChannel: true });
-    expect(wrapper).toHaveElement('CreatePost');
+    expect(wrapper).toHaveElement(PostInputContainer);
   });
 
   it('does not render Messenger Feed when isSocialChannel is false', () => {
diff --git a/src/components/messenger/feed/index.tsx b/src/components/messenger/feed/index.tsx
index 4a4360904..ca3fed6d7 100644
--- a/src/components/messenger/feed/index.tsx
+++ b/src/components/messenger/feed/index.tsx
@@ -2,23 +2,24 @@ import React from 'react';
 import { RootState } from '../../../store/reducer';
 import { connectContainer } from '../../../store/redux-container';
 import { ScrollbarContainer } from '../../scrollbar-container';
-import { CreatePost } from './components/create-post';
 import { PostPayload as PayloadPostMessage } from '../../../store/posts/saga';
 import { Channel, denormalize } from '../../../store/channels';
 import { MessageSendStatus } from '../../../store/messages';
 import { sendPost } from '../../../store/posts';
-import { AuthenticationState } from '../../../store/authentication/types';
 import { FeedViewContainer } from './feed-view-container/feed-view-container';
+import { PostInputContainer as PostInput } from './components/post-input/container';
 
 import { bemClassName } from '../../../lib/bem';
 import './styles.scss';
 
+// should move this to a shared location
+import { Media } from '../../message-input/utils';
+
 const cn = bemClassName('messenger-feed');
 
 export interface PublicProperties {}
 
 export interface Properties extends PublicProperties {
-  user: AuthenticationState['user'];
   channel: Channel;
   activeConversationId: string;
   isSocialChannel: boolean;
@@ -30,14 +31,12 @@ export interface Properties extends PublicProperties {
 export class Container extends React.Component<Properties> {
   static mapState(state: RootState): Partial<Properties> {
     const {
-      authentication: { user },
       chat: { activeConversationId, isJoiningConversation },
     } = state;
 
     const currentChannel = denormalize(activeConversationId, state) || null;
 
     return {
-      user,
       channel: currentChannel,
       isJoiningConversation,
       activeConversationId,
@@ -51,12 +50,13 @@ export class Container extends React.Component<Properties> {
     };
   }
 
-  submitPost = (message: string) => {
+  submitPost = (message: string, media: Media[] = []) => {
     const { activeConversationId } = this.props;
 
     let payloadPostMessage = {
       channelId: activeConversationId,
       message: message,
+      files: media,
     };
 
     this.props.sendPost(payloadPostMessage);
@@ -78,11 +78,7 @@ export class Container extends React.Component<Properties> {
     return (
       <div {...cn('')}>
         <ScrollbarContainer variant='on-hover'>
-          <CreatePost
-            avatarUrl={this.props.user.data?.profileSummary.profileImage}
-            onSubmit={this.submitPost}
-            isSubmitting={this.isSubmitting}
-          />
+          <PostInput id={activeConversationId} onSubmit={this.submitPost} isSubmitting={this.isSubmitting} />
 
           <FeedViewContainer channelId={activeConversationId} />
         </ScrollbarContainer>

From 308a1a923614dbd191c6af12790e079aa908a55c Mon Sep 17 00:00:00 2001
From: dominic <domw30@gmail.com>
Date: Wed, 4 Sep 2024 14:39:10 +0100
Subject: [PATCH 2/3] feat(posts-saga/matrix-client): update post saga to
 support media uploads, create optimistic posts, handle media mapping in
 events, and add test coverage for full functionality

---
 src/lib/chat/index.ts               |  10 ++-
 src/lib/chat/matrix-client.ts       |  13 +++-
 src/lib/chat/matrix/chat-message.ts |   6 +-
 src/store/messages/uploadable.ts    |   7 +-
 src/store/posts/saga.test.ts        | 112 +++++++++++++++++++++++-----
 src/store/posts/saga.ts             |  73 +++++++++++++++---
 src/store/posts/utils.ts            |  23 +++++-
 7 files changed, 201 insertions(+), 43 deletions(-)

diff --git a/src/lib/chat/index.ts b/src/lib/chat/index.ts
index 3227fb9f2..b45a4435b 100644
--- a/src/lib/chat/index.ts
+++ b/src/lib/chat/index.ts
@@ -321,8 +321,14 @@ export async function getMessageReadReceipts(roomId: string, messageId: string)
   return await chat.get().matrix.getMessageReadReceipts(roomId, messageId);
 }
 
-export async function uploadFileMessage(channelId: string, media: File, rootMessageId: string = '', optimisticId = '') {
-  return chat.get().matrix.uploadFileMessage(channelId, media, rootMessageId, optimisticId);
+export async function uploadFileMessage(
+  channelId: string,
+  media: File,
+  rootMessageId: string = '',
+  optimisticId = '',
+  isPost: boolean = false
+) {
+  return chat.get().matrix.uploadFileMessage(channelId, media, rootMessageId, optimisticId, isPost);
 }
 
 export async function addRoomToLabel(roomId: string, label: string) {
diff --git a/src/lib/chat/matrix-client.ts b/src/lib/chat/matrix-client.ts
index e1acfd11a..750f18e6a 100644
--- a/src/lib/chat/matrix-client.ts
+++ b/src/lib/chat/matrix-client.ts
@@ -633,7 +633,7 @@ export class MatrixClient implements IChatClient {
     };
   }
 
-  async uploadFileMessage(roomId: string, media: File, rootMessageId: string = '', optimisticId = '') {
+  async uploadFileMessage(roomId: string, media: File, rootMessageId: string = '', optimisticId = '', isPost = false) {
     const isEncrypted = this.matrix.isRoomEncrypted(roomId);
 
     const { width, height } = await getImageDimensions(media);
@@ -671,8 +671,13 @@ export class MatrixClient implements IChatClient {
       optimisticId,
     } as any;
 
-    const messageResult = await this.matrix.sendMessage(roomId, content);
-    this.recordMessageSent(roomId);
+    let messageResult;
+    if (isPost) {
+      messageResult = await this.matrix.sendEvent(roomId, CustomEventType.ROOM_POST as any, content);
+    } else {
+      messageResult = await this.matrix.sendMessage(roomId, content);
+      this.recordMessageSent(roomId);
+    }
 
     // Don't return a full message, only the pertinent attributes that changed.
     return {
@@ -1188,7 +1193,7 @@ export class MatrixClient implements IChatClient {
   }
 
   private async publishPostEvent(event) {
-    this.events.receiveNewMessage(event.room_id, mapEventToPostMessage(event, this.matrix) as any);
+    this.events.receiveNewMessage(event.room_id, (await mapEventToPostMessage(event, this.matrix)) as any);
   }
 
   private publishRoomNameChange = (room: Room) => {
diff --git a/src/lib/chat/matrix/chat-message.ts b/src/lib/chat/matrix/chat-message.ts
index 4eaafb52a..66485998b 100644
--- a/src/lib/chat/matrix/chat-message.ts
+++ b/src/lib/chat/matrix/chat-message.ts
@@ -107,10 +107,11 @@ export function mapEventToAdminMessage(matrixMessage): Message {
   };
 }
 
-export function mapEventToPostMessage(matrixMessage, sdkMatrixClient: SDKMatrixClient) {
+export async function mapEventToPostMessage(matrixMessage, sdkMatrixClient: SDKMatrixClient) {
   const { event_id, content, origin_server_ts, sender: senderId } = matrixMessage;
 
   const senderData = sdkMatrixClient.getUser(senderId);
+  const { media, image, rootMessageId } = await parseMediaData(matrixMessage);
 
   return {
     id: event_id,
@@ -134,6 +135,9 @@ export function mapEventToPostMessage(matrixMessage, sdkMatrixClient: SDKMatrixC
     preview: null,
     sendStatus: MessageSendStatus.SUCCESS,
     isPost: true,
+    media,
+    image,
+    rootMessageId,
   };
 }
 
diff --git a/src/store/messages/uploadable.ts b/src/store/messages/uploadable.ts
index de5c77c15..e1bec16df 100644
--- a/src/store/messages/uploadable.ts
+++ b/src/store/messages/uploadable.ts
@@ -17,20 +17,21 @@ export const createUploadableFile = (file): Uploadable => {
 export interface Uploadable {
   file: any;
   optimisticMessage: Message;
-  upload: (channelId, rootMessageId) => Generator<CallEffect<Message | unknown>>;
+  upload: (channelId, rootMessageId, isPost?) => Generator<CallEffect<Message | unknown>>;
 }
 
 export class UploadableMedia implements Uploadable {
   public optimisticMessage: Message;
 
   constructor(public file) {}
-  *upload(channelId, rootMessageId) {
+  *upload(channelId, rootMessageId, isPost = false) {
     return yield call(
       uploadFileMessage,
       channelId,
       this.file.nativeFile,
       rootMessageId,
-      this.optimisticMessage?.id?.toString()
+      this.optimisticMessage?.id?.toString(),
+      isPost
     );
   }
 }
diff --git a/src/store/posts/saga.test.ts b/src/store/posts/saga.test.ts
index 3af5571bb..6e95bc771 100644
--- a/src/store/posts/saga.test.ts
+++ b/src/store/posts/saga.test.ts
@@ -2,11 +2,10 @@ import { call, select } from 'redux-saga/effects';
 import { expectSaga, testSaga } from 'redux-saga-test-plan';
 import * as matchers from 'redux-saga-test-plan/matchers';
 
-import { sendPost, createOptimisticPost } from './saga';
+import { sendPost, createOptimisticPost, createOptimisticPosts, uploadFileMessages } from './saga';
 import { sendPostByChannelId } from '../../lib/chat';
 import { rawMessagesSelector } from '../messages/saga';
 import { currentUserSelector } from '../authentication/saga';
-import { MessageSendStatus, receive as receiveMessage } from '../messages';
 import { fetchPosts } from './saga';
 import { rootReducer } from '../reducer';
 import { StoreBuilder } from '../test/store';
@@ -15,45 +14,120 @@ import { ConversationStatus, denormalize } from '../channels';
 import { getPostMessagesByChannelId } from '../../lib/chat';
 import { mapMessageSenders } from '../messages/utils.matrix';
 
+const mockCreateUploadableFile = jest.fn();
+jest.mock('../messages/uploadable', () => ({
+  createUploadableFile: (file) => mockCreateUploadableFile(file),
+}));
+
 describe(sendPost, () => {
-  it('creates optimistic post then sends the post successfully', async () => {
+  it('creates optimistic post and sends the post successfully', () => {
     const channelId = 'channel-id';
     const message = 'New post content';
-
     const optimisticPost = { optimisticId: 'optimistic-id', message };
+    const uploadableFiles = [];
 
     testSaga(sendPost, { payload: { channelId, message } })
       .next()
-      .call(createOptimisticPost, channelId, message)
-      .next({ optimisticPost })
-      .call(sendPostByChannelId, channelId, message, 'optimistic-id')
+      .call(createOptimisticPosts, channelId, message, uploadableFiles)
+      .next({ optimisticPost, uploadableFiles })
+      .call(sendPostByChannelId, channelId, message, optimisticPost.optimisticId)
+      .next({ id: 'sent-post-id' })
+      .next()
       .next()
       .isDone();
   });
 
-  it('handles failure when sending the post', async () => {
+  it('creates optimistic file posts then sends files', async () => {
     const channelId = 'channel-id';
-    const message = 'New post content';
-    const optimisticPost = { optimisticId: 'optimistic-id', message };
+    const uploadableFile = { file: { nativeFile: {} } };
+    const files = [{ id: 'file-id' }];
 
-    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mockCreateUploadableFile.mockReturnValue(uploadableFile);
 
-    testSaga(sendPost, { payload: { channelId, message } })
+    testSaga(sendPost, { payload: { channelId, files } })
+      .next()
+      .call(createOptimisticPosts, channelId, undefined, [uploadableFile])
+      .next({ uploadableFiles: [uploadableFile] })
+      .call(uploadFileMessages, channelId, '', [uploadableFile], true)
+      .next()
+      .isDone();
+  });
+
+  it('sends files with a rootMessageId if text is included', async () => {
+    const channelId = 'channel-id';
+    const uploadableFile = { nativeFile: {} };
+    const files = [{ id: 'file-id' }];
+
+    testSaga(sendPost, { payload: { channelId, files } })
+      .next()
+      .next({ optimisticPost: { id: 'root-id' }, uploadableFiles: [uploadableFile] })
+      .next({ id: 'root-id' })
+      .call(uploadFileMessages, channelId, 'root-id', [uploadableFile], true)
+      .next()
+      .isDone();
+  });
+
+  it('sends all but the first file if the text root message fails', async () => {
+    const channelId = 'channel-id';
+    const uploadableFile1 = { nativeFile: {} };
+    const uploadableFile2 = { nativeFile: {} };
+    const files = [{ id: 'file-id' }];
+
+    testSaga(sendPost, { payload: { channelId, files } })
       .next()
-      .call(createOptimisticPost, channelId, message)
-      .next({ optimisticPost })
-      .call(sendPostByChannelId, channelId, message, 'optimistic-id')
-      .throw(new Error('Failed to send post'))
-      .put(receiveMessage({ id: 'optimistic-id', sendStatus: MessageSendStatus.FAILED }))
+      .next({
+        optimisticPost: { id: 'root-id' },
+        uploadableFiles: [
+          uploadableFile1,
+          uploadableFile2,
+        ],
+      })
+      .next(null) // Fail
+      .call(uploadFileMessages, channelId, '', [uploadableFile2], true)
       .next()
       .isDone();
+  });
+});
+
+describe(createOptimisticPosts, () => {
+  it('creates the root post', async () => {
+    const channelId = 'channel-id';
+    const message = 'test message';
 
-    consoleErrorSpy.mockRestore();
+    const { returnValue, storeState } = await expectSaga(createOptimisticPosts, channelId, message, [])
+      .withReducer(rootReducer, new StoreBuilder().build())
+      .run();
+
+    const channel = denormalizeChannel(channelId, storeState);
+    expect(channel.messages[0].message).toEqual(message);
+    expect(channel.messages[0].id).not.toBeNull();
+    expect(channel.messages[0].sender).not.toBeNull();
+    expect(returnValue.optimisticPost).toEqual(expect.objectContaining({ message: 'test message' }));
+  });
+
+  it('creates the uploadable files with optimistic message', async () => {
+    const channelId = 'channel-id';
+    const message = 'test message';
+    const uploadableFile = { file: { name: 'media-file' } };
+
+    const { returnValue, storeState } = await expectSaga(createOptimisticPosts, channelId, message, [
+      uploadableFile,
+    ])
+      .withReducer(rootReducer, new StoreBuilder().build())
+      .run();
+
+    const channel = denormalizeChannel(channelId, storeState);
+    expect(channel.messages[0].message).toEqual(message);
+    expect(channel.messages[0].id).not.toBeNull();
+    expect(channel.messages[0].sender).not.toBeNull();
+    expect(returnValue.uploadableFiles[0].optimisticMessage.media).toEqual(
+      expect.objectContaining({ name: 'media-file' })
+    );
   });
 });
 
 describe(createOptimisticPost, () => {
-  it('creates an optimistic post and updates the channel state', async () => {
+  it('creates an optimistic post', async () => {
     const channelId = 'channel-id';
     const postText = 'This is an optimistic post';
 
diff --git a/src/store/posts/saga.ts b/src/store/posts/saga.ts
index 40873e644..1b8b7a030 100644
--- a/src/store/posts/saga.ts
+++ b/src/store/posts/saga.ts
@@ -2,14 +2,15 @@ import { takeLatest, call, put, select } from 'redux-saga/effects';
 import uniqBy from 'lodash.uniqby';
 
 import { SagaActionTypes } from '.';
-import { MessageSendStatus, receive as receiveMessage } from '../messages';
+import { MediaType } from '../messages';
 import { getPostMessagesByChannelId, sendPostByChannelId } from '../../lib/chat';
-import { rawMessagesSelector } from '../messages/saga';
+import { rawMessagesSelector, sendMessage } from '../messages/saga';
 import { currentUserSelector } from '../authentication/saga';
 import { createOptimisticPostObject } from './utils';
 import { rawChannelSelector, receiveChannel } from '../channels/saga';
 import { ConversationStatus, MessagesFetchState } from '../channels';
 import { mapMessageSenders } from '../messages/utils.matrix';
+import { Uploadable, createUploadableFile } from '../messages/uploadable';
 
 export interface Payload {
   channelId: string;
@@ -17,36 +18,86 @@ export interface Payload {
   messageId?: number;
 }
 
+interface MediaInfo {
+  nativeFile?: File;
+  giphy?: any;
+  name: string;
+  url: string;
+  mediaType: MediaType;
+}
+
 export interface PostPayload {
   channelId?: string;
   message?: string;
+  files?: MediaInfo[];
   optimisticId?: string;
 }
 
 export function* sendPost(action) {
-  const { channelId, message } = action.payload;
+  const { channelId, message, files = [] } = action.payload;
 
-  const { optimisticPost } = yield call(createOptimisticPost, channelId, message);
+  const processedFiles: Uploadable[] = files.map(createUploadableFile);
 
-  try {
-    yield call(sendPostByChannelId, channelId, message, optimisticPost.optimisticId);
-  } catch (error) {
-    console.error('Failed to send post:', error);
-    yield put(receiveMessage({ id: optimisticPost.optimisticId, sendStatus: MessageSendStatus.FAILED }));
+  // Create optimistic posts (for both the text and media files)
+  const { optimisticPost, uploadableFiles } = yield call(createOptimisticPosts, channelId, message, processedFiles);
+
+  let rootMessageId = '';
+  if (optimisticPost) {
+    // If the text post is created, send it first
+    const textPost = yield call(sendPostByChannelId, channelId, message, optimisticPost.optimisticId);
+
+    if (textPost) {
+      rootMessageId = textPost.id;
+    } else {
+      // If the text post fails, shift the first file to avoid sending it
+      uploadableFiles.shift();
+    }
   }
+
+  // Upload the media files after sending the text post
+  yield call(uploadFileMessages, channelId, rootMessageId, uploadableFiles, true);
 }
 
-export function* createOptimisticPost(channelId, postText) {
+export function* createOptimisticPosts(channelId, postText, uploadableFiles?) {
+  let optimisticPost = null;
+
+  // Create optimistic post for text
+  if (postText?.trim()) {
+    const { optimisticPost: createdOptimisticPost } = yield call(createOptimisticPost, channelId, postText);
+    optimisticPost = createdOptimisticPost;
+  }
+
+  // Create optimistic posts for each media file
+  for (const index in uploadableFiles) {
+    const file = uploadableFiles[index].file;
+    // Root the first media file to the optimistic post, others stand alone
+    const rootId = index === '0' ? optimisticPost?.id : '';
+    const { optimisticPost: optimisticFilePost } = yield call(createOptimisticPost, channelId, '', file, rootId);
+    uploadableFiles[index].optimisticMessage = optimisticFilePost;
+  }
+
+  return { optimisticPost, uploadableFiles };
+}
+
+export function* createOptimisticPost(channelId, postText, file = null, rootMessageId = null) {
   const existingMessages = yield select(rawMessagesSelector(channelId));
   const currentUser = yield select(currentUserSelector());
 
-  const optimisticPost = createOptimisticPostObject(postText, currentUser);
+  const optimisticPost = createOptimisticPostObject(postText, currentUser, file, rootMessageId);
 
   yield call(receiveChannel, { id: channelId, messages: [...existingMessages, optimisticPost] });
 
   return { optimisticPost };
 }
 
+export function* uploadFileMessages(channelId, rootMessageId, uploadableFiles: Uploadable[], isPost = false) {
+  for (const uploadableFile of uploadableFiles) {
+    const upload = call([uploadableFile, 'upload'], channelId, rootMessageId, isPost);
+    yield sendMessage(upload, channelId, uploadableFile.optimisticMessage.id);
+    rootMessageId = '';
+  }
+}
+
 export function* fetchPosts(action) {
   const { channelId, referenceTimestamp } = action.payload;
   const channel = yield select(rawChannelSelector(channelId));
diff --git a/src/store/posts/utils.ts b/src/store/posts/utils.ts
index 2832c7397..0b7185f91 100644
--- a/src/store/posts/utils.ts
+++ b/src/store/posts/utils.ts
@@ -1,10 +1,26 @@
 import { v4 as uuidv4 } from 'uuid';
 
-import { Message, MessageSendStatus } from './../messages';
+import { MediaType, Message, MessageSendStatus } from './../messages';
 import { User } from './../authentication/types';
 
-export function createOptimisticPostObject(postText: string, user: User): Message {
+export function createOptimisticPostObject(
+  postText: string,
+  user: User,
+  file?: { name: string; url: string; mediaType: MediaType; giphy: any },
+  rootMessageId?: string
+): Message {
   const id = uuidv4();
+  let media;
+
+  if (file) {
+    media = {
+      type: file.mediaType,
+      url: file.giphy ? file.giphy.images.downsized.url : file.url,
+      name: file.name,
+      height: 0,
+      width: 0,
+    };
+  }
 
   return {
     createdAt: Date.now(),
@@ -24,8 +40,9 @@ export function createOptimisticPostObject(postText: string, user: User): Messag
     },
     updatedAt: 0,
     preview: null,
-    media: null,
+    media,
     sendStatus: MessageSendStatus.IN_PROGRESS,
     isPost: true,
+    rootMessageId,
   };
 }

From 80ff320da148e8a0a4b8c0a2f2ce3f81fbfcc22b Mon Sep 17 00:00:00 2001
From: dominic <domw30@gmail.com>
Date: Wed, 4 Sep 2024 14:48:09 +0100
Subject: [PATCH 3/3] feat: add test coverage for upload file messages (posts)

---
 src/store/posts/saga.test.ts | 46 ++++++++++++++++++++++++++++++++++++
 src/store/posts/saga.ts      |  2 +-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/store/posts/saga.test.ts b/src/store/posts/saga.test.ts
index 6e95bc771..2a17e4b0c 100644
--- a/src/store/posts/saga.test.ts
+++ b/src/store/posts/saga.test.ts
@@ -148,6 +148,52 @@ describe(createOptimisticPost, () => {
   });
 });
 
+describe(uploadFileMessages, () => {
+  it('uploads an uploadable file', async () => {
+    const imageCreationResponse = { id: 'image-message-id', optimisticId: 'optimistic-id' };
+    const upload = jest.fn().mockReturnValue(imageCreationResponse);
+    const uploadable = { upload, optimisticMessage: { id: 'optimistic-id' } } as any;
+    const channelId = 'channel-id';
+
+    const initialState = new StoreBuilder().withConversationList({
+      id: channelId,
+      messages: [{ id: 'optimistic-id' } as any],
+    });
+
+    const { storeState } = await expectSaga(uploadFileMessages, channelId, '', [uploadable], true)
+      .withReducer(rootReducer, initialState.build())
+      .run();
+
+    const channel = denormalizeChannel(channelId, storeState);
+    expect(channel.messages).toHaveLength(1);
+    expect(channel.messages[0].id).toEqual('optimistic-id');
+  });
+
+  it('first media file sets its rootMessageId', async () => {
+    const imageCreationResponse = { id: 'image-message-id' };
+    const upload1 = jest.fn().mockReturnValue(imageCreationResponse);
+    const upload2 = jest.fn().mockReturnValue(imageCreationResponse);
+    const uploadable1 = { upload: upload1, optimisticMessage: { id: 'id-1' } } as any;
+    const uploadable2 = { upload: upload2, optimisticMessage: { id: 'id-2' } } as any;
+    const channelId = 'channel-id';
+    const rootMessageId = 'root-message-id';
+
+    await expectSaga(
+      uploadFileMessages,
+      channelId,
+      rootMessageId,
+      [
+        uploadable1,
+        uploadable2,
+      ],
+      true
+    ).run();
+
+    expect(upload1).toHaveBeenCalledWith(channelId, rootMessageId, true);
+    expect(upload2).toHaveBeenCalledWith(channelId, '', true);
+  });
+});
+
 describe(fetchPosts, () => {
   function subject(...args: Parameters<typeof expectSaga>) {
     return expectSaga(...args).provide([
diff --git a/src/store/posts/saga.ts b/src/store/posts/saga.ts
index 1b8b7a030..5b4d0f8a9 100644
--- a/src/store/posts/saga.ts
+++ b/src/store/posts/saga.ts
@@ -1,4 +1,4 @@
-import { takeLatest, call, put, select } from 'redux-saga/effects';
+import { takeLatest, call, select } from 'redux-saga/effects';
 import uniqBy from 'lodash.uniqby';
 
 import { SagaActionTypes } from '.';