import * as React from 'react';
import {Component} from 'react';
import {observer} from 'mobx-react';

import Contact from '../../interfaces/Contact';

import {ProfilePicture} from './ProfilePicture';

@observer
export class ContactDetails extends Component<{selectedContact: Contact}, {}> {
  render() {
    const contact = this.props.selectedContact;

    if (!contact) {
      return <div className="details"></div>
    }

    return (
      <div className="details">
        <header>
          <ProfilePicture contact={contact} />
          <div className="title">
            <h1 className="name">{contact.firstName}&nbsp;{contact.lastName}</h1>
            <div className="subtitle">{contact.nickName}</div>
          </div>
        </header>
        <table>
          <tbody>
            <tr>
              <td>email</td>
              <td>some@example.com</td>
            </tr>
          </tbody>
        </table>
        <footer>
          <div className="left">
            <button>+</button>
          </div>
          <div className="right">
            <button>Delete</button>
            <button>Edit</button>
          </div>
        </footer>
      </div>
    )
  }
}
import * as React from 'react';
import {Component} from 'react';
import {observer} from 'mobx-react';

import Contact from '../../interfaces/Contact';

import {ProfilePicture} from './ProfilePicture';

@observer
export class ContactDetails extends Component<{selectedContact: Contact}, {}> {
  render() {
    return (
      <div className="details">
        <header>
          <ProfilePicture contact={this.props.selectedContact} />
          <div className="title">
            <h1 className="name">{this.props.selectedContact.firstName}&nbsp;{this.props.selectedContact.lastName}</h1>
            <div className="subtitle">{this.props.selectedContact.nickName}</div>
          </div>
        </header>
        <table>
          <tbody>
            <tr>
              <td>email</td>
              <td>some@example.com</td>
            </tr>
          </tbody>
        </table>
        <footer>
          <div className="left">
            <button>+</button>
          </div>
          <div className="right">
            <button>Delete</button>
            <button>Edit</button>
          </div>
        </footer>
      </div>
    )
  }
}
--- 
+++ 
@@ -9,13 +9,19 @@
 @observer
 export class ContactDetails extends Component<{selectedContact: Contact}, {}> {
   render() {
+    const contact = this.props.selectedContact;
+
+    if (!contact) {
+      return <div className="details"></div>
+    }
+
     return (
       <div className="details">
         <header>
-          <ProfilePicture contact={this.props.selectedContact} />
+          <ProfilePicture contact={contact} />
           <div className="title">
-            <h1 className="name">{this.props.selectedContact.firstName}&nbsp;{this.props.selectedContact.lastName}</h1>
-            <div className="subtitle">{this.props.selectedContact.nickName}</div>
+            <h1 className="name">{contact.firstName}&nbsp;{contact.lastName}</h1>
+            <div className="subtitle">{contact.nickName}</div>
           </div>
         </header>
         <table>
Handle no contact in ContactDetails
