Optimize and clean code (#4)

Co-authored-by: Akaam Shamerany <alpha@Akaams-MacBook-Air.local>

src/bubble-input.css

@@ -1,6 +1,8 @@
 .bubble.input {
   transition: opacity 0.4s ease-in-out;
   opacity: 1;
+  border: none;
+  outline: none;
 }
 
 .bubble.input.submitted {
@@ -12,8 +14,6 @@
 }
 
 .bubble.input > div {
-  border: none;
-  outline: none;
   background-color: #eee;
   font-size: 32px;
   min-width: 30px;

src/bubble-input.jsx

@@ -1,31 +1,22 @@
 import React, { useCallback, useState, useRef, useEffect } from 'react'
 import './bubble-input.css'
-import ContentEditable from './content-editable'
 
 const BubbleInput = ({ onChange, onSubmit, value }) => {
   const refEditable = useRef()
   const [submitted, setSubmitted] = useState(false)
 
-  const handleChange = useCallback(
-    e => {
-      onChange && onChange(e.target.value)
-    },
-    [onChange]
-  )
-  const handleKeyDown = useCallback(
-    e => {
-      if (e.keyCode === 13) {
-        onSubmit && onSubmit()
-        e.preventDefault()
-        setSubmitted(true)
-        setTimeout(() => {
-          window.document.querySelector('.bubble.input > div').focus()
-          setSubmitted(false)
-        }, 10)
-      }
-    },
-    [onSubmit]
-  )
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      onSubmit && onSubmit()
+      e.preventDefault()
+      setSubmitted(true)
+      setTimeout(() => {
+        refEditable.current.focus()
+        refEditable.current.innerText = ''
+        setSubmitted(false)
+      }, 10)
+    }
+  }
   const handleBlur = useCallback(() => {
     const { current: elDiv } = refEditable
     if (elDiv) {
@@ -33,22 +24,20 @@ const BubbleInput = ({ onChange, onSubmit, value }) => {
     }
   }, [refEditable])
 
-  useEffect(() => handleBlur(), [handleBlur])
+  useEffect(handleBlur, [handleBlur])
 
   return (
     <div
+      ref={refEditable}
       className={`bubble input ${value.length === 0 ? 'empty' : ''} ${
         submitted ? 'submitted' : ''
       }`}
-    >
-      <ContentEditable
-        ref={refEditable}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        onBlur={handleBlur}
-        value={value}
-      />
-    </div>
+      contentEditable
+      spellCheck="false"
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      onInput={e => onChange(e.target.innerText)}
+    />
   )
 }
 

src/content-editable.jsx

@@ -1,52 +0,0 @@
-import * as React from 'react'
-
-class ContentEditable extends React.Component {
-  render() {
-    const { innerRef } = this.props
-    return (
-      <div
-        key={Math.random()}
-        ref={innerRef}
-        onInput={this.emitChange}
-        onBlur={this.handleBlur}
-        onKeyDown={this.emitKeyDown}
-        contentEditable
-        spellCheck="false"
-        dangerouslySetInnerHTML={{ __html: this.props.value }}
-      ></div>
-    )
-  }
-
-  shouldComponentUpdate(nextProps) {
-    const { current: div } = this.props.innerRef
-    return nextProps.value !== div.innerText
-  }
-
-  emitChange = () => {
-    const { current: div } = this.props.innerRef
-    var value = div.innerText
-    if (this.props.onChange && value !== this.lastValue) {
-      this.props.onChange({
-        target: {
-          value
-        }
-      })
-    }
-    this.lastValue = value
-  }
-
-  emitKeyDown = e => {
-    const { onKeyDown } = this.props
-    onKeyDown && onKeyDown(e)
-  }
-
-  handleBlur = e => {
-    this.emitKeyDown(e)
-    const { onBlur } = this.props
-    onBlur && onBlur(e)
-  }
-}
-
-export default React.forwardRef((props, ref) => {
-  return <ContentEditable innerRef={ref} {...props} />
-})

src/use-messages.js

@@ -5,8 +5,7 @@ const useMessages = (initialValue = []) => {
 
   const addMessage = useCallback(
     msg => {
-      const i = messages.length
-      setMessages([...messages, msg])
+      setMessages(messages => [...messages, msg])
       setTimeout(() => {
         setMessages(current => {
           const n = [...current]
@@ -15,7 +14,7 @@ const useMessages = (initialValue = []) => {
         })
       }, 15000)
     },
-    [messages]
+    [setMessages]
   )
 
   return [messages, addMessage]