Display user's name and avatar in the additional post box

src/components/InjectedComponents/AdditionalPostBox.tsx

@@ -11,15 +11,18 @@ import Button from '@material-ui/core/Button/Button'
 import { withStylesTyped, MaskbookLightTheme } from '../../utils/theme'
 import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
 import { useAsync } from '../../utils/AsyncComponent'
-import { CryptoService } from '../../extension/content-script/rpc'
+import { CryptoService, PeopleService } from '../../extension/content-script/rpc'
 import { Person } from '../../extension/background-script/PeopleService'
 import { usePeople } from '../DataSource/PeopleRef'
 import { SelectPeopleUI } from './SelectPeople'
 import { CustomPasteEventId } from '../../utils/Names'
 import { sleep } from '../../utils/utils'
+import { myUsername, getUsername } from '../../extension/content-script/injections/LiveSelectors'
 
 interface Props {
     avatar?: string
+    nickname?: string
+    username?: string
     encrypted: string
     onCombinationChange(people: Person[], text: string): void
     onRequestPost(text: string): void
@@ -34,6 +37,9 @@ const _AdditionalPostBox = withStylesTyped({
         padding: 12,
         boxSizing: 'border-box',
     },
+    innerInput: {
+        minHeight: '3em',
+    },
     // todo: theme
     grayArea: { background: '#f5f6f7', padding: 8, wordBreak: 'break-all' },
     typo: { lineHeight: '28.5px' },
@@ -60,20 +66,22 @@ const _AdditionalPostBox = withStylesTyped({
                     undefined
                 )}
                 <InputBase
-                    className={classes.input}
+                    classes={{ root: classes.input, input: classes.innerInput }}
                     value={text}
                     onChange={e => {
                         setText(e.currentTarget.value)
                         props.onCombinationChange(selectedPeople, e.currentTarget.value)
                     }}
                     fullWidth
                     multiline
-                    placeholder="What's your mind? Encrypt with Maskbook"
+                    placeholder={`${
+                        props.nickname ? `Hey ${props.nickname}, w` : 'W'
+                    }hat's your mind? Encrypt with Maskbook`}
                 />
             </Paper>
             <Divider />
             <SelectPeopleUI
-                all={people}
+                all={people.filter(x => x.username !== props.username)}
                 onSetSelected={p => {
                     selectPeople(p)
                     props.onCombinationChange(p, text)
@@ -121,13 +129,24 @@ export function AdditionalPostBox() {
     const [people, setPeople] = React.useState<Person[]>([])
     const [encrypted, setEncrypted] = React.useState<string | undefined>('')
     const publisherToken = React.useRef<string>()
+    const [avatar, setAvatar] = React.useState<string | undefined>('')
     useAsync(() => CryptoService.encryptTo(text, people), [text, people]).then(data => {
         const [str, pub] = data
         setEncrypted(str)
         publisherToken.current = pub
     })
+    let nickname
+    {
+        const link = myUsername.evaluateOnce()[0]
+        if (link) nickname = link.innerText
+    }
+    const username = getUsername()
+    useAsync(() => PeopleService.queryAvatar(username || ''), []).then(setAvatar)
     return (
         <AdditionalPostBoxUI
+            avatar={avatar}
+            nickname={nickname}
+            username={username}
             onRequestPost={async text => {
                 if (!publisherToken.current) return
                 const element = document.querySelector<HTMLDivElement>('.notranslate')!
@@ -136,6 +155,8 @@ export function AdditionalPostBox() {
                 selectElementContents(element)
                 await sleep(100)
                 document.dispatchEvent(new CustomEvent(CustomPasteEventId, { detail: text }))
+                navigator.clipboard.writeText(text)
+                // Prevent Custom Paste failed, this will cause service not available to user.
                 CryptoService.publishPostAESKey(publisherToken.current)
             }}
             encrypted={publisherToken.current ? encrypted || '' : ''}

src/extension/background-script/PeopleService.ts

@@ -49,6 +49,7 @@ const Impl = {
     getAllPeople,
     uploadProvePostUrl,
     storeAvatar,
+    queryAvatar,
     getMyPrivateKey,
     storeKey: storeKeyService,
 }

src/extension/content-script/injections/LiveSelectors.ts

@@ -3,3 +3,12 @@ import { LiveSelector } from '@holoflows/kit/es/DOM/LiveSelector'
 export const myUsername = new LiveSelector().querySelector<HTMLAnchorElement>(
     `[aria-label="Facebook"][role="navigation"] [data-click="profile_icon"] a`,
 )
+export function getUsername(link?: HTMLAnchorElement | null) {
+    // tslint:disable-next-line: no-parameter-reassignment
+    if (link === undefined) link = myUsername.evaluateOnce()[0]
+    if (link === null) return undefined
+    const url = link.href
+    const after = url.split('https://www.facebook.com/')[1]
+    if (after.match('profile.php')) return after.match(/id=(?<id>\d+)/)!.groups!.id
+    else return after.split('?')[0]
+}

src/extension/content-script/injections/Posts.tsx

@@ -4,13 +4,7 @@ import { LiveSelector, MutationObserverWatcher } from '@holoflows/kit'
 import { DecryptPost } from '../../../components/InjectedComponents/DecryptedPost'
 import { AddToKeyStore } from '../../../components/InjectedComponents/AddToKeyStore'
 import { PeopleService } from '../rpc'
-import { myUsername } from './LiveSelectors'
-
-function getUsername(url: string) {
-    const after = url.split('https://www.facebook.com/')[1]
-    if (after.match('profile.php')) return after.match(/id=(?<id>\d+)/)!.groups!.id
-    else return after.split('?')[0]
-}
+import { getUsername } from './LiveSelectors'
 
 const posts = new LiveSelector().querySelectorAll<HTMLDivElement>('.userContent').filter((x: HTMLElement | null) => {
     while (x) {
@@ -30,13 +24,7 @@ const PostInspector = (props: { post: string; postBy: string; postId: string; ne
 
     if (type.encryptedPost) {
         props.needZip()
-        return (
-            <DecryptPost
-                encryptedText={post}
-                whoAmI={myUsername.evaluateOnce().map(x => getUsername(x.href))[0]!}
-                postBy={postBy}
-            />
-        )
+        return <DecryptPost encryptedText={post} whoAmI={getUsername()!} postBy={postBy} />
     } else if (type.provePost) {
         PeopleService.uploadProvePostUrl(postBy, postId)
         return <AddToKeyStore postBy={postBy} provePost={post} />
@@ -46,7 +34,7 @@ const PostInspector = (props: { post: string; postBy: string; postId: string; ne
 new MutationObserverWatcher(posts)
     .useNodeForeach((node, key, realNode) => {
         // Get author
-        const postBy = getUsername(node.current.previousElementSibling!.querySelector('a')!.href)
+        const postBy = getUsername(node.current.previousElementSibling!.querySelector('a'))!
         // Save author's avatar
         try {
             const avatar = node.current.previousElementSibling!.querySelector('img')!