home screen: Add ability to mark messages in bulk, mute topics.

src/common/Icons.js

@@ -83,3 +83,4 @@ export const IconTerminal = makeIcon(Feather, 'terminal');
 export const IconMoreHorizontal = makeIcon(Feather, 'more-horizontal');
 export const IconEdit = makeIcon(Feather, 'edit');
 export const IconPlusSquare = makeIcon(Feather, 'plus-square');
+export const IconCheckMarkCircle = makeIcon(MaterialIcon, 'check-circle');

src/main/HomeTab.js

@@ -1,18 +1,29 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, BackHandler, Alert } from 'react-native';
 
-import type { Dispatch } from '../types';
+import { Set } from 'immutable';
+import type { Dispatch, Narrow, GetText, Auth, Subscription } from '../types';
 import { connect } from '../react-redux';
-import { HOME_NARROW, MENTIONED_NARROW, STARRED_NARROW } from '../utils/narrow';
+import { TranslationContext } from '../boot/TranslationProvider';
+import {
+  HOME_NARROW,
+  MENTIONED_NARROW,
+  STARRED_NARROW,
+  topicNarrow,
+  caseNarrowPartial,
+} from '../utils/narrow';
 import NavButton from '../nav/NavButton';
 import NavButtonGeneral from '../nav/NavButtonGeneral';
 import UnreadCards from '../unread/UnreadCards';
 import { doNarrow, navigateToSearch } from '../actions';
 import IconUnreadMentions from '../nav/IconUnreadMentions';
-import { BRAND_COLOR } from '../styles';
-import { LoadingBanner } from '../common';
+import commonStyles, { BRAND_COLOR, NAVBAR_SIZE } from '../styles';
+import * as api from '../api';
+import { getAuth, getSubscriptionsByName } from '../selectors';
+import { LoadingBanner, Label } from '../common';
+import { showToast } from '../utils/info';
 
 const styles = StyleSheet.create({
   wrapper: {
@@ -23,18 +34,143 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     flexDirection: 'row',
   },
+  bulkSelectionNav: {
+    flexDirection: 'row',
+    height: NAVBAR_SIZE,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: 'hsla(0, 0%, 50%, 0.25)',
+  },
+  selectionCountText: {
+    textAlign: 'left',
+    marginLeft: 8,
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 18,
+    marginLeft: 4,
+    marginRight: 4,
+  },
 });
 
+type SelectorProps = $ReadOnly<{|
+  auth: Auth,
+  subscriptionsByName: Map<string, Subscription>,
+|}>;
+
 type Props = $ReadOnly<{|
   dispatch: Dispatch,
+  ...SelectorProps,
 |}>;
 
-class HomeTab extends PureComponent<Props> {
-  render() {
+type State = $ReadOnly<{|
+  bulkSelection: Set<string> | null,
+|}>;
+
+class HomeTab extends PureComponent<Props, State> {
+  static contextType = TranslationContext;
+  backHandler;
+  context: GetText;
+  state = {
+    bulkSelection: null,
+  };
+
+  handleBackPress = (): boolean => {
+    if (this.state.bulkSelection !== null) {
+      this.setState({ bulkSelection: null });
+      return true;
+    }
+    return false;
+  };
+
+  componentDidMount() {
+    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
+  }
+
+  componentWillUnmount() {
+    this.backHandler.remove();
+  }
+
+  handleTopicSelect = (stream: string, topic: string) => {
+    const { bulkSelection } = this.state;
+    const narrow = JSON.stringify(topicNarrow(stream, topic));
+
+    if (bulkSelection == null) {
+      const selection = Set<Narrow>([narrow]);
+      this.setState({ bulkSelection: selection });
+      return;
+    }
+
+    if (bulkSelection.has(narrow)) {
+      this.setState({ bulkSelection: bulkSelection.delete(narrow) });
+    } else {
+      this.setState({ bulkSelection: bulkSelection.add(narrow) });
+    }
+  };
+
+  processBulkCommon = (type: 'mute' | 'read') => {
+    const { auth, subscriptionsByName } = this.props;
+    const { bulkSelection } = this.state;
+    const _ = this.context;
+    const apiPromises = [];
+
+    if (type === 'mute') {
+      showToast(_('Muting selected topics'));
+    } else {
+      showToast(_('Marking selected topics as read'));
+    }
+
+    if (bulkSelection == null) {
+      return;
+    }
+
+    bulkSelection.forEach(narrow => {
+      const parsedNarrow: Narrow = JSON.parse(narrow);
+      caseNarrowPartial(parsedNarrow, {
+        topic: (stream: string, topic: string) => {
+          if (type === 'mute') {
+            apiPromises.push(api.muteTopic(auth, stream, topic));
+          } else {
+            const subscription = subscriptionsByName.get(stream);
+            if (subscription === undefined) {
+              return;
+            }
+            apiPromises.push(api.markTopicAsRead(auth, subscription.stream_id, topic));
+          }
+        },
+      });
+    });
+
+    this.setState({ bulkSelection: null });
+
+    Promise.all(apiPromises).catch(err => {
+      const alertTitle =
+        type === 'mute' ? _('Failed to mute some topics') : _('Failed to mark some topics as read');
+
+      Alert.alert(alertTitle, err.message);
+    });
+  };
+
+  muteBulkSelection = () => {
+    this.processBulkCommon('mute');
+  };
+
+  readBulkSelection = () => {
+    this.processBulkCommon('read');
+  };
+
+  cancelBulkSelection = () => {
+    this.setState({ bulkSelection: null });
+  };
+
+  renderHeader = () => {
     const { dispatch } = this.props;
+    const { bulkSelection } = this.state;
+    const _ = this.context;
 
-    return (
-      <View style={styles.wrapper}>
+    if (bulkSelection === null) {
+      return (
         <View style={styles.iconList}>
           <NavButton
             name="globe"
@@ -62,11 +198,59 @@ class HomeTab extends PureComponent<Props> {
             }}
           />
         </View>
+      );
+    }
+
+    const color = BRAND_COLOR;
+    const countText = _.intl.formatMessage(
+      {
+        id: '{count} topics selected',
+        defaultMessage: '{count} topics selected',
+      },
+      { count: bulkSelection.size },
+    );
+
+    return (
+      <View style={styles.bulkSelectionNav}>
+        <NavButton
+          name="arrow-left"
+          color={color}
+          onPress={this.cancelBulkSelection}
+          title={_('Cancel')}
+        />
+        <View style={commonStyles.navWrapper}>
+          <Label text={countText} style={styles.selectionCountText} />
+        </View>
+        <NavButton
+          name="volume-x"
+          color={color}
+          onPress={this.muteBulkSelection}
+          title={_('Mute')}
+        />
+        <NavButton
+          name="check"
+          color={color}
+          onPress={this.readBulkSelection}
+          title={_('Mark as read')}
+        />
+      </View>
+    );
+  };
+
+  render() {
+    const { bulkSelection } = this.state;
+
+    return (
+      <View style={styles.wrapper}>
+        {this.renderHeader()}
         <LoadingBanner />
-        <UnreadCards />
+        <UnreadCards bulkSelection={bulkSelection} handleTopicSelect={this.handleTopicSelect} />
       </View>
     );
   }
 }
 
-export default connect<{||}, _, _>()(HomeTab);
+export default connect<SelectorProps, _, _>((state, props) => ({
+  auth: getAuth(state),
+  subscriptionsByName: getSubscriptionsByName(state),
+}))(HomeTab);

src/nav/NavButton.js

@@ -13,6 +13,7 @@ type Props = $ReadOnly<{|
   style?: TextStyleProp,
   name: IconNames,
   onPress: () => void,
+  title?: string,
 |}>;
 
 export default class NavButton extends PureComponent<Props> {
@@ -28,10 +29,10 @@ export default class NavButton extends PureComponent<Props> {
   });
 
   render() {
-    const { name, style, color, onPress } = this.props;
+    const { name, style, color, onPress, title } = this.props;
 
     return (
-      <NavButtonGeneral onPress={onPress}>
+      <NavButtonGeneral onPress={onPress} title={title}>
         <Icon style={[this.styles.navButtonIcon, style]} color={color} name={name} />
       </NavButtonGeneral>
     );

src/nav/NavButtonGeneral.js

@@ -5,10 +5,12 @@ import type { Node as React$Node } from 'react';
 
 import { NAVBAR_SIZE } from '../styles';
 import { Touchable } from '../common';
+import { showToast } from '../utils/info';
 
 type Props = $ReadOnly<{|
   children: React$Node,
   onPress: () => void,
+  title?: string,
 |}>;
 
 export default class NavButtonGeneral extends PureComponent<Props> {
@@ -21,11 +23,19 @@ export default class NavButtonGeneral extends PureComponent<Props> {
     },
   });
 
+  handleLongPress = () => {
+    const { title } = this.props;
+
+    if (title !== undefined) {
+      showToast(title);
+    }
+  };
+
   render() {
     const { children, onPress } = this.props;
 
     return (
-      <Touchable onPress={onPress}>
+      <Touchable onPress={onPress} onLongPress={this.handleLongPress}>
         <View style={this.styles.navButtonFrame}>{children}</View>
       </Touchable>
     );

src/streams/TopicItem.js

@@ -2,9 +2,9 @@
 import React, { PureComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import styles, { BRAND_COLOR } from '../styles';
+import styles, { BRAND_COLOR, HALF_COLOR } from '../styles';
 import { RawLabel, Touchable, UnreadCount } from '../common';
-import { showToast } from '../utils/info';
+import { IconCheckMarkCircle } from '../common/Icons';
 
 const componentStyles = StyleSheet.create({
   selectedRow: {
@@ -19,22 +19,38 @@ const componentStyles = StyleSheet.create({
   muted: {
     opacity: 0.5,
   },
+  checkIcon: {
+    marginRight: 12,
+  },
+  emptyCircle: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: HALF_COLOR,
+    marginRight: 12,
+  },
 });
 
 type Props = $ReadOnly<{|
   stream: string,
   name: string,
   isMuted: boolean,
   isSelected: boolean,
+  inBulkSelectionMode: boolean,
+  isBulkSelected: boolean,
   unreadCount: number,
   onPress: (topic: string, stream: string) => void,
+  onLongPress: (topic: string, stream: string) => void,
 |}>;
 
 export default class TopicItem extends PureComponent<Props> {
   static defaultProps = {
     stream: '',
     isMuted: false,
     isSelected: false,
+    inBulkSelectionMode: false,
+    isBulkSelected: false,
     unreadCount: 0,
   };
 
@@ -44,8 +60,24 @@ export default class TopicItem extends PureComponent<Props> {
   };
 
   handleLongPress = () => {
-    const { name } = this.props;
-    showToast(name);
+    const { name, stream, onLongPress } = this.props;
+    onLongPress(stream, name);
+  };
+
+  renderBulkSelectionIcon = () => {
+    const { isBulkSelected, inBulkSelectionMode } = this.props;
+
+    if (isBulkSelected) {
+      return (
+        <IconCheckMarkCircle style={componentStyles.checkIcon} size={24} color={BRAND_COLOR} />
+      );
+    }
+
+    if (inBulkSelectionMode) {
+      return <View style={componentStyles.emptyCircle} />;
+    }
+
+    return null;
   };
 
   render() {
@@ -60,6 +92,7 @@ export default class TopicItem extends PureComponent<Props> {
             isMuted && componentStyles.muted,
           ]}
         >
+          {this.renderBulkSelectionIcon()}
           <RawLabel
             style={[componentStyles.label, isSelected && componentStyles.selectedText]}
             text={name}

src/topics/TopicList.js

@@ -42,6 +42,7 @@ export default class TopicList extends PureComponent<Props> {
             isMuted={item.isMuted}
             unreadCount={item.unreadCount}
             onPress={onPress}
+            onLongPress={() => {}}
           />
         )}
       />