Edit distribution lists via story settings menu

ts/state/smart/GlobalModalContainer.tsx

@@ -10,6 +10,7 @@ import { SmartContactModal } from './ContactModal';
 import { SmartForwardMessageModal } from './ForwardMessageModal';
 import { SmartProfileEditorModal } from './ProfileEditorModal';
 import { SmartSafetyNumberModal } from './SafetyNumberModal';
+import { SmartStoriesSettingsModal } from './StoriesSettingsModal';
 
 import { getIntl } from '../selectors/user';
 
@@ -25,6 +26,10 @@ function renderForwardMessageModal(): JSX.Element {
   return <SmartForwardMessageModal />;
 }
 
+function renderStoriesSettings(): JSX.Element {
+  return <SmartStoriesSettingsModal />;
+}
+
 const mapStateToProps = (state: StateType) => {
   const i18n = getIntl(state);
 
@@ -34,6 +39,7 @@ const mapStateToProps = (state: StateType) => {
     renderContactModal,
     renderForwardMessageModal,
     renderProfileEditor,
+    renderStoriesSettings,
     renderSafetyNumber: () => (
       <SmartSafetyNumberModal
         contactID={String(state.globalModals.safetyNumberModalContactId)}

ts/state/smart/Stories.tsx

@@ -27,7 +27,8 @@ function renderStoryCreator({
 export function SmartStories(): JSX.Element | null {
   const storiesActions = useStoriesActions();
   const { showConversation, toggleHideStories } = useConversationsActions();
-  const { toggleForwardMessageModal } = useGlobalModalActions();
+  const { showStoriesSettings, toggleForwardMessageModal } =
+    useGlobalModalActions();
 
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
 
@@ -64,6 +65,7 @@ export function SmartStories(): JSX.Element | null {
       preferredWidthFromStorage={preferredWidthFromStorage}
       renderStoryCreator={renderStoryCreator}
       showConversation={showConversation}
+      showStoriesSettings={showStoriesSettings}
       stories={stories}
       toggleHideStories={toggleHideStories}
       {...storiesActions}

ts/state/smart/StoriesSettingsModal.tsx

@@ -0,0 +1,58 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import type { LocalizerType } from '../../types/Util';
+import type { StateType } from '../reducer';
+import { StoriesSettingsModal } from '../../components/StoriesSettingsModal';
+import {
+  getCandidateContactsForNewGroup,
+  getMe,
+} from '../selectors/conversations';
+import { getDistributionListsWithMembers } from '../selectors/storyDistributionLists';
+import { getIntl } from '../selectors/user';
+import { getPreferredBadgeSelector } from '../selectors/badges';
+import { useGlobalModalActions } from '../ducks/globalModals';
+import { useStoryDistributionListsActions } from '../ducks/storyDistributionLists';
+
+export function SmartStoriesSettingsModal(): JSX.Element | null {
+  const { hideStoriesSettings, toggleSignalConnectionsModal } =
+    useGlobalModalActions();
+  const {
+    allowsRepliesChanged,
+    createDistributionList,
+    deleteDistributionList,
+    hideMyStoriesFrom,
+    removeMemberFromDistributionList,
+    setMyStoriesToAllSignalConnections,
+    updateStoryViewers,
+  } = useStoryDistributionListsActions();
+
+  const getPreferredBadge = useSelector(getPreferredBadgeSelector);
+  const i18n = useSelector<StateType, LocalizerType>(getIntl);
+  const me = useSelector(getMe);
+
+  const candidateConversations = useSelector(getCandidateContactsForNewGroup);
+  const distributionLists = useSelector(getDistributionListsWithMembers);
+
+  return (
+    <StoriesSettingsModal
+      candidateConversations={candidateConversations}
+      distributionLists={distributionLists}
+      hideStoriesSettings={hideStoriesSettings}
+      getPreferredBadge={getPreferredBadge}
+      i18n={i18n}
+      me={me}
+      onDeleteList={deleteDistributionList}
+      onDistributionListCreated={createDistributionList}
+      onHideMyStoriesFrom={hideMyStoriesFrom}
+      onRemoveMember={removeMemberFromDistributionList}
+      onRepliesNReactionsChanged={allowsRepliesChanged}
+      onViewersUpdated={updateStoryViewers}
+      setMyStoriesToAllSignalConnections={setMyStoriesToAllSignalConnections}
+      toggleSignalConnectionsModal={toggleSignalConnectionsModal}
+    />
+  );
+}