Function EditThreadModal

apps/web/ui/EditThreadModal/index.tsx:35–128

({
  communityId,
  currentUser,
  currentThread,
  open,
  close,
  onSend,
  uploadFiles,
  progress,
  uploading,
  uploads,
  api,
}: Props)

}

export default function EditThreadModal({
  communityId,
  currentUser,
  currentThread,
  open,
  close,
  onSend,
  uploadFiles,
  progress,
  uploading,
  uploads,
  api,
}: Props) {
  const [message, setMessage] = useState('');
  const [users] = useUsersContext();
  const currentMessage = currentThread.messages[0];
  const allUsers = [...users, ...currentMessage.mentions];
  const [title, setTitle] = useState<string>(currentThread.title || '');
  return (
    <Modal open={open} close={close} size="xl">
      <div className={styles.grid}>
        <div className={styles.column}>
          <div className={styles.header}>
            <H3 className={styles.h3}>Edit Thread</H3>
          </div>
          <Field>
            <TextInput
              id="new-thread-title"
              label="Title"
              value={title}
              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                setTitle(event.target.value)
              }
              onKeyUp={(event: React.KeyboardEvent<HTMLInputElement>) => {
                event.stopPropagation();
                event.preventDefault();
              }}
            />
          </Field>
          <Field>
            <MessageForm
              id="inbox-message-form"
              currentUser={currentUser}
              draft={false}
              onSend={(message: string) => {
                return onSend({ title, message });
              }}
              fetchMentions={(term?: string) => {
                if (!term) return Promise.resolve([]);
                return api.fetchMentions(term, communityId);
              }}
              onMessageChange={(message) => setMessage(message)}
              rows={4}
              progress={progress}
              uploading={uploading}
              uploads={uploads}
              sendOnEnter={false}
              preview={false}