Page MenuHomePhabricator
Differential D13509

[native] join community alert handler
AbandonedPublic
Actions

Authored by varun on Sep 27 2024, 1:03 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Apr 7, 8:42 PM
Unknown Object (File)
Sun, Mar 30, 10:28 AM
Unknown Object (File)
Sat, Mar 29, 11:12 PM
Unknown Object (File)
Fri, Mar 28, 11:52 PM
Unknown Object (File)
Sun, Mar 23, 1:01 PM
Unknown Object (File)
Mar 20 2025, 7:12 AM
Unknown Object (File)
Mar 1 2025, 3:38 PM
Unknown Object (File)
Feb 20 2025, 9:55 AM
View All 50 Files
Subscribers
tomek

Details

Reviewers
ashoat
Summary

we'll use this handler to determine when to display modal containing list of communities to user

Depends on D13508

Test Plan

confirmed that redux was successfully updated with the new alert data and that the modal was displayed

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

varun created this revision.Sep 27 2024, 1:03 PM
Herald added a subscriber: tomek. · View Herald TranscriptSep 27 2024, 1:03 PM
varun published this revision for review.Sep 27 2024, 1:04 PM

need to move to lib. publishing and then will plan changes

varun planned changes to this revision.Sep 27 2024, 1:04 PM

this handler component should be in lib

Harbormaster completed remote builds in B31916: Diff 44657.Sep 27 2024, 1:19 PM
ashoat requested changes to this revision.Sep 28 2024, 9:37 AM
ashoat added inline comments.
lib/utils/push-alerts.js
39

Wait so you want to show this screen once a day...?

ashoat added a comment.Sep 28 2024, 9:37 AM

this handler component should be in lib

Sounds complicated given navigation differences

varun abandoned this revision.Feb 3 2025, 6:57 PM
ashoat mentioned this in D14053: [native] DisplayCommunityDirectoryPrompt.Feb 11 2025, 9:30 PM

Revision Contents
Changeset List

PathSize
lib/
utils/
5 lines
native/
components/
74 lines
2 lines

Diff 44657

View Options

lib/utils/push-alerts.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; import { useAddUsersPermissions } from 'lib/permissions/add-users-permissions.js';
import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js'; import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { import { roleIsAdminRole } from 'lib/shared/thread-utils.js';
roleIsAdminRole,
useThreadHasPermission,
} from 'lib/shared/thread-utils.js';
import type { RelativeMemberInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { RelativeMemberInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { threadTypeIsCommunityRoot } from 'lib/types/thread-types-enum.js';
import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js'; import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
import { AddMembersModal } from './add-members-modal.react.js'; import { AddMembersModal } from './add-members-modal.react.js';
import ThreadMembersList from './members-list.react.js'; import ThreadMembersList from './members-list.react.js';
import css from './members-modal.css'; import css from './members-modal.css';
import Button from '../../../components/button.react.js'; import Button from '../../../components/button.react.js';
import Tabs, { type TabData } from '../../../components/tabs.react.js'; import Tabs, { type TabData } from '../../../components/tabs.react.js';
import ManageInviteLinksModal from '../../../invite-links/manage-invite-links-modal.react.js'; import ManageInviteLinksModal from '../../../invite-links/manage-invite-links-modal.react.js';
▲ Show 20 Lines • Show All 92 Lines • ▼ Show 20 Lines const renderModalContent = React.useCallback(
), ),
[threadID], [threadID],
); );
const { pushModal, popModal } = useModalContext(); const { pushModal, popModal } = useModalContext();
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const inviteLink = useSelector(primaryInviteLinksSelector)[threadID]; const { inviteLink, canManageLinks, canAddMembers, isCommunityRoot } =
const canManageLinks = useThreadHasPermission( useAddUsersPermissions(threadInfo);
threadInfo,
threadPermissions.MANAGE_INVITE_LINKS,
);
const isCommunityRoot = threadTypeIsCommunityRoot(threadInfo.type);
const onClickAddMembers = React.useCallback(() => { const onClickAddMembers = React.useCallback(() => {
if (!isCommunityRoot) { if (!isCommunityRoot) {
pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />); pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />);
} else if (inviteLink) { } else if (inviteLink) {
pushModal(<ViewInviteLinkModal inviteLink={inviteLink} />); pushModal(<ViewInviteLinkModal inviteLink={inviteLink} />);
} else if (canManageLinks) { } else if (canManageLinks) {
pushModal(<ManageInviteLinksModal communityID={threadID} />); pushModal(<ManageInviteLinksModal communityID={threadID} />);
} }
}, [ }, [
canManageLinks, canManageLinks,
inviteLink, inviteLink,
isCommunityRoot, isCommunityRoot,
popModal, popModal,
pushModal, pushModal,
threadID, threadID,
]); ]);
const canAddMembersViaInviteLink =
isCommunityRoot && (inviteLink || canManageLinks);
const hasAddMembersPermission = useThreadHasPermission(
threadInfo,
threadPermissions.ADD_MEMBERS,
);
const canAddMembersManually = hasAddMembersPermission && !isCommunityRoot;
const canAddMembers = canAddMembersManually || canAddMembersViaInviteLink;
const addMembersButton = React.useMemo(() => { const addMembersButton = React.useMemo(() => {
if (!canAddMembers) { if (!canAddMembers) {
return null; return null;
} }
return ( return (
<div className={css.addNewMembers}> <div className={css.addNewMembers}>
<Button variant="filled" onClick={onClickAddMembers}> <Button variant="filled" onClick={onClickAddMembers}>
Add members Add members
Show All 19 Lines
View Options

native/components/join-community-alert-handler.react.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; import { useAddUsersPermissions } from 'lib/permissions/add-users-permissions.js';
import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js'; import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { import { roleIsAdminRole } from 'lib/shared/thread-utils.js';
roleIsAdminRole,
useThreadHasPermission,
} from 'lib/shared/thread-utils.js';
import type { RelativeMemberInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { RelativeMemberInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { threadTypeIsCommunityRoot } from 'lib/types/thread-types-enum.js';
import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js'; import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
import { AddMembersModal } from './add-members-modal.react.js'; import { AddMembersModal } from './add-members-modal.react.js';
import ThreadMembersList from './members-list.react.js'; import ThreadMembersList from './members-list.react.js';
import css from './members-modal.css'; import css from './members-modal.css';
import Button from '../../../components/button.react.js'; import Button from '../../../components/button.react.js';
import Tabs, { type TabData } from '../../../components/tabs.react.js'; import Tabs, { type TabData } from '../../../components/tabs.react.js';
import ManageInviteLinksModal from '../../../invite-links/manage-invite-links-modal.react.js'; import ManageInviteLinksModal from '../../../invite-links/manage-invite-links-modal.react.js';
▲ Show 20 Lines • Show All 92 Lines • ▼ Show 20 Lines const renderModalContent = React.useCallback(
), ),
[threadID], [threadID],
); );
const { pushModal, popModal } = useModalContext(); const { pushModal, popModal } = useModalContext();
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const inviteLink = useSelector(primaryInviteLinksSelector)[threadID]; const { inviteLink, canManageLinks, canAddMembers, isCommunityRoot } =
const canManageLinks = useThreadHasPermission( useAddUsersPermissions(threadInfo);
threadInfo,
threadPermissions.MANAGE_INVITE_LINKS,
);
const isCommunityRoot = threadTypeIsCommunityRoot(threadInfo.type);
const onClickAddMembers = React.useCallback(() => { const onClickAddMembers = React.useCallback(() => {
if (!isCommunityRoot) { if (!isCommunityRoot) {
pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />); pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />);
} else if (inviteLink) { } else if (inviteLink) {
pushModal(<ViewInviteLinkModal inviteLink={inviteLink} />); pushModal(<ViewInviteLinkModal inviteLink={inviteLink} />);
} else if (canManageLinks) { } else if (canManageLinks) {
pushModal(<ManageInviteLinksModal communityID={threadID} />); pushModal(<ManageInviteLinksModal communityID={threadID} />);
} }
}, [ }, [
canManageLinks, canManageLinks,
inviteLink, inviteLink,
isCommunityRoot, isCommunityRoot,
popModal, popModal,
pushModal, pushModal,
threadID, threadID,
]); ]);
const canAddMembersViaInviteLink =
isCommunityRoot && (inviteLink || canManageLinks);
const hasAddMembersPermission = useThreadHasPermission(
threadInfo,
threadPermissions.ADD_MEMBERS,
);
const canAddMembersManually = hasAddMembersPermission && !isCommunityRoot;
const canAddMembers = canAddMembersManually || canAddMembersViaInviteLink;
const addMembersButton = React.useMemo(() => { const addMembersButton = React.useMemo(() => {
if (!canAddMembers) { if (!canAddMembers) {
return null; return null;
} }
return ( return (
<div className={css.addNewMembers}> <div className={css.addNewMembers}>
<Button variant="filled" onClick={onClickAddMembers}> <Button variant="filled" onClick={onClickAddMembers}>
Add members Add members
Show All 19 Lines
View Options

native/root.react.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; import { useAddUsersPermissions } from 'lib/permissions/add-users-permissions.js';
import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js'; import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { import { roleIsAdminRole } from 'lib/shared/thread-utils.js';
roleIsAdminRole,
useThreadHasPermission,
} from 'lib/shared/thread-utils.js';
import type { RelativeMemberInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { RelativeMemberInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { threadTypeIsCommunityRoot } from 'lib/types/thread-types-enum.js';
import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js'; import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
import { AddMembersModal } from './add-members-modal.react.js'; import { AddMembersModal } from './add-members-modal.react.js';
import ThreadMembersList from './members-list.react.js'; import ThreadMembersList from './members-list.react.js';
import css from './members-modal.css'; import css from './members-modal.css';
import Button from '../../../components/button.react.js'; import Button from '../../../components/button.react.js';
import Tabs, { type TabData } from '../../../components/tabs.react.js'; import Tabs, { type TabData } from '../../../components/tabs.react.js';
import ManageInviteLinksModal from '../../../invite-links/manage-invite-links-modal.react.js'; import ManageInviteLinksModal from '../../../invite-links/manage-invite-links-modal.react.js';
▲ Show 20 Lines • Show All 92 Lines • ▼ Show 20 Lines const renderModalContent = React.useCallback(
), ),
[threadID], [threadID],
); );
const { pushModal, popModal } = useModalContext(); const { pushModal, popModal } = useModalContext();
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const inviteLink = useSelector(primaryInviteLinksSelector)[threadID]; const { inviteLink, canManageLinks, canAddMembers, isCommunityRoot } =
const canManageLinks = useThreadHasPermission( useAddUsersPermissions(threadInfo);
threadInfo,
threadPermissions.MANAGE_INVITE_LINKS,
);
const isCommunityRoot = threadTypeIsCommunityRoot(threadInfo.type);
const onClickAddMembers = React.useCallback(() => { const onClickAddMembers = React.useCallback(() => {
if (!isCommunityRoot) { if (!isCommunityRoot) {
pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />); pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />);
} else if (inviteLink) { } else if (inviteLink) {
pushModal(<ViewInviteLinkModal inviteLink={inviteLink} />); pushModal(<ViewInviteLinkModal inviteLink={inviteLink} />);
} else if (canManageLinks) { } else if (canManageLinks) {
pushModal(<ManageInviteLinksModal communityID={threadID} />); pushModal(<ManageInviteLinksModal communityID={threadID} />);
} }
}, [ }, [
canManageLinks, canManageLinks,
inviteLink, inviteLink,
isCommunityRoot, isCommunityRoot,
popModal, popModal,
pushModal, pushModal,
threadID, threadID,
]); ]);
const canAddMembersViaInviteLink =
isCommunityRoot && (inviteLink || canManageLinks);
const hasAddMembersPermission = useThreadHasPermission(
threadInfo,
threadPermissions.ADD_MEMBERS,
);
const canAddMembersManually = hasAddMembersPermission && !isCommunityRoot;
const canAddMembers = canAddMembersManually || canAddMembersViaInviteLink;
const addMembersButton = React.useMemo(() => { const addMembersButton = React.useMemo(() => {
if (!canAddMembers) { if (!canAddMembers) {
return null; return null;
} }
return ( return (
<div className={css.addNewMembers}> <div className={css.addNewMembers}>
<Button variant="filled" onClick={onClickAddMembers}> <Button variant="filled" onClick={onClickAddMembers}>
Add members Add members
Show All 19 Lines