0

I'm trying to save a user's full record, but I depend on two separate tables. Profile data is saved in one resource, and the address in another. How can I write the code so that it saves the profile first, and from the generated id, save the address? It's possible?

Profile form

Address form

Here is my Create User code:

export const BarberCreate = (props) => {
  return (
    <Create {...props}>
      <TabbedForm toolbar={<BarberCreateToolbar />}>
        <FormTab label="Perfil">
          <TextInput source="name" />
          <TextInput source="email" />
          <DateInput source="birthday" />
          <TextInput source="phone" placeholder="(99) 99999-9999" />
          <TextInput source="transport" />
        </FormTab>

        <FormTab label="Endereço">
          <TextInput source="street" label="Rua" />
          <TextInput source="city" label="Cidade" />
          <TextInput source="district" label="Bairro" />
        </FormTab>
      </TabbedForm>
    </Create>
  );
};```
Marlon Saldanha
  • 5
  • 1
  • What have you tried so far? – MonteCristo May 07 '20 at 23:05
  • I have already tried to rewrite the methods for submitting classes. But this is very difficult and is a little out of my knowledge. The fastest way I imagined is something like this: 1º Fill in all the fields (Profile and Address) 2nd Register the profile data. 3rd From the id generated in the profile, register the address. – Marlon Saldanha May 08 '20 at 01:33

1 Answers1

0

The best would be do that on the backend, possibly with transaction support, but if you can't, one way to go on react-admin side is decorating the dataProvider.

v3

const userSaverDataProvider = dataProvider => ({
    ...dataProvider,
    create: async (resource, params) => {

        if (resource === 'users') {

            const profile = await dataProvider.create('profile', {data: {
                name: params.data.name,
                ....
            }})

            await dataProvider.create('address', {data: {
                profileID: profile.data.id,
                street: params.data.street,
                ...
            }})

            return profile        

        }        

        return dataProvider.create(resource, params)
    }
})

Maybe necessary decorate createMany too if you do bulk creating of users on react-admin. Also, checkout https://github.com/FusionWorks/react-admin-google-maps, it migtht be useful

gstvg
  • 889
  • 4
  • 10
  • You're right. This is the best way in this case. However, I chose to nest the address within the profile due to deadlines. Anyway thanks for the help :) – Marlon Saldanha May 17 '20 at 14:43