Improve UX and, input validation.

Author: prajwalkulkarni

src/components/EditableLabel.jsx

@@ -6,6 +6,7 @@ export const EditableLabel = ({
   value,
   type,
   handleInputChange,
+  assignCurrField,
   updateProfile,
   children,
   allowEditing,
@@ -24,7 +25,7 @@ export const EditableLabel = ({
               handleInputChange(e)
 
               if (e.key === 'Enter') {
-                updateProfile()
+                updateProfile(name)
                 setEditMode(!editMode)
               }
             }}
@@ -58,7 +59,10 @@ export const EditableLabel = ({
             <button
               data-cy={`edit-${name}-btn`}
               className='editable-label-edit-btn'
-              onClick={() => setEditMode(!editMode)}
+              onClick={() => {
+                setEditMode(!editMode)
+                assignCurrField(value, name)
+              }}
             >
               <EOS_MODE_EDIT className='eos-icons' />
             </button>
@@ -72,7 +76,7 @@ export const EditableLabel = ({
             data-cy='save-changes-btn'
             onClick={() => {
               setEditMode(!editMode)
-              updateProfile()
+              updateProfile(name)
             }}
           >
             <EOS_SAVE className='eos-icons' />

src/components/UserProfile.jsx

@@ -8,7 +8,8 @@ export const UserProfile = ({
   allowEditing,
   user,
   handleInputChange,
-  updateProfile
+  updateProfile,
+  assignCurrField
 }) => {
   return (
     <>
@@ -19,6 +20,7 @@ export const UserProfile = ({
           handleInputChange={handleInputChange}
           updateProfile={updateProfile}
           allowEditing={allowEditing}
+          assignCurrField={assignCurrField}
         />
       </div>
       {allowEditing && <UserSettings user={user} />}
@@ -90,7 +92,8 @@ export const UserDetails = ({
   user,
   handleInputChange,
   allowEditing,
-  updateProfile
+  updateProfile,
+  assignCurrField
 }) => {
   return (
     <div className='user-profile-details'>
@@ -104,6 +107,7 @@ export const UserDetails = ({
             value={user.Name ?? user.username}
             className='input-default'
             handleInputChange={handleInputChange}
+            assignCurrField={assignCurrField}
             allowEditing={allowEditing}
             updateProfile={updateProfile}
             placeholder='Your name'
@@ -118,6 +122,7 @@ export const UserDetails = ({
             name={'Bio'}
             value={user.Bio}
             handleInputChange={handleInputChange}
+            assignCurrField={assignCurrField}
             allowEditing={allowEditing}
             updateProfile={updateProfile}
             placeholder='Say something about yourself'
@@ -144,6 +149,7 @@ export const UserDetails = ({
                   name={'Profession'}
                   value={user.Profession}
                   handleInputChange={handleInputChange}
+                  assignCurrField={assignCurrField}
                   allowEditing={allowEditing}
                   updateProfile={updateProfile}
                   placeholder='Your job title'
@@ -163,6 +169,7 @@ export const UserDetails = ({
                   name={'Company'}
                   value={user.Company}
                   handleInputChange={handleInputChange}
+                  assignCurrField={assignCurrField}
                   allowEditing={allowEditing}
                   updateProfile={updateProfile}
                   placeholder='Your company name'
@@ -182,6 +189,7 @@ export const UserDetails = ({
                   name={'LinkedIn'}
                   value={user.LinkedIn}
                   handleInputChange={handleInputChange}
+                  assignCurrField={assignCurrField}
                   allowEditing={allowEditing}
                   updateProfile={updateProfile}
                   placeholder='Your LinkedIn username'
@@ -212,6 +220,7 @@ export const UserDetails = ({
                   name={'Twitter'}
                   value={user.Twitter}
                   handleInputChange={handleInputChange}
+                  assignCurrField={assignCurrField}
                   allowEditing={allowEditing}
                   updateProfile={updateProfile}
                   placeholder='Your Twitter handle'

src/pages/MyProfile.js

@@ -16,27 +16,39 @@ const MyProfile = () => {
 
   const [, setUpdated] = useState(false)
 
-  const [updatingField, setUpdatingField] = useState('')
+  const [updatingField, setUpdatingField] = useState({})
+
+  const [currFieldDefaultValue, setCurrFieldDefaultValue] = useState({})
+
+  const assignCurrField = (val, name) => {
+    setCurrFieldDefaultValue((p) => ({
+      ...p,
+      [name]: val
+    }))
+    setUpdatingField((p) => ({ ...p, [name]: val }))
+  }
 
   const handleInputChange = (event) => {
-    setUpdatingField(event.target.value)
+    setUpdatingField((p) => ({ ...p, [event.target.name]: event.target.value }))
     setUser({
       ...user,
       [event.target.name]: event.target.value
     })
   }
 
-  const updateProfile = async () => {
+  const updateProfile = async (name) => {
+    if (currFieldDefaultValue[name] === updatingField[name]) {
+      toast.success('Nothing changed here')
+      return
+    }
     try {
-      if (!updatingField) {
-        toast.error('Input cannot be empty')
-        return
-      }
       const response = await userStory.updateUser({ id: userId, ...user })
-      if (response) {
-        toast.success('Profile updated successfully')
-        setUpdated(true)
+      if (response && updatingField[name].length === 0) {
+        toast.success('Your data has been removed')
+      } else if (response && updatingField[name].length > 0) {
+        toast.success('Your changes have been saved')
       }
+      setUpdated(true)
     } catch (err) {
       console.error(err.message)
       toast.error(err.message)
@@ -68,6 +80,7 @@ const MyProfile = () => {
                 user={user === '' ? '' : Object.assign(user, { id: userId })}
                 handleInputChange={handleInputChange}
                 updateProfile={updateProfile}
+                assignCurrField={assignCurrField}
                 allowEditing
               />
             </div>