equal-aqua•13mo ago

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?

17 Replies

kapa.ai•13mo 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: ----------------------

kapa.ai•13mo ago

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

rare-sapphire•13mo 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.

equal-aqua•13mo 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?

kapa.ai•13mo 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: ----------------------

kapa.ai•13mo ago

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

equal-aqua•13mo 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

kapa.ai•13mo 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: ----------------------

kapa.ai•13mo ago

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

equal-aqua•13mo ago

@kapa.ai Can I swizzle useModalForm to perform the 2 resource actions instead?

kapa.ai•13mo 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: ----------------------

kapa.ai•13mo ago

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

equal-aqua•13mo 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.

kapa.ai•13mo 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: ----------------------

kapa.ai•13mo ago

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

equal-aqua•13mo 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?

kapa.ai•13mo 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!