Event discussion page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/compose/components/compose-form.tsx

@@ -1,6 +1,6 @@
 import classNames from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 import { length } from 'stringz';
 
@@ -47,7 +47,8 @@ const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u20
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What\'s on your mind?' },
-  pollPlaceholder: { id: 'compose_form.poll_placeholder', defaultMessage: 'Add a poll topic...' },
+  pollPlaceholder: { id: 'compose_form.poll_placeholder', defaultMessage: 'Add a poll topic…' },
+  eventPlaceholder: { id: 'compose_form.event_placeholder', defaultMessage: 'Post to this event' },
   spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Post' },
   publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
@@ -238,6 +239,7 @@ const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, cl
   const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
 
   let publishText: string | JSX.Element = '';
+  let textareaPlaceholder: MessageDescriptor;
 
   if (isEditing) {
     publishText = intl.formatMessage(messages.saveChanges);
@@ -263,6 +265,14 @@ const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, cl
     publishText = intl.formatMessage(messages.schedule);
   }
 
+  if (eventDiscussion) {
+    textareaPlaceholder = messages.eventPlaceholder;
+  } else if (hasPoll) {
+    textareaPlaceholder = messages.pollPlaceholder;
+  } else {
+    textareaPlaceholder = messages.placeholder;
+  }
+
   return (
     <Stack className='w-full' space={1} ref={formRef} onClick={handleClick}>
       {scheduledStatusCount > 0 && !eventDiscussion && (
@@ -316,7 +326,7 @@ const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, cl
 
       <AutosuggestTextarea
         ref={(isModalOpen && shouldCondense) ? undefined : autosuggestTextareaRef}
-        placeholder={intl.formatMessage(hasPoll ? messages.pollPlaceholder : messages.placeholder)}
+        placeholder={intl.formatMessage(textareaPlaceholder)}
         disabled={disabled}
         value={text}
         onChange={handleChange}

app/soapbox/features/event/components/event-header.tsx

@@ -21,6 +21,8 @@ import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/t
 
 const messages = defineMessages({
   bannerHeader: { id: 'event.banner', defaultMessage: 'Event banner' },
+  exportIcs: { id: 'event.export_ics', defaultMessage: 'Export to your calendar' },
+  copy: { id: 'event.copy', defaultMessage: 'Copy link to event' },
 });
 
 interface IEventHeader {
@@ -65,7 +67,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const menu: MenuType = [
     {
-      text: 'Export to your calendar',
+      text: intl.formatMessage(messages.exportIcs),
       action: handleExportClick,
       icon: require('@tabler/icons/calendar-plus.svg'),
     },

app/soapbox/features/event/event-discussion.tsx

@@ -1,6 +1,7 @@
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { createSelector } from 'reselect';
 
 import { eventDiscussionCompose } from 'soapbox/actions/compose';
@@ -103,7 +104,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
   }, [props.params.statusId]);
 
   useEffect(() => {
-    dispatch(eventDiscussionCompose(`reply:${props.params.statusId}`, status!));
+    if (isLoaded) dispatch(eventDiscussionCompose(`reply:${props.params.statusId}`, status!));
   }, [isLoaded]);
 
   const handleMoveUp = (id: string) => {
@@ -207,7 +208,9 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
 
   return (
     <Stack space={2}>
-      <ComposeForm id={`reply:${status.id}`} autoFocus={false} eventDiscussion />
+      <div className='sm:p-2 pt-0 border-b border-solid border-gray-200 dark:border-gray-800'>
+        <ComposeForm id={`reply:${status.id}`} autoFocus={false} eventDiscussion />
+      </div>
       <div ref={node} className='thread p-0 sm:p-2 shadow-none'>
         <ScrollableList
           id='thread'
@@ -216,6 +219,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
           onLoadMore={handleLoadMore}
           placeholderComponent={() => <PlaceholderStatus thread />}
           initialTopMostItemIndex={0}
+          emptyMessage={<FormattedMessage id='event.discussion.empty' defaultMessage='No one has commented this event yet. When someone does, they will appear here.' />}
         >
           {children}
         </ScrollableList>

app/soapbox/features/status/index.tsx

@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { defineMessages, useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
 import { createSelector } from 'reselect';
 
 import {
@@ -425,6 +425,12 @@ const Thread: React.FC<IThread> = (props) => {
   const hasAncestors = ancestorsIds.size > 0;
   const hasDescendants = descendantsIds.size > 0;
 
+  if (status?.event) {
+    return (
+      <Redirect to={`/@${status.getIn(['account', 'acct'])}/events/${status.id}`} />
+    );
+  }
+
   if (!status && isLoaded) {
     return (
       <MissingIndicator />