this is the structure of our service:
and this is my post method in react:
const handleSubmitFrom =(info) => {
generalPostWithBody({first_name: info['firstName'] ,birth_date:info['miladi'] ,email:info['email'],
address:[
{
postal_code: info['postalCode'],
address: info['address']
}]
,
physical_activity: "Very Lightly Active",
age: info['age'],
last_name:info['lastName'],
gender:"M",
sport_fields: [100]
}, `/user/profile`).then(resp => {
if (resp.status === 201) {
console.log('ok')
}
}, error => {
console.log('not ok')
});
}
the problem is that this do not post the address. I mean this is my post response :
and at last this is my state:
const [infos, setInfos] = useState({
firstName: '',
lastName:'',
DOB: '',
mobile: '',
email: '',
postalCode: '33',
address: 'sghgfchgk',
miladi: '2002-01-19',
age:0,
});
Related
I have this alert on console:
React Hook useEffect has missing dependencies: 'clearClient', 'clearProductEdit', 'clearProducts', 'client', 'productEdit', and 'rows'. Either include them or remove the dependency array react-hooks/exhaustive-deps
clearClient,ClearProducts and clearProductsEdit are similar functions, which return the initial value of my reducer
The function is working normally, however I would like to resolve this alert, am I using useEffect incorrectly? How can I solve this?
My useEffect:
useEffect(() => {
return () => {
clearClient(client)
clearProducts(rows)
clearProductEdit(productEdit)
}
}, [])
My clearClient function:
function clearClient(c) {
dispatch({
type: 'CLEAR_CLIENT',
payload: { row: c },
})
}
On my reducer,the initialState is:
const initialState = {
client: {
name: '',
id: '',
dateBirth: '',
cpf: '',
address: {
street: '',
number: '',
district: '',
city: '',
cep: '',
uf: '',
complement:'',
phone: '',
},
},
}
And the case of CLEAR_CLIENT:
case 'CLEAR_CLIENT':
return {
...state,
client: {
name: '',
id: '',
dateBirth: '',
cpf: '',
address: {
street: '',
number: '',
district: '',
city: '',
cep: '',
uf: '',
complement:'',
phone: '',
},
},
}
I recommend you to use the store variable outside the React component, like this
useEffect(() => {
return () => {
store.dispatch({
type: 'CLEAR_CLIENT'
})
store.dispatch({
type: 'CLEAR_PRODUCTS'
})
store.dispatch({
type: 'CLEAR_PRODUCTS_EDIT'
})
}
}, [])
As you are cleaning the store, you don't need to send payload, feel free to change the type namings to the ones you use on your code.
I have been having some problems with react-hook-form and disappearing defaultValues
So I initiate the useForm with default values, and then get async user location from our API. I want to pre-fill the country based on our user data.
unfortunatelly, after I do that, loose all default values inside payment prop.
why is that happening and how can I fix it?
I tried to find some solutions but none seem to help me (setTimeout, useMemo on defaultValues etc)
const form = useForm<CheckoutFormSteps>({
defaultValues: {
team: {
id: null,
icon: 'url',
name: 'someName',
},
payment: {
address1: '',
address2: '',
city: '',
companyName: '',
paymentMethod: PaymentMethod.CreditCard,
country: '',
firstName: '',
lastName: '',
phone: '',
postalCode: '',
state: '',
vat_number: '',
},
},
});
useEffect(() => {
// some async logic to get user's country
form.setValue('payment.country', 'US');
// also tried setTimeout(() => form.setValue('payment.country', 'AU'));
}, []);
then the getValues look like
{
team: {
id: null,
icon: 'url',
name: 'someName',
},
payment: {
country: 'US',
} // all other payment props are gone
}
Here you go with a solution
const form = useForm<CheckoutFormSteps>({
defaultValues: {
team: {
id: null,
icon: 'url',
name: 'someName',
},
payment: {
address1: '',
address2: '',
city: '',
companyName: '',
paymentMethod: PaymentMethod.CreditCard,
country: '',
firstName: '',
lastName: '',
phone: '',
postalCode: '',
state: '',
vat_number: '',
},
},
});
useEffect(() => {
// some async logic to get user's country
form.setValue({
...form,
payment: {
...form.payment,
country: "US"
}
});
// also tried setTimeout(() => form.setValue('payment.country', 'AU'));
}, []);
Whenever you are setting the value, you need to retain the old value as value. For the same reason please use spread operator.
GetQuery
sample data from getquery graphql generated api
{
id: '',
name: '',
regions: [
{
id: '',
name: '',
districts: [
{
id: '',
name: '',
locations: [{ id: '', city: '', division: '', street: '' }],
},
],
},
],
}
convert it to
{
id: '',
name: '',
regions: {
id: '',
name: '',
districts: {
id: '',
name: '',
locations: { id: '', city: '', division: '', street: '' },
},
},
}
I already tried to convert it by using this code
const data = dataGetOrganization?.AllCountries
const result = Object.keys(data).reduce((acc, key) => {
acc[key] = {
...data[key],
_styles: {
root: { overflow: 'hidden' },
},
}
return acc
})
Try something like this:
var newObj = Object.assign({}, ...(array.map(item => ({ [item.key]: item.value }) )));
Fragment in graphql query is not working I am trying to pass fragment like below in constant query this query is successfully running on graphql server I don't know where I am mistaking. Is it correct way of passing fragment or not. please check below code and provide me your suggestion to fix this issue and sucessfully run this test case
import React from 'react';
import gql from 'graphql-tag';
import { MockedProvider } from '#apollo/client/testing';
import { render, wait } from '../../../test-utils';
describe('customer list', () => {
it('render with data', async () => {
const query = gql`
fragment Customer on Customer {
id
userId
firstName
lastName
status
dateOfBirth
}
query getCustomers {
customers {
...Customer
}
}
`;
const mocks = [
{
request: {
query
},
result: {
data: {
customers: [
{
id: 'tid1',
userId: 'test1',
firstName: 'test f',
lastName: 'test l',
status: 'testactive',
contactInfo: {
email: 'test#gmail.com',
phone: '797789956',
address: {
unit: '123',
streetAddress: 'test',
city: 'mp',
jurisdictionCode: 'tst',
country: 'xyz',
postalCode: '412356'
}
},
dateOfBirth: '12/12/2014'
},
{
id: 'tid2',
userId: 'test2',
firstName: 'test2 f',
lastName: 'test2 l',
status: 'active',
contactInfo: {
email: 'test#gmail.com',
phone: '797789956',
address: {
unit: '123',
streetAddress: 'test',
city: 'mp',
jurisdictionCode: 'sds',
country: 'yxz',
postalCode: '412356'
}
},
dateOfBirth: '12/12/2014'
},
{
id: 'tid3',
userId: 'test3',
firstName: 'test3 f',
lastName: 'test3 l',
status: 'active',
contactInfo: {
email: 'test1#gmail.com',
phone: '797789956',
address: {
unit: '123',
streetAddress: 'test',
city: 'mp',
jurisdictionCode: 'sds',
country: 'zxy',
postalCode: '412356'
}
},
dateOfBirth: '12/12/1995'
}
]
}
}
}
];
const { asFragment, findByText } = render(
<MockedProvider mocks={mocks} addTypename={false}>
<Customers />
</MockedProvider>
);
const testid1 = await findByText('tid1');
expect(testid1).toBeInTheDocument();
const testfname = await findByText('test f');
expect(testfname).toBeInTheDocument();
const testlname = await findByText('test l');
expect(testlname).toBeInTheDocument();
const status = await findByText('testactive');
expect(status).toBeInTheDocument();
const email = await findByText('test1#gmail.com');
expect(email).toBeInTheDocument();
const DOB = await findByText('12/12/1995');
expect(DOB).toBeInTheDocument();
await wait(() => expect(asFragment()).toMatchSnapshot());
});
});
If anyone can help must be appreciated.
Below is my user object. Once i submit form i am getting values for it along with priPhone , mobilePhone.
this.user = {
isActive: 1,
contactDetails: {
name: { }
},
};
}
mobilePhone:any={phoneNumber: '',type:'Mobile'};
primaryPhone:any={phoneNumber: '',type:'Primary'};
I have to set mobilePhone, primaryPhone details to User Object.
So that i want final object like this.
this.user = {
isActive: 1,
contactDetails: {
name: { }
},
phoneNumbers: [{
phoneNumber: '',
type: 'Primary'
}, {
phoneNumber: '',
type: 'Mobile'
}]
};
How to do it ?
This should work in javascript.
this.user.phoneNumbers = [];
this.user.phoneNumbers.push(mobilePhone);
this.user.phoneNumbers.push(primaryPhone);
or simply
this.user.phoneNumbers = [mobilePhone, primaryPhone];