From 8729a9bc4c2e806b29b5ee056e6e576a902dba1d Mon Sep 17 00:00:00 2001
From: Cernan Bernardo <cernanb@gmail.com>
Date: Sun, 9 Sep 2018 18:28:31 -0700
Subject: [PATCH 1/2] Create Toggle component

---
 src/utilities/Toggle.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/utilities/Toggle.js

diff --git a/src/utilities/Toggle.js b/src/utilities/Toggle.js
new file mode 100644
index 0000000..980187d
--- /dev/null
+++ b/src/utilities/Toggle.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+
+export default class Toggle extends Component {
+  state = {
+    on: false
+  }
+
+  toggle = () => this.setState({ on: !this.state.on })
+
+  render() {
+    const { on } = this.state
+    const { toggle } = this
+    const { children } = this.props
+    return children({ on, toggle })
+  }
+}

From fa82f91c21e31cf5e932a1829310f4f99fb6b17a Mon Sep 17 00:00:00 2001
From: Cernan Bernardo <cernanb@gmail.com>
Date: Sun, 9 Sep 2018 19:34:10 -0700
Subject: [PATCH 2/2] Use Toggle component in Trail and convert to stateless
 fxnl

---
 src/components/trails/Trail.js | 50 +++++++++++-----------------------
 1 file changed, 16 insertions(+), 34 deletions(-)

diff --git a/src/components/trails/Trail.js b/src/components/trails/Trail.js
index 1dc61bb..c116987 100644
--- a/src/components/trails/Trail.js
+++ b/src/components/trails/Trail.js
@@ -1,38 +1,20 @@
-import React, { Component } from "react";
+import React, { Component } from 'react'
 import ShowTrail from './ShowTrail'
 import EditTrail from './EditTrail'
+import Toggle from '../../utilities/Toggle'
 
-class Trail extends Component {
+const Trail = ({ trail, update, delete: deleteAction }) => (
+  <div className="trail-container">
+    <Toggle>
+      {({ on, toggle }) => {
+        return on ? (
+          <EditTrail trail={trail} update={update} showTrail={toggle} delete={deleteAction} />
+        ) : (
+          <ShowTrail trail={trail} edit={toggle} delete={deleteAction} />
+        )
+      }}
+    </Toggle>
+  </div>
+)
 
-  constructor() {
-    super();
-    this.state = {
-      showComponent: false
-    };
-  }
-
-  onEditClick = () => {
-    this.setState({
-      showComponent: !this.state.showComponent,
-    });
-  }
-
-  hideEditComponent = () => {
-    this.setState({
-      showComponent: false
-    })
-  }
-
-  render() {
-    return (
-      <div className="trail-container">
-        {this.state.showComponent ? 
-        <EditTrail trail={this.props.trail} update={this.props.update} showTrail={this.hideEditComponent} delete={this.props.delete} /> :
-        <ShowTrail trail={this.props.trail} edit={this.onEditClick} delete={this.props.delete} />
-        }
-      </div>
-    );
-  }
-}
-
-export default Trail;
+export default Trail