Fixed all connections count and renamed MY_STORIES_ID and EditMyStoriesPrivacyModal

This commit is contained in:
Alvaro 2022-11-10 08:51:39 -07:00 committed by GitHub
parent be6e988a95
commit 45069673ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 86 additions and 82 deletions

View file

@ -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'),
],

View file

@ -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>

View file

@ -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')}
&nbsp;&middot;&nbsp;
@ -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,
})}
</>
)