more notification control (#1013)

* adds toggles for verboseui options

App/Config/ReduxPersist.ts

@@ -310,13 +310,27 @@ const migrations: MigrationManifest = {
     const state = persistedState as any
     const { migration, ...rest } = state
     return rest
+  },
+  20: (persistedState) => {
+    const state = persistedState as any
+    return {
+      ...state,
+      preferences: {
+        ...state.preferences,
+        verboseUiOptions: {
+          nodeStateOverlay: true,
+          nodeStateNotifications: true,
+          nodeErrorNotifications: true
+        }
+      }
+    }
   }
 }
 
 const persistConfig: PersistConfig = {
   key: 'primary',
   storage: AsyncStorage,
-  version: 19,
+  version: 20,
   whitelist: ['account', 'preferences', 'uploadingImages', 'group', 'cameraRoll', 'storage', 'deviceLogs'],
   migrate: createMigrate(migrations, { debug: false })
 }

App/Containers/RootContainer.tsx

@@ -15,7 +15,7 @@ import styles from './Styles/RootContainerStyles'
 interface StateProps {
   monitorLocation: boolean
   nodeState: string
-  verboseUi: boolean
+  showVerboseUi: boolean
 }
 
 interface DispatchProps {
@@ -62,7 +62,7 @@ class RootContainer extends Component<StateProps & DispatchProps> {
         <AppNavigation
           ref={(navRef: NavigationContainerComponent) => { NavigationService.setTopLevelNavigator(navRef) }}
         />
-        {this.props.verboseUi &&
+        {this.props.showVerboseUi &&
         <View style={styles.bottomOverlay} >
           <Text style={styles.overlayText}>{overlayMessage}</Text>
         </View>
@@ -75,7 +75,7 @@ class RootContainer extends Component<StateProps & DispatchProps> {
 const mapStateToProps = (state: RootState): StateProps => {
   return {
     monitorLocation: state.preferences.services.backgroundLocation.status,
-    verboseUi: state.preferences.verboseUi,
+    showVerboseUi: state.preferences.verboseUi && state.preferences.verboseUiOptions.nodeStateOverlay,
     nodeState: state.textile.nodeState.state
   }
 }

App/Redux/PreferencesRedux.ts

@@ -19,6 +19,16 @@ const actions = {
   }),
   updateViewSetting: createAction('TOGGLE_VIEW_SETTING', (resolve) => {
     return (name: string, value: string) => resolve({ name, value })
+  }),
+  // Verbose UI options
+  toggleNodeStateNotifications: createAction('TOGGLE_NODE_STATE_NOTIFICATIONS', (resolve) => {
+    return () => resolve()
+  }),
+  toggleNodeStateOverlay: createAction('TOGGLE_NODE_STATE_OVERLAY', (resolve) => {
+    return () => resolve()
+  }),
+  toggleNodeErrorNotifications: createAction('TOGGLE_NODE_ERROR_NOTIFICATIONS', (resolve) => {
+    return () => resolve()
   })
 }
 
@@ -45,17 +55,21 @@ export interface ViewSettings {
   selectedWalletTab: 'Photos' | 'Groups' | 'Contacts',
 }
 export interface PreferencesState {
-  verboseUi: boolean
   readonly services: {readonly [k in ServiceType]: Service}
   readonly storage: {readonly [k in StorageType]: Service}
   readonly tourScreens: {readonly [k in TourScreens]: boolean} // true = still need to show, false = no need
   viewSettings: ViewSettings
   onboarded: boolean
+  verboseUi: boolean
+  verboseUiOptions: {
+    nodeStateOverlay: boolean
+    nodeStateNotifications: boolean
+    nodeErrorNotifications: boolean
+  }
 }
 
 export const initialState: PreferencesState = {
   onboarded: false,
-  verboseUi: false,
   tourScreens: {
     wallet: true,
     threads: true,
@@ -113,11 +127,23 @@ export const initialState: PreferencesState = {
   },
   viewSettings: {
     selectedWalletTab: 'Groups'
+  },
+  verboseUi: false,
+  verboseUiOptions: {
+    nodeStateOverlay: true,
+    nodeStateNotifications: true,
+    nodeErrorNotifications: true
   }
 }
 
 export function reducer (state: PreferencesState = initialState, action: PreferencesAction): PreferencesState {
   switch (action.type) {
+    case getType(actions.toggleNodeErrorNotifications):
+      return { ...state, verboseUiOptions: {...state.verboseUiOptions, nodeErrorNotifications: !state.verboseUiOptions.nodeErrorNotifications} }
+    case getType(actions.toggleNodeStateNotifications):
+      return { ...state, verboseUiOptions: {...state.verboseUiOptions, nodeStateNotifications: !state.verboseUiOptions.nodeStateNotifications} }
+    case getType(actions.toggleNodeStateOverlay):
+      return { ...state, verboseUiOptions: {...state.verboseUiOptions, nodeStateOverlay: !state.verboseUiOptions.nodeStateOverlay} }
     case getType(actions.onboardingSuccess):
       return { ...state, onboarded: true }
     case getType(actions.toggleVerboseUi):
@@ -147,6 +173,8 @@ export const PreferencesSelectors = {
   service: (state: RootState, name: ServiceType) => state.preferences.services[name],
   storage: (state: RootState, name: StorageType) => state.preferences.storage[name],
   verboseUi: (state: RootState) => state.preferences.verboseUi,
+  showNodeStateNotification: (state: RootState) => state.preferences.verboseUi && state.preferences.verboseUiOptions.nodeStateNotifications,
+  showNodeErrorNotification: (state: RootState) => state.preferences.verboseUi && state.preferences.verboseUiOptions.nodeErrorNotifications,
   autoPinStatus: (state: RootState) => state.preferences.storage.autoPinPhotos.status,
   showNotificationPrompt: (state: RootState) => state.preferences.tourScreens.notifications,
   showBackgroundLocationPrompt: (state: RootState) => {

App/Redux/__tests__/__snapshots__/PreferencesRedux.ts.snap

@@ -59,6 +59,11 @@ Object {
     "wallet": true,
   },
   "verboseUi": false,
+  "verboseUiOptions": Object {
+    "nodeErrorNotifications": true,
+    "nodeStateNotifications": true,
+    "nodeStateOverlay": true,
+  },
   "viewSettings": Object {
     "selectedWalletTab": "Groups",
   },

App/SB/views/DeviceLogs/index.js

@@ -71,10 +71,10 @@ class DeviceLogs extends React.PureComponent {
           <Text style={[item.error && styles.failure, styles.item]}>{moment(item.time).format('LTS')}</Text>
         </View>
         <View style={styles.cell} >
-          <Text style={styles.item}>{item.event}</Text>
+          <Text style={[item.error && styles.failure, styles.item]}>{item.event}</Text>
         </View>
         <View style={styles.messageCell} >
-          <Text style={styles.item}>{item.message}</Text>
+          <Text style={[item.error && styles.failure, styles.item]}>{item.message}</Text>
         </View>
       </View>
     )