Added placeholder headshot to Person component (#1119)

* Related #1114 - added placeholder headshot

source/js/components/loading-indicator/loading-indicator.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 export default () => {
-  return <div class="loading-indicator d-inline-block">
-    <div class="dot"></div>
-    <div class="dot"></div>
-    <div class="dot"></div>
+  return <div className="loading-indicator d-inline-block">
+    <div className="dot"></div>
+    <div className="dot"></div>
+    <div className="dot"></div>
   </div>;
 };

source/js/components/people/person.jsx

@@ -1,8 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-export default class Person extends React.Component {
+class Person extends React.Component {
   constructor(props) {
     super(props);
+
+    // setting default value for props.metadata.image here
+    // because PropTypes.defaultProps does not support setting default value
+    // for object properties
+    if (!props.metadata.image) {
+      this.props.metadata.image = `/_images/fellowships/headshot/placeholder.jpg`;
+    }
   }
 
   render() {
@@ -137,3 +145,22 @@ export default class Person extends React.Component {
     }
   }
 }
+
+Person.propTypes = {
+  metadata: PropTypes.shape({
+    name: PropTypes.string,
+    location: PropTypes.string,
+    role: PropTypes.string,
+    bio: PropTypes.string,
+    quote: PropTypes.string,
+    featured: PropTypes.bool,
+    affiliations: PropTypes.array,
+    'internet_health_issues': PropTypes.array,
+    image: PropTypes.string,
+    'partnership_logo': PropTypes.string,
+    link: PropTypes.object,
+    'custom_link': PropTypes.object,
+  }).isRequired,
+};
+
+export default Person;

source/js/fellowships.js

@@ -94,7 +94,7 @@ function renderFellowsOnDirectoryPage() {
   };
 
   // show loading indicator
-  ReactDOM.render(<div class="mx-auto my-5 text-center"><LoadingIndicator /></div>, CONTAINER);
+  ReactDOM.render(<div className="mx-auto my-5 text-center"><LoadingIndicator /></div>, CONTAINER);
 
   // get fellow info from Pulse
   getFellows(DIRECOTRY_PAGE_FILTER_OPTIONS, fellows => {
@@ -138,7 +138,7 @@ function renderFellowsOnDirectoryByTypePage() {
   const CONTAINER = document.getElementById(`fellows-directory-fellows-by-type`);
 
   // show loading indicator
-  ReactDOM.render(<div class="mx-auto my-5 text-center"><LoadingIndicator /></div>, CONTAINER);
+  ReactDOM.render(<div className="mx-auto my-5 text-center"><LoadingIndicator /></div>, CONTAINER);
 
   // get fellow info from Pulse
   getFellows({'program_type': `${CONTAINER.dataset.type} fellow`}, fellows => {