Mantine useModal with create and edit

I am implementing Mantine's useModalForm to create a document and it works as expected. However, I have a specific need for my data. I have an Account document and a Client child document using AppWrite's relationships. I want to create a new Client document and update the Account.client field with the new Client.$id. Is this possible with refine hooks? Am I going about this the wrong way?
K
kapa.ai284d ago
Hi @theswarm420. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details about handling nested or related documents using refine hooks with Mantine's useModalForm. However, refine does provide a variety of hooks for data manipulation, such as useForm and useUpdate, which might be useful in your scenario. You might be able to use these hooks to create a new Client document and then update the Account.client field with the new Client.$id. I recommend checking out the documentation for useForm (https://refine.dev/docs/api-reference/mantine/hooks/form/useForm/) and useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai284d ago
<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
O
other-emerald284d ago
@theswarm420 I am having similar problems when it comes to creating documents requiring the id of another document. I'm trying to use the onSuccess callback for the useCrate hook, but it doesn't seem to be returning the created document.
W
wise-white284d ago
I'm looking into swizzling components now, I'll update if it works out @kapa.ai Can I swizzle the <CreateButton> component to handle 2 resource actions in succession?
K
kapa.ai284d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can swizzle the <CreateButton> component to customize its behavior. Swizzling allows you to override the default functionality of a component in refine. In your case, you can swizzle the <CreateButton> to handle two resource actions in succession. However, the specifics of how you would implement this depend on the exact actions you want to perform and the data involved. Here's a general idea of how you might swizzle the <CreateButton>:
import { CreateButton as OriginalCreateButton } from "@refinedev/mantine";

const CreateButton = () => {
const handleClick = () => {
// Perform your first action here

// Then perform your second action here
};

return <OriginalCreateButton onClick={handleClick} />;
};

export default CreateButton;
import { CreateButton as OriginalCreateButton } from "@refinedev/mantine";

const CreateButton = () => {
const handleClick = () => {
// Perform your first action here

// Then perform your second action here
};

return <OriginalCreateButton onClick={handleClick} />;
};

export default CreateButton;
In this example, handleClick is a function that performs two actions when the button is clicked. You would replace the comments with the actual code for your actions. For more information on swizzling in refine, check out the refine CLI documentation (https://refine.dev/docs/packages/documentation/cli/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai284d ago
<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
W
wise-white284d ago
@kapa.ai I want to perform a create action on my Clients collection, then return the document and update a document in the Accounts collection
K
kapa.ai284d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- You can achieve this by using the useCreate and useUpdate hooks provided by refine. The useCreate hook is used to create a new document in a collection, and the useUpdate hook is used to update an existing document. Here's a basic example of how you might use these hooks:
import { useCreate, useUpdate } from "@refinedev/core";

const CreateAndUpdateButton = () => {
const [create] = useCreate("clients");
const [update] = useUpdate("accounts");

const handleClick = async () => {
// Create a new client
const newClient = await create({
resource: "clients",
values: {
// Your client data here
},
});

// Update an account with the new client's ID
await update({
resource: "accounts",
id: "your-account-id",
values: {
client: newClient.data.id,
},
});
};

return <button onClick={handleClick}>Create and Update</button>;
};
import { useCreate, useUpdate } from "@refinedev/core";

const CreateAndUpdateButton = () => {
const [create] = useCreate("clients");
const [update] = useUpdate("accounts");

const handleClick = async () => {
// Create a new client
const newClient = await create({
resource: "clients",
values: {
// Your client data here
},
});

// Update an account with the new client's ID
await update({
resource: "accounts",
id: "your-account-id",
values: {
client: newClient.data.id,
},
});
};

return <button onClick={handleClick}>Create and Update</button>;
};
In this example, handleClick is an async function that first creates a new client, then updates an account with the new client's ID. You would replace the comments with the actual data for your client and account. Please note that this is a simplified example and you might need to handle errors and loading states in your actual implementation. For more information on these hooks, check out the useCreate (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/) and useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai284d ago
<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
W
wise-white284d ago
@kapa.ai Can I swizzle useModalForm to perform the 2 resource actions instead?
K
kapa.ai284d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Swizzling is typically used to override the behavior of components, not hooks. The useModalForm hook is a function that provides certain functionality, and it's not directly swizzlable. However, you can create a custom hook that wraps useModalForm and adds the additional functionality you need. Here's a basic example:
import { useCreate, useUpdate, useModalForm } from "@refinedev/core";

const useCustomModalForm = (resource, action, redirect) => {
const [create] = useCreate("clients");
const [update] = useUpdate("accounts");
const { modalProps, formProps } = useModalForm(resource, action, redirect);

const handleSubmit = async (values) => {
// Create a new client
const newClient = await create({
resource: "clients",
values: {
// Your client data here
},
});

// Update an account with the new client's ID
await update({
resource: "accounts",
id: "your-account-id",
values: {
client: newClient.data.id,
},
});
};

return { ...modalProps, ...formProps, onSubmit: handleSubmit };
};
import { useCreate, useUpdate, useModalForm } from "@refinedev/core";

const useCustomModalForm = (resource, action, redirect) => {
const [create] = useCreate("clients");
const [update] = useUpdate("accounts");
const { modalProps, formProps } = useModalForm(resource, action, redirect);

const handleSubmit = async (values) => {
// Create a new client
const newClient = await create({
resource: "clients",
values: {
// Your client data here
},
});

// Update an account with the new client's ID
await update({
resource: "accounts",
id: "your-account-id",
values: {
client: newClient.data.id,
},
});
};

return { ...modalProps, ...formProps, onSubmit: handleSubmit };
};
In this example, useCustomModalForm is a custom hook that wraps useModalForm and adds additional functionality to handle the form submission. When the form is submitted, it first creates a new client, then updates an account with the new client's ID. Please note that this is a simplified example and you might need to handle errors and loading states in your actual implementation. For more information on these hooks, check out the useCreate (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/), useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/), and useModalForm (https://refine.dev/docs/api-reference/mantine/hooks/form/useModalForm/) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai284d ago
<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
W
wise-white284d ago
@kapa.ai Let me be more specific. In my current implementation, I utilize useModalForm from @refinedev/mantine. Inside this form, I have a <Select> component as part of the form that identifies which Account document to update when a new Client document is uploaded. I need to create a custom useModalForm hook to ingest this data and edit the Account.client field with the ID of the new Client document.
K
kapa.ai284d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- You can create a custom hook that wraps useModalForm and adds the additional functionality you need. Here's a basic example:
import { useCreate, useUpdate, useModalForm } from "@refinedev/mantine";

const useCustomModalForm = (options) => {
const { create } = useCreate("clients");
const { update } = useUpdate("accounts");
const { formProps, modalProps } = useModalForm(options);

const handleOnFinish = async (values) => {
// Create a new client
const newClient = await create({
resource: "clients",
values: {
// Your client data here
},
});

// Update the selected account with the new client's ID
await update({
resource: "accounts",
id: values.accountId, // Assuming this is the selected account ID
values: {
client: newClient.data.id,
},
});
};

return {
formProps: {
...formProps,
onFinish: handleOnFinish,
},
modalProps,
};
};
import { useCreate, useUpdate, useModalForm } from "@refinedev/mantine";

const useCustomModalForm = (options) => {
const { create } = useCreate("clients");
const { update } = useUpdate("accounts");
const { formProps, modalProps } = useModalForm(options);

const handleOnFinish = async (values) => {
// Create a new client
const newClient = await create({
resource: "clients",
values: {
// Your client data here
},
});

// Update the selected account with the new client's ID
await update({
resource: "accounts",
id: values.accountId, // Assuming this is the selected account ID
values: {
client: newClient.data.id,
},
});
};

return {
formProps: {
...formProps,
onFinish: handleOnFinish,
},
modalProps,
};
};
In this example, useCustomModalForm is a custom hook that wraps useModalForm and adds additional functionality to handle the form submission. When the form is submitted, it first creates a new client, then updates the selected account with the new client's ID. Please note that this is a simplified example and you might need to handle errors and loading states in your actual implementation. For more information on these hooks, check out the useCreate (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/), useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/), and useModalForm (https://refine.dev/docs/api-reference/mantine/hooks/form/useModalForm/) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai284d ago
<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
W
wise-white284d ago
@kapa.ai In the previous code, how do I pass in data from a <Select> component inside a modal that uses the useCustomModalForm hook?
K
kapa.ai284d ago
Let me check the knowledge base for you. One moment! :books: @theswarm420 That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!
More Posts
Remove notificationHi there guys! How can i delete this notificationGraphQL support for nodes and edgesHi @Omer I am trying to use Elide's GraphQL API and trying to use refine-graphql. Elide returns datDealing with data from onSuccess in useCreateWhy does the `data` from onSuccess from the mutate function for useCreate returning `undefined`.Auth page type registerWhen using mantine, is there any way to add other inputs to the auth page type=register besides emaiMONGODBdo you guys think that I can use mongoDBerror toastI have multiple errors coming from api so I want to show seperate error toast for each as a stack raGetting created resource after create operationWhat's the best way to get a created resource instance once I perform a create operationSetting queryOptions for all hooksIs there a way to set queryOptions: { retry: false } globally for all hooks?Bump default dependenciesHi. I want to know if a user of refine is restricted to using the default dependencies added after pnotificationhi when we do post request and add something for example we will get response from the back end 200 How to setup Ant design to the existing refine project?How to setup Ant design to the existing refine project?How do I get access to the sidebar collapse stateI need to get access to the sidebar/sider collapse state because I have a custom Title componentAutomatically assigning users to a resourceDoes refine provide any useful methods for associating a resource with a user? Let's say I have userRuntime environment variablesDoes react refine allow for using environment variables after the build script has been rannested form submissionI have 2 forms that use the useForm hook, ``` const form_A = useForm({...}); const form_B = useForm(Submit a form within another form's onSubmit.I have 2 forms via useForm ``` const form_A = useForm({...}); const form_B = useForm({...}); ``` Wheresource.route is deprecatedMy code is working however it gives me a warning that resource.route is depreciated. The comment sayUniversally Set Timezone within App?Hi, The ISO-8601 dates in my database are in UTC. However, my application is using a different timeReuse SaveButtonI have a custom Form I where I'm using one of my resources Create components. I want to adjust the rCall useCustom on clickHow to call a useCustom when i click on a button ?