2. Adding Edit Page

Creating Edit Page

First, we need to create our file, named edit.tsx, under the src/pages/blog-posts folder. We will then copy the edit page code generated by Inferencer and paste it into the file; for this, follow these steps:

1. Navigate to localhost:3000/blog-posts in your browser.

2. Click on any of the "Edit" buttons in the "Actions" column of the table to open the edit page.

3. Click on the "Show Code" button in the bottom right corner of the page.

4. You can see the edit page code generated by Inferencer. Copy it by clicking on the "Copy" button.

5. Paste the code into the newly created edit.tsx file.

You can see an example edit page generated by Inferencer below:

http://localhost:3000/blog-posts/edit/123

Understanding the Edit Component

Hooks and Components in Edit Page

• <Edit/> is a refine component that is used for presentation purposes like showing the title of the page, save button, refresh button etc.

  For more information, refer to the <Edit/> documentation→

• The useForm hook is imported from @refinedev/mantine package and has been developed by using the Mantine useForm hook and @refinedev/core useForm hook. When used the in the edit page, it fetches record data with the URL's id, populating and submitting the form with dataProvider's update method. It also offers saveButtonProps for the form's submit button.

  For more information, refer to the useForm→ and Mantine documentations→

• All other components provided by Mantine are used to display the form fields.

  For more information, refer to the Mantine documentation→

Handling Relationships

On the edit page, we may need to select a record from another resource.

For example, if we need to select a category from the categories resource to assign the blog post to the category, we can use the useSelect hook provided by refine. This hook fetches the data by passing the params to the dataProvider's getList method and then returns the necessary props to be used in the <Select/> component.

In the auto-generated edit page code, Inferencer used the useSelect hook to select a category from the categories resource like below:

const { selectProps: categorySelectProps } = useSelect({
    resource: "categories",
});

useSelect returns 10 record by default, but the category of the blog post may not be in the first 10 records. To solve this problem, we can use the defaultValue prop to set the default value of the useSelect hook like below:

const { selectProps: categorySelectProps } = useSelect({
    resource: "categories",
    defaultValue: blogPostsData?.category?.id,
});

For more information, refer to the useSelect and Mantine <Select/> documentations→

Adding the Edit Page to the App

Now that we have created the edit page, we can add it to the App.tsx file:

1. Open src/App.tsx file on your editor.

2. Import the created BlogPostEdit component.

3. Replace the MantineInferencer component with the BlogPostEdit component.

src/App.tsx

import { Global, MantineProvider } from "@mantine/core";
import { NotificationsProvider } from "@mantine/notifications";
import { Refine } from "@refinedev/core";
import { MantineInferencer } from "@refinedev/inferencer/mantine";
import {
    ErrorComponent,
    ThemedLayoutV2,
    RefineThemes,
    notificationProvider,
} from "@refinedev/mantine";
import routerBindings, {
    NavigateToResource,
    UnsavedChangesNotifier,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";

import { BlogPostList } from "pages/blog-posts/list";
import { BlogPostEdit } from "pages/blog-posts/edit";

const App = () => {
    return (
        <MantineProvider
            theme={RefineThemes.Blue}
            withNormalizeCSS
            withGlobalStyles
        >
            <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
            <NotificationsProvider position="top-right">
                <BrowserRouter>
                    <Refine
                        routerProvider={routerBindings}
                        dataProvider={dataProvider(
                            "https://api.fake-rest.refine.dev",
                        )}
                        notificationProvider={notificationProvider}
                        resources={[
                            {
                                name: "blog_posts",
                                list: "/blog-posts",
                                show: "/blog-posts/show/:id",
                                create: "/blog-posts/create",
                                edit: "/blog-posts/edit/:id",
                            },
                        ]}
                        options={{
                            syncWithLocation: true,
                            warnWhenUnsavedChanges: true,
                        }}
                    >
                        <Routes>
                            <Route
                                element={
                                    <ThemedLayoutV2>
                                        <Outlet />
                                    </ThemedLayoutV2>
                                }
                            >
                                <Route
                                    index
                                    element={
                                        <NavigateToResource resource="blog_posts" />
                                    }
                                />

                                <Route path="blog-posts">
                                    <Route index element={<BlogPostList />} />
                                    <Route
                                        path="show/:id"
                                        element={<MantineInferencer />}
                                    />
                                    <Route
                                        path="edit/:id"
                                        element={<BlogPostEdit />}
                                    />
                                    <Route
                                        path="create"
                                        element={<MantineInferencer />}
                                    />
                                </Route>

                                <Route path="*" element={<ErrorComponent />} />
                            </Route>
                        </Routes>
                        <UnsavedChangesNotifier />
                    </Refine>
                </BrowserRouter>
            </NotificationsProvider>
        </MantineProvider>
    );
};
export default App;

Now, we can see the edit page in the browser at localhost:3000/blog-posts/edit/123

Checklist

I have added the edit page to the app.

I understood the edit page components and hooks.

I understood the relationship handling.