4. Adding Create Page
Creating Create Page
First, we need to create our file, named create.tsx
, under the src/pages/blog-posts
folder. We will then copy the create page code generated by Inferencer and paste it into the file; for this, follow these steps:
Navigate to localhost:3000/blog-posts in your browser.
Click the "Create" button in the top right corner of the table to open the create page.
On the create page, click on the "Show Code" button in the bottom right corner of the page.
You can see the create page code generated by Inferencer. Copy it by clicking on the "Copy" button.
Paste the code into the newly created
create.tsx
file.
You can see an example edit page generated by Inferencer below:
Understanding the Create Component
Hooks and Components in Create Page
<Create/>
is a refine component that is used for presentation purposes like showing the title of the page, save button etc.For more information, refer to the
<Create/>
documentation→The
useForm
hook is imported from@refinedev/mantine
package and has been developed by using the MantineuseForm
hook and@refinedev/core
useForm
hook. When used in the create page, it sends the form data todataProvider
'screate
method when the form is submitted. It also offerssaveButtonProps
for the form's submit button.For more information, refer to the
useForm
and Mantine documentations→All other components provided by Material UI are used to display the form fields.
For more information, refer to the Material UI documentation→
Handling Relationships
In the create 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 useAutocomplete
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 <Autocomplete/>
component.
In the auto-generated create page code, Inferencer used the useAutocomplete
hook to select a category from the categories
resource like below:
const { selectProps: categorySelectProps } = useAutocomplete({
resource: "categories",
});
For more information, refer to the
useAutocomplete
and Material UI<Autocomplete/>
documentations→
Adding the Create Page to the App
Now that we have created the create page, we can add it to the App.tsx
file:
Open
src/App.tsx
file on your editor.Import the created
BlogPostCreate
component.Replace the
MuiInferencer
component with theBlogPostCreate
component.
import { CssBaseline, GlobalStyles, ThemeProvider } from "@mui/material";
import { Refine } from "@refinedev/core";
import {
ErrorComponent,
ThemedLayoutV2,
RefineThemes,
notificationProvider,
RefineSnackbarProvider,
} from "@refinedev/mui";
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 { BlogPostEdit } from "pages/blog-posts/edit";
import { BlogPostList } from "pages/blog-posts/list";
import { BlogPostShow } from "pages/blog-posts/show";
import { BlogPostCreate } from "pages/blog-posts/create";
const App: React.FC = () => {
return (
<ThemeProvider theme={RefineThemes.Blue}>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
<RefineSnackbarProvider>
<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={<BlogPostShow />}
/>
<Route
path="edit/:id"
element={<BlogPostEdit />}
/>
<Route
path="create"
element={<BlogPostCreate />}
/>
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
</Routes>
<UnsavedChangesNotifier />
</Refine>
</BrowserRouter>
</RefineSnackbarProvider>
</ThemeProvider>
);
};
export default App;
Now, we can see the create page in the browser at localhost:3000/blog-posts/create