Page MenuHomePhabricator
Differential D12568

[web] add Tag Farcaster channel option to CommunityActionsMenu
ClosedPublic
Actions

Authored by ginsu on Jun 24 2024, 11:22 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 2, 9:34 AM
Unknown Object (File)
Tue, Apr 1, 4:28 PM
Unknown Object (File)
Fri, Mar 21, 11:03 AM
Unknown Object (File)
Fri, Mar 21, 10:57 AM
Unknown Object (File)
Sun, Mar 16, 5:52 AM
Unknown Object (File)
Sat, Mar 15, 1:47 PM
Unknown Object (File)
Fri, Mar 14, 11:20 AM
Unknown Object (File)
Tue, Mar 11, 3:59 PM
View All Files
Subscribers
ashoat
tomek

Details

Reviewers
inka
kamil
ashoat
Commits
rCOMMd5fc6c85644a: [web] add Tag Farcaster channel option to CommunityActionsMenu
Summary

This diff simply adds the Tag Farcaster channel option to the CommunityActionsMenu if the conditions are met (user has fid, they have the necessary permissions, and the community is not a GENESIS community)

Depends on D12567

Test Plan

Confirmed that this option is only present if the conditions mentioned above are met. Also please see screenshot below

Screenshot 2024-06-25 at 2.24.56 AM.png (534×746 px, 38 KB)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Jun 24 2024, 11:22 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptJun 24 2024, 11:22 PM
ginsu edited the summary of this revision. (Show Details)Jun 24 2024, 11:31 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: inka, kamil.
ginsu added a parent revision: D12567: [web] introduce tagFarcasterChannelByName to CreateFarcasterChannelTagModal.
ginsu attached a referenced file: F2102051: Screenshot 2024-06-25 at 2.24.56 AM.png. (Show Details)
ginsu added a reviewer: ashoat.Jun 24 2024, 11:34 PM

This diff contains copy that needs to be reviewed

web/components/community-actions-menu.react.js
109 ↗(On Diff #41676)

This copy needs to be reviewed

110 ↗(On Diff #41676)

Not sure if this icon is good, but it felt like the best one from the SWM icon pack

https://www.figma.com/design/wGdM1Yajw9nUS0HU0OYorC/SWM-Icon-Pack-(Community)?node-id=202-304&t=XdortD2fRM1PZV4N-1

Harbormaster completed remote builds in B29916: Diff 41676.Jun 24 2024, 11:39 PM
ginsu requested review of this revision.Jun 24 2024, 11:39 PM
ginsu added a child revision: D12569: [lib/web] introduce handleCurrentUserFID to FarcasterDataHandler.Jun 24 2024, 11:48 PM
inka accepted this revision.Jun 27 2024, 6:53 AM
ashoat requested changes to this revision.Jun 27 2024, 1:20 PM

Passing back to factor out the check. We should avoid copy-pasting code, especially when it's related to things like permissions. It makes it way more likely that somebody fails to update some copy-pasted conditional at a later point

web/components/community-actions-menu.react.js
55–58 ↗(On Diff #41676)

Does this check exist anywhere else, eg. native? If so, can you factor it out please?

110 ↗(On Diff #41676)

Do we have a similar need for an icon on native, and if so what icon we're using?

This revision now requires changes to proceed.Jun 27 2024, 1:20 PM
ginsu updated this revision to Diff 41838.Jun 30 2024, 8:09 PM

address comments

ginsu added inline comments.Jun 30 2024, 8:12 PM
web/components/community-actions-menu.react.js
110 ↗(On Diff #41676)

On native we use an action sheet and none of the options use an icon

https://github.com/CommE2E/comm/blob/master/native/components/community-actions-button.react.js#L157-L177

ginsu updated this revision to Diff 41839.Jun 30 2024, 8:13 PM

update

Harbormaster completed remote builds in B30020: Diff 41838.Jun 30 2024, 8:26 PM
Harbormaster completed remote builds in B30021: Diff 41839.Jun 30 2024, 8:30 PM
ashoat accepted this revision.Jul 1 2024, 4:17 PM
This revision is now accepted and ready to land.Jul 1 2024, 4:17 PM
ginsu updated this revision to Diff 41910.Jul 2 2024, 1:41 PM

rebase before landing

This revision was landed with ongoing or failed builds.Jul 2 2024, 1:44 PM
Closed by commit rCOMMd5fc6c85644a: [web] add Tag Farcaster channel option to CommunityActionsMenu (authored by ginsu). · Explain Why
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMd5fc6c85644a: [web] add Tag Farcaster channel option to CommunityActionsMenu.
Harbormaster completed remote builds in B30064: Diff 41910.Jul 2 2024, 2:11 PM
ginsu removed a child revision: D12569: [lib/web] introduce handleCurrentUserFID to FarcasterDataHandler.Jul 8 2024, 4:26 PM

Revision Contents
Changeset List

PathSize
lib/
shared/
21 lines
native/
components/
19 lines
web/
components/
21 lines

Diff 41838

View Options

lib/shared/community-utils.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { import {
leaveThreadActionTypes, leaveThreadActionTypes,
useLeaveThread, useLeaveThread,
} from 'lib/actions/thread-actions.js'; } from 'lib/actions/thread-actions.js';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/swmansion-icon.react.js'; import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js'; import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
import { childThreadInfos } from 'lib/selectors/thread-selectors.js'; import { childThreadInfos } from 'lib/selectors/thread-selectors.js';
import { import {
threadHasPermission,
threadIsChannel, threadIsChannel,
useThreadHasPermission,
viewerIsMember, viewerIsMember,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { threadTypes } from 'lib/types/thread-types-enum.js'; import { threadTypes } from 'lib/types/thread-types-enum.js';
import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 106 Lines • ▼ Show 20 Lines return (
key="sidebars" key="sidebars"
text="Threads" text="Threads"
icon="arrow-right" icon="arrow-right"
onClick={onClickSidebars} onClick={onClickSidebars}
/> />
); );
}, [hasSidebars, onClickSidebars]); }, [hasSidebars, onClickSidebars]);
const canCreateSubchannels = React.useMemo( const canCreateSubchannels = useThreadHasPermission(
() => threadHasPermission(threadInfo, threadPermissions.CREATE_SUBCHANNELS), threadInfo,
[threadInfo], threadPermissions.CREATE_SUBCHANNELS,
); );
const hasSubchannels = React.useMemo(() => { const hasSubchannels = React.useMemo(() => {
return !!childThreads?.some(threadIsChannel); return !!childThreads?.some(threadIsChannel);
}, [childThreads]); }, [childThreads]);
const onClickViewSubchannels = React.useCallback( const onClickViewSubchannels = React.useCallback(
() => () =>
▲ Show 20 Lines • Show All 60 Lines • ▼ Show 20 Lines () =>
threadInfo={threadInfo} threadInfo={threadInfo}
onClose={popModal} onClose={popModal}
onConfirm={onConfirmLeaveThread} onConfirm={onConfirmLeaveThread}
/>, />,
), ),
[popModal, onConfirmLeaveThread, pushModal, threadInfo], [popModal, onConfirmLeaveThread, pushModal, threadInfo],
); );
const leaveThreadItem = React.useMemo(() => { const canLeaveThread = useThreadHasPermission(
const canLeaveThread = threadHasPermission(
threadInfo, threadInfo,
threadPermissions.LEAVE_THREAD, threadPermissions.LEAVE_THREAD,
); );
const leaveThreadItem = React.useMemo(() => {
if (!viewerIsMember(threadInfo) || !canLeaveThread) { if (!viewerIsMember(threadInfo) || !canLeaveThread) {
return null; return null;
} }
return ( return (
<MenuItem <MenuItem
key="leave" key="leave"
text="Leave chat" text="Leave chat"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo, canLeaveThread]);
const onClickPromoteSidebarToThread = React.useCallback( const onClickPromoteSidebarToThread = React.useCallback(
() => () =>
pushModal( pushModal(
<SidebarPromoteModal <SidebarPromoteModal
threadInfo={threadInfo} threadInfo={threadInfo}
onClose={popModal} onClose={popModal}
onConfirm={onPromoteSidebar} onConfirm={onPromoteSidebar}
▲ Show 20 Lines • Show All 72 Lines • Show Last 20 Lines
View Options

native/components/community-actions-button.react.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { import {
leaveThreadActionTypes, leaveThreadActionTypes,
useLeaveThread, useLeaveThread,
} from 'lib/actions/thread-actions.js'; } from 'lib/actions/thread-actions.js';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/swmansion-icon.react.js'; import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js'; import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
import { childThreadInfos } from 'lib/selectors/thread-selectors.js'; import { childThreadInfos } from 'lib/selectors/thread-selectors.js';
import { import {
threadHasPermission,
threadIsChannel, threadIsChannel,
useThreadHasPermission,
viewerIsMember, viewerIsMember,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { threadTypes } from 'lib/types/thread-types-enum.js'; import { threadTypes } from 'lib/types/thread-types-enum.js';
import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 106 Lines • ▼ Show 20 Lines return (
key="sidebars" key="sidebars"
text="Threads" text="Threads"
icon="arrow-right" icon="arrow-right"
onClick={onClickSidebars} onClick={onClickSidebars}
/> />
); );
}, [hasSidebars, onClickSidebars]); }, [hasSidebars, onClickSidebars]);
const canCreateSubchannels = React.useMemo( const canCreateSubchannels = useThreadHasPermission(
() => threadHasPermission(threadInfo, threadPermissions.CREATE_SUBCHANNELS), threadInfo,
[threadInfo], threadPermissions.CREATE_SUBCHANNELS,
); );
const hasSubchannels = React.useMemo(() => { const hasSubchannels = React.useMemo(() => {
return !!childThreads?.some(threadIsChannel); return !!childThreads?.some(threadIsChannel);
}, [childThreads]); }, [childThreads]);
const onClickViewSubchannels = React.useCallback( const onClickViewSubchannels = React.useCallback(
() => () =>
▲ Show 20 Lines • Show All 60 Lines • ▼ Show 20 Lines () =>
threadInfo={threadInfo} threadInfo={threadInfo}
onClose={popModal} onClose={popModal}
onConfirm={onConfirmLeaveThread} onConfirm={onConfirmLeaveThread}
/>, />,
), ),
[popModal, onConfirmLeaveThread, pushModal, threadInfo], [popModal, onConfirmLeaveThread, pushModal, threadInfo],
); );
const leaveThreadItem = React.useMemo(() => { const canLeaveThread = useThreadHasPermission(
const canLeaveThread = threadHasPermission(
threadInfo, threadInfo,
threadPermissions.LEAVE_THREAD, threadPermissions.LEAVE_THREAD,
); );
const leaveThreadItem = React.useMemo(() => {
if (!viewerIsMember(threadInfo) || !canLeaveThread) { if (!viewerIsMember(threadInfo) || !canLeaveThread) {
return null; return null;
} }
return ( return (
<MenuItem <MenuItem
key="leave" key="leave"
text="Leave chat" text="Leave chat"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo, canLeaveThread]);
const onClickPromoteSidebarToThread = React.useCallback( const onClickPromoteSidebarToThread = React.useCallback(
() => () =>
pushModal( pushModal(
<SidebarPromoteModal <SidebarPromoteModal
threadInfo={threadInfo} threadInfo={threadInfo}
onClose={popModal} onClose={popModal}
onConfirm={onPromoteSidebar} onConfirm={onPromoteSidebar}
▲ Show 20 Lines • Show All 72 Lines • Show Last 20 Lines
View Options

web/components/community-actions-menu.react.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { import {
leaveThreadActionTypes, leaveThreadActionTypes,
useLeaveThread, useLeaveThread,
} from 'lib/actions/thread-actions.js'; } from 'lib/actions/thread-actions.js';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/swmansion-icon.react.js'; import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js'; import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
import { childThreadInfos } from 'lib/selectors/thread-selectors.js'; import { childThreadInfos } from 'lib/selectors/thread-selectors.js';
import { import {
threadHasPermission,
threadIsChannel, threadIsChannel,
useThreadHasPermission,
viewerIsMember, viewerIsMember,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { threadTypes } from 'lib/types/thread-types-enum.js'; import { threadTypes } from 'lib/types/thread-types-enum.js';
import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 106 Lines • ▼ Show 20 Lines return (
key="sidebars" key="sidebars"
text="Threads" text="Threads"
icon="arrow-right" icon="arrow-right"
onClick={onClickSidebars} onClick={onClickSidebars}
/> />
); );
}, [hasSidebars, onClickSidebars]); }, [hasSidebars, onClickSidebars]);
const canCreateSubchannels = React.useMemo( const canCreateSubchannels = useThreadHasPermission(
() => threadHasPermission(threadInfo, threadPermissions.CREATE_SUBCHANNELS), threadInfo,
[threadInfo], threadPermissions.CREATE_SUBCHANNELS,
); );
const hasSubchannels = React.useMemo(() => { const hasSubchannels = React.useMemo(() => {
return !!childThreads?.some(threadIsChannel); return !!childThreads?.some(threadIsChannel);
}, [childThreads]); }, [childThreads]);
const onClickViewSubchannels = React.useCallback( const onClickViewSubchannels = React.useCallback(
() => () =>
▲ Show 20 Lines • Show All 60 Lines • ▼ Show 20 Lines () =>
threadInfo={threadInfo} threadInfo={threadInfo}
onClose={popModal} onClose={popModal}
onConfirm={onConfirmLeaveThread} onConfirm={onConfirmLeaveThread}
/>, />,
), ),
[popModal, onConfirmLeaveThread, pushModal, threadInfo], [popModal, onConfirmLeaveThread, pushModal, threadInfo],
); );
const leaveThreadItem = React.useMemo(() => { const canLeaveThread = useThreadHasPermission(
const canLeaveThread = threadHasPermission(
threadInfo, threadInfo,
threadPermissions.LEAVE_THREAD, threadPermissions.LEAVE_THREAD,
); );
const leaveThreadItem = React.useMemo(() => {
if (!viewerIsMember(threadInfo) || !canLeaveThread) { if (!viewerIsMember(threadInfo) || !canLeaveThread) {
return null; return null;
} }
return ( return (
<MenuItem <MenuItem
key="leave" key="leave"
text="Leave chat" text="Leave chat"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo, canLeaveThread]);
const onClickPromoteSidebarToThread = React.useCallback( const onClickPromoteSidebarToThread = React.useCallback(
() => () =>
pushModal( pushModal(
<SidebarPromoteModal <SidebarPromoteModal
threadInfo={threadInfo} threadInfo={threadInfo}
onClose={popModal} onClose={popModal}
onConfirm={onPromoteSidebar} onConfirm={onPromoteSidebar}
▲ Show 20 Lines • Show All 72 Lines • Show Last 20 Lines