import React from 'react';
import { connect } from 'react-redux';

const DocumentListItem = ({ title, collection, schema }) => (
  <tr className={`result result--${schema}`}>
    <td>{ title }</td>
    <td className="result__collection">{ collection && collection.label }</td>
    <td></td>
  </tr>
);

const PersonListItem = ({ name, collection, schema }) => (
  <tr className={`result result--${schema}`}>
    <td className="result__name">{ name }</td>
    <td className="result__collection">{ collection && collection.label }</td>
    <td></td>
  </tr>
);

const ListItems = {
  'Document': DocumentListItem,
  'Person': PersonListItem,
  'LegalEntity': PersonListItem,
  'Company': PersonListItem
};

const SearchResultListItem = ({ result, collection }) => {
  const ListItem = ListItems[result.schema];
  return <ListItem collection={collection} {...result} />;
};

const mapStateToProps = ({ collections }, { result }) => ({
  collection: collections[result.collection_id]
});

export default connect(mapStateToProps)(SearchResultListItem);

@@ -479,32 +479,41 @@
 lt__collection%22%3E
+%0A        
 %7B collection && 
@@ -501,34 +501,45 @@
    %7B collection 
-&&
+?%0A           
  collection.labe
@@ -532,33 +532,116 @@
 ollection.label 
-%7D
+:%0A            %3Cspan className=%22pt-skeleton%22%3ELoading collection%3C/span%3E%0A        %7D%0A    
 %3C/td%3E%0A    %3Ctd%3E%3C/

Add placeholder for loading collection names