Support for creating New Groups

ts/components/conversation/Timeline.tsx

@@ -15,9 +15,11 @@ import {
 import { ScrollDownButton } from './ScrollDownButton';
 
 import { LocalizerType } from '../../types/Util';
+import { ConversationType } from '../../state/ducks/conversations';
 
 import { PropsActions as MessageActionsType } from './Message';
 import { PropsActions as SafetyNumberActionsType } from './SafetyNumberNotification';
+import { NewlyCreatedGroupInvitedContactsDialog } from '../NewlyCreatedGroupInvitedContactsDialog';
 
 const AT_BOTTOM_THRESHOLD = 15;
 const NEAR_BOTTOM_THRESHOLD = 15;
@@ -48,6 +50,7 @@ type PropsHousekeepingType = {
   isGroupV1AndDisabled?: boolean;
 
   selectedMessageId?: string;
+  invitedContactsForNewlyCreatedGroup: Array<ConversationType>;
 
   i18n: LocalizerType;
 
@@ -68,6 +71,7 @@ type PropsHousekeepingType = {
 
 type PropsActionsType = {
   clearChangedMessages: (conversationId: string) => unknown;
+  clearInvitedConversationsForNewlyCreatedGroup: () => void;
   setLoadCountdownStart: (
     conversationId: string,
     loadCountdownStart?: number
@@ -1063,7 +1067,14 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
   };
 
   public render(): JSX.Element | null {
-    const { i18n, id, items, isGroupV1AndDisabled } = this.props;
+    const {
+      clearInvitedConversationsForNewlyCreatedGroup,
+      i18n,
+      id,
+      items,
+      isGroupV1AndDisabled,
+      invitedContactsForNewlyCreatedGroup,
+    } = this.props;
     const {
       shouldShowScrollDownButton,
       areUnreadBelowCurrentPosition,
@@ -1077,60 +1088,70 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     }
 
     return (
-      <div
-        className={classNames(
-          'module-timeline',
-          isGroupV1AndDisabled ? 'module-timeline--disabled' : null
-        )}
-        role="presentation"
-        tabIndex={-1}
-        onBlur={this.handleBlur}
-        onKeyDown={this.handleKeyDown}
-      >
-        <AutoSizer>
-          {({ height, width }) => {
-            if (this.mostRecentWidth && this.mostRecentWidth !== width) {
-              this.resizeFlag = true;
+      <>
+        <div
+          className={classNames(
+            'module-timeline',
+            isGroupV1AndDisabled ? 'module-timeline--disabled' : null
+          )}
+          role="presentation"
+          tabIndex={-1}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+        >
+          <AutoSizer>
+            {({ height, width }) => {
+              if (this.mostRecentWidth && this.mostRecentWidth !== width) {
+                this.resizeFlag = true;
 
-              setTimeout(this.resize, 0);
-            } else if (
-              this.mostRecentHeight &&
-              this.mostRecentHeight !== height
-            ) {
-              setTimeout(this.onHeightOnlyChange, 0);
-            }
+                setTimeout(this.resize, 0);
+              } else if (
+                this.mostRecentHeight &&
+                this.mostRecentHeight !== height
+              ) {
+                setTimeout(this.onHeightOnlyChange, 0);
+              }
 
-            this.mostRecentWidth = width;
-            this.mostRecentHeight = height;
+              this.mostRecentWidth = width;
+              this.mostRecentHeight = height;
 
-            return (
-              <List
-                deferredMeasurementCache={this.cellSizeCache}
-                height={height}
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onScroll={this.onScroll as any}
-                overscanRowCount={10}
-                ref={this.listRef}
-                rowCount={rowCount}
-                rowHeight={this.cellSizeCache.rowHeight}
-                rowRenderer={this.rowRenderer}
-                scrollToAlignment="start"
-                scrollToIndex={scrollToIndex}
-                tabIndex={-1}
-                width={width}
-              />
-            );
-          }}
-        </AutoSizer>
-        {shouldShowScrollDownButton ? (
-          <ScrollDownButton
-            conversationId={id}
-            withNewMessages={areUnreadBelowCurrentPosition}
-            scrollDown={this.onClickScrollDownButton}
+              return (
+                <List
+                  deferredMeasurementCache={this.cellSizeCache}
+                  height={height}
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  onScroll={this.onScroll as any}
+                  overscanRowCount={10}
+                  ref={this.listRef}
+                  rowCount={rowCount}
+                  rowHeight={this.cellSizeCache.rowHeight}
+                  rowRenderer={this.rowRenderer}
+                  scrollToAlignment="start"
+                  scrollToIndex={scrollToIndex}
+                  tabIndex={-1}
+                  width={width}
+                />
+              );
+            }}
+          </AutoSizer>
+          {shouldShowScrollDownButton ? (
+            <ScrollDownButton
+              conversationId={id}
+              withNewMessages={areUnreadBelowCurrentPosition}
+              scrollDown={this.onClickScrollDownButton}
+              i18n={i18n}
+            />
+          ) : null}
+        </div>
+
+        {Boolean(invitedContactsForNewlyCreatedGroup.length) && (
+          <NewlyCreatedGroupInvitedContactsDialog
+            contacts={invitedContactsForNewlyCreatedGroup}
             i18n={i18n}
+            onClose={clearInvitedConversationsForNewlyCreatedGroup}
           />
-        ) : null}
-      </div>
+        )}
+      </>
     );
   }
 }