-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[web] Introduce
ThreadEmojiAvatarSelectionModal
Summary: Enables setting of emoji avatars on `web`. As of this diff all varieties of thread avatar can be set from `web`. We just need to make a few layout tweaks in `ThreadSettingsModalGeneralTab` in order to get this ready to ship. --- Depends on D8855 Test Plan: Works as expected: {F694299} Reviewers: ashoat, ginsu Reviewed By: ashoat Subscribers: tomek Differential Revision: https://phab.comm.dev/D8856
- Loading branch information
1 parent
0a2f6fe
commit 28b1e51
Showing
2 changed files
with
76 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
// @flow | ||
|
||
import invariant from 'invariant'; | ||
import * as React from 'react'; | ||
|
||
import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js'; | ||
import { | ||
getDefaultAvatar, | ||
useAvatarForThread, | ||
} from 'lib/shared/avatar-utils.js'; | ||
import type { | ||
ClientAvatar, | ||
ClientEmojiAvatar, | ||
} from 'lib/types/avatar-types.js'; | ||
import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js'; | ||
|
||
import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js'; | ||
|
||
type Props = { | ||
+threadInfo: ThreadInfo | RawThreadInfo, | ||
}; | ||
|
||
function ThreadEmojiAvatarSelectionModal(props: Props): React.Node { | ||
const { threadInfo } = props; | ||
const editThreadAvatarContext = React.useContext(EditThreadAvatarContext); | ||
invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set'); | ||
|
||
const { baseSetThreadAvatar, threadAvatarSaveInProgress } = | ||
editThreadAvatarContext; | ||
|
||
const currentThreadAvatar: ClientAvatar = useAvatarForThread(threadInfo); | ||
const defaultThreadAvatar: ClientEmojiAvatar = getDefaultAvatar( | ||
threadInfo.id, | ||
threadInfo.color, | ||
); | ||
|
||
const setEmojiAvatar = React.useCallback( | ||
(pendingEmojiAvatar: ClientEmojiAvatar): Promise<void> => | ||
baseSetThreadAvatar(threadInfo.id, pendingEmojiAvatar), | ||
[baseSetThreadAvatar, threadInfo.id], | ||
); | ||
|
||
return ( | ||
<EmojiAvatarSelectionModal | ||
currentAvatar={currentThreadAvatar} | ||
defaultAvatar={defaultThreadAvatar} | ||
setEmojiAvatar={setEmojiAvatar} | ||
avatarSaveInProgress={threadAvatarSaveInProgress} | ||
/> | ||
); | ||
} | ||
|
||
export default ThreadEmojiAvatarSelectionModal; |