diff --git a/net/web/src/context/useUploadContext.hook.js b/net/web/src/context/useUploadContext.hook.js index 3f38d671..cb012212 100644 --- a/net/web/src/context/useUploadContext.hook.js +++ b/net/web/src/context/useUploadContext.hook.js @@ -111,6 +111,19 @@ export function useUploadContext() { cancelContactTopic: (cardId, channelId, topicId) => { abort(`${cardId}:${channelId}`, topicId); }, + clearErrors: (cardId, channelId) => { + const key = cardId ? `${cardId}:${channelId}` : `:${channelId}`; + const topics = channels.current.get(key); + if (topics) { + topics.forEach((topic, topicId) => { + if (topic.error) { + topic.cancel.abort(); + topics.delete(topicId); + updateProgress(); + } + }); + } + }, clear: () => { channels.current.forEach((topics, channelId) => { topics.forEach((assets, topicId) => { diff --git a/net/web/src/session/conversation/Conversation.jsx b/net/web/src/session/conversation/Conversation.jsx index 7c2d16f6..e7f230f1 100644 --- a/net/web/src/session/conversation/Conversation.jsx +++ b/net/web/src/session/conversation/Conversation.jsx @@ -58,7 +58,10 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
- { state.upload && ( + { state.uploadError && ( +
+ )} + { state.upload && !state.uploadError && (
)} { !state.upload && ( @@ -67,6 +70,17 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
+ { state.uploadError && ( +
+ + +
actions.clearUploadErrors(cardId, channelId)}> + +
+
+
+
+ )}
); diff --git a/net/web/src/session/conversation/Conversation.styled.js b/net/web/src/session/conversation/Conversation.styled.js index d41d67c0..1c1ff574 100644 --- a/net/web/src/session/conversation/Conversation.styled.js +++ b/net/web/src/session/conversation/Conversation.styled.js @@ -77,15 +77,34 @@ export const ConversationWrapper = styled.div` .progress-idle { border-top: 1px solid ${Colors.divider}; + height: 1px; } .progress-active { border-top: 1px solid ${Colors.primary}; + height: 1px; + } + + .progress-error { + border-top: 1px solid ${Colors.alert}; + width: 100%; + height: 1px; + display: flex; + justify-content: flex-end; } } .topic { flex-shrink: 0; + position: relative; + + .upload-error { + position: absolute; + top: 0; + right: 0; + margin-right: 16px; + cursor-pointer; + } } ` diff --git a/net/web/src/session/conversation/useConversation.hook.js b/net/web/src/session/conversation/useConversation.hook.js index 814454eb..9bc0aa70 100644 --- a/net/web/src/session/conversation/useConversation.hook.js +++ b/net/web/src/session/conversation/useConversation.hook.js @@ -133,7 +133,8 @@ export function useConversation(cardId, channelId) { resync: () => { conversation.actions.resync(); }, - clearUploadError: () => { + clearUploadErrors: (cardId, channelId) => { + upload.actions.clearErrors(cardId, channelId); }, cancelUpload: () => { },