BookCard__index.js

import React from 'react';

import SubscribeModal from './SubscribeModal';
import Authors from '../Authors/index';
// const childRef = React.createRef();

class Book extends React.Component {
  constructor(props) {
    super(props);
    this.toggleSubscription = this.toggleSubscription.bind(this);
    this.state = {
      isSubscribed: false,
      raiting: this.props.book.raiting,
      isPopular: this.props.book.raiting >= 10
    };
  }
  
  toggleSubscription() {
    this.setState((prevState, props) => (
      {
        isSubscribed: !prevState.isSubscribed,
        raiting: prevState.isSubscribed ? prevState.raiting - 1 : prevState.raiting + 1,
        isPopular: (prevState.isSubscribed && prevState.raiting > 10) || (!prevState.isSubscribed && prevState.raiting > 8)
      }
    ));
    // ), this.closeModalwithMessage(this.state.isSubscribed ? 'Вы отписаны' : 'Вы подписаны'));
  }

  // closeModalwithMessage(message) {
  //   childRef.current.closeModal();
  //   alert(message);
  // }

  render() {
    const { 
      book: { title, shortDescription, pageCount, language, progress, cover, minimumPrice,
              desiredPrice, collectedAmount, expectedAmount, raiting, authors }
    } = this.props;
    const currentRaiting = this.state.raiting;
    const popularBadge = this.state.isPopular && '(Популярная книга)';

    return (
      <div style={styles.container}>
        <div style={styles.row}>
          <div style={styles.half}>
            <a href={cover}>
              <img src={cover} style={styles.picture}/>
            </a>
          </div>
          <div style={styles.half}>
            <h2 style={styles.title}>{title}</h2>
            <div style={styles.pageCount}>Кол-во страниц: {pageCount}</div>
            <div style={styles.shortDescription}>{shortDescription}</div>
            <div style={styles.language}>Язык: {language}</div>
            <div style={styles.progress}>Прогресс: {progress}%</div>
            <div>Минимальная цена подписки: ${minimumPrice}</div>
            <div>Желаемая цена подписки: ${desiredPrice}</div>
            <div>Уже собрано: ${collectedAmount}</div>
            <div>Ожидается собрать: ${expectedAmount}</div>
            <div>Рейтинг: {currentRaiting} {popularBadge}</div>
            <SubscribeModal isSubscribed = {this.state.isSubscribed}
                            callbackFunction = {this.toggleSubscription}/>
          </div>
        </div>
        <>
          <Authors authors={authors}/>
        </>
      </div>
    )
  }
}

export default Book;

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    margin: '2em 0'
  },
  picture: {
    margin: '0 1em'
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
    overflowX: 'auto'
  }
}

ModalWindow.js

import React from 'react';

import Button from './Button';

class ModalWindow extends React.Component {
  constructor(props) {
    super(props);
    this.closeModal = this.closeModal.bind(this);
    this.openModal = this.openModal.bind(this);
    this.state = {
      isOpen: this.props.isOpen
    }
  }

  closeModal() {
    console.log('da')
    this.setState((prevState, props) => (
      { isOpen: false }
    ))
  }

  openModal() {
    this.setState((prevState, props) => (
      { isOpen: true }
    ));
    console.log('open')
    this.props.openCallback();
  }

  render() {
    const { id, openWindowButtonTitle, modalBody, children } = this.props;

    return (
      <>
        <Button buttonOnClick={this.openModal}>{openWindowButtonTitle}</Button>
        <div id={id} data-testid={id} style={{...styles.modalContainer, ...{ display: this.state.isOpen || 'none'  }}}>
          <div style={styles.modalBody}>
            {modalBody}
            {children}
            {/* {React.Children.map(children, child => {
              return React.cloneElement(child, {buttonOnClick: this.closeModal});
            })} */}
            <Button buttonOnClick={this.closeModal}>Закрыть</Button>
          </div>
        </div>
      </>
    )
  }
}

export default ModalWindow;

const styles = {
  modalContainer: {
    backgroundColor: '#00000080',
    position: 'fixed',
    left: '0',
    right: '0',
    top: '0',
    bottom: '0',
    display: 'none'
  },
  modalBody: {
    position: 'fixed',
    top: '40%',
    left: '30%',
    width: '40%',
    backgroundColor: 'white',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column'
  }
}

SubscribeModal.js

import React from 'react';

import Button from '../shared/Button';
import ModalWindow from '../shared/ModalWindow';
// const childRef = React.createRef();

class SubscribeModal extends React.Component {
  constructor(props) {
    super(props);
    this.closeModal = this.closeModal.bind(this);
    this.openModal = this.openModal.bind(this);
    this.state = {
      isOpen: false
    };
  }

  openModal() {
    console.log('open_callback')
    this.setState({isOpen: true});
  }

  closeModal() {
    this.setState({isOpen: false});

    console.log('tut');
    this.props.callbackFunction();
  }

  // toggleSubscription() {
  //   callbackFunction();
  //   // this.closeModal();
  // }

  render() {
    console.log('pereris')
    const { isSubscribed } = this.props;
    const title = isSubscribed ? 'Отписаться' : 'Подписаться';
    return (
      <>
        <ModalWindow id='subscriptionModal'
                         openWindowButtonTitle={title}
                         modalBody={isSubscribed ? 'Вы уверены, что хотите отписаться?' : 'Переведете нам больше денег - книга выйдет быстрее!'}
                         isOpen={this.state.isOpen} openCallback={this.openModal}>
          <Button buttonOnClick={this.closeModal}>
            {title}
          </Button>
        </ModalWindow>
      </>
    )
  }
}

export default SubscribeModal;