absent-sapphire•10mo ago

When I create a folder within the app, it becomes a uri path.

How do I get this NatureClass use it?

export default function NatureClassCreate() {
  const {
    saveButtonProps,
    refineCore: { formLoading, onFinish },
    handleSubmit,
    register,
    control,
    formState: { errors },
  } = useForm({});****

export default function NatureClassCreate() {
  const {
    saveButtonProps,
    refineCore: { formLoading, onFinish },
    handleSubmit,
    register,
    control,
    formState: { errors },
  } = useForm({});****

5 Replies

kapa.ai•10mo ago

Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can help you understand how to use the NatureClassCreate component with the URI path created by your folder structure. Here's how you can utilize it: 1. First, make sure you've created the NatureClassCreate component in the appropriate folder within your app structure. The folder name will indeed become part of the URI path. 2. To use this component, you need to add it to your resource configuration in the App.tsx file. Here's how you can do it:

import { NatureClassCreate } from "./pages/natureclasses";

function App() {
  return (
    <Refine
      // ... other configurations
      resources={[
        {
          name: "natureclasses",
          list: "/natureclasses",
          create: "/natureclasses/create",
          // ... other actions
        },
      ]}
    >
      <Routes>
        {/* ... other routes */}
        <Route path="/natureclasses">
          <Route index element={<NatureClassList />} />
          <Route path="create" element={<NatureClassCreate />} />
        </Route>
      </Routes>
    </Refine>
  );
}

import { NatureClassCreate } from "./pages/natureclasses";

function App() {
  return (
    <Refine
      // ... other configurations
      resources={[
        {
          name: "natureclasses",
          list: "/natureclasses",
          create: "/natureclasses/create",
          // ... other actions
        },
      ]}
    >
      <Routes>
        {/* ... other routes */}
        <Route path="/natureclasses">
          <Route index element={<NatureClassList />} />
          <Route path="create" element={<NatureClassCreate />} />
        </Route>
      </Routes>
    </Refine>
  );
}

3. In your NatureClassCreate component, you're using the useForm hook from @refinedev/react-hook-form. This is correct, but you might want to specify the type for better type safety:

import { useForm } from "@refinedev/react-hook-form";

export default function NatureClassCreate() {
  const {
    saveButtonProps,
    refineCore: { formLoading, onFinish },
    handleSubmit,
    register,
    control,
    formState: { errors },
  } = useForm<INatureClass>();

  // ... rest of your component
}

import { useForm } from "@refinedev/react-hook-form";

export default function NatureClassCreate() {
  const {
    saveButtonProps,
    refineCore: { formLoading, onFinish },
    handleSubmit,
    register,
    control,
    formState: { errors },
  } = useForm<INatureClass>();

  // ... rest of your component
}

4. You can then use these properties to build your form. Here's an example of how you might structure your component:

import { Create } from "@refinedev/mui";
import { Box, TextField } from "@mui/material";
export default function NatureClassCreate() {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    formState: { errors },
  } = useForm<INatureClass>();

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off">
        <TextField
          {...register("name", { required: "This field is required" })}
          error={!!errors.name}
          helperText={errors.name?.message}
          margin="normal"
          fullWidth
          label="Name"
          name="name"
        />
        {/* Add more fields as needed */}
      </Box>
    </Create>
  );
}

import { Create } from "@refinedev/mui";
import { Box, TextField } from "@mui/material";
export default function NatureClassCreate() {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    formState: { errors },
  } = useForm<INatureClass>();

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off">
        <TextField
          {...register("name", { required: "This field is required" })}
          error={!!errors.name}
          helperText={errors.name?.message}
          margin="normal"
          fullWidth
          label="Name"
          name="name"
        />
        {/* Add more fields as needed */}
      </Box>
    </Create>
  );
}

This structure is based on the examples provided in the React Admin Panel Tutorial with Chakra UI and Strapi and Building a React Admin Panel with PrimeReact and Refine knowledge sources. Remember to adjust the imports and component structure based on your specific UI library and requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1184365192482652173> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

absent-sapphireOP•10mo ago

@kapa.ai Ok, So how do I insert the URI path into defaultValue here? return ( <Create isLoading={formLoading} saveButtonProps={saveButtonProps} title={<Typography variant="h5">상품 추가</Typography>} > <Box component="form" sx={{ display: 'flex', flexDirection: 'column' }} autoComplete="off" > <ContentForm label="프로젝트" name="project" validationRules={{ required: 'This field is required' }} type="text" defaultValue={currentPath} />

kapa.ai•10mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information provided in the knowledge sources, I can guide you on how to insert the URI path into the defaultValue of your form. However, it's important to note that the exact implementation might depend on how you're managing your routes and accessing the current path in your application. To set the defaultValue with the current URI path, you can use the useForm hook from @refinedev/react-hook-form along with the defaultValues option. Here's how you can modify your code: 1. First, you need to get the current path. This isn't directly provided in the knowledge sources, but you can typically use a routing library like react-router-dom to access the current path. 2. Then, you can use this path in the defaultValues of your useForm hook:

import { useForm } from "@refinedev/react-hook-form";
import { useLocation } from "react-router-dom";

export default function YourComponent() {
  const location = useLocation();
  const currentPath = location.pathname;

  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    control,
    formState: { errors },
  } = useForm({
    defaultValues: {
      project: currentPath,
    },
  });

  return (
    <Create
      isLoading={formLoading}
      saveButtonProps={saveButtonProps}
      title={<Typography variant="h5">상품 추가</Typography>}
    >
      <Box
        component="form"
        sx={{ display: 'flex', flexDirection: 'column' }}
        autoComplete="off"
      >
        <ContentForm
          label="프로젝트"
          name="project"
          control={control}
          rules={{ required: 'This field is required' }}
          defaultValue={currentPath}
        />
        {/* Other form fields */}
      </Box>
    </Create>
  );
}

import { useForm } from "@refinedev/react-hook-form";
import { useLocation } from "react-router-dom";

export default function YourComponent() {
  const location = useLocation();
  const currentPath = location.pathname;

  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    control,
    formState: { errors },
  } = useForm({
    defaultValues: {
      project: currentPath,
    },
  });

  return (
    <Create
      isLoading={formLoading}
      saveButtonProps={saveButtonProps}
      title={<Typography variant="h5">상품 추가</Typography>}
    >
      <Box
        component="form"
        sx={{ display: 'flex', flexDirection: 'column' }}
        autoComplete="off"
      >
        <ContentForm
          label="프로젝트"
          name="project"
          control={control}
          rules={{ required: 'This field is required' }}
          defaultValue={currentPath}
        />
        {/* Other form fields */}
      </Box>
    </Create>
  );
}

In this example, we're using the useLocation hook from react-router-dom to get the current path. Then, we're passing this path as the default value for the "project" field in the useForm hook's defaultValues option. This approach is based on the information provided in the useForm documentation, which explains how to set default values for form fields. Remember to adjust the imports and component structure based on your specific setup and requirements. Also, ensure that your ContentForm component is set up to properly receive and use the control prop from useForm. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1184365192482652173> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

When I create a folder within the app, it becomes a uri path.

Did you find this page helpful?