Fixed all connections count and renamed MY_STORIES_ID and EditMyStoriesPrivacyModal
This commit is contained in:
parent
be6e988a95
commit
45069673ce
16 changed files with 86 additions and 82 deletions
|
@ -10,7 +10,7 @@ import { within, userEvent } from '@storybook/testing-library';
|
|||
|
||||
import type { PropsType } from './MyStories';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import { MY_STORIES_ID } from '../types/Stories';
|
||||
import { MY_STORY_ID } from '../types/Stories';
|
||||
import { MyStories } from './MyStories';
|
||||
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
|
||||
import { getFakeMyStory } from '../test-both/helpers/getFakeStory';
|
||||
|
@ -89,7 +89,7 @@ const interactionTest: PlayFunction<ReactFramework, PropsType> = async ({
|
|||
|
||||
export const SingleListStories = Template.bind({});
|
||||
SingleListStories.args = {
|
||||
myStories: [getFakeMyStory(MY_STORIES_ID)],
|
||||
myStories: [getFakeMyStory(MY_STORY_ID)],
|
||||
};
|
||||
SingleListStories.play = interactionTest;
|
||||
SingleListStories.story = {
|
||||
|
@ -99,7 +99,7 @@ SingleListStories.story = {
|
|||
export const MultiListStories = Template.bind({});
|
||||
MultiListStories.args = {
|
||||
myStories: [
|
||||
getFakeMyStory(MY_STORIES_ID),
|
||||
getFakeMyStory(MY_STORY_ID),
|
||||
getFakeMyStory(uuid(), 'Cool Peeps'),
|
||||
getFakeMyStory(uuid(), 'Family'),
|
||||
],
|
||||
|
|
|
@ -16,7 +16,7 @@ import {
|
|||
getListViewers,
|
||||
DistributionListSettingsModal,
|
||||
EditDistributionListModal,
|
||||
EditMyStoriesPrivacy,
|
||||
EditMyStoryPrivacy,
|
||||
Page as StoriesSettingsPage,
|
||||
} from './StoriesSettingsModal';
|
||||
import type { StoryDistributionListWithMembersDataType } from '../types/Stories';
|
||||
|
@ -28,7 +28,7 @@ import { Checkbox } from './Checkbox';
|
|||
import { ConfirmationDialog } from './ConfirmationDialog';
|
||||
import { ContextMenu } from './ContextMenu';
|
||||
|
||||
import { MY_STORIES_ID, getStoryDistributionListName } from '../types/Stories';
|
||||
import { MY_STORY_ID, getStoryDistributionListName } from '../types/Stories';
|
||||
import type { RenderModalPage, ModalPropsType } from './Modal';
|
||||
import { PagedModal, ModalPage } from './Modal';
|
||||
import { StoryDistributionListName } from './StoryDistributionListName';
|
||||
|
@ -97,7 +97,7 @@ function getListMemberUuids(
|
|||
): Array<string> {
|
||||
const memberUuids = list.members.map(({ uuid }) => uuid).filter(isNotNil);
|
||||
|
||||
if (list.id === MY_STORIES_ID && list.isBlockList) {
|
||||
if (list.id === MY_STORY_ID && list.isBlockList) {
|
||||
const excludeUuids = new Set<string>(memberUuids);
|
||||
return signalConnections
|
||||
.map(conversation => conversation.uuid)
|
||||
|
@ -230,14 +230,14 @@ export const SendStoryModal = ({
|
|||
// during the first time posting to My Stories experience where we have
|
||||
// to select the privacy settings.
|
||||
const ogMyStories = useMemo(
|
||||
() => distributionLists.find(list => list.id === MY_STORIES_ID),
|
||||
() => distributionLists.find(list => list.id === MY_STORY_ID),
|
||||
[distributionLists]
|
||||
);
|
||||
|
||||
const initialMyStories: StoryDistributionListWithMembersDataType = useMemo(
|
||||
() => ({
|
||||
allowsReplies: true,
|
||||
id: MY_STORIES_ID,
|
||||
id: MY_STORY_ID,
|
||||
name: i18n('Stories__mine'),
|
||||
isBlockList: ogMyStories?.isBlockList ?? true,
|
||||
members: ogMyStories?.members || [],
|
||||
|
@ -310,7 +310,7 @@ export const SendStoryModal = ({
|
|||
setMyStoriesToAllSignalConnections();
|
||||
}
|
||||
} else {
|
||||
onViewersUpdated(MY_STORIES_ID, stagedMyStoriesMemberUuids);
|
||||
onViewersUpdated(MY_STORY_ID, stagedMyStoriesMemberUuids);
|
||||
}
|
||||
|
||||
setSelectedContacts([]);
|
||||
|
@ -332,11 +332,12 @@ export const SendStoryModal = ({
|
|||
onClose={handleClose}
|
||||
{...modalCommonProps}
|
||||
>
|
||||
<EditMyStoriesPrivacy
|
||||
<EditMyStoryPrivacy
|
||||
hasDisclaimerAbove
|
||||
i18n={i18n}
|
||||
learnMore="SendStoryModal__privacy-disclaimer"
|
||||
myStories={stagedMyStories}
|
||||
signalConnectionsCount={signalConnections.length}
|
||||
onClickExclude={() => {
|
||||
let nextSelectedContacts = stagedMyStories.members;
|
||||
|
||||
|
@ -385,6 +386,7 @@ export const SendStoryModal = ({
|
|||
getPreferredBadge={getPreferredBadge}
|
||||
i18n={i18n}
|
||||
listToEdit={listToEdit}
|
||||
signalConnectionsCount={signalConnections.length}
|
||||
onRemoveMember={onRemoveMember}
|
||||
onRepliesNReactionsChanged={onRepliesNReactionsChanged}
|
||||
setConfirmDeleteList={setConfirmDeleteList}
|
||||
|
@ -595,7 +597,7 @@ export const SendStoryModal = ({
|
|||
const fullList = sortBy(
|
||||
[...groupStories, ...distributionLists],
|
||||
listOrGroup => {
|
||||
if (listOrGroup.id === MY_STORIES_ID) {
|
||||
if (listOrGroup.id === MY_STORY_ID) {
|
||||
return Number.NEGATIVE_INFINITY;
|
||||
}
|
||||
return (
|
||||
|
@ -618,7 +620,7 @@ export const SendStoryModal = ({
|
|||
name="SendStoryModal__distribution-list"
|
||||
onChange={(value: boolean) => {
|
||||
if (
|
||||
list.id === MY_STORIES_ID &&
|
||||
list.id === MY_STORY_ID &&
|
||||
hasFirstStoryPostExperience &&
|
||||
value
|
||||
) {
|
||||
|
@ -643,7 +645,7 @@ export const SendStoryModal = ({
|
|||
<ContextMenu
|
||||
i18n={i18n}
|
||||
menuOptions={
|
||||
list.id === MY_STORIES_ID
|
||||
list.id === MY_STORY_ID
|
||||
? [
|
||||
{
|
||||
label: i18n('StoriesSettings__context-menu'),
|
||||
|
@ -676,7 +678,7 @@ export const SendStoryModal = ({
|
|||
className="SendStoryModal__distribution-list__label"
|
||||
htmlFor={id}
|
||||
>
|
||||
{list.id === MY_STORIES_ID ? (
|
||||
{list.id === MY_STORY_ID ? (
|
||||
<Avatar
|
||||
acceptedMessageRequest={me.acceptedMessageRequest}
|
||||
avatarPath={me.avatarPath}
|
||||
|
@ -703,13 +705,12 @@ export const SendStoryModal = ({
|
|||
</div>
|
||||
|
||||
<div className="SendStoryModal__distribution-list__description">
|
||||
{hasFirstStoryPostExperience &&
|
||||
list.id === MY_STORIES_ID ? (
|
||||
{hasFirstStoryPostExperience && list.id === MY_STORY_ID ? (
|
||||
i18n('SendStoryModal__choose-who-can-view')
|
||||
) : (
|
||||
<>
|
||||
<span className="SendStoryModal__rtl-span">
|
||||
{list.id === MY_STORIES_ID
|
||||
{list.id === MY_STORY_ID
|
||||
? getI18nForMyStory(list, i18n)
|
||||
: i18n('SendStoryModal__custom-story')}
|
||||
</span>
|
||||
|
|
|
@ -23,7 +23,7 @@ import { ContactPill } from './ContactPill';
|
|||
import { ConversationList, RowType } from './ConversationList';
|
||||
import { Input } from './Input';
|
||||
import { Intl } from './Intl';
|
||||
import { MY_STORIES_ID, getStoryDistributionListName } from '../types/Stories';
|
||||
import { MY_STORY_ID, getStoryDistributionListName } from '../types/Stories';
|
||||
import { PagedModal, ModalPage } from './Modal';
|
||||
import { SearchInput } from './SearchInput';
|
||||
import { StoryDistributionListName } from './StoryDistributionListName';
|
||||
|
@ -104,7 +104,7 @@ export function getListViewers(
|
|||
): string {
|
||||
let memberCount = list.members.length;
|
||||
|
||||
if (list.id === MY_STORIES_ID && list.isBlockList) {
|
||||
if (list.id === MY_STORY_ID && list.isBlockList) {
|
||||
memberCount = list.isBlockList
|
||||
? signalConnections.length - list.members.length
|
||||
: signalConnections.length;
|
||||
|
@ -143,7 +143,7 @@ function DistributionListItem({
|
|||
signalConnections,
|
||||
onSelectItemToEdit,
|
||||
}: DistributionListItemProps) {
|
||||
const isMyStories = distributionList.id === MY_STORIES_ID;
|
||||
const isMyStory = distributionList.id === MY_STORY_ID;
|
||||
return (
|
||||
<button
|
||||
className="StoriesSettingsModal__list"
|
||||
|
@ -153,7 +153,7 @@ function DistributionListItem({
|
|||
type="button"
|
||||
>
|
||||
<span className="StoriesSettingsModal__list__left">
|
||||
{isMyStories ? (
|
||||
{isMyStory ? (
|
||||
<Avatar
|
||||
acceptedMessageRequest={me.acceptedMessageRequest}
|
||||
avatarPath={me.avatarPath}
|
||||
|
@ -176,7 +176,7 @@ function DistributionListItem({
|
|||
name={distributionList.name}
|
||||
/>
|
||||
<span className="StoriesSettingsModal__list__viewers">
|
||||
{isMyStories
|
||||
{isMyStory
|
||||
? getI18nForMyStory(distributionList, i18n)
|
||||
: i18n('icu:StoriesSettings__custom-story-subtitle')}
|
||||
·
|
||||
|
@ -354,6 +354,7 @@ export const StoriesSettingsModal = ({
|
|||
getPreferredBadge={getPreferredBadge}
|
||||
i18n={i18n}
|
||||
listToEdit={listToEdit}
|
||||
signalConnectionsCount={signalConnections.length}
|
||||
onRemoveMember={onRemoveMember}
|
||||
onRepliesNReactionsChanged={onRepliesNReactionsChanged}
|
||||
setConfirmDeleteList={setConfirmDeleteList}
|
||||
|
@ -542,6 +543,7 @@ export const StoriesSettingsModal = ({
|
|||
type DistributionListSettingsModalPropsType = {
|
||||
i18n: LocalizerType;
|
||||
listToEdit: StoryDistributionListWithMembersDataType;
|
||||
signalConnectionsCount: number;
|
||||
setConfirmDeleteList: (_: { id: string; name: string }) => unknown;
|
||||
setPage: (page: Page) => unknown;
|
||||
setSelectedContacts: (contacts: Array<ConversationType>) => unknown;
|
||||
|
@ -569,6 +571,7 @@ export const DistributionListSettingsModal = ({
|
|||
setPage,
|
||||
setSelectedContacts,
|
||||
toggleSignalConnectionsModal,
|
||||
signalConnectionsCount,
|
||||
}: DistributionListSettingsModalPropsType): JSX.Element => {
|
||||
const [confirmRemoveMember, setConfirmRemoveMember] = useState<
|
||||
| undefined
|
||||
|
@ -579,7 +582,7 @@ export const DistributionListSettingsModal = ({
|
|||
}
|
||||
>();
|
||||
|
||||
const isMyStories = listToEdit.id === MY_STORIES_ID;
|
||||
const isMyStory = listToEdit.id === MY_STORY_ID;
|
||||
|
||||
const modalTitle = getStoryDistributionListName(
|
||||
i18n,
|
||||
|
@ -596,7 +599,7 @@ export const DistributionListSettingsModal = ({
|
|||
title={modalTitle}
|
||||
{...modalCommonProps}
|
||||
>
|
||||
{!isMyStories && (
|
||||
{!isMyStory && (
|
||||
<>
|
||||
<div className="StoriesSettingsModal__list StoriesSettingsModal__list--no-pointer">
|
||||
<span className="StoriesSettingsModal__list__left">
|
||||
|
@ -619,8 +622,8 @@ export const DistributionListSettingsModal = ({
|
|||
{i18n('StoriesSettings__who-can-see')}
|
||||
</div>
|
||||
|
||||
{isMyStories && (
|
||||
<EditMyStoriesPrivacy
|
||||
{isMyStory && (
|
||||
<EditMyStoryPrivacy
|
||||
i18n={i18n}
|
||||
learnMore="StoriesSettings__mine__disclaimer"
|
||||
myStories={listToEdit}
|
||||
|
@ -635,10 +638,11 @@ export const DistributionListSettingsModal = ({
|
|||
setMyStoriesToAllSignalConnections
|
||||
}
|
||||
toggleSignalConnectionsModal={toggleSignalConnectionsModal}
|
||||
signalConnectionsCount={signalConnectionsCount}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isMyStories && (
|
||||
{!isMyStory && (
|
||||
<>
|
||||
<button
|
||||
className="StoriesSettingsModal__list"
|
||||
|
@ -714,7 +718,7 @@ export const DistributionListSettingsModal = ({
|
|||
onChange={value => onRepliesNReactionsChanged(listToEdit.id, value)}
|
||||
/>
|
||||
|
||||
{!isMyStories && (
|
||||
{!isMyStory && (
|
||||
<>
|
||||
<hr className="StoriesSettingsModal__divider" />
|
||||
|
||||
|
@ -782,7 +786,7 @@ function CheckboxRender({
|
|||
);
|
||||
}
|
||||
|
||||
type EditMyStoriesPrivacyPropsType = {
|
||||
type EditMyStoryPrivacyPropsType = {
|
||||
hasDisclaimerAbove?: boolean;
|
||||
i18n: LocalizerType;
|
||||
learnMore: string;
|
||||
|
@ -790,12 +794,13 @@ type EditMyStoriesPrivacyPropsType = {
|
|||
onClickExclude: () => unknown;
|
||||
onClickOnlyShareWith: () => unknown;
|
||||
setSelectedContacts: (contacts: Array<ConversationType>) => unknown;
|
||||
signalConnectionsCount: number;
|
||||
} & Pick<
|
||||
PropsType,
|
||||
'setMyStoriesToAllSignalConnections' | 'toggleSignalConnectionsModal'
|
||||
>;
|
||||
|
||||
export const EditMyStoriesPrivacy = ({
|
||||
export const EditMyStoryPrivacy = ({
|
||||
hasDisclaimerAbove,
|
||||
i18n,
|
||||
learnMore,
|
||||
|
@ -805,7 +810,8 @@ export const EditMyStoriesPrivacy = ({
|
|||
setSelectedContacts,
|
||||
setMyStoriesToAllSignalConnections,
|
||||
toggleSignalConnectionsModal,
|
||||
}: EditMyStoriesPrivacyPropsType): JSX.Element => {
|
||||
signalConnectionsCount,
|
||||
}: EditMyStoryPrivacyPropsType): JSX.Element => {
|
||||
const disclaimerElement = (
|
||||
<div className="StoriesSettingsModal__disclaimer">
|
||||
<Intl
|
||||
|
@ -849,7 +855,7 @@ export const EditMyStoriesPrivacy = ({
|
|||
checked && (
|
||||
<>
|
||||
{i18n('icu:StoriesSettings__viewers', {
|
||||
count: myStories.members.length,
|
||||
count: signalConnectionsCount,
|
||||
})}
|
||||
</>
|
||||
)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue