Merge pull request #689 from unitaryfund/650_subscriptions

Member subscriptions

src/components/SubscriptionButton.js

@@ -0,0 +1,21 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBell, faBellSlash } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'react-bootstrap'
+import TooltipTrigger from './TooltipTrigger'
+
+library.add(faBell, faBellSlash)
+
+const SubscribeButton = (props) =>
+  <span>
+    {!props.isSubscribed &&
+      <TooltipTrigger message={'Subscribe to ' + props.typeLabel}>
+        <Button className='submission-button' variant='secondary' aria-label={'Subscribe to ' + props.typeLabel} onClick={props.onSubscribe}><FontAwesomeIcon icon='bell' /></Button>
+      </TooltipTrigger>}
+    {props.isSubscribed &&
+      <TooltipTrigger message={'Unsubscribe from ' + props.typeLabel}>
+        <Button className='submission-button' variant='primary' aria-label={'Unsubscribe from ' + props.typeLabel} onClick={props.onSubscribe}><FontAwesomeIcon icon='bell-slash' /></Button>
+      </TooltipTrigger>}
+  </span>
+
+export default SubscribeButton

src/index.js

@@ -4,8 +4,7 @@ import './index.css'
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
-import CookieConsent from "react-cookie-consent";
-
+import CookieConsent from 'react-cookie-consent'
 
 ReactDOM.render(
   <React.StrictMode>

src/views/AddSubmission.js

@@ -21,7 +21,6 @@ import ResultsAddModal from '../components/ResultsAddModal'
 import SubmissionRefsDeleteModal from '../components/SubmissionRefsDeleteModal'
 import TooltipTrigger from '../components/TooltipTrigger'
 
-
 library.add(faPlus)
 
 const requiredFieldMissingError = 'Required field.'
@@ -533,9 +532,9 @@ class AddSubmission extends React.Component {
                 <i>Draft saved at {this.state.draftedAt}</i>
               </FormFieldAlertRow>}
             <FormFieldWideRow className='text-center'>
-            <TooltipTrigger message="Draft is saved under 'My Submissions'">
-              <Button variant='light' className='submission-ref-button' onClick={() => this.handleOnSubmit(null, true, null)} disabled={!this.state.isValidated && !this.isAllValid()}>Save draft</Button>
-            </TooltipTrigger>
+              <TooltipTrigger message="Draft is saved under 'My Submissions'">
+                <Button variant='light' className='submission-ref-button' onClick={() => this.handleOnSubmit(null, true, null)} disabled={!this.state.isValidated && !this.isAllValid()}>Save draft</Button>
+              </TooltipTrigger>
               <input className='btn btn-primary submission-ref-button' type='submit' value='Submit' disabled={!this.state.isValidated && !this.isAllValid()} />
             </FormFieldWideRow>
           </form>

src/views/Delete.js

@@ -32,7 +32,10 @@ class Delete extends React.Component {
   }
 
   handleDeleteOnClick () {
-    const confirmString = window.prompt('To delete your account, type your username or email below, then hit "OK."', '').trim().toLowerCase()
+    let confirmString = window.prompt('To unsubscribe from all email updates, type your username or email below, then hit "OK."', '')
+    if (confirmString) {
+      confirmString = confirmString.trim().toLowerCase()
+    }
     if (confirmString && ((confirmString === this.state.data.usernameNormal) || (confirmString === this.state.data.email))) {
       axios.delete(config.api.getUriPrefix() + '/user')
         .then(res => {

src/views/Method.js

@@ -13,6 +13,7 @@ import TooltipTrigger from '../components/TooltipTrigger'
 import SocialShareIcons from '../components/SocialShareIcons'
 import { sortByCounts } from '../components/SortFunctions'
 import FormFieldWideRow from '../components/FormFieldWideRow'
+import SubscribeButton from '../components/SubscriptionButton'
 const FormFieldRow = React.lazy(() => import('../components/FormFieldRow'))
 const FormFieldSelectRow = React.lazy(() => import('../components/FormFieldSelectRow'))
 
@@ -29,13 +30,28 @@ class Method extends React.Component {
       allMethodNames: []
     }
 
+    this.handleSubscribe = this.handleSubscribe.bind(this)
     this.handleShowEditModal = this.handleShowEditModal.bind(this)
     this.handleHideEditModal = this.handleHideEditModal.bind(this)
     this.handleEditModalDone = this.handleEditModalDone.bind(this)
     this.handleTrimMethods = this.handleTrimMethods.bind(this)
     this.handleOnChange = this.handleOnChange.bind(this)
   }
 
+  handleSubscribe () {
+    if (this.props.isLoggedIn) {
+      axios.post(config.api.getUriPrefix() + '/method/' + this.props.match.params.id + '/subscribe', {})
+        .then(res => {
+          this.setState({ item: res.data.data })
+        })
+        .catch(err => {
+          window.alert('Error: ' + ErrorHandler(err) + '\nSorry! Check your connection and login status, and try again.')
+        })
+    } else {
+      this.handleLoginRedirect()
+    }
+  }
+
   handleShowEditModal () {
     let mode = 'Edit'
     if (!this.props.isLoggedIn) {
@@ -141,6 +157,7 @@ class Method extends React.Component {
             <TooltipTrigger message='Edit method'>
               <Button className='submission-button' variant='secondary' aria-label='Edit method' onClick={this.handleShowEditModal}><FontAwesomeIcon icon='edit' /></Button>
             </TooltipTrigger>
+            <SubscribeButton isSubscribed={this.state.item.isSubscribed} typeLabel='method' onSubscribe={this.handleSubscribe} />
             <SocialShareIcons url={config.api.getUriPrefix() + '/method/' + this.props.match.params.id} />
           </FormFieldWideRow>
           <br />

src/views/Platform.js

@@ -13,6 +13,7 @@ import FormFieldWideRow from '../components/FormFieldWideRow'
 import TooltipTrigger from '../components/TooltipTrigger'
 import SocialShareIcons from '../components/SocialShareIcons'
 import { intRegex, nonblankRegex, numberRegex } from '../components/ValidationRegex'
+import SubscribeButton from '../components/SubscriptionButton'
 const FormFieldRow = React.lazy(() => import('../components/FormFieldRow'))
 const FormFieldSelectRow = React.lazy(() => import('../components/FormFieldSelectRow'))
 
@@ -62,6 +63,7 @@ class Platform extends React.Component {
       }
     }
 
+    this.handleSubscribe = this.handleSubscribe.bind(this)
     this.handleAccordionToggle = this.handleAccordionToggle.bind(this)
     this.handleShowEditModal = this.handleShowEditModal.bind(this)
     this.handleHideEditModal = this.handleHideEditModal.bind(this)
@@ -80,6 +82,20 @@ class Platform extends React.Component {
     this.handleOnPropertyRemove = this.handleOnPropertyRemove.bind(this)
   }
 
+  handleSubscribe () {
+    if (this.props.isLoggedIn) {
+      axios.post(config.api.getUriPrefix() + '/platform/' + this.props.match.params.id + '/subscribe', {})
+        .then(res => {
+          this.setState({ item: res.data.data })
+        })
+        .catch(err => {
+          window.alert('Error: ' + ErrorHandler(err) + '\nSorry! Check your connection and login status, and try again.')
+        })
+    } else {
+      this.handleLoginRedirect()
+    }
+  }
+
   handleAccordionToggle () {
     this.setState({ showAccordion: !this.state.showAccordion, isValidated: false })
   }
@@ -369,6 +385,7 @@ class Platform extends React.Component {
             <TooltipTrigger message='Edit platform'>
               <Button className='submission-button' variant='secondary' aria-label='Edit platform' onClick={this.handleShowEditModal}><FontAwesomeIcon icon='edit' /></Button>
             </TooltipTrigger>
+            <SubscribeButton isSubscribed={this.state.item.isSubscribed} typeLabel='submission' onSubscribe={this.handleSubscribe} />
             <SocialShareIcons url={config.api.getUriPrefix() + '/platform/' + this.props.match.params.id} />
           </FormFieldWideRow>
           <br />

src/views/Profile.js

@@ -15,7 +15,7 @@ class Profile extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      data: { affiliation: '', name: '' },
+      data: { affiliation: '', name: '', usernameNormal: '', email: '' },
       showEditModal: false,
       requestFailedMessage: ''
     }
@@ -24,6 +24,7 @@ class Profile extends React.Component {
     this.handleHideModal = this.handleHideModal.bind(this)
     this.handleShowModal = this.handleShowModal.bind(this)
     this.handleUpdateDetails = this.handleUpdateDetails.bind(this)
+    this.handleUnsubscribe = this.handleUnsubscribe.bind(this)
   }
 
   handleOnChange (field, value) {
@@ -54,6 +55,28 @@ class Profile extends React.Component {
       })
   }
 
+  handleUnsubscribe () {
+    let confirmString = window.prompt('To unsubscribe from all email updates, type your username or email below, then hit "OK."', '')
+    if (confirmString) {
+      confirmString = confirmString.trim().toLowerCase()
+    }
+    if (confirmString && ((confirmString === this.state.data.usernameNormal) || (confirmString === this.state.data.email))) {
+      axios.post(config.api.getUriPrefix() + '/user/unsubscribe', {})
+        .then(res => {
+          this.setState({
+            data: res.data.data,
+            requestFailedMessage: ''
+          })
+          window.alert('Successfully unsubscribed from all email updates!')
+        })
+        .catch(err => {
+          this.setState({ requestFailedMessage: ErrorHandler(err) })
+        })
+    } else {
+      this.setState({ requestFailedMessage: 'Entered incorrect username/email!' })
+    }
+  }
+
   componentDidMount () {
     axios.get(config.api.getUriPrefix() + '/user')
       .then(res => {
@@ -92,6 +115,10 @@ class Profile extends React.Component {
             <Link to='/Token'><Button variant='primary'>Manage API Token</Button></Link>
           </FormFieldWideRow>
           <br />
+          <FormFieldWideRow className='text-center'>
+            <Button variant='primary' onClick={this.handleUnsubscribe}>Unsubscribe From All Email Updates</Button>
+          </FormFieldWideRow>
+          <br />
           <FormFieldWideRow className='text-center'>
             <Link to='/Password'><Button variant='primary'>Change password</Button></Link>
           </FormFieldWideRow>

src/views/Submission.js

@@ -9,21 +9,22 @@ import { Button, Modal } from 'react-bootstrap'
 import { Link } from 'react-router-dom'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faEdit, faLink, faHeart, faMobileAlt, faStickyNote, faSuperscript } from '@fortawesome/free-solid-svg-icons'
+import { faEdit, faLink, faHeart, faMobileAlt, faStickyNote, faSuperscript, faBell, faBellSlash } from '@fortawesome/free-solid-svg-icons'
 import logo from './../images/metriq_logo_secondary_blue.png'
 import Commento from '../components/Commento'
 import FormFieldWideRow from '../components/FormFieldWideRow'
 import SocialShareIcons from '../components/SocialShareIcons'
 import { metricValueRegex, nonblankRegex } from '../components/ValidationRegex'
 import ResultsTable from '../components/ResultsTable'
 import FormFieldAlertRow from '../components/FormFieldAlertRow'
+import SubscribeButton from '../components/SubscriptionButton'
 const FormFieldRow = React.lazy(() => import('../components/FormFieldRow'))
 const FormFieldTypeaheadRow = React.lazy(() => import('../components/FormFieldTypeaheadRow'))
 const SubmissionRefsAddModal = React.lazy(() => import('../components/SubmissionRefsAddModal'))
 const SubmissionRefsDeleteModal = React.lazy(() => import('../components/SubmissionRefsDeleteModal'))
 const ResultsAddModal = React.lazy(() => import('../components/ResultsAddModal'))
 
-library.add(faEdit, faLink, faHeart, faMobileAlt, faStickyNote, faSuperscript)
+library.add(faEdit, faLink, faHeart, faMobileAlt, faStickyNote, faSuperscript, faBell, faBellSlash)
 
 class Submission extends React.Component {
   constructor (props) {
@@ -96,6 +97,7 @@ class Submission extends React.Component {
     }
 
     this.handleEditSubmissionDetails = this.handleEditSubmissionDetails.bind(this)
+    this.handleSubscribe = this.handleSubscribe.bind(this)
     this.handleModerationReport = this.handleModerationReport.bind(this)
     this.handleHideEditModal = this.handleHideEditModal.bind(this)
     this.handleEditModalDone = this.handleEditModalDone.bind(this)
@@ -136,6 +138,20 @@ class Submission extends React.Component {
     this.setState({ showEditModal: true, modalMode: mode, submission: submission })
   }
 
+  handleSubscribe () {
+    if (this.props.isLoggedIn) {
+      axios.post(config.api.getUriPrefix() + '/submission/' + this.props.match.params.id + '/subscribe', {})
+        .then(res => {
+          this.setState({ item: res.data.data })
+        })
+        .catch(err => {
+          window.alert('Error: ' + ErrorHandler(err) + '\nSorry! Check your connection and login status, and try again.')
+        })
+    } else {
+      this.handleLoginRedirect()
+    }
+  }
+
   handleModerationReport () {
     let mode = 'Moderation'
     const modalTextMode = 'Moderation'
@@ -574,6 +590,7 @@ class Submission extends React.Component {
           <TooltipTrigger message='Edit submission'>
             <Button className='submission-button' variant='secondary' aria-label='Edit submission' onClick={this.handleEditSubmissionDetails}><FontAwesomeIcon icon='edit' /></Button>
           </TooltipTrigger>
+          <SubscribeButton isSubscribed={this.state.item.isSubscribed} typeLabel='submission' onSubscribe={this.handleSubscribe} />
           <SocialShareIcons url={config.api.getUriPrefix() + '/submission/' + this.props.match.params.id} />
         </FormFieldWideRow>
         <br />

src/views/Task.js

@@ -16,6 +16,7 @@ import { parse } from 'json2csv'
 import Commento from '../components/Commento'
 import TooltipTrigger from '../components/TooltipTrigger'
 import SocialShareIcons from '../components/SocialShareIcons'
+import SubscribeButton from '../components/SubscriptionButton'
 const SotaChart = React.lazy(() => import('../components/SotaChart'))
 
 library.add(faEdit)
@@ -35,13 +36,33 @@ class Task extends React.Component {
       isLog: false
     }
 
+    this.handleSubscribe = this.handleSubscribe.bind(this)
     this.handleShowEditModal = this.handleShowEditModal.bind(this)
     this.handleHideEditModal = this.handleHideEditModal.bind(this)
     this.handleEditModalDone = this.handleEditModalDone.bind(this)
     this.handleOnChange = this.handleOnChange.bind(this)
     this.handleTrimTasks = this.handleTrimTasks.bind(this)
     this.handleCsvExport = this.handleCsvExport.bind(this)
     this.handleOnLoadData = this.handleOnLoadData.bind(this)
+    this.handleLoginRedirect = this.handleLoginRedirect.bind(this)
+  }
+
+  handleLoginRedirect () {
+    this.props.history.push('/Login/' + encodeURIComponent('Task/' + this.props.match.params.id))
+  }
+
+  handleSubscribe () {
+    if (this.props.isLoggedIn) {
+      axios.post(config.api.getUriPrefix() + '/task/' + this.props.match.params.id + '/subscribe', {})
+        .then(res => {
+          this.setState({ item: res.data.data })
+        })
+        .catch(err => {
+          window.alert('Error: ' + ErrorHandler(err) + '\nSorry! Check your connection and login status, and try again.')
+        })
+    } else {
+      this.handleLoginRedirect()
+    }
   }
 
   handleShowEditModal () {
@@ -180,6 +201,7 @@ class Task extends React.Component {
                 <FontAwesomeIcon icon='edit' />
               </Button>
             </TooltipTrigger>
+            <SubscribeButton isSubscribed={this.state.item.isSubscribed} typeLabel='task' onSubscribe={this.handleSubscribe} />
             <SocialShareIcons url={config.api.getUriPrefix() + '/task/' + this.props.match.params.id} />
           </FormFieldWideRow>
           <br />