feat: decrypt comment and display it

src/components/InjectedComponents/DecryptedPost.tsx

@@ -96,6 +96,7 @@ function DecryptPostFailed({ error }: { error: Error }) {
 }
 
 interface DecryptPostProps {
+    onDecrypted(post: string): void
     postBy: PersonIdentifier
     whoAmI: PersonIdentifier
     encryptedText: string
@@ -117,16 +118,19 @@ function DecryptPost(props: DecryptPostProps) {
             promise={() => Services.Crypto.decryptFrom(encryptedText, postBy, whoAmI)}
             dependencies={[encryptedText, people, alreadySelectedPreviously]}
             awaitingComponent={DecryptPostAwaiting}
-            completeComponent={props =>
-                'error' in props.data ? (
-                    <DecryptPostFailed error={new Error(props.data.error)} />
+            completeComponent={_props =>
+                'error' in _props.data ? (
+                    <DecryptPostFailed error={new Error(_props.data.error)} />
                 ) : (
-                    <DecryptPostSuccess
-                        data={props.data}
-                        alreadySelectedPreviously={alreadySelectedPreviously}
-                        requestAppendRecipients={postBy.equals(whoAmI) ? rAD : undefined}
-                        people={people}
-                    />
+                    (props.onDecrypted(_props.data.content),
+                    (
+                        <DecryptPostSuccess
+                            data={_props.data}
+                            alreadySelectedPreviously={alreadySelectedPreviously}
+                            requestAppendRecipients={postBy.equals(whoAmI) ? rAD : undefined}
+                            people={people}
+                        />
+                    ))
                 )
             }
             failedComponent={DecryptPostFailed}

src/components/InjectedComponents/PostComments.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Chip, makeStyles } from '@material-ui/core'
 import Lock from '@material-ui/icons/Lock'
+import AsyncComponent from '../../utils/components/AsyncComponent'
+import Services from '../../extension/service'
 
 const useStyle = makeStyles({
     root: {
@@ -19,3 +21,21 @@ export function PostCommentDecrypted(props: React.PropsWithChildren<{}>) {
         </>
     )
 }
+interface Props {
+    postIV: string
+    postContent: string
+    comment: string
+}
+export function PostComment({ comment, postContent, postIV }: Props) {
+    return (
+        <AsyncComponent
+            promise={() => Services.Crypto.decryptComment(postIV, postContent, comment)}
+            dependencies={[postIV, postContent, comment]}
+            awaitingComponent=""
+            completeComponent={result =>
+                result.data ? <PostCommentDecrypted>{result.data}</PostCommentDecrypted> : null
+            }
+            failedComponent={() => null}
+        />
+    )
+}

src/crypto/crypto-alpha-40.ts

@@ -285,7 +285,7 @@ export async function verify(
 //#region Comment
 function extractCommentPayload(text: string) {
     const [_, toEnd] = text.split('🎶2/4|')
-    const [content, _2] = toEnd.split(':||')
+    const [content, _2] = (toEnd || '').split(':||')
     if (content.length) return content
     return
 }

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

@@ -5,32 +5,38 @@ import { renderInShadowRoot } from '../../../utils/jss/renderInShadowRoot'
 import { deconstructPayload } from '../../../utils/type-transform/Payload'
 import { PersonIdentifier } from '../../../database/type'
 import { isMobile } from '../../../social-network/facebook.com/isMobile'
-import { PostCommentDecrypted } from '../../../components/InjectedComponents/PostComments'
+import { PostCommentDecrypted, PostComment } from '../../../components/InjectedComponents/PostComments'
 import { useValueRef } from '../../../utils/hooks/useValueRef'
 import { PostInspector } from './Posts/PostInspector'
 
 const posts = new LiveSelector().querySelectorAll<HTMLDivElement>(
     isMobile ? '.story_body_container ' : '.userContent, .userContent+*+div>div>div>div>div',
 )
 
-const commentUnload = new Map<HTMLElement, [() => void, DomProxy]>()
 type InspectedPostInfo = {
     postBy: ValueRef<PersonIdentifier>
     postID: ValueRef<string | null>
     postContent: ValueRef<string>
     comments: Set<HTMLElement>
+    decryptedPostContent: ValueRef<string>
 }
 
 const inspectedPosts = new Set<InspectedPostInfo>()
 new MutationObserverWatcher(posts)
     .useForeach(node => {
-        const info = {} as InspectedPostInfo
+        const info: InspectedPostInfo = {
+            comments: new Set(),
+            decryptedPostContent: new ValueRef(''),
+            postBy: new ValueRef(PersonIdentifier.unknown),
+            postContent: new ValueRef(''),
+            postID: new ValueRef(''),
+        }
         inspectedPosts.add(info)
 
         function collectPostInfo() {
-            info.postContent = new ValueRef(node.current.innerText)
-            info.postBy = new ValueRef(getPostBy(node, deconstructPayload(info.postContent.value) !== null))
-            info.postID = new ValueRef(getPostID(node))
+            info.postContent.value = node.current.innerText
+            info.postBy.value = getPostBy(node, deconstructPayload(info.postContent.value) !== null)
+            info.postID.value = getPostID(node)
         }
         collectPostInfo()
 
@@ -40,17 +46,33 @@ new MutationObserverWatcher(posts)
             .querySelectorAll('[role=article]')
             .querySelectorAll('a+span')
             .closest<HTMLElement>(3)
-
+        console.log(inspectedPosts)
         const commentWatcher = new MutationObserverWatcher(commentSelector, root.evaluateOnce()[0])
             .useForeach(commentNode => {
-                if (!commentUnload.has(commentNode.realCurrent!)) {
-                    commentUnload.set(commentNode.realCurrent!, [
-                        renderInShadowRoot(
-                            <PostCommentDecrypted>{commentNode.current.innerText}</PostCommentDecrypted>,
-                            commentNode.afterShadow,
-                        ),
-                        node,
-                    ])
+                const commentRef = new ValueRef(commentNode.current.innerText)
+                const UI = () => {
+                    const postContent = useValueRef(info.decryptedPostContent)
+                    const postIV = useValueRef(info.postContent)
+                    const comment = useValueRef(commentRef)
+                    return (
+                        <PostComment
+                            comment={comment}
+                            postContent={postContent}
+                            postIV={(deconstructPayload(postIV) || { iv: '' }).iv}
+                        />
+                    )
+                }
+                const unmount = renderInShadowRoot(<UI />, commentNode.afterShadow)
+                return {
+                    onNodeMutation() {
+                        commentRef.value = commentNode.current.innerText
+                    },
+                    onTargetChanged() {
+                        commentRef.value = commentNode.current.innerText
+                    },
+                    onRemove() {
+                        unmount()
+                    },
                 }
             })
             .startWatch()
@@ -60,11 +82,20 @@ new MutationObserverWatcher(posts)
             zipEncryptedPostContent(node)
             zipPostLinkPreview(node)
         }
+        const onDecrypted = (val: string) => (info.decryptedPostContent.value = val)
         const UI = () => {
             const id = useValueRef(info.postID)
             const by = useValueRef(info.postBy)
             const content = useValueRef(info.postContent)
-            return <PostInspector needZip={zipPost} postId={id || ''} post={content} postBy={by} />
+            return (
+                <PostInspector
+                    onDecrypted={onDecrypted}
+                    needZip={zipPost}
+                    postId={id || ''}
+                    post={content}
+                    postBy={by}
+                />
+            )
         }
         // Render it
         const unmount = renderInShadowRoot(<UI />, node.afterShadow)
@@ -73,7 +104,6 @@ new MutationObserverWatcher(posts)
             onTargetChanged: collectPostInfo,
             onRemove() {
                 unmount()
-                commentUnload.forEach(([f, n]) => n === node && f())
                 commentWatcher.stopWatch()
             },
         }

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

@@ -12,6 +12,7 @@ import { styled } from '@material-ui/core/styles'
 
 const Debug = styled('div')({ display: 'none' })
 interface PostInspectorProps {
+    onDecrypted(post: string): void
     post: string
     postBy: PersonIdentifier
     postId: string
@@ -42,6 +43,7 @@ export function PostInspector(props: PostInspectorProps) {
                 <Debug children={postBy.toText()} data-id="post by" />
                 <Debug children={postId} data-id="post id" />
                 <DecryptPostUI.UI
+                    onDecrypted={props.onDecrypted}
                     requestAppendRecipients={async people => {
                         setAlreadySelectedPreviously(alreadySelectedPreviously.concat(people))
                         return Services.Crypto.appendShareTarget(