🐛 Erro triste no evento de editar o rolê

Author: marcobrunodev

src/App.js

@@ -11,11 +11,8 @@ const App = () => (
     <MainTitle content="Todo" />
 
     <MainTask id="task1" content="Criar o title" />
-
     <MainTask id="task2" content="Criar o title" />
-
     <MainTask id="task3" content="Criar o title" />
-
     <MainTask id="task4" content="Criar o title" />
   </>
 );

src/components/MainTask/index.js

@@ -1,14 +1,46 @@
-import React from 'react';
-
-import { Label, Checkbox } from './styles';
-
-const MainTask = ({id, content}) => (
-  <>
-    <Checkbox id={id} />
-    <Label for={id}>
-      {content}
-    </Label>
-  </>
-);
+import React, { useState, useRef, useEffect } from 'react';
+
+import iconEdit from '../../img/icon_edit.svg';
+import iconDelete from "../../img/icon_delete.svg";
+import { Label, Checkbox, Icon, Content } from './styles';
+
+function MainTask ({id, content}) {
+  const [isEditable, setIsEditable] = useState(false);
+  const componentContent = useRef(null);
+
+  function editable() {
+    setIsEditable(old => !old);
+  }
+
+  function selectText(event) {
+    console.log('ENTROU AQUI AGORA!')
+    console.log(event.target);
+
+    event.target.select();
+  }
+
+
+  useEffect(() => {
+    isEditable && componentContent.current.focus();
+  });
+
+  return (
+    <>
+      <Checkbox id={id}/>
+      <Label htmlFor={id}>
+        <Content contentEditable={isEditable} suppressContentEditableWarning={true}>
+          {content}
+        </Content>
+
+        <input ref={componentContent} onFocus={selectText} type="text" value="EITA MDN" />
+
+        <Icon src={iconEdit} onClick={editable} />
+        <Icon src={iconDelete} />
+      </Label>
+    </>
+  )
+};
+
+
 
 export default MainTask;

src/components/MainTask/styles.js

@@ -4,15 +4,32 @@ const Checkbox = styled.input.attrs({ type: "checkbox"})`
   display: none;
 `;
 
+const Icon = styled.img`
+  opacity: 0;
+  margin-left: 10px;
+  transition: opacity 200ms linear, transform 200ms linear;
+
+  &:hover {
+    transform: scale(1.2);
+  }
+`;
+
+const Content = styled.span`
+  &[contenteditable="true"] {
+    border: 2px dotted var(--color-first);
+  }
+`;
+
 const Label = styled.label`
   display: flex;
   align-items: center;
   font-size: 22px;
   font-weight: 300;
   padding: 30px 20px;
   margin-bottom: 30px;
+  cursor: pointer;
   
-  background-image: linear-gradient(270.67deg, rgba(255, 255, 255, 0) 0.13%, rgba(160, 163, 164, 0.483621) 18.84%, rgba(123, 127, 128, 0.671695) 39.1%, rgba(81, 86, 88, 0.885417) 75.46%, #3A4042 99.88%);
+  background-image: linear-gradient(270.67deg, rgba(255, 255, 255, 0.15) 0.13%, rgba(160, 163, 164, 0.483621) 11.56%, rgba(123, 127, 128, 0.671695) 26.63%, rgba(81, 86, 88, 0.885417) 75.46%, #3A4042 99.88%);
 
   &:before {
     content: "";
@@ -22,14 +39,17 @@ const Label = styled.label`
     border-radius: 50%;
     border: 2px solid var(--color-first);
     margin-right: 15px;
-    cursor: pointer;
+
+    transition: background-color 200ms linear;
   }
 
   ${Checkbox}:checked + &:before {
     background-color: var(--color-first);
   }
-`;
-
 
+  &:hover > ${Icon} {
+    opacity: 1;
+  }
+`;
 
-export { Label, Checkbox }
+export { Label, Checkbox, Icon, Content }