follows/FollowButton: refactor to be functional and more a11y, add a4…

… prefix classname and rm hardcoded icon and follows count as un-used

adhocracy4/follows/static/follows/FollowButton.jsx

@@ -1,77 +1,78 @@
+import django from 'django'
+import React, { useState, useEffect } from 'react'
+import Alert from '../../../static/Alert'
+
 const api = require('../../../static/api')
-const django = require('django')
-const React = require('react')
-const Alert = require('../../../static/Alert')
 
-class FollowButton extends React.Component {
-  constructor (props) {
-    super(props)
+const translated = {
+  followDescription: django.gettext('Click to be updated about this project via email.'),
+  followingDescription: django.gettext('Click to no longer be updated about this project via email.'),
+  followAlert: django.gettext('You will be updated via email.'),
+  followingAlert: django.gettext('You will no longer be updated via email.'),
+  follow: django.gettext('Follow'),
+  following: django.gettext('Following')
+}
 
-    this.state = {
-      followed: undefined,
-      follows: 0,
-      alert: null
-    }
-  }
+export const FollowButton = (props) => {
+  const [following, setFollowing] = useState(null)
+  const [alert, setAlert] = useState(null)
 
-  removeAlert () {
-    this.setState({
-      alert: null
-    })
-  }
+  const followBtnText = following
+    ? translated.following
+    : translated.follow
 
-  toggleFollow () {
-    let followAlertText
-    if (this.state.followed) {
-      followAlertText = django.gettext('You will no longer be updated via email.')
-    } else {
-      followAlertText = django.gettext('You will be updated via email.')
-    }
-    api.follow.change({ enabled: !this.state.followed }, this.props.project)
-      .done((follow) => {
-        this.setState({
-          followed: follow.enabled,
-          follows: follow.follows,
-          alert: {
-            type: 'success',
-            message: followAlertText
-          }
-        })
-      })
-  }
+  const followDescriptionText = following
+    ? translated.followingDescription
+    : translated.followDescription
+
+  const followAlertText = following
+    ? translated.followingAlert
+    : translated.followAlert
 
-  componentDidMount () {
-    api.follow.get(this.props.project)
+  useEffect(() => {
+    console.log('calling the use effect')
+    api.follow.get(props.project)
       .done((follow) => {
-        this.setState({
-          followed: follow.enabled,
-          follows: follow.follows,
-          alert: follow.alert
-        })
+        setFollowing(follow.enabled)
+        setAlert(follow.alert)
       })
       .fail((response) => {
         if (response.status === 404) {
-          this.setState({
-            followed: false
-          })
+          setFollowing(false)
         }
       })
+  }, [props.project])
+
+  const removeAlert = () => {
+    setAlert(null)
   }
 
-  render () {
-    const followTag = django.gettext('Follow')
-    const followingTag = django.gettext('Following')
-    return (
-      <span className="follow">
-        <button className={this.state.followed ? 'btn btn--following' : 'btn btn--follow'} type="button" onClick={this.toggleFollow.bind(this)}>
-          <i className={this.state.followed ? 'fa fa-check' : 'fa fa-plus'} aria-hidden="true" />&nbsp;<span className="follow__btn--content">{this.state.followed ? followingTag : followTag}</span>
-        </button>
-        <span className="follow__notification">
-          <Alert onClick={this.removeAlert.bind(this)} {...this.state.alert} />
-        </span>
-      </span>
-    )
+  const toggleFollow = () => {
+    api.follow.change({ enabled: !following }, props.project)
+      .done((follow) => {
+        setFollowing(follow.enabled)
+        setAlert({
+          type: 'success',
+          message: followAlertText
+        })
+      })
   }
-}
 
-module.exports = FollowButton
+  return (
+    <span className="a4-follow">
+      <button
+        className={following ? 'a4-btn a4-btn--following' : 'a4-btn a4-btn--follow'}
+        type="button"
+        onClick={toggleFollow}
+        aria-describedby="follow-description"
+        disabled={following === null}
+      >
+        <span className="a4-follow__btn--content">{followBtnText}</span>
+        <span className="a4-sr-only" id="follow-description">{followDescriptionText}</span>
+      </button>
+      <span className="a4-follow__notification">
+        <Alert onClick={removeAlert} {...alert} />
+      </span>
+    </span>
+  )
+}

adhocracy4/follows/static/follows/react_follows.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 
-import FollowButton from './FollowButton'
+import { FollowButton } from './FollowButton'
 
 module.exports.renderFollow = function (el) {
   const project = el.getAttribute('data-project')

changelog/7618.md

@@ -0,0 +1,3 @@
+### Changed
+
+- refactor follow to be functional and add aria described by for when no alert shown and use a4 prefix for classes so external style liberies can be used (story !7618/7701)