render upload status

app/mobile/src/context/useConversationContext.hook.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useContext } from 'react';
 import { StoreContext } from 'context/StoreContext';
+import { UploadContext } from 'context/UploadContext';
 import { CardContext } from 'context/CardContext';
 import { ChannelContext } from 'context/ChannelContext';
 import { ProfileContext } from 'context/ProfileContext';
@@ -16,8 +17,12 @@ export function useConversationContext() {
     created: null,
     host: null,
     init: false,
+    progress: null,
+    cardId: null,
+    channelId: null,
   });
   const store = useContext(StoreContext);
+  const upload = useContext(UploadContext);
   const card = useContext(CardContext);
   const channel = useContext(ChannelContext);
   const profile = useContext(ProfileContext);
@@ -34,6 +39,44 @@ export function useConversationContext() {
     setState((s) => ({ ...s, ...value }))
   }
 
+  useEffect(() => {
+    const { cardId, channelId } = state;
+    const key = cardId ? `${cardId}:${channelId}` : `:${channelId}`
+    const progress = upload.state.progress.get(key);
+    if (progress) {
+      let count = 0;
+      let complete = 0;
+      let active = 0;
+      let loaded = 0;
+      let total = 0;
+      let error = false;
+      progress.forEach(post => {
+        count += post.count;
+        complete += (post.index - 1);
+        if (post.active) {
+          active += 1;
+          loaded += post.active.loaded;
+          total += post.active.total;
+        }
+        if (post.error) {
+          error = true;
+        }
+      });
+      percent = Math.floor(((((loaded / total) * active) + complete) / count) * 100);
+      updateState({ progress: percent, uploadError: error });
+
+      if (error) {
+        setTimeout(() => {
+          upload.actions.clearErrors(cardId, channelId);
+          updateState({ progress: null, uploadError: false });
+        }, 2000);
+      }
+    }
+    else {
+      updateState({ progress: null });
+    }
+  }, [upload, state.cardId, state.channelId]);
+
   const getTopicItems = async (cardId, channelId) => {
     if (cardId) {
       return await card.actions.getChannelTopicItems(cardId, channelId);
@@ -307,7 +350,8 @@ export function useConversationContext() {
         setView.current++;
         conversationId.current = selected;
         reset.current = true;
-        updateState({ subject: null, logo: null, contacts: [], topics: new Map(), init: false });
+        updateState({ subject: null, logo: null, contacts: [], topics: new Map(), init: false,
+            cardId: selected.cardId, channelId: selected.channelId });
         sync();
         const { cardId, channelId, revision } = selected;
         if (cardId) {

app/mobile/src/session/conversation/addTopic/AddTopic.jsx

@@ -111,6 +111,15 @@ export function AddTopic() {
 
   return (
     <SafeAreaView style={styles.add} edges={['right']}>
+      { !state.uploadError && state.progress && (
+        <View style={{ height: 0, width: `${state.progress}%`, borderColor: Colors.background, borderWidth: 1 }} />
+      )}
+      { !state.uploadError && !state.progress && (
+        <View style={{ height: 0, width: '100%', borderColor: Colors.formBackground, borderWidth: 1 }} />
+      )}
+      { state.uploadError && (
+        <View style={{ height: 0, width: '100%', borderColor: Colors.alert, borderWidth: 1 }} />
+      )}
       { state.assets.length > 0 && (
         <FlatList style={styles.carousel}
           data={state.assets}

app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js

@@ -25,6 +25,11 @@ export function useAddTopic(cardId, channelId) {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    const { progress, uploadError } = conversation.state;
+    updateState({ progress, uploadError });
+  }, [conversation]);
+
   const actions = {
     setMessage: (message) => {
       updateState({ message });