From ed89df3235608c3d7062b5ed2eb92fcac9ac7bd2 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Sat, 30 Apr 2022 00:01:25 -0700 Subject: [PATCH] uploading image assets --- .../internal/api_addChannelTopicAsset.go | 2 ++ .../internal/api_setChannelTopicConfirmed.go | 5 ++- .../internal/api_setChannelTopicSubject.go | 3 ++ net/web/src/Carousel/Carousel.styled.js | 3 +- .../User/Conversation/AddTopic/AddTopic.jsx | 31 ++++++++++++------- .../Conversation/AddTopic/AddTopic.styled.js | 2 +- .../Conversation/AddTopic/useAddTopic.hook.js | 21 +++++++++---- .../TopicItem/useTopicItem.hook.js | 12 ++++--- net/web/src/api/addChannelTopic.js | 9 +++++- net/web/src/api/addContactChannelTopic.js | 8 +++++ .../context/useConversationContext.hook.js | 1 + 11 files changed, 71 insertions(+), 26 deletions(-) diff --git a/net/server/internal/api_addChannelTopicAsset.go b/net/server/internal/api_addChannelTopicAsset.go index 1f8b7eae..42220a33 100644 --- a/net/server/internal/api_addChannelTopicAsset.go +++ b/net/server/internal/api_addChannelTopicAsset.go @@ -75,6 +75,7 @@ func AddChannelTopicAsset(w http.ResponseWriter, r *http.Request) { ErrResponse(w, http.StatusBadRequest, err) return } + file, _, err := r.FormFile("asset") if err != nil { ErrResponse(w, http.StatusBadRequest, err) @@ -188,6 +189,7 @@ func isStorageFull(act *store.Account) (full bool, err error) { if size >= storage { full = true } + return } diff --git a/net/server/internal/api_setChannelTopicConfirmed.go b/net/server/internal/api_setChannelTopicConfirmed.go index 0a0ea756..eb48b428 100644 --- a/net/server/internal/api_setChannelTopicConfirmed.go +++ b/net/server/internal/api_setChannelTopicConfirmed.go @@ -47,7 +47,10 @@ func SetChannelTopicConfirmed(w http.ResponseWriter, r *http.Request) { } err = store.DB.Transaction(func(tx *gorm.DB) error { - if res := tx.Model(topicSlot.Topic).Update("status", status).Error; res != nil { + if res := tx.Model(&topicSlot.Topic).Update("status", status).Error; res != nil { + return res + } + if res := tx.Model(&topicSlot.Topic).Update("detail_revision", act.ChannelRevision + 1).Error; res != nil { return res } if res := tx.Model(&topicSlot).Update("revision", act.ChannelRevision + 1).Error; res != nil { diff --git a/net/server/internal/api_setChannelTopicSubject.go b/net/server/internal/api_setChannelTopicSubject.go index ced184be..19ce9905 100644 --- a/net/server/internal/api_setChannelTopicSubject.go +++ b/net/server/internal/api_setChannelTopicSubject.go @@ -52,6 +52,9 @@ func SetChannelTopicSubject(w http.ResponseWriter, r *http.Request) { if res := tx.Model(topicSlot.Topic).Update("data_type", subject.DataType).Error; res != nil { return res } + if res := tx.Model(&topicSlot.Topic).Update("detail_revision", act.ChannelRevision + 1).Error; res != nil { + return res + } if res := tx.Model(&topicSlot).Update("revision", act.ChannelRevision + 1).Error; res != nil { return res } diff --git a/net/web/src/Carousel/Carousel.styled.js b/net/web/src/Carousel/Carousel.styled.js index ff418cb6..80e6cf58 100644 --- a/net/web/src/Carousel/Carousel.styled.js +++ b/net/web/src/Carousel/Carousel.styled.js @@ -55,7 +55,8 @@ export const CarouselWrapper = styled.div` position: absolute; top: 0; right: 0; - background-color: white; + background-color: #888888; + color: white; border-bottom-left-radius: 2px; padding-left: 2px; padding-right: 2px; diff --git a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx b/net/web/src/User/Conversation/AddTopic/AddTopic.jsx index 7de8928f..f7f6289e 100644 --- a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx +++ b/net/web/src/User/Conversation/AddTopic/AddTopic.jsx @@ -17,33 +17,42 @@ export function AddTopic() { 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 onSelectImage = (e) => { + actions.addImage(e.target.files[0]); + attachImage.current.value = ''; + } + + const onSelectAudio = (e) => { + actions.addAudio(e.target.files[0]); + attachAudio.current.value = ''; + } + + const onSelectVideo = (e) => { + actions.addVideo(e.target.files[0]); + attachVideo.current.value = ''; } const menu = ( - onSelect(e, actions.addImage)} style={{display: 'none'}}/> + onSelectImage(e)} style={{display: 'none'}}/>
attachImage.current.click()}>Attach Image
 - onSelect(e, actions.addAudio)} style={{display: 'none'}}/> + onSelectAudio(e)} style={{display: 'none'}}/>
attachAudio.current.click()}>Attach Audio
 - onSelect(e, actions.addVideo)} style={{display: 'none'}}/> + onSelectVideo(e)} style={{display: 'none'}}/>
attachVideo.current.click()}>Attach Video
 ); const onSend = () => { - actions.addTopic(); + if (state.messageText || state.assets.length) { + actions.addTopic(); + } } const onKey = (e) => { @@ -57,7 +66,7 @@ export function AddTopic() { const renderItem = (item) => { if (item.image) { - return + return } if (item.audio) { return diff --git a/net/web/src/User/Conversation/AddTopic/AddTopic.styled.js b/net/web/src/User/Conversation/AddTopic/AddTopic.styled.js index fff8fdd6..a4b06eab 100644 --- a/net/web/src/User/Conversation/AddTopic/AddTopic.styled.js +++ b/net/web/src/User/Conversation/AddTopic/AddTopic.styled.js @@ -44,7 +44,7 @@ export const AddTopicWrapper = styled.div` export const BusySpin = styled(Spin)` display: flex; position: absolute; - padding-right: 12px; + right: 64px; x-index: 10; `; diff --git a/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js b/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js index d98f434e..015c1de5 100644 --- a/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js +++ b/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js @@ -40,9 +40,18 @@ export function useAddTopic() { } const actions = { - addImage: (image) => { addAsset({ image }) }, - addVideo: (video) => { addAsset({ video }) }, - addAudio: (audio) => { addAsset({ audio }) }, + addImage: (image) => { + let url = URL.createObjectURL(image); + addAsset({ image, url }) + }, + addVideo: (video) => { + let url = URL.createObjectURL(video); + addAsset({ video, url }) + }, + addAudio: (audio) => { + let url = URL.createObjectURL(audio); + addAsset({ audio, url }) + }, removeAsset: (idx) => { removeAsset(idx) }, setMessageText: (value) => { updateState({ messageText: value }); @@ -66,12 +75,12 @@ export function useAddTopic() { let message = { text: state.messageText, textColor: state.messageColor, textSize: state.messageSize, backgroundColor: state.backgroundColor }; if (cardId) { - await card.actions.addChannelTopic(cardId, channelId, message, []); + await card.actions.addChannelTopic(cardId, channelId, message, state.assets); } else { - await channel.actions.addChannelTopic(channelId, message, []); + await channel.actions.addChannelTopic(channelId, message, state.assets); } - updateState({ messageText: null, messageColor: null, messageSize: null, backgroundColor: null }); + updateState({ messageText: null, messageColor: null, messageSize: null, backgroundColor: null, assets: [] }); } catch(err) { window.alert(err); diff --git a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js index c8133bef..bc0cba2e 100644 --- a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js +++ b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js @@ -25,11 +25,13 @@ export function useTopicItem(topic) { useEffect(() => { let message; - try { - message = JSON.parse(topic.data.topicDetail.data).text; - } - catch(err) { - console.log(err); + if( topic.data.topicDetail.status === 'confirmed') { + try { + message = JSON.parse(topic.data.topicDetail.data).text; + } + catch(err) { + console.log(err); + } } if (profile.state.init && card.state.init && conversation.state.init) { diff --git a/net/web/src/api/addChannelTopic.js b/net/web/src/api/addChannelTopic.js index 7bb8ed54..bae5f84e 100644 --- a/net/web/src/api/addChannelTopic.js +++ b/net/web/src/api/addChannelTopic.js @@ -15,10 +15,17 @@ export async function addChannelTopic(token, channelId, message, assets ) { let topic = await fetchWithTimeout(`/content/channels/${channelId}/topics?agent=${token}`, { method: 'POST', body: JSON.stringify({}) }); checkResponse(topic); - let slot = await topic.json(); // add each asset + for (let asset of assets) { + const formData = new FormData(); + formData.append('asset', asset.image); + let transform = encodeURIComponent(JSON.stringify(["ithumb;photo"])); + let topicAsset = await fetch(`/content/channels/${channelId}/topics/${slot.id}/assets?transforms=${transform}&agent=${token}`, { method: 'POST', body: formData }); + checkResponse(topicAsset); +console.log(await topicAsset.json()); + } let unconfirmed = await fetchWithTimeout(`/content/channels/${channelId}/topics/${slot.id}/subject?agent=${token}`, { method: 'PUT', body: JSON.stringify(subject) }); diff --git a/net/web/src/api/addContactChannelTopic.js b/net/web/src/api/addContactChannelTopic.js index e54641c2..b7ec3e28 100644 --- a/net/web/src/api/addContactChannelTopic.js +++ b/net/web/src/api/addContactChannelTopic.js @@ -18,6 +18,14 @@ export async function addContactChannelTopic(server, token, channelId, message, let slot = await topic.json(); // add each asset + for (let asset of assets) { + const formData = new FormData(); + formData.append('asset', asset.image); + let transform = encodeURIComponent(JSON.stringify(["ithumb;photo"])); + let topicAsset = await fetch(`https://${server}/content/channels/${channelId}/topics/${slot.id}/assets?transforms=${transform}&contact=${token}`, { method: 'POST', body: formData }); + checkResponse(topicAsset); +console.log(await topicAsset.json()); + } let unconfirmed = await fetchWithTimeout(`https://${server}/content/channels/${channelId}/topics/${slot.id}/subject?contact=${token}`, { method: 'PUT', body: JSON.stringify(subject) }); diff --git a/net/web/src/context/useConversationContext.hook.js b/net/web/src/context/useConversationContext.hook.js index c6d8b72e..75ebcf7b 100644 --- a/net/web/src/context/useConversationContext.hook.js +++ b/net/web/src/context/useConversationContext.hook.js @@ -26,6 +26,7 @@ export function useConversationContext() { let rev = card.actions.getChannelRevision(cardId, channelId); if (revision.current != rev) { let delta = await card.actions.getChannelTopics(cardId, channelId, revision.current); + console.log(delta); for (let topic of delta) { if (topic.data == null) { topics.current.delete(topic.id);