Delete posts

CHANGELOG.md

@@ -122,6 +122,7 @@ and login again.
 * 🎨 Theme Editor (`/admin/theme`) - Choose from 4 base themes and then customize with css custom properties via our live editor
 * ✏️ Profile editing: Users can now edit their Display name and Bio from the web interface.
 * 🚮 Remove avatar: Users can now remove Avatar models from their Avatar collection from the web interface (Does not delete the Avatar).
+* 🗑️ Delete posts: Users can delete messages from their Outbox from the web interface
 
 ### Changed
 

views/ap/Post.css

@@ -25,6 +25,7 @@
   overflow-wrap: break-word;
   overflow: hidden;
   margin-bottom: 0;
+  min-height: 36px;
 }
 
 .postBody .centered {

views/ap/Post.js

@@ -5,6 +5,7 @@ import ProfileIcon from '../components/ProfileIcon'
 import SanitizedHTML from '../components/SanitizedHTML'
 import './Post.css'
 import { Link } from 'react-router-dom'
+import NotePostBody from '../components/NotePostBody'
 import ModelPostBody from '../components/ModelPostBody'
 import PlacePostBody from '../components/PlacePostBody'
 import { handleImmerLink, ImmerLink } from '../components/ImmerLink'
@@ -67,7 +68,7 @@ function getPostBody (object, { showAvatarControls, expandLocationPosts }, id, h
   const { type, content, url } = object
   switch (type) {
     case 'Note':
-      return <SanitizedHTML html={content} />
+      return <NotePostBody html={content} activityId={id} />
     case 'Image':
       return <img className='postMedia' src={ImmersClient.URLFromProperty(url)} />
     case 'Video':

views/components/DialogModal.js

@@ -2,10 +2,11 @@ import React, { useEffect, useRef } from 'react'
 
 const DialogModal = ({
   title,
+  description,
+  actionVerb,
   isOpened,
   onProceed,
   onClose,
-  description,
   children
 }) => {
   const ref = useRef(null)
@@ -40,7 +41,7 @@ const DialogModal = ({
         </section>
         <footer>
           <a role='button' href='#cancel' className='secondary' onClick={onClose}>Cancel</a>
-          <a role='button' href='#remove' onClick={proceedAndClose}>Remove</a>
+          <a role='button' href='#remove' onClick={proceedAndClose}>{actionVerb}</a>
         </footer>
       </article>
     </dialog>

views/components/ModelPostBody.js

@@ -37,10 +37,11 @@ export default function ModelPostBody ({ model, showControls, activityID, handle
       {isOpened && (
         <DialogModal
           title='Remove avatar'
+          description='Remove this avatar from your collection? The original will not be deleted.'
+          actionVerb='Remove'
           isOpened={isOpened}
           onProceed={onProceed}
           onClose={onClose}
-          description='Remove this avatar from your collection? The original will not be deleted.'
         >
           <AvatarPreview avatar={model} {...props} />
         </DialogModal>)}

views/components/NotePostBody.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import DialogModal from './DialogModal'
+import './ModelPostBody.css'
+import EmojiButton from './EmojiButton'
+import { immersClient } from '../ap/utils/immersClient'
+import SanitizedHTML from '../components/SanitizedHTML'
+
+export default function NotePostBody ({ className, html, activityId, ...props }) {
+  const [isOpened, setIsOpened] = useState(false)
+  const handleDeleteNote = () => { immersClient.deleteMessage(activityId) }
+  const onProceed = () => {
+    handleDeleteNote()
+  }
+  const onClose = () => {
+    document.body.classList.remove('modal-open')
+    setIsOpened(false)
+  }
+
+  return (
+    <div className='relative'>
+      <SanitizedHTML html={html} />
+      <div className='modelActionButtons'>
+        <EmojiButton emoji='x' title='Delete this Note' tipSide='left' onClick={() => setIsOpened(true)} />
+      </div>
+      {isOpened && (
+        <DialogModal
+          title='Delete Note'
+          description='Delete this message?'
+          actionVerb='Delete'
+          isOpened={isOpened}
+          onProceed={onProceed}
+          onClose={onClose}
+        >
+          <SanitizedHTML html={html} />
+        </DialogModal>)}
+    </div>
+  )
+}