App.js

import React from "react";
import BubbleUI from "react-bubble-ui";
import { initializeApp } from "firebase/app"
import Swal from 'sweetalert2'
import { getFirestore, collection, query, onSnapshot } from 'firebase/firestore';
import "react-bubble-ui/dist/index.css";
import Child from "./Bubble";
import "./styles.css";

const config = {
  projectId: 'xxxxx',
}
const app = initializeApp(config);
const db = getFirestore(app);

const options = {
  size: 80,
  minSize: 20,
  gutter: 18,
  provideProps: true,
  numCols: 6,
  fringeWidth: 45,
  yRadius: 100,
  xRadius: 100,
  cornerRadius: 50,
  showGuides: false,
  compact: true,
  gravitation: 5
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userList: [],
      bubble: {}
    };
  }

  handleClick = (bubble) => {
    this.setState({ bubble })
    Swal.fire({
      title: `${bubble.displayName}`,
      imageUrl: bubble.pictureUrl,
      imageWidth: 400,
      html:
        `--${bubble.statusMessage}--`,
      showCloseButton: true,
      showCancelButton: true,
      focusConfirm: false,
      confirmButtonText: 'Say Hi',
      confirmButtonAriaLabel: 'Say Hi',
      cancelButtonText: 'Close',
      cancelButtonAriaLabel: 'Close'
    }).then(result => {
      if (result.isConfirmed) {
        Swal.fire({
          input: 'text',
          inputAttributes: {
            autocapitalize: 'off'
          },
          showCancelButton: true,
          confirmButtonText: 'Send Msg',
          showLoaderOnConfirm: true,
          preConfirm: (msg) => {
            // push message
          },
          allowOutsideClick: () => !Swal.isLoading()
        })
      }
    })
  };

  async componentDidMount() {
    const q = query(collection(db, "users"));
    onSnapshot(q, (querySnapshot) => {
      const userList = querySnapshot.docs.map(doc => doc.data());
      this.setState({ userList });
    });
  }

  render() {
    const { userList } = this.state;
    const children = userList?.map((data, i) => {
      return (
        <Child
          data={data}
          className="child"
          key={i}
          setClick={this.handleClick.bind(this)} />
      );
    });
    return (
      <>
        <BubbleUI options={options} className="myBubbleUI">
          {children}
        </BubbleUI>
      </>
    );
  }
}
export default App;