extended-yellow•7mo ago

Creating multiple entries with AntD's Create and useForm with Supabase

I have 2 tables: brokerage_accounts and brokerage_reports. When creating a brokerage_reports entry, I reference a brokerage_accounts entry. What I'd like to do is have a switch where the user submitting the form can select to create a single entry, or multiple entries for all brokerage_accounts entries. I know it needs to be done with a handleOnFinish function, but am unsure how to tweak my code to do what's needed.

export const BrokerageReportCreate: React.FC = () => {
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: () => {
return {
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
};
},
});

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_owner',
optionValue: 'id',
});
const [massReport, setMassReport] = useState(true);

const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
onFinish(values as IBrokerageReport);
} else {
onFinish(values as IBrokerageReport);
}
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish as (values: object) => void}>
<Switch defaultChecked checked={massReport} onChange={(checked) => setMassReport(checked)} />
{!massReport && (
<Form.Item
label='Select single brokerage account'
name='brokerage_account_id'
>
<Select {...userSelectProps} />
</Form.Item>
)}

<Form.Item
label='Reporting for which quarter?'
name='reportDate'
>
<DatePicker className='w-full' onChange={handleDateChange} picker='quarter' />
</Form.Item>
<Form.Item label='Set message' name='message'>
<TextArea rows={4} />
</Form.Item>
</Form>
</Create>
);
};

export const BrokerageReportCreate: React.FC = () => {
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: () => {
return {
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
};
},
});

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_owner',
optionValue: 'id',
});
const [massReport, setMassReport] = useState(true);

const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
onFinish(values as IBrokerageReport);
} else {
onFinish(values as IBrokerageReport);
}
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish as (values: object) => void}>
<Switch defaultChecked checked={massReport} onChange={(checked) => setMassReport(checked)} />
{!massReport && (
<Form.Item
label='Select single brokerage account'
name='brokerage_account_id'
>
<Select {...userSelectProps} />
</Form.Item>
)}

<Form.Item
label='Reporting for which quarter?'
name='reportDate'
>
<DatePicker className='w-full' onChange={handleDateChange} picker='quarter' />
</Form.Item>
<Form.Item label='Set message' name='message'>
<TextArea rows={4} />
</Form.Item>
</Form>
</Create>
);
};

23 Replies

kapa.ai•7mo ago

Hi @James. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, you can modify the handleOnFinish function to handle both single and multiple entries. However, the extracts do not provide specific information on how to create multiple entries for all brokerage_accounts entries in Supabase. The handleOnFinish function can be modified to check if the massReport state is true or false. If it's true, you can loop through all brokerage_accounts and create a brokerage_reports entry for each one. If it's false, you can create a single brokerage_reports entry. However, the extracts do not provide information on how to retrieve all brokerage_accounts entries or how to create multiple brokerage_reports entries in Supabase. You might need to use the useQuery hook to retrieve all brokerage_accounts and the useMutation hook to create brokerage_reports entries, but the exact implementation would depend on your Supabase setup and is not covered in the extracts. Here is a general idea of how you can modify the handleOnFinish function:

const handleOnFinish = async (values: IBrokerageReport) => {
  if (massReport) {
    // Retrieve all brokerage_accounts entries
    // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
  } else {
    // Create a single brokerage_reports entry
    onFinish(values as IBrokerageReport);
  }
};

const handleOnFinish = async (values: IBrokerageReport) => {
  if (massReport) {
    // Retrieve all brokerage_accounts entries
    // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
  } else {
    // Create a single brokerage_reports entry
    onFinish(values as IBrokerageReport);
  }
};

Please refer to the Refine documentation (https://refine.dev/docs/guides-concepts/forms#basic-usage) and the Supabase documentation (https://supabase.io/docs/guide) for more information on how to use the useQuery and useMutation hooks with Supabase. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below

extended-yellow•7mo ago

@kapa.ai I was able to get it running as expected with the following code:

// Retrieve all brokerage_accounts entries
const { data: brokerageAccountsData, isError } = useList<IBrokerageAccount, HttpError>({
resource: 'brokerage_accounts',
});
const brokerageAccounts = brokerageAccountsData?.data ?? [];

// Adjust form submission based on massReport
const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
brokerageAccounts.map((account) => {
onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
});
} else {
// Submit form data as is
onFinish(values as IBrokerageReport);
}
};

// Retrieve all brokerage_accounts entries
const { data: brokerageAccountsData, isError } = useList<IBrokerageAccount, HttpError>({
resource: 'brokerage_accounts',
});
const brokerageAccounts = brokerageAccountsData?.data ?? [];

// Adjust form submission based on massReport
const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
brokerageAccounts.map((account) => {
onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
});
} else {
// Submit form data as is
onFinish(values as IBrokerageReport);
}
};

The one catch is that I get multiple success notifications. Can I set it so that I only get 1 that fires, even though I'm looping over onFinish?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can control the success notifications by using the successNotification prop in the useForm hook. By default, useForm triggers a success notification for each successful mutation. However, you can disable these default notifications and manually trigger a single notification after all mutations are done. First, disable the default success notifications by setting successNotification to false in the useForm hook:

const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
  successNotification: false,
  // other options...
});

const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
  successNotification: false,
  // other options...
});

Then, manually trigger a success notification after all mutations are done. You can use the useNotification hook to manually trigger notifications:

import { useNotification } from "@pankod/refine";

// ...

const { notify } = useNotification();

// ...

const handleOnFinish = async (values: IBrokerageReport) => {
  if (massReport) {
    // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
    isError && console.log('Error fetching brokerage accounts', isError);
    await Promise.all(brokerageAccounts.map((account) => {
      return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
    }));

    // Manually trigger a success notification
    notify({
      message: `Successfully added new brokerage account reports.`,
      description: 'Success',
      type: 'success',
    });
  } else {
    // Submit form data as is
    await onFinish(values as IBrokerageReport);

    // Manually trigger a success notification
    notify({
      message: `Successfully added a new brokerage account report.`,
      description: 'Success',
      type: 'success',
    });
  }
};

import { useNotification } from "@pankod/refine";

// ...

const { notify } = useNotification();

// ...

const handleOnFinish = async (values: IBrokerageReport) => {
  if (massReport) {
    // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
    isError && console.log('Error fetching brokerage accounts', isError);
    await Promise.all(brokerageAccounts.map((account) => {
      return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
    }));

    // Manually trigger a success notification
    notify({
      message: `Successfully added new brokerage account reports.`,
      description: 'Success',
      type: 'success',
    });
  } else {
    // Submit form data as is
    await onFinish(values as IBrokerageReport);

    // Manually trigger a success notification
    notify({
      message: `Successfully added a new brokerage account report.`,
      description: 'Success',
      type: 'success',
    });
  }
};

In this code, Promise.all is used to wait for all mutations to finish before triggering the success notification. Please note that error handling is not included in this code. You might want to add error handling to handle any errors that might occur during the mutations. For more information, please refer to the Refine documentation on useForm (https://refine.dev/docs/data/hooks/use-form#successnotification-) and useNotification (https://refine.dev/docs/notification/use-notification). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below

extended-yellow•7mo ago

@kapa.ai Your useNotification link is out of date, here's the current one: https://refine.dev/docs/notification/hooks/use-notification. Also,

const { notify } = useNotification();

const { notify } = useNotification();

no longer exists, it's

const { open, close } = useNotification();

const { open, close } = useNotification();

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the outdated information. You're correct, the useNotification hook now returns open and close methods. You can use the open method to manually trigger notifications. Here's how you can modify the code:

import { useNotification } from "@refinedev/core";

// ...

const { open } = useNotification();

// ...

const handleOnFinish = async (values: IBrokerageReport) => {
  if (massReport) {
    // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
    isError && console.log('Error fetching brokerage accounts', isError);
    await Promise.all(brokerageAccounts.map((account) => {
      return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
    }));

    // Manually trigger a success notification
    open({
      message: `Successfully added new brokerage account reports.`,
      description: 'Success',
      type: 'success',
    });
  } else {
    // Submit form data as is
    await onFinish(values as IBrokerageReport);

    // Manually trigger a success notification
    open({
      message: `Successfully added a new brokerage account report.`,
      description: 'Success',
      type: 'success',
    });
  }
};

import { useNotification } from "@refinedev/core";

// ...

const { open } = useNotification();

// ...

const handleOnFinish = async (values: IBrokerageReport) => {
  if (massReport) {
    // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
    isError && console.log('Error fetching brokerage accounts', isError);
    await Promise.all(brokerageAccounts.map((account) => {
      return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
    }));

    // Manually trigger a success notification
    open({
      message: `Successfully added new brokerage account reports.`,
      description: 'Success',
      type: 'success',
    });
  } else {
    // Submit form data as is
    await onFinish(values as IBrokerageReport);

    // Manually trigger a success notification
    open({
      message: `Successfully added a new brokerage account report.`,
      description: 'Success',
      type: 'success',
    });
  }
};

In this code, open is used to manually trigger a success notification after all mutations are done. Please note that error handling is not included in this code. You might want to add error handling to handle any errors that might occur during the mutations. For more information, please refer to the updated Refine documentation on useNotification (https://refine.dev/docs/notification/hooks/use-notification). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below

extended-yellow•7mo ago

@kapa.ai If using the option when massReport is true, the success message doesn't fire. It does if massReport is false however.

const handleOnFinish = async (values: IBrokerageReport) => {
        if (massReport) {
            // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
            isError && console.log('Error fetching brokerage accounts', isError);
            await Promise.all(
                brokerageAccounts.map((account) => {
                    return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
                })
            );
            open?.({
                type: 'success',
                message: 'Success',
                description: 'Successfully added a new brokerage account report.',
            });
        } else {
            // Submit form data as is
            await onFinish(values as IBrokerageReport);
            open?.({
                type: 'success',
                message: 'Success',
                description: 'Successfully added a new brokerage account report.',
            });
        }
    };

const handleOnFinish = async (values: IBrokerageReport) => {
        if (massReport) {
            // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
            isError && console.log('Error fetching brokerage accounts', isError);
            await Promise.all(
                brokerageAccounts.map((account) => {
                    return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
                })
            );
            open?.({
                type: 'success',
                message: 'Success',
                description: 'Successfully added a new brokerage account report.',
            });
        } else {
            // Submit form data as is
            await onFinish(values as IBrokerageReport);
            open?.({
                type: 'success',
                message: 'Success',
                description: 'Successfully added a new brokerage account report.',
            });
        }
    };

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The issue might be related to the asynchronous nature of the Promise.all function. The open function might be called before all the promises in Promise.all are resolved, which could cause the success message not to fire. To ensure that the open function is called after all the promises are resolved, you can try moving it inside a .then block:

const handleOnFinish = async (values: IBrokerageReport) => {
    if (massReport) {
        // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
        isError && console.log('Error fetching brokerage accounts', isError);
        Promise.all(
            brokerageAccounts.map((account) => {
                return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
            })
        ).then(() => {
            open?.({
                type: 'success',
                message: 'Success',
                description: 'Successfully added new brokerage account reports.',
            });
        });
    } else {
        // Submit form data as is
        await onFinish(values as IBrokerageReport);
        open?.({
            type: 'success',
            message: 'Success',
            description: 'Successfully added a new brokerage account report.',
        });
    }
};

const handleOnFinish = async (values: IBrokerageReport) => {
    if (massReport) {
        // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
        isError && console.log('Error fetching brokerage accounts', isError);
        Promise.all(
            brokerageAccounts.map((account) => {
                return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
            })
        ).then(() => {
            open?.({
                type: 'success',
                message: 'Success',
                description: 'Successfully added new brokerage account reports.',
            });
        });
    } else {
        // Submit form data as is
        await onFinish(values as IBrokerageReport);
        open?.({
            type: 'success',
            message: 'Success',
            description: 'Successfully added a new brokerage account report.',
        });
    }
};

In this code, the open function is called inside a .then block, which ensures that it's called after all the promises in Promise.all are resolved. Please note that error handling is not included in this code. You might want to add error handling to handle any errors that might occur during the mutations. For more information, please refer to the Refine documentation on useNotification (https://refine.dev/docs/notification/hooks/use-notification) and the MDN documentation on Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below

extended-yellow•7mo ago

@kapa.ai Even after putting it in a

.then

.then

block, it still doesn't fire as expected.

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still having trouble. It's difficult to diagnose the issue without more context. However, it's possible that the onFinish function might not be returning a promise, which could cause the Promise.all function to resolve immediately. You could try to ensure that onFinish always returns a promise by wrapping it in a Promise.resolve call:

const handleOnFinish = async (values: IBrokerageReport) => {{
    if (massReport) {{
        // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
        isError && console.log('Error fetching brokerage accounts', isError);
        Promise.all(
            brokerageAccounts.map((account) => {{
                return Promise.resolve(onFinish({{ ...values, brokerage_account_id: account.id }} as IBrokerageReport));
            }})
        ).then(() => {{
            open?.({{
                type: 'success',
                message: 'Success',
                description: 'Successfully added new brokerage account reports.',
            }});
        }});
    }} else {{
        // Submit form data as is
        await onFinish(values as IBrokerageReport);
        open?.({{
            type: 'success',
            message: 'Success',
            description: 'Successfully added a new brokerage account report.',
        }});
    }}
}};

const handleOnFinish = async (values: IBrokerageReport) => {{
    if (massReport) {{
        // Loop through all brokerage_accounts and create a brokerage_reports entry for each one
        isError && console.log('Error fetching brokerage accounts', isError);
        Promise.all(
            brokerageAccounts.map((account) => {{
                return Promise.resolve(onFinish({{ ...values, brokerage_account_id: account.id }} as IBrokerageReport));
            }})
        ).then(() => {{
            open?.({{
                type: 'success',
                message: 'Success',
                description: 'Successfully added new brokerage account reports.',
            }});
        }});
    }} else {{
        // Submit form data as is
        await onFinish(values as IBrokerageReport);
        open?.({{
            type: 'success',
            message: 'Success',
            description: 'Successfully added a new brokerage account report.',
        }});
    }}
}};

If this doesn't solve the issue, I would recommend checking if there are any errors in the promises returned by onFinish. You can do this by adding a .catch block to the Promise.all call:

Promise.all(
    brokerageAccounts.map((account) => {{
        return Promise.resolve(onFinish({{ ...values, brokerage_account_id: account.id }} as IBrokerageReport));
    }})
).then(() => {{
    open?.({{
        type: 'success',
        message: 'Success',
        description: 'Successfully added new brokerage account reports.',
    }});
}}).catch((error) => {{
    console.error('Error in onFinish promises:', error);
}});

Promise.all(
    brokerageAccounts.map((account) => {{
        return Promise.resolve(onFinish({{ ...values, brokerage_account_id: account.id }} as IBrokerageReport));
    }})
).then(() => {{
    open?.({{
        type: 'success',
        message: 'Success',
        description: 'Successfully added new brokerage account reports.',
    }});
}}).catch((error) => {{
    console.error('Error in onFinish promises:', error);
}});

This will log any errors that occur in the promises returned by onFinish, which might help you diagnose the issue. For more information, please refer to the Refine documentation on useNotification (https://refine.dev/docs/notification/hooks/use-notification), the MDN documentation on Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all), and the MDN documentation on Promise.resolve (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below

extended-yellow•7mo ago

@kapa.ai Another quick question. For my useSelect field, I want to modify the optionLabel. I want it to read "user.full_name- " + "broker_dealer" + "account_number". What's the best way of doing that?

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
        resource: 'brokerage_accounts',
        optionLabel: 'account_number',
        optionValue: 'id',
    });

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
        resource: 'brokerage_accounts',
        optionLabel: 'account_number',
        optionValue: 'id',
    });