outside-react-to-react.jsx

outside-react-to-react.jsx

import React from "react"
import Modal from "components/Modal"
import styled, { css } from "styled-components"
import { Button } from "components"
import PropTypes from "prop-types"

const MessageContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 200px;
`

const MessageContent = styled.div`
  margin-bottom: 24px;
`
const bodyStyles = css`
  padding: 0;
  overflow: auto;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0px 30px;
`

// eslint-disable-next-line
let toggleModal = () => {}

function ModalFromOutsideReact(props) {
  const [show, setShow] = React.useState(false)
  const [data, setData] = React.useState(null)
  toggleModal = (showVal, dataFromAPI) => {
    setData(dataFromAPI)
    setShow(showVal)
  }
  return (
    <>
      <Modal
        id="portal-root"
        show={show}
        bodyStyles={bodyStyles}
        closeModal={() => {
          setShow(false)
        }}
      >
        <MessageContainer>
          <MessageContent>
            {data?.message ||
              "Content out of sync, Please refresh the browser window"}
          </MessageContent>

          <Button
            onClick={() => {
              window.location.reload()
            }}
            btnType="primary"
          >
            Reload
          </Button>
        </MessageContainer>
      </Modal>
    </>
  )
}

ModalFromOutsideReact.propTypes = {}
export { toggleModal }
export default ModalFromOutsideReact