add edit and view mode for bio field

Author: Roshan Jossy

src/components/UserDetails/Bio.tsx

@@ -1,4 +1,6 @@
 import { useState } from 'react'
+import { GoPencil, GrPencil } from '@react-icons/all-files/go/GoPencil'
+import { GoCheck } from '@react-icons/all-files/go/GoCheck'
 import { graphql, useFragment, useMutation } from 'react-relay'
 import { Bio_user$key } from '../../queries/__generated__/Bio_user.graphql'
 
@@ -18,6 +20,7 @@ const Bio = ({ user }: BioProps) => {
   )
 
   const [bio, setBio] = useState(data.bio)
+  const [editMode, setEditMode] = useState(false)
 
   const [commitMutation, isMutationInFlight] = useMutation(
     graphql`
@@ -29,8 +32,10 @@ const Bio = ({ user }: BioProps) => {
       }
     `
   )
-  const onChange = (evt: any) => setBio(evt.target.value)
+  const onChange = (evt: React.ChangeEvent<HTMLInputElement>) =>
+    setBio(evt.target.value)
   const onSubmit = () => {
+    setEditMode(false)
     commitMutation({
       variables: {
         input: { id: data.id, bio: bio },
@@ -39,13 +44,30 @@ const Bio = ({ user }: BioProps) => {
   }
 
   return (
-    <input
-      onChange={onChange}
-      onBlur={onSubmit}
-      className="dark:text-gray-300"
-      type="text"
-      defaultValue={data.bio}
-    />
+    <div>
+      {editMode ? (
+        <div className="flex justify-between">
+          <input
+            onChange={onChange}
+            onBlur={onSubmit}
+            className="dark:text-gray-300 dark:bg-dark-600"
+            type="text"
+            disabled={isMutationInFlight}
+            defaultValue={data.bio}
+          />
+          <button onClick={() => setEditMode(false)}>
+            <GoCheck />
+          </button>
+        </div>
+      ) : (
+        <div className="flex justify-between">
+          <span>{data.bio}</span>
+          <button onClick={() => setEditMode(true)}>
+            <GoPencil />
+          </button>
+        </div>
+      )}
+    </div>
   )
 }