fix some error in browser console

Author: suppermancool

src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/LinkForm/LinkForm.tsx

@@ -147,7 +147,7 @@ const LinkForm: ForwardRefExoticComponent<
                     tabIndex={0}
                     type='text'
                     onChange={handleURLChange}
-                    value={selectedLinkURL}
+                    value={selectedLinkURL || ''}
                     forceUpdateValue
                     disabled={props.disabled}
                 />

src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.tsx

@@ -1,4 +1,4 @@
-import { find, findIndex, reject, uniqBy } from 'lodash'
+import { find, findIndex, omit, reject, uniqBy } from 'lodash'
 import { FC, useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 import classNames from 'classnames'
@@ -76,7 +76,11 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
             setDefaultInstagram(memberLinks.splice(firstInstagramIndex, 1)[0])
         }
 
-        setCurrentMemberLinks(memberLinks)
+        setCurrentMemberLinks(memberLinks.map((item: UserTrait, index: number) => ({
+            ...item,
+            id: `id-${index}-${(new Date())
+                .getTime()}`,
+        })))
 
     }, [props.memberLinks])
 
@@ -89,7 +93,11 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
                 ...currentMemberLinks,
             ].filter(l => l.name && l.url), e => `${e.name}-${e.url}`)
             if (!find(updatedLinks, newLink)) {
-                setCurrentMemberLinks(links => [...links, newLink])
+                setCurrentMemberLinks(links => [...links, {
+                    ...newLink,
+                    id: `id-${(new Date())
+                        .getTime()}`,
+                }])
             }
 
             addNewLinkRef.current?.resetForm()
@@ -127,12 +135,20 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
         const updatedPersonalizationTraits: UserTrait[]
             = reject(props.memberPersonalizationTraitsFullData, (trait: UserTrait) => trait.links)
 
-        const updatedLinks: UserTrait[] = uniqBy([
-            defaultLinkedIn,
-            defaultGitHub,
-            defaultInstagram,
-            ...currentMemberLinks,
-        ].filter(l => l.name && l.url), e => `${e.name}-${e.url}`)
+        const updatedLinks: UserTrait[] = uniqBy(
+            [
+                defaultLinkedIn,
+                defaultGitHub,
+                defaultInstagram,
+                ...currentMemberLinks,
+            ].filter(
+                l => l.name && l.url,
+            ),
+            e => `${e.name}-${e.url}`,
+        )
+            .map(
+                item => omit(item, ['id']),
+            )
 
         updateOrCreateMemberTraitsAsync(props.profile.handle, [{
             categoryName: UserTraitCategoryNames.personalization,
@@ -273,14 +289,18 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
                                 <LinkForm
                                     link={trait as UserLink}
                                     onSave={function onSave(link: UserLink) {
-                                        handleSaveLink(link, i)
+                                        handleSaveLink({
+                                            ...trait,
+                                            ...link,
+                                        }, i)
                                     }}
                                     onRemove={function onRemove() {
                                         handleRemoveLink(i)
                                     }}
                                     allowEditType
                                     placeholder='http://'
                                     disabled={isSaving}
+                                    key={trait.id}
                                 />
                             ))
                         }

src/libs/ui/lib/components/form/form-groups/form-input/input-text/InputText.tsx

@@ -45,7 +45,11 @@ const InputText: FC<InputTextProps> = (props: InputTextProps) => {
             autoComplete={props.autocomplete}
             checked={defaultValue === 'on'}
             className={cn(styles['form-input-text'], styles[props.type])}
-            defaultValue={defaultValue}
+            defaultValue={
+                props.forceUpdateValue
+                    ? undefined
+                    : defaultValue
+            }
             value={
                 props.forceUpdateValue
                     ? (props.value as string | ReadonlyArray<string> | number | undefined)