File sync viz on shared photo (#1232)

* Move file-sync feature inside group feature, augment feed data with sync state Signed-off-by: Aaron Sutula <[email protected]> * Add lib for progress indicator Signed-off-by: Aaron Sutula <[email protected]> * wip Signed-off-by: Aaron Sutula <[email protected]> * Add total size logic Signed-off-by: Aaron Sutula <[email protected]> * Lint fixes Signed-off-by: Aaron Sutula <[email protected]> * fix tsc errors around GroupStatus Signed-off-by: Aaron Sutula <[email protected]> * Better progress indicator lib Signed-off-by: Aaron Sutula <[email protected]> * Display file sync error on shared photo Signed-off-by: Aaron Sutula <[email protected]>
textileio · Jul 25, 2019 · 2fda65f · 2fda65f
1 parent d570e5d
commit 2fda65f
Show file tree

Hide file tree

Showing 22 changed files with 301 additions and 102 deletions.
diff --git a/App/Components/like-and-comment.tsx b/App/Components/like-and-comment.tsx
@@ -11,12 +11,6 @@ import Icon from '@textile/react-native-icon'
 
 import { color, spacing, textStyle } from '../styles'
 
-const CONTAINER: ViewStyle = {
-  paddingLeft: spacing.screenEdge,
-  paddingRight: spacing.screenEdge,
-  paddingTop: spacing.screenEdge
-}
-
 const ICONS: ViewStyle = {
   flexDirection: 'row'
 }
@@ -56,7 +50,7 @@ const LikeAndComment = (props: Props) => {
     (!hasLiked && numberLikes > 0) || (hasLiked && numberLikes > 1)
   const displayCommentsCount = numberComments > 0
   return (
-    <View style={[CONTAINER, likesAndCommentsContainerStyle]}>
+    <View style={likesAndCommentsContainerStyle}>
       <View style={ICONS}>
         {hasLiked && (
           <Icon

diff --git a/App/Components/photo.tsx b/App/Components/photo.tsx
@@ -7,15 +7,18 @@ import {
   Dimensions,
   Modal
 } from 'react-native'
+import ImageZoom from 'react-native-image-pan-zoom'
+import { Circle } from 'react-native-progress'
+import Icon from '@textile/react-native-icon'
 
 import Message, { Props as MessageProps } from './message'
 import ProgressiveImage from './ProgressiveImage'
 import LikeAndComment, {
   Props as LikeAndCommentProps
 } from './like-and-comment'
-import { spacing } from '../styles'
+import { spacing, size, color, textStyle } from '../styles'
 import Comments, { Props as CommentsProps } from './comments'
-import ImageZoom from 'react-native-image-pan-zoom'
+import { GroupStatus } from '../features/group/file-sync/models'
 
 const CONTAINER: ViewStyle = {
   paddingTop: spacing._016,
@@ -31,6 +34,8 @@ interface Props extends MessageProps, LikeAndCommentProps, CommentsProps {
   photoId: string
   fileIndex: number
   photoWidth: number
+  syncStatus?: GroupStatus
+  displayError?: (message: string) => () => void
   pinchZoom?: boolean
   pinchHeight?: number
   pinchWidth?: number
@@ -126,6 +131,11 @@ export default class Photo extends React.PureComponent<Props> {
 
   renderSelection() {
     // Just uses a touchable image, when touched will enable it's own modal in full screen
+    let progress: number | undefined
+    if (this.props.syncStatus) {
+      const { sizeComplete, sizeTotal } = this.props.syncStatus
+      progress = sizeComplete / sizeTotal
+    }
     return (
       <View style={CONTAINER}>
         <Modal
@@ -142,7 +152,41 @@ export default class Photo extends React.PureComponent<Props> {
           this.props.photoWidth,
           this.props.photoWidth
         )}
-        <LikeAndComment {...this.props} />
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            paddingLeft: spacing.screenEdge,
+            paddingRight: spacing.screenEdge,
+            paddingTop: spacing.screenEdge
+          }}
+        >
+          <LikeAndComment {...this.props} />
+          {this.props.syncStatus && !this.props.syncStatus.error && (
+            <Circle
+              showsText={false}
+              size={size._024}
+              thickness={2}
+              progress={progress}
+              color={color.brandBlue}
+            />
+          )}
+          {this.props.syncStatus && this.props.syncStatus.error && (
+            <TouchableOpacity
+              onPress={
+                this.props.displayError
+                  ? this.props.displayError(this.props.syncStatus.error.reason)
+                  : undefined
+              }
+            >
+              <Icon
+                name="alert-circle"
+                size={size._024}
+                style={{ color: color.severe_3 }}
+              />
+            </TouchableOpacity>
+          )}
+        </View>
         <Comments {...this.props} />
       </View>
     )

diff --git a/App/Redux/RootReducer.ts b/App/Redux/RootReducer.ts
@@ -21,7 +21,6 @@ import { reducer as textileEventsReducer } from './TextileEventsRedux'
 import { groupReducer } from '../features/group'
 import { photosReducer } from '../features/photos'
 import { cafesReducer } from '../features/cafes'
-import { fileSyncReducer } from '../features/file-sync'
 
 const migrations: MigrationManifest = {
   0: persistedState => {
@@ -360,14 +359,19 @@ const migrations: MigrationManifest = {
     const state = persistedState as any
     const { cafeSessions, ...rest } = state.account
     return { ...state, account: rest }
+  },
+  23: persistedState => {
+    const state = persistedState as any
+    const { fileSync, ...rest } = state
+    return rest
   }
 }
 
 const persistConfig: PersistConfig = {
   key: 'primary',
   storage: AsyncStorage,
-  version: 22,
-  whitelist: ['account', 'preferences', 'deviceLogs', 'fileSync'],
+  version: 23,
+  whitelist: ['account', 'preferences', 'deviceLogs'],
   migrate: createMigrate(migrations, { debug: false }),
   debug: false
 }
@@ -386,8 +390,7 @@ const rootReducer = combineReducers({
   textile: textileEventsReducer,
   group: groupReducer,
   photos: photosReducer,
-  cafes: cafesReducer,
-  fileSync: fileSyncReducer
+  cafes: cafesReducer
 })
 
 export default persistReducer(persistConfig, rootReducer)
diff --git a/App/Redux/Types.ts b/App/Redux/Types.ts
@@ -17,7 +17,6 @@ import { TextileEventsAction } from './TextileEventsRedux'
 import { GroupAction } from '../features/group'
 import { PhotosAction } from '../features/photos'
 import { CafesAction } from '../features/cafes'
-import { FileSyncAction } from '../features/file-sync'
 
 export type RootState = StateType<typeof RootReducer> & PersistPartial
 export type RootAction =
@@ -36,4 +35,3 @@ export type RootAction =
   | GroupAction
   | PhotosAction
   | CafesAction
-  | FileSyncAction
diff --git a/App/Sagas/TextileEventsSagas.ts b/App/Sagas/TextileEventsSagas.ts
@@ -5,9 +5,9 @@ import { ActionType, getType } from 'typesafe-actions'
 import RNPushNotification from 'react-native-push-notification'
 import Textile, {
   EventSubscription,
-  FeedItemType,
-  ICafeSyncGroupStatus
+  FeedItemType
 } from '@textile/react-native-sdk'
+import Long from 'long'
 
 import { toTypedNotification } from '../Services/Notifications'
 import { logNewEvent } from './DeviceLogs'
@@ -28,7 +28,6 @@ import PhotoViewingActions, {
 import { contactsActions, ContactsAction } from '../features/contacts'
 import DeviceLogsActions, { DeviceLogsAction } from '../Redux/DeviceLogsRedux'
 import { groupActions, GroupAction } from '../features/group'
-import { fileSyncActions, FileSyncAction } from '../features/file-sync'
 import AppConfig from '../Config/app-config'
 
 function displayNotification(message: string, title?: string) {
@@ -49,7 +48,6 @@ function nodeEvents() {
     | DeviceLogsAction
     | NotificationsAction
     | TextileEventsAction
-    | FileSyncAction
   >(emitter => {
     const subscriptions: EventSubscription[] = []
     subscriptions.push(
@@ -161,17 +159,34 @@ function nodeEvents() {
     )
     subscriptions.push(
       Textile.events.addSyncUpdateListener(status => {
-        emitter(fileSyncActions.syncUpdate(status))
+        const sizeComplete = Long.fromValue(status.sizeComplete).toNumber()
+        const sizeTotal = Long.fromValue(status.sizeTotal).toNumber()
+        const groupSizeComplete = Long.fromValue(
+          status.groupsSizeComplete
+        ).toNumber()
+        const groupSizeTotal = Long.fromValue(status.groupsSizeTotal).toNumber()
+        const total = Math.max(sizeTotal, groupSizeTotal)
+        const { id, numComplete, numTotal } = status
+        emitter(
+          groupActions.fileSync.syncUpdate(
+            id,
+            numComplete,
+            numTotal,
+            groupSizeComplete,
+            total
+          )
+        )
       })
     )
     subscriptions.push(
       Textile.events.addSyncCompleteListener(status => {
-        emitter(fileSyncActions.syncComplete(status))
+        emitter(groupActions.fileSync.syncComplete(status.id))
       })
     )
     subscriptions.push(
       Textile.events.addSyncFailedListener(status => {
-        emitter(fileSyncActions.syncFailed(status))
+        const { id, errorId, error } = status
+        emitter(groupActions.fileSync.syncFailed(id, errorId, error))
       })
     )
     return () => {

diff --git a/App/features/file-sync/actions.ts b/App/features/file-sync/actions.ts
diff --git a/App/features/file-sync/index.ts b/App/features/file-sync/index.ts
diff --git a/App/features/file-sync/reducer.ts b/App/features/file-sync/reducer.ts
diff --git a/App/features/group/actions.ts b/App/features/group/actions.ts
@@ -2,6 +2,7 @@ import { feedActions as feed } from './feed'
 import { addMessageActions as addMessage } from './add-message'
 import { addPhotoActions as addPhoto } from './add-photo'
 import { renameGroupActions as renameGroup } from './rename-group'
+import { fileSyncActions as fileSync } from './file-sync'
 import { ignoreActions as ignore } from './ignore'
 
-export { feed, addMessage, addPhoto, renameGroup, ignore }
+export { feed, addMessage, addPhoto, renameGroup, fileSync, ignore }
diff --git a/App/features/group/file-sync/actions.ts b/App/features/group/file-sync/actions.ts
@@ -0,0 +1,37 @@
+import { createAction } from 'typesafe-actions'
+
+export const syncUpdate = createAction(
+  'group/file-sync/SYNC_UPDATE',
+  resolve => {
+    return (
+      groupId: string,
+      numberComplete: number,
+      numberTotal: number,
+      sizeComplete: number,
+      sizeTotal: number
+    ) =>
+      resolve({ groupId, numberComplete, numberTotal, sizeComplete, sizeTotal })
+  }
+)
+
+export const syncComplete = createAction(
+  'group/file-sync/SYNC_COMPLETE',
+  resolve => {
+    return (groupId: string) => resolve({ groupId })
+  }
+)
+
+export const syncFailed = createAction(
+  'group/file-sync/SYNC_FAILED',
+  resolve => {
+    return (groupId: string, errorId: string, reason: string) =>
+      resolve({ groupId, errorId, reason })
+  }
+)
+
+export const clearStatus = createAction(
+  'group/file-sync/CLEAR_STATUS',
+  resolve => {
+    return (groupId: string) => resolve({ groupId })
+  }
+)
diff --git a/App/features/group/file-sync/index.ts b/App/features/group/file-sync/index.ts
@@ -0,0 +1,11 @@
+import * as fileSyncActions from './actions'
+import fileSyncReducer, { FileSyncState, FileSyncAction } from './reducer'
+import * as fileSyncSelectors from './selectors'
+
+export {
+  fileSyncActions,
+  fileSyncReducer,
+  fileSyncSelectors,
+  FileSyncState,
+  FileSyncAction
+}
diff --git a/App/features/group/file-sync/models.ts b/App/features/group/file-sync/models.ts
@@ -0,0 +1,10 @@
+export interface GroupStatus {
+  numberComplete: number
+  numberTotal: number
+  sizeComplete: number
+  sizeTotal: number
+  error?: {
+    id: string
+    reason: string
+  }
+}