Make results slider dynamic and other things

Author: davejm

src/components/LocatorContainer.js

@@ -9,17 +9,37 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as actions from '../actions/actions';
 
+function formatStoreType(type) {
+  switch (type) {
+    case 'DestinationStore':
+      return 'Destination Store';
+    case 'LocalSkyStore':
+      return 'Local Sky Store';
+    default:
+      // return a sane default if the type isn't recognised
+      return 'Local Sky Store';
+  }
+}
+
 class LocatorContainer extends Component {
   render() {
     const markers = this.props.storesFound.map((store) => {
       return [parseFloat(store.Latitude), parseFloat(store.Longitude)]
     })
 
+    const resultInfos = this.props.storesFound.map((store) => {
+      return Object.assign({}, store, {
+        _TypeFormatted: formatStoreType(store.Type)
+      })
+    })
+
+    console.log("resultInfos", resultInfos)
+
     return (
       <div>
         <MapSearch onSearchPostcode={this.props.actions.fetchStores} />
         <button className="btn btn-secondary btn-block mb-4 hidden-sm-up">View Map</button>
-        <Results />
+        {resultInfos.length > 0 ? <Results resultInfos={resultInfos} /> : 'No results'}
         <MyMap markers={markers} />
       </div>
     );

src/components/Result.css

@@ -1,30 +1,8 @@
-.results {
-  /*margin: 0;
-  padding: 0;
-  list-style-type: none;*/
-  /*overflow-y: scroll;*/
-}
-
-.result {
+.result-wrapper {
   margin-bottom: 1rem;
   padding: 0.6rem;
 }
 
-.result-inner {
-  box-shadow: 0 1px 10px 0 rgba(0,0,0,.2);
-  padding: 1.2rem;
-}
-
-.result h1 {
-  margin-bottom: 1rem;
-}
-
-.result .distance {
-  margin-bottom: 0.5rem;
-}
-
-.result .address,
-.result .telephone
-{
-  color: #999;
+.result {
+    min-height: 270px;
 }

src/components/Result.js

@@ -1,21 +1,37 @@
 import React, { Component } from 'react';
 import './Result.css';
+import PropTypes from 'prop-types';
 
 class Result extends Component {
   render() {
+    const { resultInfo: data } = this.props;
     return (
-      <div {...this.props}>
-        <div className="result">
-          <div className="result-inner">
-            <h1 className="h3">Leeds</h1>
-            <div className="distance">0.2 Miles / 0.4 Km</div>
-            <div className="address">123 Leeds Rd, Leeds, LS1 62Q</div>
-            <div className="telephone">0113 123 1234</div>
+      <div className="result-wrapper">
+        <div className="card result">
+          <div className="card-block">
+            <h4 className="card-title">{ data.StoreName }</h4>
+            <h6 className="card-subtitle mb-3 text-muted">{ data._TypeFormatted }</h6>
+            <p className="card-text">
+              { data.Address1 }<br/>
+              { data.Address2 &&
+                <span>
+                  {data.Address2}<br/>
+                </span>
+              }
+              { data.City }<br/>
+              { data.Postcode }<br/>
+              { data.Telephone }
+            </p>
+            <a target="_blank" href={ data.MapUrl } className="card-link">Directions</a>
           </div>
         </div>
       </div>
     );
   }
 }
 
+Result.propTypes = {
+  resultInfo: PropTypes.object.isRequired
+};
+
 export default Result;

src/components/Results.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
 import './Results.css';
 import Slider from 'react-slick';
+import PropTypes from 'prop-types';
 
 import Result from './Result';
 
-class Sidebar extends Component {
+class Results extends Component {
   render() {
     const settings = {
       dots: true,
@@ -35,16 +36,16 @@ class Sidebar extends Component {
 
     return (
       <Slider {...settings}>
-        <Result />
-        <Result />
-        <Result />
-        <Result />
-        <Result />
-        <Result />
-        <Result />
+        {this.props.resultInfos.map((resultInfo, idx) =>
+          <div key={`result-${idx}`}><Result resultInfo={resultInfo} /></div>
+        )}
       </Slider>
     );
   }
 }
 
-export default Sidebar;
+Results.propTypes = {
+  resultInfos: PropTypes.array.isRequired
+};
+
+export default Results;