Codeminer42/cm42-central

View on GitHub
app/assets/javascripts/components/description/DescriptionContent.jsx

Summary

Maintainability
A
0 mins
Test Coverage
import React, { memo } from 'react';
import Parser from 'html-react-parser';
import StoryLink from 'components/stories/StoryLink';

const editButton = isReadonly => {
  return (
    <input
      className={!isReadonly ? 'edit-description' : ''}
      name="edit-description"
      disabled={isReadonly}
      value={I18n.t('edit')}
      type="button"
    />
  );
};

const replaceStoryLink = (domNode, linkedStories) => {
  if (!domNode.attribs || !domNode.attribs['data-story-id']) return;
  const id = domNode.attribs['data-story-id'];
  const story = linkedStories[id];
  return <StoryLink story={story} key={id} />;
};

const DescriptionContent = ({
  description,
  isReadonly,
  linkedStories,
  onClick,
}) => {
  const descriptionHTML = window.md.makeHtml(description);
  const isEmpty = !description || !description.length;

  description = Parser(descriptionHTML, {
    replace: domNode => replaceStoryLink(domNode, linkedStories),
  });

  return isEmpty ? (
    editButton(isReadonly)
  ) : (
    <div className="description">{description}</div>
  );
};

export default memo(DescriptionContent);