Ott 415 change user account data (#159)
* fix(ott-394): deleted search box target blank * fix(ott-394): minor change * fix(ott-415): not finished yet * fix(ott-415): not finished yet * fix(ott-415): not finished yet * fix(ott-415): not finished yet * fix(ott-415): not finished yet * fix(ott-415): added configs * fix(ott-415): partly fixed validation * fix(ott-415): almost finished * fix(ott-415): almost finished * fix(ott-415): 90% finished * fix(ott-415): deleted offset from infinite scroll * fix(ott-415): minor bug * fix(ott-415): deleted console.logs * fix(ott-415): deleted delete test component * fix(ott-415): deleted mutation * fix(ott-415): merged dropdown with combobox * fix(ott-415): deleted dropdown * fix(ott-415): changed any to string * fix(ott-415): minor bug fix * fix(ott-415): fixed some bugs * fix(ott-415): added types * fix(ott-415): deleted filter options * fix(ott-415): user account consistency * fix(ott-415): added onClickOutside wrapper * fix(ott-415): finishkeep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Armen
5 years ago
committed by
GitHub
parent
904be6332a
commit
2994726834
@ -0,0 +1,28 @@ |
||||
export const formIds = { |
||||
address_line1: 'address_line1', |
||||
address_line2: 'address_line2', |
||||
city: 'city', |
||||
city_id: 'city_id', |
||||
country: 'country', |
||||
countryId: 'countryId', |
||||
firstname: 'firstname', |
||||
formError: 'formError', |
||||
lastname: 'lastname', |
||||
password: 'password', |
||||
phone: 'phone', |
||||
postalCode: 'postalCode', |
||||
region: 'region', |
||||
} |
||||
|
||||
export const requiredFields = [ |
||||
formIds.country, |
||||
formIds.firstname, |
||||
formIds.lastname, |
||||
formIds.phone, |
||||
] |
||||
|
||||
export const simpleValidationFields = [ |
||||
formIds.country, |
||||
formIds.firstname, |
||||
formIds.lastname, |
||||
] |
||||
@ -0,0 +1,117 @@ |
||||
import { |
||||
useEffect, |
||||
useCallback, |
||||
useRef, |
||||
} from 'react' |
||||
|
||||
import forEach from 'lodash/forEach' |
||||
import trim from 'lodash/trim' |
||||
import isString from 'lodash/isString' |
||||
|
||||
import type { SelectedCountry } from 'hooks/useCountries' |
||||
import { useCountries } from 'hooks/useCountries' |
||||
|
||||
import { getUserInfo } from 'requests/getUserInfo' |
||||
import { saveUserInfo } from 'requests/saveUserInfo' |
||||
import type { UserInfo } from 'requests/saveUserInfo' |
||||
|
||||
import { useForm } from 'features/FormStore' |
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
|
||||
import { useValidateForm } from './useValidateForm' |
||||
|
||||
import { formIds } from './config' |
||||
|
||||
type Name = 'name_rus' | 'name_eng' |
||||
|
||||
export const useUserInfo = () => { |
||||
const { |
||||
readFormError, |
||||
readFormValue, |
||||
updateFormError, |
||||
updateFormValue, |
||||
} = useForm() |
||||
|
||||
const { suffix } = useLexicsStore() |
||||
const validateForm = useValidateForm() |
||||
const saveButton = useRef<HTMLButtonElement>(null) |
||||
|
||||
const { |
||||
countries, |
||||
setSelectedCountry, |
||||
} = useCountries() |
||||
|
||||
const readTrimmedValue = useCallback( |
||||
(fieldName: string) => trim(readFormValue(fieldName)), |
||||
[readFormValue], |
||||
) |
||||
|
||||
const handleSubmit = useCallback(() => { |
||||
if (validateForm()) { |
||||
const firstname = readTrimmedValue(formIds.firstname) |
||||
const lastname = readTrimmedValue(formIds.lastname) |
||||
const phone = readTrimmedValue(formIds.phone) |
||||
const password = readTrimmedValue(formIds.password) |
||||
const postalCode = Number(readTrimmedValue(formIds.postalCode)) |
||||
const region = readTrimmedValue(formIds.region) |
||||
const address_line1 = readTrimmedValue(formIds.address_line1) |
||||
const address_line2 = readTrimmedValue(formIds.address_line2) |
||||
const city = readTrimmedValue(formIds.city) |
||||
const city_id = Number(readTrimmedValue(formIds.city_id)) |
||||
const countryId = Number(readTrimmedValue(formIds.countryId)) |
||||
|
||||
saveUserInfo({ |
||||
address_line1, |
||||
address_line2, |
||||
city, |
||||
city_id, |
||||
countryId, |
||||
firstname, |
||||
lastname, |
||||
password, |
||||
phone, |
||||
postalCode, |
||||
region, |
||||
}).then(() => saveButton?.current?.blur()) |
||||
} |
||||
}, [ |
||||
readTrimmedValue, |
||||
validateForm, |
||||
]) |
||||
|
||||
const onCountrySelect = useCallback((country: SelectedCountry) => { |
||||
setSelectedCountry(country) |
||||
const countryName = country ? country[`name_${suffix}` as Name] : '' |
||||
updateFormValue(formIds.country)(countryName) |
||||
// TO DO пока не решили сбрасываем ли город и адрес
|
||||
// updateFormValue(formIds.region)('')
|
||||
updateFormValue(formIds.countryId)(`${country?.id}`) |
||||
}, [ |
||||
setSelectedCountry, |
||||
updateFormValue, |
||||
suffix, |
||||
]) |
||||
|
||||
useEffect(() => { |
||||
getUserInfo().then((res: UserInfo) => { |
||||
forEach(res, (value: string | number | SelectedCountry, key: string) => { |
||||
if (value && typeof value === 'object') { |
||||
onCountrySelect(value) |
||||
} else if (isString(value)) { |
||||
updateFormValue(key)(value) |
||||
} |
||||
}) |
||||
}) |
||||
}, [updateFormValue, onCountrySelect]) |
||||
|
||||
return { |
||||
countries, |
||||
handleSubmit, |
||||
onCountrySelect, |
||||
readFormError, |
||||
readFormValue, |
||||
saveButton, |
||||
updateFormError, |
||||
updateFormValue, |
||||
} |
||||
} |
||||
@ -0,0 +1,57 @@ |
||||
import trim from 'lodash/trim' |
||||
import reduce from 'lodash/reduce' |
||||
|
||||
import { useForm } from 'features/FormStore' |
||||
import { isValidPhone } from 'features/Register/helpers/isValidPhone' |
||||
|
||||
import { |
||||
formIds, |
||||
requiredFields, |
||||
simpleValidationFields, |
||||
} from './config' |
||||
|
||||
export const useValidateForm = () => { |
||||
const { |
||||
allFieldsEmpty, |
||||
isFieldEmpty, |
||||
readFormValue, |
||||
updateFormError, |
||||
} = useForm() |
||||
|
||||
const readTrimmedValue = (fieldName: string) => trim(readFormValue(fieldName)) |
||||
|
||||
const setErrorOnEmptyFields = (fieldNames: Array<string>, message: string) => ( |
||||
reduce( |
||||
fieldNames, |
||||
(acc, fieldName) => { |
||||
if (isFieldEmpty(fieldName)) { |
||||
updateFormError(fieldName, message) |
||||
return true |
||||
} |
||||
return acc |
||||
}, |
||||
false, |
||||
) |
||||
) |
||||
|
||||
const validateForm = () => { |
||||
let hasError = false |
||||
const phone = readTrimmedValue(formIds.phone) |
||||
|
||||
if (allFieldsEmpty(requiredFields)) { |
||||
updateFormError(formIds.formError, 'error_fill_out_required_fields') |
||||
setErrorOnEmptyFields(requiredFields, '') |
||||
return false |
||||
} |
||||
|
||||
hasError = setErrorOnEmptyFields(simpleValidationFields, 'error_fill_out_this_field') |
||||
|
||||
if (!isValidPhone(phone)) { |
||||
updateFormError(formIds.phone, 'error_invalid_phone_format') |
||||
hasError = true |
||||
} |
||||
return !hasError |
||||
} |
||||
|
||||
return validateForm |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
import { |
||||
DATA_URL, |
||||
PROCEDURES, |
||||
} from 'config' |
||||
import { callApi, getResponseData } from 'helpers' |
||||
import type { UserInfo } from 'requests/saveUserInfo' |
||||
|
||||
const proc = PROCEDURES.get_user_info |
||||
|
||||
export const getUserInfo = (): Promise<UserInfo> => { |
||||
const config = { |
||||
body: { params: {}, proc }, |
||||
} |
||||
|
||||
return callApi({ |
||||
config, |
||||
url: DATA_URL, |
||||
}).then(getResponseData(proc)) |
||||
} |
||||
@ -0,0 +1,74 @@ |
||||
import { |
||||
DATA_URL, |
||||
PROCEDURES, |
||||
} from 'config' |
||||
import { callApi } from 'helpers' |
||||
|
||||
const proc = PROCEDURES.save_user_info |
||||
|
||||
export type UserInfo = { |
||||
address_line1: string, |
||||
address_line2: string, |
||||
city: string, |
||||
city_id: number, |
||||
countryId: number, |
||||
firstname: string, |
||||
lastname: string, |
||||
password: string, |
||||
phone: string, |
||||
postalCode: number, |
||||
region: string, |
||||
} |
||||
|
||||
type Response = { |
||||
_p_error: string | null, |
||||
_p_status: 1 | 2, |
||||
} |
||||
|
||||
const responseStatus = { |
||||
FAILURE: 2, |
||||
SUCCESS: 1, |
||||
} |
||||
|
||||
export const saveUserInfo = async ({ |
||||
address_line1, |
||||
address_line2, |
||||
city, |
||||
city_id, |
||||
countryId, |
||||
firstname, |
||||
lastname, |
||||
password, |
||||
phone, |
||||
postalCode, |
||||
region, |
||||
}: UserInfo) => { |
||||
const config = { |
||||
body: { |
||||
params: { |
||||
_p_address_line1: address_line1, |
||||
_p_address_line2: address_line2, |
||||
_p_city: city, |
||||
_p_city_id: city_id, |
||||
_p_country_id: countryId, |
||||
_p_firstname: firstname, |
||||
_p_lastname: lastname, |
||||
_p_password: password, |
||||
_p_phone: phone, |
||||
_p_postal_code: postalCode, |
||||
_p_region: region, |
||||
}, |
||||
proc, |
||||
}, |
||||
} |
||||
|
||||
const response: Response = await callApi({ |
||||
config, |
||||
url: DATA_URL, |
||||
}) |
||||
|
||||
if (response._p_status === responseStatus.SUCCESS) { |
||||
return Promise.resolve(response) |
||||
} |
||||
return Promise.reject(response._p_error) |
||||
} |
||||
Loading…
Reference in new issue