Refactor New message notifications

client/src/components/About/index.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import React, { Component } from 'react';
+import Reactfrom 'react';
 import PropTypes from 'prop-types';
 
 import { COMMIT_SHA } from '@/config/env';

client/src/components/Home/WithNewMessageNotification.jsx

@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import Tinycon from 'tinycon';
 
 import { notify, beep } from '@/utils/notifications';
-import { toggleNotificationAllowed, toggleNotificationEnabled } from '@/actions';
+import { toggleNotificationAllowed } from '@/actions';
 
 const mapStateToProps = state => {
   return {
@@ -19,19 +19,9 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = {
   toggleNotificationAllowed,
-  toggleNotificationEnabled,
 };
 
-const WithNewMessageNotification = WrappedComponent => {
+const WithNewMessageNotification = ({
-  return connect(
-    mapStateToProps,
-    mapDispatchToProps,
-  )(
-    class WithNotificationHOC extends Component {
-      state = { lastMessage: null, unreadMessageCount: 0 };
-
-      static getDerivedStateFromProps(nextProps, prevState) {
-        const {
   room: { id: roomId },
   activities,
   notificationIsEnabled,
@@ -39,16 +29,21 @@ const WithNewMessageNotification = WrappedComponent => {
   soundIsEnabled,
   unreadMessageCount,
   windowIsFocused,
-        } = nextProps;
+  toggleNotificationAllowed,
+  children,
+}) => {
+  const [lastMessage, setLastMessage] = React.useState(null);
+  const [lastUnreadMessageCount, setLastUnreadMessageCount] = React.useState(0);
 
+  React.useEffect(() => {
     if (activities.length === 0) {
-          return null;
+      return;
     }
+    const currentLastMessage = activities[activities.length - 1];
+    const { username, type, text, fileName, locked, newUsername, currentUsername, action } = currentLastMessage;
 
-        const lastMessage = activities[activities.length - 1];
+    if (currentLastMessage !== lastMessage && !windowIsFocused) {
-        const { username, type, text, fileName, locked, newUsername, currentUsername, action } = lastMessage;
+      setLastMessage(currentLastMessage);
-
-        if (lastMessage !== prevState.lastMessage && !windowIsFocused) {
       if (notificationIsAllowed && notificationIsEnabled) {
         // Generate the proper notification according to the message type
         switch (type) {
@@ -84,44 +79,38 @@ const WithNewMessageNotification = WrappedComponent => {
       if (soundIsEnabled) beep.play();
     }
 
-        if (unreadMessageCount !== prevState.unreadMessageCount) {
+    if (unreadMessageCount !== lastUnreadMessageCount) {
+      setLastUnreadMessageCount(unreadMessageCount);
       Tinycon.setBubble(unreadMessageCount);
     }
-
+  }, [
-        return { lastMessage, unreadMessageCount };
-      }
-
-      componentDidMount() {
-        switch (Notification.permission) {
-          case 'granted':
-            this.props.toggleNotificationAllowed(true);
-            break;
-          case 'denied':
-            this.props.toggleNotificationAllowed(false);
-            break;
-          default:
-            this.props.toggleNotificationAllowed(null);
-        }
-      }
-
-      render() {
-        // Filter props
-        const {
-          room,
     activities,
+    lastMessage,
+    lastUnreadMessageCount,
+    notificationIsAllowed,
     notificationIsEnabled,
-          motificationIsAllowed,
+    roomId,
     soundIsEnabled,
     unreadMessageCount,
     windowIsFocused,
-          toggleNotificationAllowed,
+  ]);
-          toggleNotificationnEnabled,
+
-          ...rest
+  React.useEffect(() => {
-        } = this.props;
+    switch (Notification.permission) {
-        return <WrappedComponent {...rest} />;
+      case 'granted':
+        toggleNotificationAllowed(true);
+        break;
+      case 'denied':
+        toggleNotificationAllowed(false);
+        break;
+      default:
+        toggleNotificationAllowed(null);
     }
-    },
+  }, [toggleNotificationAllowed]);
-  );
+
+  return <>{children}</>;
 };
 
-export default WithNewMessageNotification;
+const ConnectedWithNewMessageNotification = connect(mapStateToProps, mapDispatchToProps)(WithNewMessageNotification);
+
+export default ConnectedWithNewMessageNotification;

client/src/components/Home/index.jsx

@@ -63,11 +63,16 @@ const mapDispatchToProps = {
   setLanguage,
 };
 
-export const ConnectedHome = WithNewMessageNotification(connect(mapStateToProps, mapDispatchToProps)(Home));
+export const ConnectedHome = connect(mapStateToProps, mapDispatchToProps)(Home);
 
 const HomeWithParams = ({ ...props }) => {
   const socketId = useLoaderData();
-  return <ConnectedHome socketId={socketId} {...props} />;
+  return (
+    <WithNewMessageNotification>
+      <ConnectedHome socketId={socketId} {...props} />
+    </WithNewMessageNotification>
+  );
+  // return <WithNewMessageNotification wrappedComponent={} />;
 };
 
 export default HomeWithParams;

client/src/components/RoomLink/index.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Copy } from 'react-feather';
 import Clipboard from 'clipboard';