Change popover bootstrap toreactstrap

src/client/js/components/User/SeenUserList.jsx

@@ -1,6 +1,10 @@
-import React from 'react';
+// import React from 'react';
 import PropTypes from 'prop-types';
 
+import React, { useState } from 'react';
+import {
+  Button, Popover, PopoverHeader, PopoverBody,
+} from 'reactstrap';
 import UserPictureList from './UserPictureList';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
@@ -9,40 +13,28 @@ import PageContainer from '../../services/PageContainer';
 
 import FootstampIcon from '../FootstampIcon';
 
-class SeenUserList extends React.Component {
-
-  userListContent() {
-    const { pageContainer } = this.props;
-    return (
-      <div className="px-2 text-right user-list-content text-truncate text-muted">
-        <UserPictureList users={pageContainer.state.seenUsers} />
-      </div>
-    );
-  }
-
-
-  render() {
-    const { pageContainer } = this.props;
-    return (
-      <button
-        type="button"
-        className="btn btn-seen-user-list border-0 px-1 py-0"
-        data-container="body"
-        data-toggle="popover"
-        data-placement="bottom"
-        data-html="true"
-        data-content="ああああ05ああああ10ああああ15ああああ20"
-        // {this.userListContent}
-      >
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+const SeenUserList = (props) => {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const toggle = () => setPopoverOpen(!popoverOpen);
+  const { pageContainer } = props;
+  return (
+    <div>
+      <Button id="SeenUserPopover" type="button" className="btn btn-seen-user-list border-0 px-1 py-0">
         <span className="mr-2 svg footstamp-icon"><FootstampIcon /></span>
         <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>
-      </button>
-
-    );
-  }
-
-}
-
+      </Button>
+      <Popover placement="bottom" isOpen={popoverOpen} target="SeenUserPopover" toggle={toggle} trigger="legacy">
+        <PopoverBody className="col">
+          <div className="px-2 text-right user-list-content text-truncate text-muted">
+            <UserPictureList users={pageContainer.state.seenUsers} />
+          </div>
+        </PopoverBody>
+      </Popover>
+    </div>
+  );
+};
 
 SeenUserList.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,