export default function Panel()

in src/components/Chat/ChatTranscriptor/ChatMessages/InteractiveMessages/Panel.js [49:84]

• 26 lines of code
• 3 McCabe index (conditional complexity)

export default function Panel({ content, addMessage }) {
  // assumptions: version 1, image data is URL. Guarenteed title exists, at least 1 element.
  const { title, subtitle, elements, imageData, imageDescription } = content;
  const [ imageLoaded, setImageLoaded ] = useState(false);
 
  function onImageLoad(){
      setImageLoaded(true);
  }
 
  function onItemClick(e) {
    addMessage({ text: e.currentTarget.value });
  }
 
  return (
    <>
      {(imageData) &&
      <ImageContainer showImage={imageLoaded}>
          <ReactiveImage imageSrc={imageData} imageDescription={imageDescription} onImageLoad={onImageLoad}/>
      </ImageContainer>
      }
      <TextSection>
        <Title>{title}</Title>
        {subtitle && <Subtitle>{subtitle}</Subtitle>}
      </TextSection>
      <ResponsesSection>
        <div>
          {elements.map((element, index) =>
            <PanelButton value={element.title} key={'element-' + index} onClick={onItemClick}>
              <ElementTitle>{element.title}</ElementTitle>
            </PanelButton>
          )}
        </div>
      </ResponsesSection>
    </>
  );
}