From 4bb6a1d9a1395e250d738ae5bf91ca058cd933dd Mon Sep 17 00:00:00 2001
From: AtuyL <atuyl.jp@gmail.com>
Date: Thu, 22 Nov 2018 19:42:25 +0900
Subject: [PATCH 1/3] Revert "fixed: focussing on title-edit"

---
 app/components/title-field.js | 39 +++++++++++++++--------------------
 app/containers/drag-drop.js   | 12 ++++-------
 2 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/app/components/title-field.js b/app/components/title-field.js
index 8d96ceec..eb22784f 100644
--- a/app/components/title-field.js
+++ b/app/components/title-field.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
 import styled from 'styled-components'
 import Icon from './icon'
 import { Plain as PlainButton, Green as GreenButton } from './button'
@@ -36,38 +35,32 @@ const EditableFieldWrapper = styled.div`
   }
 `
 
-const InputFieldStyle = styled.input`
+const InputField = styled.input`
   :focus {
     outline: none;
   }
 `
 
-class InputField extends Component {
-  componentDidMount () {
-    const input = ReactDOM.findDOMNode(this)
-    input.focus()
-    input.select()
-  }
-  render () {
-    return <InputFieldStyle {...this.props} />
-  }
-}
-
 class TitleField extends Component {
-  constructor (props) {
-    super(props)
-    this.titleInput = React.createRef()
+  startEditing () {
+    this.setState({ editing: true })
   }
 
   onclick (ev) {
     ev.stopPropagation()
     ev.preventDefault()
-    this.setState({ editing: true })
+    this.startEditing()
+
+    // setTimeout? Because ref on input is set asynchronously, and later. So we can't do focus, select on it until ref is set
+    setTimeout(() => {
+      this.titleInput.focus()
+      this.titleInput.select()
+    }, 0)
   }
 
   commit () {
     const oldValue = this.props.value
-    const newValue = ReactDOM.findDOMNode(this.titleInput.current).value
+    const newValue = this.titleInput.value
     if (oldValue !== newValue) {
       this.props.onChange(newValue)
     }
@@ -115,12 +108,14 @@ class TitleField extends Component {
               className='bn f6 pl1 normal w-100'
               defaultValue={value}
               onKeyUp={ev => this.handleKeyup(ev)}
-              ref={this.titleInput}
+              innerRef={input => {
+                this.titleInput = input
+              }}
             />
-            {modified ? (
-              <GreenButton onClick={() => this.commit()}>Save</GreenButton>
+            {!modified ? (
+              <PlainButton onClick={() => this.commit()}>Save</PlainButton>
             ) : (
-              <PlainButton onClick={() => this.cancel()}>Save</PlainButton>
+              <GreenButton onClick={() => this.commit()}>Save</GreenButton>
             )}
           </EditableFieldWrapper>
         </div>
diff --git a/app/containers/drag-drop.js b/app/containers/drag-drop.js
index f2f8970e..17116be8 100644
--- a/app/containers/drag-drop.js
+++ b/app/containers/drag-drop.js
@@ -34,14 +34,10 @@ const DropIcon = styled(Icon)`
   color: white;
 `
 
-const DragDropContainer = connect(mapStateToProps, mapDispatchToProps)(function (
-  props
-) {
-  return (
-    <DropFrame {...props}>
-      <DropIcon name='create-new-dat' />
-    </DropFrame>
-  )
+const DragDropContainer = connect(mapStateToProps, mapDispatchToProps)(function(props){
+  return <DropFrame {...props}>
+    <DropIcon name='create-new-dat' />
+  </DropFrame>
 })
 
 export default DragDropContainer

From 25c08880838b58f80ea5e3f3e9bdfe4070c980e3 Mon Sep 17 00:00:00 2001
From: AtuyL <atuyl.jp@gmail.com>
Date: Thu, 22 Nov 2018 19:32:58 +0900
Subject: [PATCH 2/3] fixed: overlay z-index in title-editing.

---
 app/components/title-field.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/title-field.js b/app/components/title-field.js
index eb22784f..2b90ed95 100644
--- a/app/components/title-field.js
+++ b/app/components/title-field.js
@@ -4,16 +4,18 @@ import Icon from './icon'
 import { Plain as PlainButton, Green as GreenButton } from './button'
 
 const Overlay = styled.div`
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.2);
+  z-index: 1;
 `
 
 const EditableFieldWrapper = styled.div`
   position: relative;
+  z-index: 1;
   h2 {
     position: relative;
   }

From 3c8d79bb8ae6bbead1e7461a73a4832df823ba0f Mon Sep 17 00:00:00 2001
From: AtuyL <atuyl.jp@gmail.com>
Date: Thu, 22 Nov 2018 19:40:39 +0900
Subject: [PATCH 3/3] fix: changing title still keep on the next session.

---
 app/actions/dat-middleware.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/actions/dat-middleware.js b/app/actions/dat-middleware.js
index d953e10c..5fe19fe7 100644
--- a/app/actions/dat-middleware.js
+++ b/app/actions/dat-middleware.js
@@ -77,10 +77,10 @@ export default class DatMiddleware {
     this.listeners.forEach(listener => listener(action))
   }
 
-  async updateTitle ({ key, editValue }) {
+  async updateTitle ({ key, title }) {
     const dat = this.dats[key]
     const filePath = joinPath(dat.path, 'dat.json')
-    const metadata = { ...dat.dat.metadata, title: editValue }
+    const metadata = { ...dat.dat.metadata, title: title }
 
     try {
       await writeFile(filePath, JSON.stringify(metadata))