docbrown/app/javascript/listings/singleListing/SingleListing.jsx

import { h, Component } from 'preact';
import PropTypes from 'prop-types';

import { Header } from './Header';
import { AuthorInfo } from './AuthorInfo';
import { listingPropTypes } from './listingPropTypes';

export class SingleListing extends Component {
  listingContent = (
    listing,
    currentUserId,
    onChangeCategory,
    onOpenModal,
    onAddTag,
    isModal = false,
  ) => {
    return (
      <div className="relative">
        <Header
          listing={listing}
          currentUserId={currentUserId}
          onTitleClick={onOpenModal}
          onAddTag={onAddTag}
          isModal={isModal}
        />
        <div
          className="mb-4"
          dangerouslySetInnerHTML={{ __html: listing.processed_html }} // eslint-disable-line react/no-danger
        />
        <AuthorInfo listing={listing} onCategoryClick={onChangeCategory} />
      </div>
    );
  };

  listingInline = (
    listing,
    currentUserId,
    onChangeCategory,
    onOpenModal,
    onAddTag,
  ) => {
    return (
      <div
        className="single-listing relative crayons-card"
        id={`single-listing-${listing.id}`}
        data-testid={`single-listing-${listing.id}`}
      >
        <div className="listing-content p-4">
          {this.listingContent(
            listing,
            currentUserId,
            onChangeCategory,
            onOpenModal,
            onAddTag,
          )}
        </div>
      </div>
    );
  };

  listingModal = (
    listing,
    currentUserId,
    onChangeCategory,
    onOpenModal,
    onAddTag,
  ) => {
    return (
      <div
        className="single-listing relative"
        id={`single-listing-${listing.id}`}
        data-testid={`single-listing-${listing.id}`}
      >
        <div className="listing-content">
          {this.listingContent(
            listing,
            currentUserId,
            onChangeCategory,
            onOpenModal,
            onAddTag,
            true,
          )}
        </div>
      </div>
    );
  };

  render() {
    const {
      listing,
      currentUserId,
      onChangeCategory,
      onOpenModal,
      isOpen,
      onAddTag,
    } = this.props;
    return isOpen
      ? this.listingModal(
          listing,
          currentUserId,
          onChangeCategory,
          onOpenModal,
          onAddTag,
        )
      : this.listingInline(
          listing,
          currentUserId,
          onChangeCategory,
          onOpenModal,
          onAddTag,
        );
  }
}

SingleListing.propTypes = {
  listing: listingPropTypes.isRequired,
  onOpenModal: PropTypes.func.isRequired,
  onChangeCategory: PropTypes.func.isRequired,
  isOpen: PropTypes.bool.isRequired,
  currentUserId: PropTypes.number,
  onAddTag: PropTypes.func.isRequired,
};

SingleListing.defaultProps = {
  currentUserId: null,
};

SingleListing.displayName = 'SingleListing';