fix: react-onclickouside doesn't support functional components

This stopped working with webpack 5

package-lock.json

@@ -89,7 +89,6 @@
         "react-dom": "16.14.0",
         "react-intl": "5.25.1",
         "react-modal": "3.11.1",
-        "react-onclickoutside": "6.7.1",
         "react-plotly.js": "2.4.0",
         "react-redux": "5.0.7",
         "react-responsive": "3.0.0",
@@ -111,6 +110,7 @@
         "style-loader": "0.12.3",
         "tap": "14.11.0",
         "url-loader": "3.0.0",
+        "use-onclickoutside": "0.4.1",
         "webpack": "5.90.1",
         "webpack-bundle-analyzer": "4.10.1",
         "webpack-cli": "5.1.4",
@@ -5001,6 +5001,12 @@
       "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=",
       "dev": true
     },
+    "node_modules/are-passive-events-supported": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/are-passive-events-supported/-/are-passive-events-supported-1.1.1.tgz",
+      "integrity": "sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww==",
+      "dev": true
+    },
     "node_modules/arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -31036,6 +31042,50 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "dev": true,
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-onclickoutside": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/use-onclickoutside/-/use-onclickoutside-0.4.1.tgz",
+      "integrity": "sha512-hAo1viJ9D2mPffUig4EWCwE4as7fq84HANk3MCkY3rhXk5oMl0mjLCLF/OhzWIhTaITcAcDDcnaxRdMHPq+sww==",
+      "dev": true,
+      "dependencies": {
+        "are-passive-events-supported": "^1.1.1",
+        "use-latest": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

package.json

@@ -124,7 +124,6 @@
     "react-dom": "16.14.0",
     "react-intl": "5.25.1",
     "react-modal": "3.11.1",
-    "react-onclickoutside": "6.7.1",
     "react-plotly.js": "2.4.0",
     "react-redux": "5.0.7",
     "react-responsive": "3.0.0",
@@ -146,6 +145,7 @@
     "style-loader": "0.12.3",
     "tap": "14.11.0",
     "url-loader": "3.0.0",
+    "use-onclickoutside": "0.4.1",
     "webpack": "5.90.1",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",

src/views/studio/studio-follow.jsx

@@ -3,7 +3,7 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
-import onClickOutside from 'react-onclickoutside';
+import useOnClickOutside from 'use-onclickoutside';
 
 import {selectIsFollowing} from '../../redux/studio';
 import {selectCanFollowStudio} from '../../redux/studio-permissions';
@@ -32,12 +32,19 @@ const StudioFollow = ({
     });
     const [hideValidationMessage, setHideValidationMessage] = useState(false);
 
-    StudioFollow.handleClickOutside = () => {
+    const ref = React.useRef(null);
+
+    useOnClickOutside(ref, () => {
         setHideValidationMessage(true);
-    };
+    });
+
     if (!canFollow) return null;
+
     return (
-        <div className="studio-info-section">
+        <div
+            className="studio-info-section"
+            ref={ref}
+        >
             <button
                 className={fieldClassName}
                 disabled={isMutating}
@@ -68,10 +75,6 @@ StudioFollow.propTypes = {
     handleFollow: PropTypes.func
 };
 
-const clickOutsideConfig = {
-    handleClickOutside: () => StudioFollow.handleClickOutside
-};
-
 export default connect(
     state => ({
         canFollow: selectCanFollowStudio(state),
@@ -82,4 +85,4 @@ export default connect(
     {
         handleFollow: mutateFollowingStudio
     }
-)(onClickOutside(StudioFollow, clickOutsideConfig));
+)(StudioFollow);