more conversation refactor

net/web/src/constants/Colors.js

@@ -10,6 +10,7 @@ const Colors = {
   mask: '#dddddd',
   encircle: '#cccccc',
   alert: '#ff8888',
+  warn: '#dd4444',
   enabled: '#444444',
   disabled: '#aaaaaa',
   text: '#444444',

net/web/src/session/conversation/Conversation.jsx

@@ -15,7 +15,7 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
   const thread = useRef(null);
 
   const topicRenderer = (topic) => {
-    return (<TopicItem host={cardId == null} topic={topic} />)
+    return (<TopicItem host={cardId == null} topic={topic} remove={() => actions.removeTopic(topic.id)}/>)
   }
 
   // an unfortunate cludge for the mobile browser

net/web/src/session/conversation/topicItem/TopicItem.jsx

@@ -7,7 +7,32 @@ import { Space, Skeleton, Button, Modal, Input } from 'antd';
 import { ExclamationCircleOutlined, DeleteOutlined, EditOutlined, FireOutlined, PictureOutlined } from '@ant-design/icons';
 import { Carousel } from 'carousel/Carousel';
 
-export function TopicItem({ host, topic }) {
+export function TopicItem({ host, topic, remove }) {
+
+  const [ modal, modalContext ] = Modal.useModal();
+
+  const removeTopic = () => {
+    modal.confirm({
+      title: 'Do you want to delete this message?',
+      icon: <ExclamationCircleOutlined />,
+      bodyStyle: { padding: 16 },
+      okText: 'Yes, Delete',
+      cancelText: 'No, Cancel',
+      onOk:  async () => {
+        try {
+          await remove();
+        }
+        catch(err) {
+          console.log(err);
+          modal.error({
+            title: 'Failed to Delete Message',
+            content: 'Please try again.',
+            bodyStyle: { padding: 16 },
+          });
+        }
+      },
+    });
+  }
 
   const renderAsset = (asset, idx) => {
     if (asset.image) {
@@ -26,6 +51,7 @@ export function TopicItem({ host, topic }) {
 
   return (
     <TopicItemWrapper>
+      { modalContext }
       <div class="topic-header">
         <div class="avatar">
           <Logo width={32} height={32} radius={4} url={topic.imageUrl} />
@@ -34,6 +60,20 @@ export function TopicItem({ host, topic }) {
           <div class={ topic.nameSet ? 'set' : 'unset' }>{ topic.name }</div>
           <div>{ topic.createdStr }</div>
         </div>
+        <div class="topic-options">
+          <div class="buttons">
+            { topic.creator && (
+              <div class="button edit" onClick={() => console.log('edit')}>
+                <EditOutlined />
+              </div>
+            )}
+            { (host || topic.creator) && (
+              <div class="button remove" onClick={removeTopic}>
+                <DeleteOutlined />
+              </div>
+            )}
+          </div>
+        </div>
       </div>
       { topic.status !== 'confirmed' && (
         <div class="skeleton">

net/web/src/session/conversation/topicItem/TopicItem.styled.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import Colors from 'constants/Colors';
 
 export const TopicItemWrapper = styled.div`
   display: flex;
@@ -18,10 +19,6 @@ export const TopicItemWrapper = styled.div`
       visibility: visible;
     }
 
-    &:hover .info {
-      text-decoration: underline;
-    }
-
     .topic-options {
       visibility: hidden;
       padding-left: 16px;
@@ -33,7 +30,6 @@ export const TopicItemWrapper = styled.div`
         flex-direction: row;
         border-radius: 4px;
         background-color: #eeeeee;
-        border: 1px solid #555555;
         margin-top: 2px;
 
         .button {
@@ -42,6 +38,14 @@ export const TopicItemWrapper = styled.div`
           margin-right: 8px;
           cursor: pointer;
         }
+
+        .remove {
+          color: ${Colors.warn};
+        }
+
+        .edit {
+          color: ${Colors.primary};
+        }
       }
     }
 

net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx

@@ -10,10 +10,6 @@ export function VideoAsset({ thumbUrl, lqUrl, hdUrl }) {
   const { state, actions } = useVideoAsset();
   const [dimension, setDimension] = useState({ width: 0, height: 0 });
 
-  useEffect(() => {
-    console.log(dimension);
-  }, [dimension]);
-
   const activate = () => {
     if (dimension.width / dimension.height > window.innerWidth / window.innerHeight) {
       let width = Math.floor(window.innerWidth * 8 / 10);

net/web/src/session/conversation/useConversation.hook.js

@@ -210,12 +210,15 @@ export function useConversation(cardId, channelId) {
   useEffect(() => {
     const messages = new Map();
     conversation.state.topics.forEach((value, id) => {
-      let item = topics.current.get(id);
+      const curCardId = conversation.state.card?.id;
+      const curChannelId = conversation.state.channel?.id;
+      const key = `${curCardId}:${curChannelId}:${id}`
+      let item = topics.current.get(key);
       if (!item) {
         item = { id };
       }
       syncTopic(item, value);
-      messages.set(id, item);
+      messages.set(key, item);
     });
     topics.current = messages;
 
@@ -245,6 +248,9 @@ export function useConversation(cardId, channelId) {
     },
     cancelUpload: () => {
     },
+    removeTopic: async (topicId) => {
+      await conversation.actions.removeTopic(topicId);
+    },
   };
 
   return { state, actions };

net/web/src/session/identity/Identity.styled.js

@@ -15,10 +15,10 @@ export const IdentityWrapper = styled.div`
 
   &:hover {
     cursor: pointer;
+    background-color: ${Colors.formFocus};
 
     .drop {
-      border: 1px solid ${Colors.encircle};
-      background-color: ${Colors.formHover};
+      font-weight: bold;
     }
   }