Store reacji skin tone locally (#23632)

* Store reacji skin tone locally

* cleanup

* comment

Author: joshblum

go/protocol/keybase1/common.go

@@ -1,4 +1,3 @@
-
 @namespace("keybase.1")
 protocol Common {
 
@@ -404,7 +403,15 @@ protocol Common {
   }
 
   // Primarily used in chat but defined here to avoid a circular import
-  @typedef("int") record ReacjiSkinTone {}
+  enum ReacjiSkinTone {
+    NONE_0,
+    SKINTONE1_1,
+    SKINTONE2_2,
+    SKINTONE3_3,
+    SKINTONE4_4,
+    SKINTONE5_5
+  }
+
   record UserReacjis {
     // sorted array of frequently used reacjis
     array<UserReacji> topReacjis;

protocol/avdl/keybase1/common.avdl

@@ -93,6 +93,7 @@
   "chat.1.local.addEmojis": {"promise": true},
   "chat.1.local.addEmojiAlias": {"promise": true},
   "chat.1.local.removeEmoji": {"promise": true},
+  "chat.1.local.putReacjiSkinTone": {"promise": true},
   "keybase.1.Proxy.getProxyData": {"promise": true},
   "keybase.1.Proxy.setProxyData": {"promise": true},
   "keybase.1.SimpleFS.simpleFSCancel": {"promise": true},

protocol/bin/enabled-calls.json

@@ -15,6 +15,8 @@ import debounce from 'lodash/debounce'
 import SkinTonePicker from './skin-tone-picker'
 import EmojiPicker, {getSkinToneModifierStrIfAvailable} from '.'
 import {emojiDataToRenderableEmoji, renderEmoji, EmojiData, RenderableEmoji} from '../../../../../util/emoji'
+import useRPC from '../../../../../util/use-rpc'
+import * as RPCChatGen from '../../../../../constants/types/rpc-chat-gen'
 
 type Props = {
   conversationIDKey: Types.ConversationIDKey
@@ -57,17 +59,33 @@ const useReacji = ({conversationIDKey, onDidPick, onPickAction, onPickAddToMessa
 }
 
 let lastSetSkinTone: undefined | Types.EmojiSkinTone = undefined
+
 // This can only be used in one place at a time for now since when it's changed
 // it doesn't cause other hook instances to update.
 const useSkinTone = () => {
-  const [currentSkinTone, _setSkinTone] = React.useState(lastSetSkinTone)
-  const setSkinTone = React.useCallback(
-    (skinTone: undefined | Types.EmojiSkinTone) => {
-      lastSetSkinTone = skinTone
-      _setSkinTone(skinTone)
-    },
-    [_setSkinTone]
+  lastSetSkinTone = Types.EmojiSkinToneFromRPC(
+    Container.useSelector(state => state.chat2.userReacjis.skinTone)
   )
+  const [currentSkinTone, _setSkinTone] = React.useState(lastSetSkinTone)
+  // NOTE: The store does not update skin tones after put so we track the
+  // module variable `lastSetSkinTone`
+  const rpc = useRPC(RPCChatGen.localPutReacjiSkinToneRpcPromise)
+  const setSkinTone = (emojiSkinTone: undefined | Types.EmojiSkinTone) => {
+    rpc(
+      [
+        {
+          skinTone: Types.EmojiSkinToneToRPC(emojiSkinTone),
+        },
+      ],
+      _ => {
+        lastSetSkinTone = emojiSkinTone
+        _setSkinTone(emojiSkinTone)
+      },
+      err => {
+        throw err
+      }
+    )
+  }
   return {currentSkinTone, setSkinTone}
 }
 const useCustomReacji = (conversationIDKey: Types.ConversationIDKey, onlyInTeam: boolean | undefined) => {

protocol/json/keybase1/common.json

@@ -11,22 +11,6 @@ const skinTones: Array<undefined | Types.EmojiSkinTone> = [
   '1F3FE',
   '1F3FF',
 ]
-const skinToneToDotColor = (skinTone: undefined | Types.EmojiSkinTone): string => {
-  switch (skinTone) {
-    case undefined:
-      return '#ffc93a'
-    case '1F3FB':
-      return '#fadcbc'
-    case '1F3FC':
-      return '#e1bb95'
-    case '1F3FD':
-      return '#bf9068'
-    case '1F3FE':
-      return '#9b643d'
-    case '1F3FF':
-      return '#5a4539'
-  }
-}
 
 const circle = (skinTone: undefined | Types.EmojiSkinTone, isExpanded: boolean, outerCircle: boolean) => {
   return (
@@ -36,7 +20,7 @@ const circle = (skinTone: undefined | Types.EmojiSkinTone, isExpanded: boolean,
         style={Styles.collapseStyles([
           !isExpanded && styles.circleCollapsed,
           isExpanded && styles.circleExpanded,
-          {backgroundColor: skinToneToDotColor(skinTone)},
+          {backgroundColor: Types.SkinToneToDotColor(skinTone)},
         ])}
       ></Kb.Box>
     </Kb.Box>

shared/chat/conversation/messages/react-button/emoji-picker/container.tsx

@@ -119,7 +119,7 @@ export type CommandStatusInfo = {
 
 export type UserReacjis = {
   topReacjis: Array<RPCTypes.UserReacji>
-  skinTone: number
+  skinTone: RPCTypes.ReacjiSkinTone
 }
 
 export type Coordinate = {
@@ -183,6 +183,57 @@ export type ParticipantInfo = {
 // Corresponds to skinTones in emoji-datasource.
 export type EmojiSkinTone = '1F3FB' | '1F3FC' | '1F3FD' | '1F3FE' | '1F3FF'
 
+export const EmojiSkinToneToRPC = (emojiSkinTone: undefined | EmojiSkinTone): RPCTypes.ReacjiSkinTone => {
+  switch (emojiSkinTone) {
+    case undefined:
+      return RPCTypes.ReacjiSkinTone.none
+    case '1F3FB':
+      return RPCTypes.ReacjiSkinTone.skintone1
+    case '1F3FC':
+      return RPCTypes.ReacjiSkinTone.skintone2
+    case '1F3FD':
+      return RPCTypes.ReacjiSkinTone.skintone3
+    case '1F3FE':
+      return RPCTypes.ReacjiSkinTone.skintone4
+    case '1F3FF':
+      return RPCTypes.ReacjiSkinTone.skintone5
+  }
+}
+
+export const EmojiSkinToneFromRPC = (reacjiSkinTone: RPCTypes.ReacjiSkinTone): undefined | EmojiSkinTone => {
+  switch (reacjiSkinTone) {
+    case RPCTypes.ReacjiSkinTone.none:
+      return undefined
+    case RPCTypes.ReacjiSkinTone.skintone1:
+      return '1F3FB'
+    case RPCTypes.ReacjiSkinTone.skintone2:
+      return '1F3FC'
+    case RPCTypes.ReacjiSkinTone.skintone3:
+      return '1F3FD'
+    case RPCTypes.ReacjiSkinTone.skintone4:
+      return '1F3FE'
+    case RPCTypes.ReacjiSkinTone.skintone5:
+      return '1F3FF'
+  }
+}
+
+export const SkinToneToDotColor = (skinTone: undefined | EmojiSkinTone): string => {
+  switch (skinTone) {
+    case undefined:
+      return '#ffc93a'
+    case '1F3FB':
+      return '#fadcbc'
+    case '1F3FC':
+      return '#e1bb95'
+    case '1F3FD':
+      return '#bf9068'
+    case '1F3FE':
+      return '#9b643d'
+    case '1F3FF':
+      return '#5a4539'
+  }
+}
+
 export type State = {
   readonly accountsInfoMap: Map<
     Common.ConversationIDKey,