@plusscommunities/pluss-core-app 1.2.4 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {

package/src/apis/index.js

@@ -4,4 +4,5 @@ export * from './followerActions';
 export * from './contactActions';
 export * from './eventActions';
 export * from './analyticsActions';
+export * from './notificationActions';
 export { default as userActions } from './userActions';

package/src/apis/notificationActions.js

@@ -0,0 +1,47 @@
+import { getUrl } from '../helper';
+import { authedFunction } from '../session';
+
+export const notificationActions = {
+  getAppNotificationSetting: () => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('notifications', 'getState/get', {
+        type: 'app',
+      }),
+    });
+  },
+  muteApp: () => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/mute'),
+      data: { type: 'app' },
+    });
+  },
+  unmuteApp: () => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/unmute'),
+      data: { type: 'app' },
+    });
+  },
+  getEntityNotificationSetting: (type, id) => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('notifications', 'getState/get', { type, id }),
+    });
+  },
+  muteEntity: (type, id) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/mute'),
+      data: { type, id },
+    });
+  },
+  unmuteEntity: (type, id) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/unmute'),
+      data: { type, id },
+    });
+  },
+};

package/src/components/CommentSection.js

@@ -1,16 +1,13 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableOpacity, Image } from 'react-native';
+import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
 import _ from 'lodash';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { Icon } from 'react-native-elements';
-import { getPluralS, getThumb300, get1400 } from '../helper';
+import { getPluralS, getThumb300, get1400, getSiteSettingFromState } from '../helper';
 import { getMainBrandingColourFromState, TEXT_DARKEST, BG_GREY, TEXT_LIGHT, LINEGREY } from '../colours';
-import { Spinner } from './Spinner';
-import { reactionActions } from '../apis';
-import { ConfirmPopup } from './ConfirmPopup';
-import { ProfilePic } from './ProfilePic';
-import { ImagePopup } from './ImagePopup';
+import { reactionActions, notificationActions } from '../apis';
+import { ConfirmPopup, ProfilePic, ImagePopup, InlineButton, Spinner } from './';
 
 class CommentSection extends Component {
   constructor(props) {
@@ -23,10 +20,16 @@ class CommentSection extends Component {
       commentToReport: null,
       commentReportedStatus: null,
       reportLoading: false,
+      processing: false,
+      muteExpiry: null,
+      muteLoaded: false,
     };
   }
 
   componentDidMount() {
+    this.getNotificationSate();
+    // setTimeout(this.getNotificationSate, 3000);
+
     if (!_.includes(this.props.user.hidden, 'viewComment')) {
       this.getComments();
     }
@@ -97,6 +100,64 @@ class CommentSection extends Component {
     this.props.commentReply.getWrappedInstance().focusInput();
   }
 
+  onMute = () => {
+    const { entityType, entityId } = this.props;
+    this.setState({ processing: true }, async () => {
+      try {
+        const { data } = await notificationActions.muteEntity(entityType, entityId);
+        // console.log('onMute', data);
+        const muteExpiry = moment(data.Expiry);
+        this.setState({ muteExpiry, processing: false });
+      } catch (error) {
+        console.error('onMute', error);
+        this.setState({ processing: false });
+      }
+    });
+  };
+
+  onUnmute = () => {
+    const { entityType, entityId } = this.props;
+    this.setState({ processing: true }, async () => {
+      try {
+        const { data } = await notificationActions.unmuteEntity(entityType, entityId);
+        // console.log('onUnmute', data);
+        this.setState({ muteExpiry: null, processing: false });
+      } catch (error) {
+        console.error('onUnmute', error);
+        this.setState({ processing: false });
+      }
+    });
+  };
+
+  isMuted = () => {
+    const { muteExpiry } = this.state;
+    return muteExpiry && moment() <= muteExpiry;
+  };
+
+  getMuteRemaining = () => {
+    const { muteExpiry } = this.state;
+    const actual = muteExpiry ? moment.duration(muteExpiry.diff(moment())).asHours() : 0;
+    return Math.abs(Math.ceil(actual));
+  };
+
+  getNotificationSate = () => {
+    const { processing } = this.state;
+    const { entityType, entityId, notificationsForComments } = this.props;
+    if (processing || !notificationsForComments) return;
+
+    this.setState({ processing: true }, async () => {
+      try {
+        const { data } = await notificationActions.getEntityNotificationSetting(entityType, entityId);
+        // console.log('getNotificationSate', data);
+        const muteExpiry = data ? moment(data.Expiry) : null;
+        this.setState({ muteExpiry, muteLoaded: true, processing: false });
+      } catch (error) {
+        console.error('getNotificationSate', error);
+        this.setState({ processing: false });
+      }
+    });
+  };
+
   getAdjustedSize(size) {
     if (this.props.scaleFont) {
       return size + this.props.user.fontScale;
@@ -288,6 +349,47 @@ class CommentSection extends Component {
     );
   }
 
+  renderMute() {
+    const { notificationsForComments } = this.props;
+    const { muteLoaded, muteExpiry, processing } = this.state;
+    if (!notificationsForComments || !muteLoaded) return null;
+
+    if (processing)
+      return (
+        <View style={styles.muteSpinnerContainer}>
+          <Spinner size={'small'} color={this.props.colourBrandingMain} />
+        </View>
+      );
+
+    const isMuted = this.isMuted();
+    const hours = this.getMuteRemaining();
+    const mutedFor = `Muted for ${hours} hour${getPluralS(hours)}`;
+    // console.log(muteExpiry.format('DD MMM YYYY hh:mm a'));
+
+    return (
+      <View style={styles.muteContainer}>
+        {isMuted && muteExpiry ? <Text style={[{ color: this.props.colourBrandingMain }, styles.mutedForText]}>{mutedFor}</Text> : null}
+        <InlineButton
+          onPress={isMuted ? this.onUnmute : this.onMute}
+          color="#fff"
+          style={[{ borderColor: this.props.colourBrandingMain }, styles.muteButton]}
+          disabled={processing}
+          disabledOpacity
+          noText
+        >
+          <View style={styles.muteButtonInner}>
+            <Icon
+              name={isMuted ? 'bell-o' : 'bell-slash-o'}
+              type={'font-awesome'}
+              iconStyle={[{ color: this.props.colourBrandingMain }, styles.muteButtonIcon]}
+            />
+            <Text style={[{ color: this.props.colourBrandingMain }, styles.muteButtonText]}>{isMuted ? 'Unmute' : 'Mute'}</Text>
+          </View>
+        </InlineButton>
+      </View>
+    );
+  }
+
   renderComments() {
     if (this.state.commentsLoading) {
       return (
@@ -317,11 +419,14 @@ class CommentSection extends Component {
       <View style={styles.commentSection}>
         {!this.isEmpty() && (
           <View style={styles.commentSectionTitleRow}>
-            {!this.props.hideAddComment && this.state.comments.length > 2 && (
-              <TouchableOpacity onPress={this.onGoToAdd.bind(this)}>
-                <Text style={[styles.goToText, { color: this.props.colourBrandingMain }]}>Add a comment</Text>
-              </TouchableOpacity>
-            )}
+            <View style={{ alignItems: 'flex-end' }}>
+              {this.renderMute()}
+              {!this.props.hideAddComment && this.state.comments.length > 2 && (
+                <TouchableOpacity onPress={this.onGoToAdd.bind(this)}>
+                  <Text style={[styles.goToText, { color: this.props.colourBrandingMain }]}>Add a comment</Text>
+                </TouchableOpacity>
+              )}
+            </View>
             <Text style={[styles.commentCount, { fontSize: this.getAdjustedSize(15) }]}>
               {this.state.comments.length}
               {` comment${getPluralS(this.state.comments.length)}`}
@@ -374,22 +479,22 @@ class CommentSection extends Component {
   }
 }
 
-const styles = {
+const styles = StyleSheet.create({
   commentSectionOuter: {
     flex: 1,
     paddingHorizontal: 16,
   },
   commentSection: {
     flex: 1,
-    paddingVertical: 16,
+    paddingVertical: 12,
     borderTopColor: LINEGREY,
     borderTopWidth: 1,
-    borderTopStyle: 'solid',
   },
   commentCount: {
     fontFamily: 'sf-semibold',
     color: TEXT_DARKEST,
     flex: 1,
+    marginTop: 4,
   },
   comment: {
     marginTop: 16,
@@ -463,12 +568,47 @@ const styles = {
   reportLoadingContainer: {
     paddingVertical: 10,
   },
-};
+  goToText: {
+    marginTop: 4,
+  },
+  muteSpinnerContainer: {
+    width: 100,
+    marginBottom: 6,
+  },
+  muteContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginBottom: 6,
+  },
+  mutedForText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+    marginRight: 8,
+  },
+  muteButton: {
+    borderWidth: 1,
+    paddingHorizontal: 8,
+  },
+  muteButtonInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  muteButtonIcon: {
+    fontSize: 14,
+  },
+  muteButtonText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 14,
+    marginLeft: 6,
+  },
+});
 
 const mapStateToProps = state => {
   return {
     colourBrandingMain: getMainBrandingColourFromState(state),
     user: state.user,
+    notificationsForComments: getSiteSettingFromState(state, 'NotificationsForComments', false),
   };
 };