diff --git a/src/features/FormStore/hooks/useFormState.tsx b/src/features/FormStore/hooks/useFormState.tsx index 12bff627..a59f19c7 100644 --- a/src/features/FormStore/hooks/useFormState.tsx +++ b/src/features/FormStore/hooks/useFormState.tsx @@ -1,7 +1,11 @@ import type { ChangeEvent } from 'react' -import { useState, useCallback } from 'react' +import { useCallback, useState } from 'react' import isObject from 'lodash/isObject' +import isEqual from 'lodash/isEqual' +import omit from 'lodash/omit' +import { useLexicsStore } from '../../LexicsStore' +import { Name } from '../../UserAccount/components/PagePersonalInfo/hooks/useUserInfoForm' type FieldState = { error: string | null, @@ -9,9 +13,33 @@ type FieldState = { } type FormState = {[formId: string]: FieldState} +type SimilarState = {[formId: string]: string} export const useFormState = () => { + const { suffix } = useLexicsStore() + let init = JSON.parse(localStorage.getItem('init') as string) + const country = init === null ? '' : init.country[`name_${suffix}` as Name] + const countryID = init === null ? '' : init.country.id + if (init !== null) { + init.address_line1 = init.address_line1 === null || undefined ? '' : init.address_line1 + init.address_line2 = init.address_line2 === null || undefined ? '' : init.address_line2 + if (init.city_id !== undefined) { + init.city_id = init.city_id === null || undefined ? '' : init.city_id.toString() + } + init.city = init.city === null || undefined ? '' : init.city + init.country = country + init.countryId = `${countryID}` + init.cityId = '' + init.firstname = init.firstname === null || undefined ? '' : init.firstname + init.lastname = init.lastname === null || undefined ? '' : init.lastname + init.region = init.region === null || undefined ? '' : init.region + init.postalCode = 0 + init = omit(init, ['city_id', 'email', 'password', 'postal_code']) + } const [formState, setFormState] = useState({}) + const [stateForSimilar, setStateForSimilar] = useState(init) + const isDiff = isEqual(stateForSimilar, init) + localStorage.setItem('disabled', JSON.stringify(isDiff)) const readFormValue = useCallback( (fieldName: string) => formState[fieldName]?.value ?? '', [formState], @@ -20,7 +48,6 @@ export const useFormState = () => { (fieldName: string) => formState[fieldName]?.error ?? null, [formState], ) - const updateFormValue = useCallback( (fieldName: string) => ( (event: ChangeEvent | string) => { @@ -35,6 +62,27 @@ export const useFormState = () => { } return newState })) + setStateForSimilar(((state) => { + if (fieldName === 'email') { + return { + ...state, + } + } + if (fieldName === 'city_id') { + return { + ...state, + } + } + if (fieldName === 'password') { + return { + ...state, + } + } + return { + ...state, + [fieldName]: value, + } + })) } ), [], diff --git a/src/features/UserAccount/components/PagePersonalInfo/hooks/useCountries.tsx b/src/features/UserAccount/components/PagePersonalInfo/hooks/useCountries.tsx index 03789175..3d7bde30 100644 --- a/src/features/UserAccount/components/PagePersonalInfo/hooks/useCountries.tsx +++ b/src/features/UserAccount/components/PagePersonalInfo/hooks/useCountries.tsx @@ -31,9 +31,13 @@ export const useCountries = () => { const countries = useCountriesList() const { suffix } = useLexicsStore() const [selectedCountry, setSelectedCountry] = useState(null) - const nameField = `name_${suffix}` as Names - + const initCountry = { + id: selectedCountry?.id, + name_eng: selectedCountry?.name_eng, + name_rus: selectedCountry?.name_rus, + } + localStorage.setItem('initCountry', JSON.stringify(initCountry)) const transformedCountries = useMemo( () => orderBy( map(countries, (country) => ({ diff --git a/src/features/UserAccount/components/PagePersonalInfo/hooks/useUserInfo.tsx b/src/features/UserAccount/components/PagePersonalInfo/hooks/useUserInfo.tsx index 784705da..a4fe0432 100644 --- a/src/features/UserAccount/components/PagePersonalInfo/hooks/useUserInfo.tsx +++ b/src/features/UserAccount/components/PagePersonalInfo/hooks/useUserInfo.tsx @@ -9,10 +9,10 @@ import trim from 'lodash/trim' import { formIds } from 'config/form' -import type { UserInfo } from 'requests/saveUserInfo' import { getUserInfo } from 'requests/getUserInfo' import { saveUserInfo } from 'requests/saveUserInfo' +import { City, getCountryCities } from 'requests/getCountryCities' import type { SelectedCountry } from './useCountries' import { useUserInfoForm } from './useUserInfoForm' import { useValidateForm } from './useValidateForm' @@ -37,7 +37,6 @@ export const useUserInfo = () => { updateFormError, updateFormValue, } = useUserInfoForm() - const readTrimmedValue = useCallback( (fieldName: string) => trim(readFormValue(fieldName)) || null, [readFormValue], @@ -54,8 +53,7 @@ export const useUserInfo = () => { const address_line2 = readTrimmedValue(formIds.address2) const city = readTrimmedValue(formIds.city) const countryId = Number(readTrimmedValue(formIds.countryId)) - - saveUserInfo({ + const newUserInfo = { address_line1, address_line2, city, @@ -67,7 +65,14 @@ export const useUserInfo = () => { phone, postalCode, region, - }).then(() => saveButton?.current?.blur()) + } + const newUserInfoForStorage = { + ...newUserInfo, + country: JSON.parse(localStorage.getItem('initCountry') as string), + } + localStorage.setItem('init', JSON.stringify(newUserInfoForStorage)) + localStorage.setItem('disabled', 'true') + saveUserInfo(newUserInfo).then(() => saveButton?.current?.blur()) } }, [ readTrimmedValue, @@ -76,14 +81,30 @@ export const useUserInfo = () => { ]) useEffect(() => { - getUserInfo().then((res: UserInfo) => { - forEach(res, (value: string | number | SelectedCountry, key: string) => { - if (value && typeof value === 'object') { - onCountrySelect(value, false) - } else if (value) { - updateFormValue(key)(String(value)) - } - }) + getUserInfo().then((res: any) => { + const response = res + const convertResponse = () => { + forEach(response, (value: string | number | SelectedCountry, key: string) => { + if (value && typeof value === 'object') { + onCountrySelect(value, false) + } else if (value) { + updateFormValue(key)(String(value)) + } + }) + } + if (response.city === null && response.city_id !== null) { + getCountryCities('', response.country.id).then((resp) => { + const initCity = resp.find((i:City) => i.id.toString() === response.city_id.toString()) + if (initCity !== undefined) { + response.city = initCity.name + localStorage.setItem('init', JSON.stringify(res)) + convertResponse() + } + }) + return + } + localStorage.setItem('init', JSON.stringify(response)) + convertResponse() }) }, [updateFormValue, onCountrySelect]) diff --git a/src/features/UserAccount/components/PagePersonalInfo/hooks/useUserInfoForm.tsx b/src/features/UserAccount/components/PagePersonalInfo/hooks/useUserInfoForm.tsx index 3d22a89a..65bfabb3 100644 --- a/src/features/UserAccount/components/PagePersonalInfo/hooks/useUserInfoForm.tsx +++ b/src/features/UserAccount/components/PagePersonalInfo/hooks/useUserInfoForm.tsx @@ -19,7 +19,7 @@ import type { SelectedCountry } from './useCountries' import { useCountries } from './useCountries' import { useCities } from './useCities' -type Name = 'name_rus' | 'name_eng' +export type Name = 'name_rus' | 'name_eng' export const useUserInfoForm = () => { const { diff --git a/src/features/UserAccount/components/PagePersonalInfo/index.tsx b/src/features/UserAccount/components/PagePersonalInfo/index.tsx index 1f4fcaed..2a85169b 100644 --- a/src/features/UserAccount/components/PagePersonalInfo/index.tsx +++ b/src/features/UserAccount/components/PagePersonalInfo/index.tsx @@ -5,6 +5,7 @@ import { Input } from 'features/Common' import { T9n } from 'features/T9n' import { Error } from 'features/Common/Input/styled' +import { useState } from 'react' import { useUserInfo } from './hooks/useUserInfo' import { SolidButton } from '../../styled' @@ -40,6 +41,9 @@ export const PagePersonalInfo = () => { updateFormValue, } = useUserInfo() + const [state, setState] = useState(true) + const isDisabled = JSON.parse(localStorage.getItem('disabled') as string) + return (
{ /> { handleSubmit(); setState((!state)) }} ref={saveButton} > diff --git a/src/requests/saveUserInfo.tsx b/src/requests/saveUserInfo.tsx index b2359919..566d233a 100644 --- a/src/requests/saveUserInfo.tsx +++ b/src/requests/saveUserInfo.tsx @@ -3,6 +3,7 @@ import { PROCEDURES, } from 'config' import { callApi } from 'helpers' +import omit from 'lodash/omit' const proc = PROCEDURES.save_user_info @@ -43,7 +44,7 @@ export const saveUserInfo = async ({ postalCode, region, }: UserInfo) => { - const config = { + const commonConfig = { body: { params: { _p_address_line1: address_line1, @@ -61,7 +62,9 @@ export const saveUserInfo = async ({ proc, }, } - + const config = cityId === null + ? omit(commonConfig, 'body.params._p_city_id') + : omit(commonConfig, 'body.params._p_city') const response: Response = await callApi({ config, url: DATA_URL,