Ott 834 disabled status button (#313)

* fix(ott-834): add button status to user info page

* refactor(ott-834): refactoring code

* refactor(ott-834): refactoring code

* refactor(ott-834): refactoring

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<FormState>({})
+  const [stateForSimilar, setStateForSimilar] = useState<SimilarState>(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<HTMLInputElement> | 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,
+          }
+        }))
       }
     ),
     [],

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<SelectedCountry>(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) => ({

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])
 

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 {

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 (
     <Form>
       <Input
@@ -136,8 +140,9 @@ export const PagePersonalInfo = () => {
       />
       <ButtonWrapper>
         <SolidButton
+          disabled={isDisabled}
           type='button'
-          onClick={handleSubmit}
+          onClick={() => { handleSubmit(); setState((!state)) }}
           ref={saveButton}
         >
           <T9n t='save_changes' />

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,