Make header component

src/App.css

@@ -1,61 +1,3 @@
-.app-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 95px;
-  margin-right: 20px;
-}
-
-.app-title-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.app-title-text {
-  flex-grow: 1;
-}
-.app-header {
-  background-color: #222;
-  height: 105px;
-  padding: 20px;
-  color: white;
-  padding-left: 60px;
-}
-.app-left-nav {
-  display: flex;
-}
-.app-title {
-  font-size: 1.5em;
-}
-.app-intro {
-  font-size: large;
-}
-.deploy-button-wrapper {
-  margin-right: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.deploy-button {
-  width: 200px;
-}
-.view-src {
-  margin-top: 15px;
-  text-align: center;
-}
-.view-src img {
-  margin-right: 10px;
-}
-.view-src a {
-  text-decoration: none;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.github-icon {
-  width: 25px;
-  fill: white;
-}
-
 .todo-list {
   padding: 60px;
   padding-top: 10px;
@@ -108,44 +50,12 @@
   letter-spacing: 1px;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-
 @media (max-width: 768px) {
-  .app-title-wrapper {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .app-title {
-    font-size: 18px;
-  }
-  .app-intro {
-    font-size: 14px;
-  }
   .todo-list {
     padding: 15px;
     padding-top: 10px;
     width: auto;
   }
-  .app-header {
-    padding-left: 20px;
-    height: auto;
-  }
-  .app-logo {
-    height: 60px;
-    margin-right: 20px;
-    animation: none;
-  }
-  .deploy-button-wrapper {
-    margin-left: 80px;
-    margin-top: 5px;
-  }
-  .deploy-button {
-    width: 150px;
-  }
   .todo-list-title {
     /* Disable Auto Zoom in Input “Text” tag - Safari on iPhone */
     font-size: 16px;
@@ -180,9 +90,6 @@
     color: #adadad;
     letter-spacing: 1px;
   }
-  .view-src {
-    display: none;
-  }
 }
 
 /** todo css via https://codepen.io/shshaw/pen/WXMdwE 😻 */

src/App.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'react'
 import api from './utils/api'
 import ContentEditable from './components/ContentEditable'
-import deployButton from './deploy-to-netlify.svg'
+import AppHeader from './components/AppHeader'
-import logo from './logo.svg'
-import github from './github.svg'
 import './App.css'
 
 class App extends Component {
@@ -25,7 +23,8 @@ class App extends Component {
     const todoValue = this.inputElement.value
 
     if (!todoValue) {
-      alert('Please add todo text')
+      alert('Please add Todo title')
+      this.inputElement.focus()
       return false
     }
 
@@ -97,11 +96,12 @@ class App extends Component {
     })
   }
   handleTodoCheckbox = (event) => {
+    const { todos } = this.state
     const { target } = event
     const todoCompleted = target.checked
     const todoId = target.dataset.id
 
-    const updatedTodos = this.state.todos.map((todo, i) => {
+    const updatedTodos = todos.map((todo, i) => {
       const { data } = todo
       const id = getTodoId(todo)
       if (id === todoId && data.completed !== todoCompleted) {
@@ -123,11 +123,7 @@ class App extends Component {
       })
     })
   }
-  handleDataChange = (event, currentValue) => {
+  updateTodoTitle = (event, currentValue) => {
-    // save on change debounced?
-  }
-  handleBlur = (event, currentValue) => {
-    console.log('blur')
     let isDifferent = false
     const todoId = event.target.dataset.key
 
@@ -186,16 +182,13 @@ class App extends Component {
               <use xlinkHref="#todo__circle" className="todo__circle"></use>
             </svg>
             <div className='todo-list-title'>
-
+              <ContentEditable
-                <ContentEditable
+                tagName='span'
-                  tagName='span'
+                editKey={id}
-                  editKey={id}
+                // onChange={this.handleDataChange} // save on change
-                  onChange={this.handleDataChange} // handle innerHTML change
+                onBlur={this.updateTodoTitle} // save on enter/blur
-                  onBlur={this.handleBlur} // handle innerHTML change
+                html={data.title}
-                  html={data.title}
+              />
-                >
-                </ContentEditable>
-
             </div>
           </label>
 
@@ -207,37 +200,7 @@ class App extends Component {
   render() {
     return (
       <div className='app'>
-        <header className='app-header'>
+        <AppHeader />
-          <div className='app-title-wrapper'>
-            <div className='app-title-wrapper'>
-              <div className='app-left-nav'>
-                <img src={logo} className='app-logo' alt='logo' />
-                <div className='app-title-text'>
-                  <h1 className='app-title'>Netlify + Fauna DB</h1>
-                  <p className='app-intro'>
-                    Using FaunaDB & Netlify functions
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className='deploy-button-wrapper'>
-              <a
-                target='_blank'
-                rel='noopener noreferrer'
-                href='https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-faunadb-example'>
-                <img src={deployButton} className='deploy-button' alt='deploy to netlify' />
-              </a>
-              <div className='view-src'>
-                <a
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  href='https://github.com/netlify/netlify-faunadb-example'>
-                  <img className='github-icon' src={github} alt='view repo on github' /> View the source Luke
-                </a>
-              </div>
-            </div>
-          </div>
-        </header>
 
         <div className='todo-list'>
           <h2>Create todo</h2>

src/components/AppHeader/AppHeader.css

@@ -0,0 +1,94 @@
+.app-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 95px;
+  margin-right: 20px;
+}
+.app-title-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.app-title-text {
+  flex-grow: 1;
+}
+.app-header {
+  background-color: #222;
+  height: 105px;
+  padding: 20px;
+  color: white;
+  padding-left: 60px;
+}
+.app-left-nav {
+  display: flex;
+}
+.app-title {
+  font-size: 1.5em;
+}
+.app-intro {
+  font-size: large;
+}
+.deploy-button-wrapper {
+  margin-right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.deploy-button {
+  width: 200px;
+}
+.view-src {
+  margin-top: 15px;
+  text-align: center;
+}
+.view-src img {
+  margin-right: 10px;
+}
+.view-src a {
+  text-decoration: none;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.github-icon {
+  width: 25px;
+  fill: white;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Mobile view */
+@media (max-width: 768px) {
+  .app-title-wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .app-title {
+    font-size: 18px;
+  }
+  .app-intro {
+    font-size: 14px;
+  }
+  .app-header {
+    padding-left: 20px;
+    height: auto;
+  }
+  .app-logo {
+    height: 60px;
+    margin-right: 20px;
+    animation: none;
+  }
+  .deploy-button-wrapper {
+    margin-left: 80px;
+    margin-top: 5px;
+  }
+  .deploy-button {
+    width: 150px;
+  }
+  .view-src {
+    display: none;
+  }
+}

src/components/AppHeader/index.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import deployButton from '../../assets/deploy-to-netlify.svg'
+import logo from '../../assets/logo.svg'
+import github from '../../assets/github.svg'
+import styles from './AppHeader.css'
+
+const AppHeader = (props) => {
+  return (
+    <header className='app-header'>
+      <div className='app-title-wrapper'>
+        <div className='app-title-wrapper'>
+          <div className='app-left-nav'>
+            <img src={logo} className='app-logo' alt='logo' />
+            <div className='app-title-text'>
+              <h1 className='app-title'>Netlify + Fauna DB</h1>
+              <p className='app-intro'>
+                Using FaunaDB & Netlify functions
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className='deploy-button-wrapper'>
+          <a
+            target='_blank'
+            rel='noopener noreferrer'
+            href='https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-faunadb-example'>
+            <img src={deployButton} className='deploy-button' alt='deploy to netlify' />
+          </a>
+          <div className='view-src'>
+            <a
+              target='_blank'
+              rel='noopener noreferrer'
+              href='https://github.com/netlify/netlify-faunadb-example'>
+              <img className='github-icon' src={github} alt='view repo on github' />
+              View the source Luke
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default AppHeader