[DRAFT] Refactor NotificationsPage and NotificationSection

app/pages/notifications/index.jsx

@@ -1,12 +1,20 @@
-import PropTypes from 'prop-types';
-import React from 'react';
 import counterpart from 'counterpart';
-import Translate from 'react-translate-component';
-import talkClient from 'panoptes-client/lib/talk-client';
+import {
+  arrayOf,
+  bool,
+  func,
+  oneOfType,
+  shape,
+  string
+} from 'prop-types';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import Loading from '../../components/loading-indicator';
-import NotificationSection from '../notifications/notification-section';
+import Translate from 'react-translate-component';
+
+import useNotifications from './useNotifications';
+import NotificationSection from './notification-section';
 import CollapsableSection from '../../components/collapsable-section';
+import Loading from '../../components/loading-indicator';
 
 counterpart.registerTranslations('en', {
   notifications: {
@@ -18,148 +26,182 @@ counterpart.registerTranslations('en', {
   }
 });
 
-export default class NotificationsPage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onChildChanged = this.onChildChanged.bind(this);
-    this.state = {
-      projNotifications: [],
-      expanded: false
-    };
+export function NotificationsSections({
+  expanded,
+  groupedNotifications,
+  handleExpand,
+  location,
+  user
+}) {
+  const notificationSectionIDs = Object.keys(groupedNotifications);
+  if (notificationSectionIDs.includes('zooniverse')) {
+    notificationSectionIDs.splice(notificationSectionIDs.indexOf('zooniverse'), 1);
+    notificationSectionIDs.unshift('zooniverse');
   }
 
-  componentDidMount() {
-    if (this.props.user) {
-      this.getProjectNotifications();
-    }
-  }
+  return (
+    <div>
+      <div className="list">
+        {notificationSectionIDs.map((notificationSectionID) => {
+          const opened = notificationSectionID === expanded || notificationSectionIDs.length === 1;
+          const slug = groupedNotifications[notificationSectionID][0].project_slug;
+          const notifications = groupedNotifications[notificationSectionID] || [];
+          const uniqueNotifications = notifications.filter((notification, index, self) => (
+            index === self.findIndex((t) => t.id === notification.id)
+          ));
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.user !== null && nextProps.user !== this.props.user) {
-      this.getProjectNotifications();
-    }
-  }
+          return (
+            <CollapsableSection
+              key={`collapsable-section-${notificationSectionID}`}
+              callbackParent={() => {
+                const section = expanded === notificationSectionID ? false : notificationSectionID;
+                handleExpand(section);
+              }}
+              expanded={opened}
+              section={notificationSectionID}
+            >
+              <NotificationSection
+                key={`notification-section-${notificationSectionID}`}
+                location={location}
+                notifications={uniqueNotifications}
+                projectID={notificationSectionID}
+                slug={slug}
+                user={user}
+              />
+            </CollapsableSection>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
 
-  onChildChanged(section) {
-    this.setState({ expanded: section });
-  }
+const DEFAULT_HANDLER = () => true;
 
-  getProjectNotifications() {
-    talkClient.type('notifications').get({ page: 1, page_size: 50 })
-    .then((projNotifications) => {
-      this.groupNotifications(projNotifications);
-    })
-    .then(() => {
-      if (this.props.project) this.setState({ expanded: `project-${this.props.project.id}` });
-    })
-    .catch((e) => {
-      console.error('Unable to load notifications', e);
-    });
+NotificationsSections.defaultProps = {
+  expanded: false,
+  groupedNotifications: {},
+  handleExpand: DEFAULT_HANDLER
+};
+
+NotificationsSections.propTypes = {
+  expanded: oneOfType([bool, string]),
+  groupedNotifications: shape({
+    id: arrayOf(shape({
+      id: string,
+      project_id: string
+    }))
+  }),
+  handleExpand: func
+};
+
+export default function NotificationsPage({ location, project, user }) {
+  const [expanded, setExpanded] = useState(false);
+  const {
+    loading,
+    notifications,
+    error
+  } = useNotifications(user);
+
+  useEffect(() => {
+    if (project) {
+      setExpanded(project.id);
+    }
+  }, [project]);
+
+  function handleExpand(sectionID) {
+    setExpanded(sectionID);
   }
 
-  groupNotifications(notifications) {
-    const projectSections = [];
-    const projectNotifications = [];
-    notifications.forEach((notification) => {
-      if (projectSections.indexOf(notification.section) < 0) {
-        if (notification.section === 'zooniverse') {
-          projectSections.unshift(notification.section);
-          projectNotifications.unshift(notification);
-        } else {
-          projectSections.push(notification.section);
-          projectNotifications.push(notification);
-        }
+  function groupNotifications(allNotifications) {
+    const notificationsMap = {};
+    allNotifications.forEach((notification) => {
+      const { project_id: projectID, section } = notification;
+      const notificationSectionID = projectID || section;
+      if (!notificationsMap[notificationSectionID]) {
+        notificationsMap[notificationSectionID] = [notification];
       }
+      notificationsMap[notificationSectionID].push(notification);
     });
-    if (this.props.project && projectSections.indexOf(`project-${this.props.project.id}`) < 0) {
-      talkClient.type('notifications').get({ page: 1, page_size: 1, section: `project-${this.props.project.id}` })
-      .then(([notification]) => {
-        if (notification) {
-          projectNotifications.push(notification);
-          this.setState({ projNotifications: projectNotifications });
-          this.setState({ expanded: `project-${this.props.project.id}` });
-        }
-      });
-    }
-    this.setState({ projNotifications: projectNotifications });
+    return notificationsMap;
   }
 
-  renderNotifications() {
-    let notificationView;
-
-    if (this.state.projNotifications.length > 0) {
-      notificationView = (
-        <div>
-          <div className="list">
-            {this.state.projNotifications.map((notification, i) => {
-              const opened = notification.section === this.state.expanded || this.state.projNotifications.length === 1;
-              return (
-                <CollapsableSection key={i} callbackParent={this.onChildChanged} expanded={opened} section={notification.section}>
-                  <NotificationSection
-                    key={notification.id}
-                    location={this.props.location}
-                    projectID={notification.project_id}
-                    slug={notification.project_slug}
-                    user={this.props.user}
-                  />
-                </CollapsableSection>
-              );
-            })}
-          </div>
-        </div>
-      );
-    } else if (this.state.projNotifications.length === 0) {
-      notificationView = (
-        <div className="centering talk-module notifications-title">
-          <Translate content="notifications.noNotifications" />{' '}
-          <Translate content="notifications.participation" />
-        </div>
-      );
-    } else {
-      notificationView = <Loading />;
-    }
-
-    return notificationView;
+  let groupedNotifications = {};
+  if (notifications?.length > 0) {
+    groupedNotifications = groupNotifications(notifications);
   }
 
-  render() {
-    let signedIn;
-    const headerStyle = this.props.project ? 'notifications-title talk-module' : 'notifications-title';
-
-    if (this.props.user) {
-      signedIn = this.renderNotifications();
-    } else {
-      signedIn = (
-        <div className="centering talk-module">
-          <Translate content="notifications.signedOut" />
-        </div>
-      );
-    }
-
-    return (
-      <div className="talk notifications">
-        <Helmet title={counterpart("notifications.header")} />
-        <div className="content-container">
-          <h3 className={headerStyle}>
-            <Translate content="notifications.title" />
-          </h3>
+  const headerStyle = project ? 'notifications-title talk-module' : 'notifications-title';
 
-          {signedIn}
-        </div>
+  let content = '';
+  if (!user) {
+    content = (
+      <Translate content="notifications.signedOut" />
+    );
+  } else if (error) {
+    content = (
+      <span>{error.message}</span>
+    );
+  } else if (loading) {
+    content = (
+      <Loading />
+    );
+  } else if (notifications?.length === 0) {
+    content = (
+      <div className="centering talk-module notifications-title">
+        <Translate content="notifications.noNotifications" />
+        {' '}
+        <Translate content="notifications.participation" />
       </div>
     );
   }
+
+  return (
+    <div className="talk notifications">
+      <Helmet title={counterpart('notifications.header')} />
+      <div className="content-container">
+        <h3 className={headerStyle}>
+          <Translate content="notifications.title" />
+        </h3>
+        {content ? (
+          <div className="centering talk-module">
+            {content}
+          </div>
+        ) : (
+          <NotificationsSections
+            expanded={expanded}
+            groupedNotifications={groupedNotifications}
+            handleExpand={handleExpand}
+            location={location}
+            user={user}
+          />
+        )}
+      </div>
+    </div>
+  );
 }
 
+NotificationsPage.defaultProps = {
+  location: {
+    query: {
+      page: '1'
+    }
+  },
+  project: null,
+  user: null
+};
+
 NotificationsPage.propTypes = {
-  location: PropTypes.shape({
-    query: PropTypes.object
+  location: shape({
+    query: shape({
+      page: string
+    })
   }),
-  project: PropTypes.shape({
-    id: PropTypes.string
+  project: shape({
+    id: string
   }),
-  user: PropTypes.shape({
-    display_name: PropTypes.string,
-    login: PropTypes.string
+  user: shape({
+    display_name: string,
+    login: string
   })
-};
+};