adding and removing to asset carousel

net/web/src/Carousel/Carousel.jsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { CarouselWrapper } from './Carousel.styled';
-import { RightOutlined, LeftOutlined } from '@ant-design/icons';
+import { RightOutlined, LeftOutlined, CloseOutlined } from '@ant-design/icons';
 import ReactResizeDetector from 'react-resize-detector';
 
 import login from '../login.png';
 import test from '../test.png';
 
-export function Carousel({ items, itemRenderer }) {
+export function Carousel({ items, itemRenderer, itemRemove }) {
   const [slots, setSlots] = useState([]);
   const [itemIndex, setItemIndex] = useState(0);
   const [scrollLeft, setScrollLeft] = useState('hidden');
@@ -74,7 +74,12 @@ export function Carousel({ items, itemRenderer }) {
         <ReactResizeDetector handleWidth={true} handleHeight={false}>
           {({ width, height }) => {
             itemWidth.current.set(i, width);
-            return <div class="item noselect">{ itemRenderer(items[i]) }</div>
+            return (
+              <div class="item noselect">
+                <div class="asset">{ itemRenderer(items[i]) }</div>
+                <div class="delitem" onClick={() => itemRemove(i)}><CloseOutlined /></div>
+              </div>
+            );
           }}
         </ReactResizeDetector>
       ));

net/web/src/Carousel/Carousel.styled.js

@@ -47,8 +47,23 @@ export const CarouselWrapper = styled.div`
     }
 
   .item {
-    height: 128px;
     margin-right: 32px;
+    position: relative;
+  }
+
+  .delitem {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: white;
+    border-bottom-left-radius: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
+    cursor: pointer;
+  }
+
+  .asset {
+    height: 128px;
   }
 
   .space {

net/web/src/User/Conversation/AddTopic/AddTopic.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Button, Dropdown, Input, Tooltip, Menu } from 'antd';
 import { AddTopicWrapper, BusySpin } from './AddTopic.styled';
 import { Carousel } from '../../../Carousel/Carousel';
@@ -13,17 +13,31 @@ export function AddTopic() {
 
   let [ items, setItems] = useState([]);
   const { state, actions } = useAddTopic();
+  const attachImage = useRef(null);
+  const attachAudio = useRef(null);
+  const attachVideo = useRef(null);
+
+  const onSelect = (e, action) => {
+    var reader = new FileReader();
+    reader.onload = () => {
+      action(reader.result);
+    }
+    reader.readAsDataURL(e.target.files[0]);
+  }
 
   const menu = (
     <Menu>
       <Menu.Item key="0">
-        <div onClick={() => setItems([test, login, login, test, test, login])}>Attach Image</div>
+        <input type='file' accept="image/*" ref={attachImage} onChange={e => onSelect(e, actions.addImage)} style={{display: 'none'}}/>
+        <div onClick={() => attachImage.current.click()}>Attach Image</div>
       </Menu.Item>
       <Menu.Item key="1">
-        <div onClick={() => setItems([test, login, login, test, test, login])}>Attach Video</div>
+        <input type='file' accept="audio/*" ref={attachAudio} onChange={e => onSelect(e, actions.addAudio)} style={{display: 'none'}}/>
+        <div onClick={() => attachAudio.current.click()}>Attach Audio</div>
       </Menu.Item>
       <Menu.Item key="2">
-        <div onClick={() => setItems([test, login, login, test, test, login])}>Attach Audio</div>
+        <input type='file' accept="video/*" ref={attachVideo} onChange={e => onSelect(e, actions.addVideo)} style={{display: 'none'}}/>
+        <div onClick={() => attachVideo.current.click()}>Attach Video</div>
       </Menu.Item>
     </Menu>
   );
@@ -41,12 +55,27 @@ export function AddTopic() {
     }
   }
 
+  const renderItem = (item) => {
+    if (item.image) {
+      return <img style={{ height: '100%', objectFit: 'contain' }} src={item.image} alt="" />
+    }
+    if (item.audio) {
+      return <img style={{ height: '100%', objectFit: 'contain' }} src={test} alt="" />
+    }
+    if (item.video) {
+      return <img style={{ height: '100%', objectFit: 'contain' }} src={login} alt="" />
+    }
+    return <></>
+  }
+
+  const removeItem = (index) => {
+    actions.removeAsset(index);
+  }
+
   return (
     <AddTopicWrapper>
       <div class="container noselect">
-        <Carousel items={items} itemRenderer={(item) => {
+        <Carousel items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
-          return <img style={{ height: '100%', objectFit: 'contain' }} src={item} alt="" />
-        }} />
         <div class="input">
           <Input.TextArea placeholder="Message" autoSize={{ minRows: 2, maxRows: 6 }} onKeyPress={onKey}
             onChange={(e) => actions.setMessageText(e.target.value)} value={state.messageText} />

net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js

@@ -26,17 +26,24 @@ export function useAddTopic() {
 
   const addAsset = (value) => {
     setState((s) => {
-      s.assets.push(value);
+      let assets = [...s.assets, value];
-      return { ...s };
+      return { ...s, assets };
+    });
+  }
+
+  const removeAsset = (index) => {
+    setState((s) => {
+      s.assets.splice(index, 1);
+      let assets = [...s.assets];
+      return { ...s, assets };
     });
   }
 
   const actions = {
-    addImage: (image) => { addAsset(image) },
+    addImage: (image) => { addAsset({ image }) },
-    addVideo: (video) => { addAsset(video) },
+    addVideo: (video) => { addAsset({ video }) },
-    addAudio: (audio) => { addAsset(audio) },
+    addAudio: (audio) => { addAsset({ audio }) },
-    addIframe: (iframe) => { addAsset(iframe) },
+    removeAsset: (idx) => { removeAsset(idx) },
-    removeAsset: (idx) => {},
     setMessageText: (value) => {
       updateState({ messageText: value });
     },