I want to use a custom buttom in "Edit" form in mui in the footer

In the "Edit" operation, I want to use a custom button in footer, I'm using mui

27 Replies

Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add a custom button in the footer of the Edit form using Material-UI (MUI) in refine, you can use the footerButtons property. This property allows you to customize the buttons at the footer by either adding to the existing default buttons or replacing them entirely. Here is an example of how you can add a custom button while keeping the default buttons:

import { Edit } from "@refinedev/mui";  
import { Button } from "@mui/material";  
  
const PostEdit: React.FC = () => {  
  return (  
    <Edit  
      footerButtons={({ defaultButtons }) => (  
        <>  
          {defaultButtons}  
          <Button type="primary">Custom Button</Button>  
        </>  
      )}  
    >  
      <span>Rest of your page here</span>  
    </Edit>  
  );  
};

import { Edit } from "@refinedev/mui";  
import { Button } from "@mui/material";  
  
const PostEdit: React.FC = () => {  
  return (  
    <Edit  
      footerButtons={({ defaultButtons }) => (  
        <>  
          {defaultButtons}  
          <Button type="primary">Custom Button</Button>  
        </>  
      )}  
    >  
      <span>Rest of your page here</span>  
    </Edit>  
  );  
};

If you prefer to create your own buttons and utilize the default values of the SaveButton and DeleteButton components, you can do so as follows:

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";  
import { Button } from "@mui/material";  
  
const PostEdit: React.FC = () => {  
  return (  
    <Edit  
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (  
        <>  
          <Button type="primary">Custom Button</Button>  
          <SaveButton {...saveButtonProps} hideText />  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} hideText />  
          )}  
        </>  
      )}  
    >  
      <span>Rest of your page here</span>  
    </Edit>  
  );  
};

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";  
import { Button } from "@mui/material";  
  
const PostEdit: React.FC = () => {  
  return (  
    <Edit  
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (  
        <>  
          <Button type="primary">Custom Button</Button>  
          <SaveButton {...saveButtonProps} hideText />  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} hideText />  
          )}  
        </>  
      )}  
    >  
      <span>Rest of your page here</span>  
    </Edit>  
  );  
};

For more detailed information, you can refer to the refine documentation on footerButtons for Material-UI (https://refine.dev/docs/ui-integrations/material-ui/components/basic-views/edit/#footerbuttons). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

dependent-tanOP•6mo ago

changing text of "Save" button @kapa.ai

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To change the text of the "Save" button in the Edit form using Material-UI (MUI) in refine, you can use the saveButtonProps property to customize the SaveButton component. Specifically, you can set the children prop to change the button text. Here is an example of how you can change the text of the "Save" button:

import { Edit } from "@refinedev/mui";  
  
const PostEdit: React.FC = () => {  
  return (  
    <Edit saveButtonProps={{ children: "Custom Save Text" }}>  
      <span>Rest of your page here</span>  
    </Edit>  
  );  
};

import { Edit } from "@refinedev/mui";  
  
const PostEdit: React.FC = () => {  
  return (  
    <Edit saveButtonProps={{ children: "Custom Save Text" }}>  
      <span>Rest of your page here</span>  
    </Edit>  
  );  
};

For more information, you can refer to the <SaveButton> documentation (https://refine.dev/docs/ui-integrations/material-ui/components/buttons/save-button/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

dependent-tanOP•6mo ago

Here, <Edit isLoading={formLoading} footerButtons={({ saveButtonProps, deleteButtonProps }) => ( <> <Button type="button">Save as Draft</Button> <SaveButton {...saveButtonProps} children="Save & Publish" color="success" /> {deleteButtonProps && <DeleteButton {...deleteButtonProps} />} </> )} > How can i send a field "is_published" value to "true" if clicked on "SaveButton" @kapa.ai

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To send a field value, such as is_published, to true when the "Save & Publish" button is clicked, you can modify the saveButtonProps to include a custom onClick handler. This handler will update the form values before submitting the form. Here is an example of how you can achieve this:

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
  } = useForm();

  const handleSaveAndPublish = () => {
    setValue("is_published", true);
    saveButtonProps.onClick();
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button">Save as Draft</Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
  } = useForm();

  const handleSaveAndPublish = () => {
    setValue("is_published", true);
    saveButtonProps.onClick();
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button">Save as Draft</Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

In this example: 1. We use the useForm hook to get access to the form methods, including setValue. 2. We define a custom handleSaveAndPublish function that sets the is_published field to true and then calls the original onClick handler from saveButtonProps. 3. We pass this custom handler to the SaveButton component. This ensures that when the "Save & Publish" button is clicked, the is_published field is set to true before the form is submitted. For more information, you can refer to the refine documentation on useForm (https://refine.dev/docs/packages/react-hook-form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

dependent-tanOP•6mo ago

@kapa.ai got this error Expected 1 arguments, but got 0.ts(2554) index.d.ts(8, 19): An argument for 'e' was not provided. (property) onClick: (e: BaseSyntheticEvent) => void

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To resolve the error "Expected 1 arguments, but got 0," you need to ensure that the onClick handler receives the event argument. Here is the corrected code:

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
  } = useForm();

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    setValue("is_published", true);
    saveButtonProps.onClick(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button">Save as Draft</Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
  } = useForm();

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    setValue("is_published", true);
    saveButtonProps.onClick(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button">Save as Draft</Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

In this corrected code: 1. The handleSaveAndPublish function now accepts an event argument e: React.BaseSyntheticEvent. 2. This event argument is passed to the original saveButtonProps.onClick function. This should resolve the TypeScript error and ensure that the is_published field is set to true when the "Save & Publish" button is clicked. For more information, you can refer to the refine documentation on useForm (https://refine.dev/docs/packages/react-hook-form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

dependent-tanOP•6mo ago

@kapa.ai thanks!, also I want to send "is_published" as "false" but rest of the fields get saved to "page_content" resource if clicked on "Save as draft" button

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To send is_published as false and save the rest of the fields to the page_content resource when the "Save as Draft" button is clicked, you can create a custom handler for the "Save as Draft" button. This handler will set the is_published field to false and then submit the form to the page_content resource. Here is an example of how you can achieve this:

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
    handleSubmit,
  } = useForm();

  const handleSaveAsDraft = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", false);
    handleSubmit((data) => {
      // Custom logic to save to "page_content" resource
      // You can use your API call here to save the data
      console.log("Saving to page_content resource:", data);
    })(e);
  };

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    setValue("is_published", true);
    saveButtonProps.onClick(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button" onClick={handleSaveAsDraft}>
            Save as Draft
          </Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
    handleSubmit,
  } = useForm();

  const handleSaveAsDraft = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", false);
    handleSubmit((data) => {
      // Custom logic to save to "page_content" resource
      // You can use your API call here to save the data
      console.log("Saving to page_content resource:", data);
    })(e);
  };

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    setValue("is_published", true);
    saveButtonProps.onClick(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button" onClick={handleSaveAsDraft}>
            Save as Draft
          </Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

In this example: 1. The handleSaveAsDraft function sets the is_published field to false and then submits the form using the handleSubmit method from useForm. 2. The handleSubmit method is used to handle the form submission, and you can include your custom logic to save the data to the page_content resource. 3. The handleSaveAndPublish function sets the is_published field to true and then calls the original saveButtonProps.onClick function. This ensures that when the "Save as Draft" button is clicked, the is_published field is set to false and the form data is saved to the page_content resource. For more information, you can refer to the refine documentation on useForm (https://refine.dev/docs/packages/react-hook-form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

dependent-tanOP•6mo ago

@kapa.ai useEffect(() => { (async function () { let { data: page_content, error } = await supabaseClient .from("page_content") .select("*") .eq("pageId", id); if (page_content?.length != 0) { setfieldsempty(false); var content_arr: any = {}; page_content?.map((content) => { content.edited = true; content_arr[content.meta_key] = content; }); setpage_content(content_arr); } if (error) { console.error("Error inserting data:", error.message); return; } })(); }, []); this is my login to save data in "page_content"

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To integrate your logic for saving data in the page_content resource with the custom "Save as Draft" button, you can use the handleSubmit method from useForm to handle the form submission. Here is how you can modify your PostEdit component to include this logic:

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { useEffect, useState } from "react";
import { supabaseClient } from "your-supabase-client"; // Adjust the import according to your project structure

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
    handleSubmit,
  } = useForm();

  const [pageContent, setPageContent] = useState({});
  const [fieldsEmpty, setFieldsEmpty] = useState(true);
  const id = "your-page-id"; // Replace with your actual page ID

  useEffect(() => {
    (async function () {
      let { data: page_content, error } = await supabaseClient
        .from("page_content")
        .select("*")
        .eq("pageId", id);

      if (page_content?.length != 0) {
        setFieldsEmpty(false);
        var content_arr: any = {};
        page_content?.map((content) => {
          content.edited = true;
          content_arr[content.meta_key] = content;
        });
        setPageContent(content_arr);
      }

      if (error) {
        console.error("Error fetching data:", error.message);
        return;
      }
    })();
  }, [id]);

  const handleSaveAsDraft = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", false);
    handleSubmit(async (data) => {
      // Custom logic to save to "page_content" resource
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });
if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    setValue("is_published", true);
    saveButtonProps.onClick(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button" onClick={handleSaveAsDraft}>
            Save as Draft
          </Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { useEffect, useState } from "react";
import { supabaseClient } from "your-supabase-client"; // Adjust the import according to your project structure

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
    handleSubmit,
  } = useForm();

  const [pageContent, setPageContent] = useState({});
  const [fieldsEmpty, setFieldsEmpty] = useState(true);
  const id = "your-page-id"; // Replace with your actual page ID

  useEffect(() => {
    (async function () {
      let { data: page_content, error } = await supabaseClient
        .from("page_content")
        .select("*")
        .eq("pageId", id);

      if (page_content?.length != 0) {
        setFieldsEmpty(false);
        var content_arr: any = {};
        page_content?.map((content) => {
          content.edited = true;
          content_arr[content.meta_key] = content;
        });
        setPageContent(content_arr);
      }

      if (error) {
        console.error("Error fetching data:", error.message);
        return;
      }
    })();
  }, [id]);

  const handleSaveAsDraft = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", false);
    handleSubmit(async (data) => {
      // Custom logic to save to "page_content" resource
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });
if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    setValue("is_published", true);
    saveButtonProps.onClick(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button" onClick={handleSaveAsDraft}>
            Save as Draft
          </Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

In this example: 1. The useEffect hook fetches data from the page_content resource and sets the state accordingly. 2. The handleSaveAsDraft function sets the is_published field to false and uses the handleSubmit method to save the form data to the page_content resource using Supabase. 3. The handleSaveAndPublish function sets the is_published field to true and calls the original ` ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

dependent-tanOP•6mo ago

debug @kapa.ai

message.txt

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To debug your refine application, especially when dealing with custom buttons and form submissions, you can use several tools and techniques provided by refine and other libraries. Here are some steps and tools you can use: 1. Using Refine Devtools Refine provides a devtools package to help you monitor your app's queries and mutations, inspect queries made by your components, and update your dependencies with a single click. #### Installation To install devtools, you can use the following commands:

npm run refine devtools init

npm run refine devtools init

npm i @refinedev/devtools

npm i @refinedev/devtools

For more information, refer to the refine documentation on using devtools (https://refine.dev/docs/guides-concepts/development/#using-devtools). 2. Using Browser Devtools Vite.js, which is often used with refine, seamlessly integrates with popular browser developer tools. It provides an enhanced debugging experience by mapping original source code to the browser, enabling developers to directly debug their code without any additional setup or tooling. For more information, refer to the blog post on Vite's key features (https://refine.dev/blog/what-is-vite-vs-webpack/#key-features-of-vite). 3. Debugging Ant Design Components If you are using Ant Design components and facing issues with debugging, you can use the SWRDevTools extensions for Chrome and Firefox to debug SWR hooks used in your application. - Chrome: SWR Devtools for Chrome (https://chrome.google.com/webstore/detail/swr-devtools/liidbicegefhheghhjbomajjaehnjned) - Firefox: SWR Devtools for Firefox (https://addons.mozilla.org/en-US/firefox/addon/swr-devtools/) For more information, refer to the blog post on SWRDevTools (https://refine.dev/blog/data-fetching-next-js-useswr/#swrdevtools). 4. Debugging with Custom Buttons When adding custom buttons and handling form submissions, you can use console.log statements to debug the values being set and the form submission process. Here is an example of how you can add debug statements: ```typescript import { Edit, SaveButton, DeleteButton } from "@refinedev/mui"; import { Button } from "@mui/material"; import { useForm } from "@refinedev/react-hook-form"; import { useEffect, useState } from "react"; import { supabaseClient } from "your-supabase-client"; // Adjust the import according to your project structure const PostEdit: React.FC = () => { const { refineCore: { formLoading }, saveButtonProps, setValue, handleSubmit, } = useForm(); const [pageContent, setPageContent] = useState({}); const [fieldsEmpty, setFieldsEmpty] = useState(true); const id = "your-page-id"; // Replace with your actual page ID useEffect(() => { (async function () { let { data: page_content, error } = await supabaseClient .from("page_content") .select("*") .eq("pageId", id); if (page_content?.length != 0) { setFieldsEmpty(false); var content_arr: any = {}; page_content?.map((content) => { content.edited = true; content_arr[content.meta_key] = content; }); setPageContent(content_arr); } if (error) { console.error("Error fetching data:", error.message); return; } })(); }, [id]); ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

dependent-tanOP•6mo ago

Here if clicked on "Save as Draft", "is_published" field should be sent a value = "false", rest all the data should be inserted into "page_content" as it is happening now, and if clicked on "Save and Publish", "is_published" field should be send a value = "true", rest all the data should ne inserted into "page_content" as it is happening now

message.txt

dependent-tanOP•6mo ago

message.txt

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To achieve the desired functionality where clicking "Save as Draft" sets the is_published field to false and clicking "Save and Publish" sets it to true, while ensuring the rest of the data is inserted into the page_content resource, you can use the handleSubmit method from useForm to handle the form submission. Here is how you can modify your PostEdit component:

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { useEffect, useState } from "react";
import { supabaseClient } from "your-supabase-client"; // Adjust the import according to your project structure

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
    handleSubmit,
  } = useForm();

  const [pageContent, setPageContent] = useState({});
  const [fieldsEmpty, setFieldsEmpty] = useState(true);
  const id = "your-page-id"; // Replace with your actual page ID

  useEffect(() => {
    (async function () {
      let { data: page_content, error } = await supabaseClient
        .from("page_content")
        .select("*")
        .eq("pageId", id);

      if (page_content?.length != 0) {
        setFieldsEmpty(false);
        var content_arr: any = {};
        page_content?.map((content) => {
          content.edited = true;
          content_arr[content.meta_key] = content;
        });
        setPageContent(content_arr);
      }

      if (error) {
        console.error("Error fetching data:", error.message);
        return;
      }
    })();
  }, [id]);
const handleSaveAsDraft = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", false);
    handleSubmit(async (data) => {
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });

      if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", true);
    handleSubmit(async (data) => {
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });

      if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button" onClick={handleSaveAsDraft}>
            Save as Draft
          </Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { useEffect, useState } from "react";
import { supabaseClient } from "your-supabase-client"; // Adjust the import according to your project structure

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
    handleSubmit,
  } = useForm();

  const [pageContent, setPageContent] = useState({});
  const [fieldsEmpty, setFieldsEmpty] = useState(true);
  const id = "your-page-id"; // Replace with your actual page ID

  useEffect(() => {
    (async function () {
      let { data: page_content, error } = await supabaseClient
        .from("page_content")
        .select("*")
        .eq("pageId", id);

      if (page_content?.length != 0) {
        setFieldsEmpty(false);
        var content_arr: any = {};
        page_content?.map((content) => {
          content.edited = true;
          content_arr[content.meta_key] = content;
        });
        setPageContent(content_arr);
      }

      if (error) {
        console.error("Error fetching data:", error.message);
        return;
      }
    })();
  }, [id]);
const handleSaveAsDraft = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", false);
    handleSubmit(async (data) => {
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });

      if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", true);
    handleSubmit(async (data) => {
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });

      if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <Button type="button" onClick={handleSaveAsDraft}>
            Save as Draft
          </Button>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

Explanation: 1. Fetching Data: The `useEffect ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

dependent-tanOP•6mo ago

@kapa.ai Here on click of "<SaveButton {...saveButtonProps} onClick={handleSubmit}>Save as Draft</SaveButton>" I need to handleSubmit <Edit isLoading={formLoading} footerButtons={({ saveButtonProps, deleteButtonProps }) => ( <> <SaveButton {...saveButtonProps} onClick={handleSubmit}>Save as Draft</SaveButton> <SaveButton {...saveButtonProps} children="Save & Publish" color="success" onClick={handleSaveAndPublish} /> {deleteButtonProps && <DeleteButton {...deleteButtonProps} />} </> )} >

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To handle the handleSubmit function for the "Save as Draft" button and set the is_published field to false, you can modify the onClick handler of the SaveButton to include the handleSubmit logic. Here is how you can achieve this:

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { useEffect, useState } from "react";
import { supabaseClient } from "your-supabase-client"; // Adjust the import according to your project structure

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
    handleSubmit,
  } = useForm();

  const [pageContent, setPageContent] = useState({});
  const [fieldsEmpty, setFieldsEmpty] = useState(true);
  const id = "your-page-id"; // Replace with your actual page ID

  useEffect(() => {
    (async function () {
      let { data: page_content, error } = await supabaseClient
        .from("page_content")
        .select("*")
        .eq("pageId", id);

      if (page_content?.length != 0) {
        setFieldsEmpty(false);
        var content_arr: any = {};
        page_content?.map((content) => {
          content.edited = true;
          content_arr[content.meta_key] = content;
        });
        setPageContent(content_arr);
      }

      if (error) {
        console.error("Error fetching data:", error.message);
        return;
      }
    })();
  }, [id]);

  const handleSaveAsDraft = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", false);
    handleSubmit(async (data) => {
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });
if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", true);
    handleSubmit(async (data) => {
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });

      if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <SaveButton {...saveButtonProps} onClick={handleSaveAsDraft}>
            Save as Draft
          </SaveButton>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { useEffect, useState } from "react";
import { supabaseClient } from "your-supabase-client"; // Adjust the import according to your project structure

const PostEdit: React.FC = () => {
  const {
    refineCore: { formLoading },
    saveButtonProps,
    setValue,
    handleSubmit,
  } = useForm();

  const [pageContent, setPageContent] = useState({});
  const [fieldsEmpty, setFieldsEmpty] = useState(true);
  const id = "your-page-id"; // Replace with your actual page ID

  useEffect(() => {
    (async function () {
      let { data: page_content, error } = await supabaseClient
        .from("page_content")
        .select("*")
        .eq("pageId", id);

      if (page_content?.length != 0) {
        setFieldsEmpty(false);
        var content_arr: any = {};
        page_content?.map((content) => {
          content.edited = true;
          content_arr[content.meta_key] = content;
        });
        setPageContent(content_arr);
      }

      if (error) {
        console.error("Error fetching data:", error.message);
        return;
      }
    })();
  }, [id]);

  const handleSaveAsDraft = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", false);
    handleSubmit(async (data) => {
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });
if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  const handleSaveAndPublish = (e: React.BaseSyntheticEvent) => {
    e.preventDefault();
    setValue("is_published", true);
    handleSubmit(async (data) => {
      const { error } = await supabaseClient
        .from("page_content")
        .upsert({ ...data, pageId: id });

      if (error) {
        console.error("Error saving data:", error.message);
      } else {
        console.log("Data saved successfully:", data);
      }
    })(e);
  };

  return (
    <Edit
      isLoading={formLoading}
      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
        <>
          <SaveButton {...saveButtonProps} onClick={handleSaveAsDraft}>
            Save as Draft
          </SaveButton>
          <SaveButton
            {...saveButtonProps}
            children="Save & Publish"
            color="success"
            onClick={handleSaveAndPublish}
          />
          {deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
        </>
      )}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

export default PostEdit;

Explanation: 1. Fetching Data: The useEffect hook fetches data from the page_content resource and sets the state accordingly. 2. **handleSave ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

I want to use a custom buttom in "Edit" form in mui in the footer

Did you find this page helpful?