diff --git a/src/apps/accounts/src/settings/tabs/account/address/MemberAddress.tsx b/src/apps/accounts/src/settings/tabs/account/address/MemberAddress.tsx index 6d55d1a18..0fd2716fa 100644 --- a/src/apps/accounts/src/settings/tabs/account/address/MemberAddress.tsx +++ b/src/apps/accounts/src/settings/tabs/account/address/MemberAddress.tsx @@ -68,11 +68,11 @@ const MemberAddress: FC = (props: MemberAddressProps) => { props.profile.handle, { addresses: [{ - city: formValues.city, - stateCode: formValues.stateCode, - streetAddr1: formValues.streetAddr1, - streetAddr2: formValues.streetAddr2, - zip: formValues.zip, + city: trim(formValues.city), + stateCode: trim(formValues.stateCode), + streetAddr1: trim(formValues.streetAddr1), + streetAddr2: trim(formValues.streetAddr2), + zip: trim(formValues.zip), }], competitionCountryCode: formValues.country, homeCountryCode: formValues.country, diff --git a/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.module.scss b/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.module.scss index 546a01518..b3a22c8db 100644 --- a/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.module.scss +++ b/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.module.scss @@ -9,10 +9,14 @@ align-items: center; margin-bottom: $sp-2; - svg { + > svg { margin-right: $sp-2; width: 24px; height: 24px; } + + > button { + margin-left: auto; + } } } \ No newline at end of file diff --git a/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.tsx b/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.tsx index 489044ddf..c17682147 100644 --- a/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.tsx +++ b/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.tsx @@ -1,14 +1,19 @@ -import { FC, useMemo } from 'react' +import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react' import cityTimezones from 'city-timezones' import moment from 'moment-timezone' import { useCountryName, UserProfile } from '~/libs/core' import { IconSolid } from '~/libs/ui' +import { EditMemberPropertyBtn } from '../../components' + +import { ModifyLocationModal } from './ModifyLocationModal' import styles from './MemberLocalInfo.module.scss' interface MemberLocalInfoProps { - profile: UserProfile | undefined + profile: UserProfile + authProfile: UserProfile | undefined + refreshProfile: (handle: string) => void } const MemberLocalInfo: FC = (props: MemberLocalInfoProps) => { @@ -35,11 +40,38 @@ const MemberLocalInfo: FC = (props: MemberLocalInfoProps) return moment.tz.zone(memberTimezone) ? memberTimezone : undefined }, [city, memberCountry]) + const canEdit: boolean = props.authProfile?.handle === props.profile.handle + + const [isEditMode, setIsEditMode]: [boolean, Dispatch>] + = useState(false) + + function handleModifyLocationClick(): void { + setIsEditMode(true) + } + + function handleModifyLocationModalClose(): void { + setIsEditMode(false) + } + + function handleModifyLocationModalSave(): void { + setTimeout(() => { + setIsEditMode(false) + props.refreshProfile(props.profile.handle) + }, 1000) + } + return (
{`${!!city ? `${city}, ` : ''}${memberCountry}`} + { + canEdit && ( + + ) + }
{ !!memberCityTimezone && ( @@ -53,6 +85,16 @@ const MemberLocalInfo: FC = (props: MemberLocalInfoProps)
) } + + { + isEditMode && ( + + ) + } ) } diff --git a/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.module.scss b/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.module.scss new file mode 100644 index 000000000..4ebd12ab0 --- /dev/null +++ b/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.module.scss @@ -0,0 +1,19 @@ +@import '@libs/ui/styles/includes'; + +.modalButtons { + display: flex; + justify-content: space-between; + width: 100%; +} + +.formError { + color: $red-100; +} + +.editForm { + margin-top: $sp-4; + + :global(.input-wrapper) { + margin-bottom: $sp-4; + } +} \ No newline at end of file diff --git a/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.tsx b/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.tsx new file mode 100644 index 000000000..528e7af8b --- /dev/null +++ b/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.tsx @@ -0,0 +1,135 @@ +import { Dispatch, FC, SetStateAction, useState } from 'react' +import { bind, trim } from 'lodash' +import { toast } from 'react-toastify' + +import { BaseModal, Button, InputSelect, InputText } from '~/libs/ui' +import { + CountryLookup, + updateMemberProfileAsync, + useCountryLookup, + UserProfile, +} from '~/libs/core' + +import styles from './ModifyLocationModal.module.scss' + +interface ModifyLocationModalProps { + onClose: () => void + onSave: () => void + profile: UserProfile +} + +const ModifyLocationModal: FC = (props: ModifyLocationModalProps) => { + const countryLookup: CountryLookup[] | undefined + = useCountryLookup() + + const [formValues, setFormValues]: [any, Dispatch] = useState({ + country: props.profile.homeCountryCode || props.profile.competitionCountryCode, + ...props.profile.addresses ? props.profile.addresses[0] : {}, + }) + + const [formSaveError, setFormSaveError]: [ + string | undefined, + Dispatch> + ] = useState() + + const [isSaving, setIsSaving]: [boolean, Dispatch>] + = useState(false) + + const [isFormChanged, setIsFormChanged]: [boolean, Dispatch>] + = useState(false) + + function handleFormValueChange(key: string, event: React.ChangeEvent): void { + const oldFormValues = { ...formValues } + + setFormValues({ + ...oldFormValues, + [key]: event.target.value, + }) + setIsFormChanged(true) + } + + function handleLocationSave(): void { + updateMemberProfileAsync( + props.profile.handle, + { + addresses: [{ + ...props.profile.addresses ? props.profile.addresses[0] : {}, + city: trim(formValues.city), + }], + competitionCountryCode: formValues.country, + homeCountryCode: formValues.country, + }, + ) + .then(() => { + toast.success('Your location has been updated.', { position: toast.POSITION.BOTTOM_RIGHT }) + props.onSave() + }) + .catch((error: any) => { + toast.error('Something went wrong. Please try again.', { position: toast.POSITION.BOTTOM_RIGHT }) + setFormSaveError(error.message || error) + }) + .finally(() => { + setIsFormChanged(false) + setIsSaving(false) + }) + } + + return ( + +