Ep 2096 results type label

packages/earth-map/src/components/list-item/component.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Link from 'redux-first-router-link';
+
+import './style.scss';
+
+interface IProps {
+  title: string;
+  linkTo: {
+    type: string;
+    payload?: any;
+  };
+  key: string;
+  labels?: string[];
+  onClick?: () => void;
+}
+
+const ListItem = (props: IProps) => {
+  const {
+    title,
+    labels,
+    linkTo,
+    key,
+    onClick = () => { },
+  } = props;
+
+  return (
+    <Link
+      to={linkTo}
+      onClick={onClick} key={key}
+      className="ng-c-list-item ng-unstyled ng-padding-small-vertical ng-padding-medium-horizontal"
+    >
+      {title}
+      {labels.map((label, i) => (
+        <span className="ng-margin-left ng-color-mdgray" key={`${label}-${i}`}>{label}</span>
+      ))}
+    </Link>
+  )
+};
+
+export default ListItem;

packages/earth-map/src/components/list-item/index.ts

@@ -0,0 +1 @@
+export { default } from './component';

packages/earth-map/src/components/list-item/style.scss

@@ -0,0 +1,9 @@
+@import "~styles/config";
+
+.ng-c-list-item {
+  display: block;
+
+  &:hover {
+    background-color: rgba($marapp-gray-1, .1);
+  }
+}

packages/earth-map/src/components/places/featured-places/component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import Link from 'redux-first-router-link';
 
-import PLACEHOLDER from '../../../images/placeholder.png';
+import ListItem from 'components/list-item';
 
 interface IFeaturedPlaces {
   featured?: {
@@ -24,25 +23,22 @@ const FeaturedPlacesComponent = (props: IFeaturedPlaces) => {
   };
 
   return (
-    <div className="ng-padding-medium ng-section-background ng-position-relative">
-      <h2 className="ng-text-display-s ng-body-color ng-margin-medium-bottom">Featured places</h2>
+    <div className="ng-section-background ng-position-relative ng-padding-medium-bottom">
+      <h2 className="ng-padding-medium ng-text-display-s ng-body-color ng-margin-remove">Featured places</h2>
       <div>
         {!!featured.data &&
           featured.data.map((place: any) => {
-            const { slug, name, id, organization } = place;
+            const { slug, name, id, organization, type } = place;
+
             return (
-              <Link
-                key={slug}
-                to={{ type: 'LOCATION', payload: { slug, id, organization } }}
-                className="ng-c-panel-link ng-unstyled ng-flex ng-margin-bottom"
-              >
-                <span onClick={() => onClickIndex(name)}>
-                  {name}
-                  {group.length > 1 && (
-                    <span className="ng-margin-left ng-color-mdgray">{organization}</span>
-                  )}
-                </span>
-              </Link>
+              <ListItem
+                title={name} key={slug}
+                linkTo={{ type: 'LOCATION', payload: { slug, id, organization } }}
+                onClick={() => onClickIndex(name)}
+                labels={[
+                  type,
+                  (group.length > 1) && organization
+                ]} />
             );
           })}
       </div>

packages/earth-map/src/components/places/list/component.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import Link from 'redux-first-router-link';
 import List from '@researchgate/react-intersection-list';
 
+import ListItem from 'components/list-item';
+
 import './styles.scss';
 
 interface IPlacesList {
@@ -21,6 +22,7 @@ interface IPlacesListItem {
   id: string;
   name: string;
   organization: string;
+  type: string;
 }
 
 const PlacesResultsComponent = (props: IPlacesList) => {
@@ -38,19 +40,16 @@ const PlacesResultsComponent = (props: IPlacesList) => {
   const hasNextPage = results.length >= PAGE_SIZE;
   const awaitMore = !loading && !!nextPageCursor && hasNextPage;
   const renderItem = (index) => {
-    const { slug, name, id, organization } = results[index];
+    const { slug, name, id, organization, type } = results[index];
     return (
-      <div onClick={() => onClickIndex(name)} key={slug}>
-        <Link
-          to={{ type: 'LOCATION', payload: { slug, id, organization } }}
-          className="ng-c-panel-link ng-unstyled ng-margin-bottom"
-        >
-          {name}
-          {group.length > 1 && (
-            <span className="ng-margin-left ng-color-mdgray">{organization}</span>
-          )}
-        </Link>
-      </div>
+      <ListItem
+        title={name} key={slug}
+        linkTo={{ type: 'LOCATION', payload: { slug, id, organization } }}
+        onClick={() => onClickIndex(name)}
+        labels={[
+          type,
+          (group.length > 1) && organization
+        ]} />
     );
   };
   const onIntersection = (size, pageSize) => {
@@ -68,8 +67,8 @@ const PlacesResultsComponent = (props: IPlacesList) => {
   };
 
   return (
-    <div className="ng-padding-medium ng-section-background ng-position-relative">
-      <h2 className="ng-text-display-s ng-body-color ng-margin-medium-bottom">Search results</h2>
+    <div className="ng-section-background ng-position-relative ng-padding-medium-bottom">
+      <h2 className="ng-padding-medium ng-text-display-s ng-body-color ng-margin-remove">Search results</h2>
       <List
         awaitMore={awaitMore}
         pageSize={PAGE_SIZE}