photo urls for list views

Author: samuelcolvin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutorcruncher-socket",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "TutorCruncher socket",
   "author": "Samuel Colvin <[email protected]>",
   "private": false,

src/components/contractors/ConModal.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import Modal from '../shared/Modal'
-import { Location, IfElse } from '../shared/Tools'
+import {Location, IfElse, Photo} from '../shared/Tools'
 import ConDetails from './ConDetails'
 import EnquiryForm from '../shared/EnquiryForm'
 import Stars from './Stars'
@@ -51,15 +51,11 @@ class ConModal extends Component {
       )
     }
     const {contractor, contractor_extra} = _con
-    let photo_src = contractor.photo
-    if (photo_src.startsWith('/')) {
-      photo_src = this.props.config.api_root + photo_src
-    }
     return (
       <Modal history={this.props.history} title={contractor.name} last_url={this.props.last_url}>
         <div className="tcs-body">
           <div className="tcs-extra">
-            <img src={photo_src} alt={contractor.name}/>
+            <Photo contractor={contractor} config={this.props.config}/>
 
             <Stars contractor={contractor} root={this.props.root}/>
 

src/components/contractors/Contractors.js

@@ -169,6 +169,7 @@ class Contractors extends Component {
         </If>
         <DisplayComponent
           contractors={this.state.contractor_response ? this.state.contractor_response.results : []}
+          config={this.props.config}
           root={this.props.root}/>
         <If v={error_message}>
           <div className="tcs-no-contractors">

src/components/contractors/List.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import {Link} from 'react-router-dom'
-import {Location, Markdown, If} from '../shared/Tools'
+import {Location, Markdown, If, Photo} from '../shared/Tools'
 import Stars from './Stars'
 
 class AnimateLink extends Component {
@@ -23,25 +23,25 @@ class AnimateLink extends Component {
   }
 }
 
-export const Grid = ({contractors, root}) => (
+export const Grid = ({contractors, root, config}) => (
   <div className="tcs-flex">
     {contractors.map((contractor, i) => (
       <AnimateLink key={i} delay={i * 50} to={root.url(contractor.link)} className="tcs-col">
         <div className="tcs-item tcs-box">
-          <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
+          <Photo contractor={contractor} config={config} className="tcs-thumb"/>
           <h3 className="tcs-name">{contractor.name}</h3>
         </div>
       </AnimateLink>
     ))}
   </div>
 )
 
-export const List = ({contractors, root}) => (
+export const List = ({contractors, root, config}) => (
   <div className="tcs-list">
     {contractors.map((contractor, i) => (
       <AnimateLink key={i} delay={i * 80} to={root.url(contractor.link)} className="tcs-item">
         <div className="tcs-image-col">
-          <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
+          <Photo contractor={contractor} config={config} className="tcs-thumb"/>
           <button className="tcs-button">
             {root.get_text('view_profile')}
           </button>

src/components/shared/Tools.js

@@ -60,3 +60,11 @@ export const IfElse = ({v, children}) => {
 export const Markdown = ({content}) => (
   <div className="tcs-md" dangerouslySetInnerHTML={{__html: to_markdown(content)}}/>
 )
+
+export const Photo = ({contractor, config, className}) => {
+  let photo_src = contractor.photo
+  if (photo_src.startsWith('/')) {
+    photo_src = config.api_root + photo_src
+  }
+  return <img src={photo_src} alt={contractor.name} className={className}/>
+}