Merge pull request #760 from topcoder-platform/profiles-app

Profiles app -> dev

Author: kkartunov

src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.module.scss

@@ -6,7 +6,8 @@
     width: 100%;
 }
 
-.modalBody {
+.nameToggle {
     display: flex;
     align-items: center;
+    justify-content: space-between;
 }

src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx

@@ -1,16 +1,31 @@
 import { Dispatch, FC, SetStateAction, useState } from 'react'
-import { trim } from 'lodash'
+import { reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
 
-import { updateMemberProfileAsync, UserProfile } from '~/libs/core'
-import { BaseModal, Button, InputText } from '~/libs/ui'
+import {
+    createMemberTraitsAsync,
+    updateMemberProfileAsync,
+    updateMemberTraitsAsync,
+    UserProfile,
+    UserTrait,
+    UserTraitCategoryNames,
+    UserTraitIds,
+} from '~/libs/core'
+import { BaseModal, Button, FormToggleSwitch, InputText } from '~/libs/ui'
 
 import styles from './ModifyMemberNameModal.module.scss'
 
 interface ModifyMemberNameModalProps {
     profile: UserProfile
     onClose: () => void
     onSave: () => void
+    memberPersonalizationTraitsData: UserTrait[] | undefined
+    hideMyNameInProfile: boolean
+}
+
+const methodsMap: { [key: string]: any } = {
+    create: createMemberTraitsAsync,
+    update: updateMemberTraitsAsync,
 }
 
 const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemberNameModalProps) => {
@@ -32,6 +47,9 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
     const [currentLastName, setCurrentLastName]: [string, Dispatch<SetStateAction<string>>]
         = useState<string>(props.profile.lastName)
 
+    const [hideMyNameInProfile, setHideMyNameInProfile]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(props.hideMyNameInProfile)
+
     function handleFirstNameChange(e: React.ChangeEvent<HTMLInputElement>): void {
         setCurrentFirstName(e.target.value)
         setIsFormChanged(true)
@@ -42,6 +60,11 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
         setIsFormChanged(true)
     }
 
+    function handleShowMyNameInProfileToggle(): void {
+        setHideMyNameInProfile(!hideMyNameInProfile)
+        setIsFormChanged(true)
+    }
+
     function handleModifyNameSave(): void {
         setFormErrors({})
 
@@ -64,10 +87,25 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
 
         setIsSaving(true)
 
-        updateMemberProfileAsync(
-            props.profile.handle,
-            { firstName: updatedFirstName, lastName: updatedLastName },
-        )
+        Promise.all([
+            updateMemberProfileAsync(
+                props.profile.handle,
+                { firstName: updatedFirstName, lastName: updatedLastName },
+            ),
+            methodsMap[!!props.memberPersonalizationTraitsData ? 'update' : 'create'](props.profile.handle, [{
+                categoryName: UserTraitCategoryNames.personalization,
+                traitId: UserTraitIds.personalization,
+                traits: {
+                    data: [
+                        ...reject(
+                            props.memberPersonalizationTraitsData,
+                            (trait: any) => trait.hideNamesOnProfile,
+                        ),
+                        { hideNamesOnProfile: hideMyNameInProfile },
+                    ],
+                },
+            }]),
+        ])
             .then(() => {
                 toast.success('Your profile has been updated.', { position: toast.POSITION.BOTTOM_RIGHT })
                 props.onSave()
@@ -122,6 +160,14 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
                     onChange={handleLastNameChange}
                     value={currentLastName}
                 />
+                <div className={styles.nameToggle}>
+                    <p>Hide my names on profile</p>
+                    <FormToggleSwitch
+                        name='hideMyNameInProfile'
+                        onChange={handleShowMyNameInProfileToggle}
+                        value={hideMyNameInProfile}
+                    />
+                </div>
             </div>
         </BaseModal>
     )

src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss

@@ -4,6 +4,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
+    justify-content: space-between;
     color: $tc-white;
 
     .photoWrap {
@@ -64,6 +65,10 @@
                 font-weight: $font-weight-bold;
                 font-family: $font-barlow;
             }
+
+            button {
+                color: $tc-white;
+            }
         }
 
         .memberSince {

src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable complexity */
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
+import { KeyedMutator } from 'swr'
 import moment from 'moment'
 
 import {
@@ -46,8 +48,10 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
 
-    const { data: memberPersonalizationTraits }: {
+    const { data: memberPersonalizationTraits, mutate: mutateTraits, loading: traitsLoading }: {
         data: UserTraits[] | undefined,
+        mutate: KeyedMutator<any>,
+        loading: boolean,
     }
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.personalization })
 
@@ -56,6 +60,11 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
             (trait: UserTrait) => trait.availableForGigs,
         ), [memberPersonalizationTraits])
 
+    const hideNamesOnProfile: UserTrait | undefined
+        = useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
+            (trait: UserTrait) => trait.hideNamesOnProfile,
+        ), [memberPersonalizationTraits])
+
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.names) {
             setIsNameEditMode(true)
@@ -92,6 +101,7 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         setTimeout(() => {
             setIsNameEditMode(false)
             props.refreshProfile(props.profile.handle)
+            mutateTraits()
         }, 1000)
     }
 
@@ -130,33 +140,43 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                 }
             </div>
 
-            <div className={styles.profileInfo}>
-                <div className={styles.nameWrap}>
-                    <p>
-                        {props.profile.firstName}
+            {!traitsLoading && (
+                <div className={styles.profileInfo}>
+                    <div className={styles.nameWrap}>
+                        <p>
+                            {
+                                hideNamesOnProfile
+                                    ? props.profile.handle
+                                    : `${props.profile.firstName} ${props.profile.lastName}`
+                            }
+                        </p>
+                        {
+                            canEdit && (
+                                <EditMemberPropertyBtn
+                                    onClick={handleModifyNameClick}
+                                />
+                            )
+                        }
+                    </div>
+
+                    <p className={styles.memberSince}>
+                        {
+                            !hideNamesOnProfile ? (
+                                <>
+                                    <span>{props.profile.handle}</span>
+                                    {' '}
+                                    |
+                                    {' '}
+                                </>
+                            ) : undefined
+                        }
+                        Member Since
                         {' '}
-                        {props.profile.lastName}
+                        {moment(props.profile.createdAt)
+                            .format('MMM YYYY')}
                     </p>
-                    {
-                        canEdit && (
-                            <EditMemberPropertyBtn
-                                onClick={handleModifyNameClick}
-                            />
-                        )
-                    }
                 </div>
-
-                <p className={styles.memberSince}>
-                    <span>{props.profile.handle}</span>
-                    {' '}
-                    |
-                    {' '}
-                    Member Since
-                    {' '}
-                    {moment(props.profile.createdAt)
-                        .format('MMM YYYY')}
-                </p>
-            </div>
+            )}
 
             {
                 openForWork || canEdit ? (
@@ -184,6 +204,8 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                         onClose={handleModifyNameModalClose}
                         onSave={handleModifyNameModalSave}
                         profile={props.profile}
+                        memberPersonalizationTraitsData={memberPersonalizationTraits?.[0]?.traits?.data}
+                        hideMyNameInProfile={hideNamesOnProfile?.hideNamesOnProfile || false}
                     />
                 )
             }

src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import { Dispatch, FC, MutableRefObject, SetStateAction, useRef, useState } from 'react'
 import { bind, trim } from 'lodash'
 import { toast } from 'react-toastify'
@@ -82,10 +83,15 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
 
     function handleFormValueChange(key: string, event: React.ChangeEvent<HTMLInputElement>): void {
         let value: string | boolean | Date | undefined
+        const oldFormValues = { ...formValues }
 
         switch (key) {
             case 'currentlyWorking':
                 value = event.target.checked
+                if (value) {
+                    oldFormValues.endDate = undefined
+                }
+
                 break
             case 'startDate':
             case 'endDate':
@@ -97,7 +103,7 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
         }
 
         setFormValues({
-            ...formValues,
+            ...oldFormValues,
             [key]: value,
         })
     }
@@ -137,6 +143,22 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
             return
         }
 
+        if (formValues.endDate || formValues.startDate) {
+            if (formValues.endDate && !formValues.startDate && !formValues.currentlyWorking) {
+                setFormErrors({
+                    startDate: 'Start date is required when end date is given',
+                })
+                return
+            }
+
+            if (formValues.startDate && !formValues.endDate && !formValues.currentlyWorking) {
+                setFormErrors({
+                    endDate: 'End date is required when start date is given',
+                })
+                return
+            }
+        }
+
         const updatedWorkExpirence: UserTrait = {
             cityTown: formValues.city,
             company: formValues.company,
@@ -306,7 +328,7 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
                             label='End Date'
                             date={formValues.endDate as Date}
                             onChange={bind(handleFormValueChange, this, 'endDate')}
-                            disabled={false}
+                            disabled={formValues.currentlyWorking as boolean}
                             error={formErrors.endDate}
                             dirty
                             maxDate={new Date()}

src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.module.scss

@@ -59,6 +59,7 @@
         border: none;
         pointer-events: none;
         height: 22px;
+        background: transparent;
 
         &:focus {
             outline: none;