From 28b1e513321850127b83db77e237222f091ceb61 Mon Sep 17 00:00:00 2001
From: Atul Madhugiri <atulm@berkeley.edu>
Date: Tue, 22 Aug 2023 13:43:04 -0400
Subject: [PATCH] [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
---
 web/avatars/edit-thread-avatar-menu.react.js  | 25 ++++++++-
 ...read-emoji-avatar-selection-modal.react.js | 53 +++++++++++++++++++
 2 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 web/avatars/thread-emoji-avatar-selection-modal.react.js

diff --git a/web/avatars/edit-thread-avatar-menu.react.js b/web/avatars/edit-thread-avatar-menu.react.js
index bf31b5fb5b..bfec1fe4d1 100644
--- a/web/avatars/edit-thread-avatar-menu.react.js
+++ b/web/avatars/edit-thread-avatar-menu.react.js
@@ -4,11 +4,13 @@ import invariant from 'invariant';
 import * as React from 'react';
 
 import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
 
 import { useUploadAvatarMedia } from './avatar-hooks.react.js';
 import css from './edit-avatar-menu.css';
+import ThreadEmojiAvatarSelectionModal from './thread-emoji-avatar-selection-modal.react.js';
 import MenuItem from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
 import { allowedMimeTypeString } from '../media/file-utils.js';
@@ -77,13 +79,32 @@ function EditThreadAvatarMenu(props: Props): React.Node {
     [onImageMenuItemClicked],
   );
 
+  const { pushModal } = useModalContext();
+  const openEmojiSelectionModal = React.useCallback(
+    () =>
+      pushModal(<ThreadEmojiAvatarSelectionModal threadInfo={threadInfo} />),
+    [pushModal, threadInfo],
+  );
+
+  const emojiMenuItem = React.useMemo(
+    () => (
+      <MenuItem
+        key="emoji"
+        text="Select emoji"
+        icon="emote-smile"
+        onClick={openEmojiSelectionModal}
+      />
+    ),
+    [openEmojiSelectionModal],
+  );
+
   const menuItems = React.useMemo(() => {
-    const items = [imageMenuItem];
+    const items = [emojiMenuItem, imageMenuItem];
     if (threadInfo.avatar) {
       items.push(removeMenuItem);
     }
     return items;
-  }, [imageMenuItem, removeMenuItem, threadInfo.avatar]);
+  }, [emojiMenuItem, imageMenuItem, removeMenuItem, threadInfo.avatar]);
 
   return (
     <div>
diff --git a/web/avatars/thread-emoji-avatar-selection-modal.react.js b/web/avatars/thread-emoji-avatar-selection-modal.react.js
new file mode 100644
index 0000000000..9e31bb1bff
--- /dev/null
+++ b/web/avatars/thread-emoji-avatar-selection-modal.react.js
@@ -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;