Make a card with strapi

Make a card with latest data modification with strapi provider and antd

14 Replies

Hi @Friturito. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a card that displays the latest data modification using the Strapi provider and Ant Design (antd), you can follow these steps. This example assumes you have a Strapi backend set up and integrated with Refine. Step-by-Step Guide 1. Set Up Strapi Data Provider in Refine: Ensure you have the Strapi data provider set up in your Refine application. Here is an example configuration in App.tsx:

   import { Refine } from "@refinedev/core";  
   import { useNotificationProvider, Layout, LoginPage } from "@refinedev/antd";  
   import routerProvider from "@refinedev/react-router-v6";  
   import { DataProvider } from "@refinedev/strapi-v4";  
   import { authProvider, axiosInstance } from "./authProvider";  
   
   import "@refinedev/antd/dist/reset.css";  
   
   function App() {  
     const API_URL = "Your_Strapi_Url";  
     const dataProvider = DataProvider(API_URL + "/api", axiosInstance);  
   
     return (  
       <Refine  
         routerProvider={routerProvider}  
         notificationProvider={useNotificationProvider}  
         Layout={Layout}  
         dataProvider={dataProvider}  
         authProvider={authProvider}  
         LoginPage={LoginPage}  
       />  
     );  
   }

   import { Refine } from "@refinedev/core";  
   import { useNotificationProvider, Layout, LoginPage } from "@refinedev/antd";  
   import routerProvider from "@refinedev/react-router-v6";  
   import { DataProvider } from "@refinedev/strapi-v4";  
   import { authProvider, axiosInstance } from "./authProvider";  
   
   import "@refinedev/antd/dist/reset.css";  
   
   function App() {  
     const API_URL = "Your_Strapi_Url";  
     const dataProvider = DataProvider(API_URL + "/api", axiosInstance);  
   
     return (  
       <Refine  
         routerProvider={routerProvider}  
         notificationProvider={useNotificationProvider}  
         Layout={Layout}  
         dataProvider={dataProvider}  
         authProvider={authProvider}  
         LoginPage={LoginPage}  
       />  
     );  
   }

2. Create a Card Component: Create a card component that will display the latest data modification. Here is an example of a card component using Ant Design:

   import { useSimpleList, AntdList, List } from "@refinedev/antd";  
   import { Card, Typography } from "@refinedev/antd";  
   import { ICompany } from "interfaces";  // Ensure you have the correct interface

   const { Title, Text } = Typography;

   type LatestModificationCardProps = {
     item: ICompany;
   };
export const LatestModificationCard: React.FC<LatestModificationCardProps> = ({ item }) => {
     return (
       <Card style={{ width: 300 }}>
         <Title level={4}>{item.name}</Title>
         <Text>Last Modified: {new Date(item.updatedAt).toLocaleString()}</Text>
         <Text>Address: {item.address}</Text>
         <Text>City: {item.city}</Text>
         <Text>Country: {item.country}</Text>
       </Card>
     );
   };

   import { useSimpleList, AntdList, List } from "@refinedev/antd";  
   import { Card, Typography } from "@refinedev/antd";  
   import { ICompany } from "interfaces";  // Ensure you have the correct interface

   const { Title, Text } = Typography;

   type LatestModificationCardProps = {
     item: ICompany;
   };
export const LatestModificationCard: React.FC<LatestModificationCardProps> = ({ item }) => {
     return (
       <Card style={{ width: 300 }}>
         <Title level={4}>{item.name}</Title>
         <Text>Last Modified: {new Date(item.updatedAt).toLocaleString()}</Text>
         <Text>Address: {item.address}</Text>
         <Text>City: {item.city}</Text>
         <Text>Country: {item.country}</Text>
       </Card>
     );
   };

3. Fetch and Display the Latest Data: Use the useSimpleList hook to fetch the latest data from Strapi and display it using the card component. Here is an example of how to do this: ```typescript import { useSimpleList, AntdList, List } from "@refinedev/antd";
import { LatestModificationCard } from "components/LatestModificationCard"; // Ensure the correct path import { ICompany } from "interfaces"; // Ensure you have the correct interface export const LatestModificationList = () => {
const { listProps } = useSimpleList<ICompany>({
meta: { sort: { field: "updatedAt", order: "desc" }, populate: ["logo"] },
});

return (
<List title={"Latest Modifications"}>
<AntdList
grid={{ gutter: 16 }}
{...listProps}
renderItem={(item) => (
<AntdList.Item>
<LatestModificationCard item={item} /> ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

correct-apricotOP•8mo ago

@kapa.ai adapt this component to a antdinterferer

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To adapt the component to use an Ant Design Card component and display the latest data modification, you can follow the steps below. This example assumes you have a Strapi backend set up and integrated with Refine. Step-by-Step Guide 1. Set Up Strapi Data Provider in Refine: Ensure you have the Strapi data provider set up in your Refine application. Here is an example configuration in App.tsx:

   import { Refine } from "@refinedev/core";  
   import { useNotificationProvider, Layout, LoginPage } from "@refinedev/antd";  
   import routerProvider from "@refinedev/react-router-v6";  
   import { DataProvider } from "@refinedev/strapi-v4";  
   import { authProvider, axiosInstance } from "./authProvider";  
   
   import "@refinedev/antd/dist/reset.css";  
   
   function App() {  
     const API_URL = "Your_Strapi_Url";  
     const dataProvider = DataProvider(API_URL + "/api", axiosInstance);  
   
     return (  
       <Refine  
         routerProvider={routerProvider}  
         notificationProvider={useNotificationProvider}  
         Layout={Layout}  
         dataProvider={dataProvider}  
         authProvider={authProvider}  
         LoginPage={LoginPage}  
       />  
     );  
   }

   import { Refine } from "@refinedev/core";  
   import { useNotificationProvider, Layout, LoginPage } from "@refinedev/antd";  
   import routerProvider from "@refinedev/react-router-v6";  
   import { DataProvider } from "@refinedev/strapi-v4";  
   import { authProvider, axiosInstance } from "./authProvider";  
   
   import "@refinedev/antd/dist/reset.css";  
   
   function App() {  
     const API_URL = "Your_Strapi_Url";  
     const dataProvider = DataProvider(API_URL + "/api", axiosInstance);  
   
     return (  
       <Refine  
         routerProvider={routerProvider}  
         notificationProvider={useNotificationProvider}  
         Layout={Layout}  
         dataProvider={dataProvider}  
         authProvider={authProvider}  
         LoginPage={LoginPage}  
       />  
     );  
   }

2. Create a Card Component: Create a card component that will display the latest data modification. Here is an example of a card component using Ant Design:

   import { Card, Typography } from "antd";  
   import { ICompany } from "interfaces";  // Ensure you have the correct interface

   const { Title, Text } = Typography;

   type LatestModificationCardProps = {
     item: ICompany;
   };
export const LatestModificationCard: React.FC<LatestModificationCardProps> = ({ item }) => {
     return (
       <Card style={{ width: 300 }}>
         <Title level={4}>{item.name}</Title>
         <Text>Last Modified: {new Date(item.updatedAt).toLocaleString()}</Text>
         <Text>Address: {item.address}</Text>
         <Text>City: {item.city}</Text>
         <Text>Country: {item.country}</Text>
       </Card>
     );
   };

   import { Card, Typography } from "antd";  
   import { ICompany } from "interfaces";  // Ensure you have the correct interface

   const { Title, Text } = Typography;

   type LatestModificationCardProps = {
     item: ICompany;
   };
export const LatestModificationCard: React.FC<LatestModificationCardProps> = ({ item }) => {
     return (
       <Card style={{ width: 300 }}>
         <Title level={4}>{item.name}</Title>
         <Text>Last Modified: {new Date(item.updatedAt).toLocaleString()}</Text>
         <Text>Address: {item.address}</Text>
         <Text>City: {item.city}</Text>
         <Text>Country: {item.country}</Text>
       </Card>
     );
   };

3. Fetch and Display the Latest Data: Use the useSimpleList hook to fetch the latest data from Strapi and display it using the card component. Here is an example of how to do this:

   import { useSimpleList, List } from "@refinedev/antd";  
   import { LatestModificationCard } from "components/LatestModificationCard";  // Ensure the correct path
   import { ICompany } from "interfaces";  // Ensure you have the correct interface

   export const LatestModificationList = () => {  
     const { listProps } = useSimpleList<ICompany>({  
       meta: { sort: { field: "updatedAt", order: "desc" }, populate: ["logo"] },  
     });  
   
     return (  
       <List title={"Latest Modifications"}>  
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
           {listProps.dataSource?.map((item) => (
             <LatestModificationCard key={item.id} item={item} />
           ))}
         </div>
       </List>  
     );  
   };

   import { useSimpleList, List } from "@refinedev/antd";  
   import { LatestModificationCard } from "components/LatestModificationCard";  // Ensure the correct path
   import { ICompany } from "interfaces";  // Ensure you have the correct interface

   export const LatestModificationList = () => {  
     const { listProps } = useSimpleList<ICompany>({  
       meta: { sort: { field: "updatedAt", order: "desc" }, populate: ["logo"] },  
     });  
   
     return (  
       <List title={"Latest Modifications"}>  
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
           {listProps.dataSource?.map((item) => (
             <LatestModificationCard key={item.id} item={item} />
           ))}
         </div>
       </List>  
     );  
   };

Summary - **Set up the Str ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

correct-apricotOP•8mo ago

import React from "react"; import { useList } from "@refinedev/core"; import { List, Card } from "antd"; export const LatestActivities: React.FC = () => { const { data, isLoading } = useList({ resource: "formas", config: { pagination: { pageSize: 5, }, sort: [ { field: "createdAt", order: "desc", }, ], }, }); if (isLoading) { return <div>Cargando...</div>; } return ( <Card title="Últimas actividades" bordered={false}> <List itemLayout="horizontal" dataSource={data?.data} renderItem={(item) => ( <List.Item> <List.Item.Meta title={item.title} description={item.description} /> </List.Item> )} /> </Card> ); }; adapt thi code to a table props import React from "react"; import { useList } from "@refinedev/core"; import { List, Card } from "antd"; export const LatestActivities: React.FC = () => { const { data, isLoading } = useList({ resource: "formas", config: { pagination: { pageSize: 5, }, sort: [ { field: "createdAt", order: "desc", }, ], }, }); if (isLoading) { return <div>Cargando...</div>; } return ( <Card title="Últimas actividades" bordered={false}> <List itemLayout="horizontal" dataSource={data?.data} renderItem={(item) => ( <List.Item> <List.Item.Meta title={item.title} description={item.description} /> </List.Item> )} /> </Card> ); }; @kapa.ai adapt this code to a table props

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To adapt the given code to use tableProps with Ant Design's Table component, you can follow the steps below. This example will use the useTable hook from Refine to fetch and display the latest activities in a table format. Step-by-Step Guide 1. Import Necessary Modules: Ensure you have the necessary imports from Refine and Ant Design. 2. Use useTable Hook: Replace the useList hook with the useTable hook to get tableProps. 3. Render the Table: Use the Table component from Ant Design and pass the tableProps to it. Here is the adapted code:

import React from "react";
import { useTable } from "@refinedev/core";
import { Table, Card } from "antd";

export const LatestActivities: React.FC = () => {
  const { tableProps, isLoading } = useTable({
    resource: "formas",
    initialSorter: [
      {
        field: "createdAt",
        order: "desc",
      },
    ],
    initialPageSize: 5,
  });

  if (isLoading) {
    return <div>Cargando...</div>;
  }

  return (
    <Card title="Últimas actividades" bordered={false}>
      <Table {...tableProps} rowKey="id">
        <Table.Column title="Título" dataIndex="title" key="title" />
        <Table.Column title="Descripción" dataIndex="description" key="description" />
        <Table.Column title="Fecha de Creación" dataIndex="createdAt" key="createdAt" />
      </Table>
    </Card>
  );
};

import React from "react";
import { useTable } from "@refinedev/core";
import { Table, Card } from "antd";

export const LatestActivities: React.FC = () => {
  const { tableProps, isLoading } = useTable({
    resource: "formas",
    initialSorter: [
      {
        field: "createdAt",
        order: "desc",
      },
    ],
    initialPageSize: 5,
  });

  if (isLoading) {
    return <div>Cargando...</div>;
  }

  return (
    <Card title="Últimas actividades" bordered={false}>
      <Table {...tableProps} rowKey="id">
        <Table.Column title="Título" dataIndex="title" key="title" />
        <Table.Column title="Descripción" dataIndex="description" key="description" />
        <Table.Column title="Fecha de Creación" dataIndex="createdAt" key="createdAt" />
      </Table>
    </Card>
  );
};

Summary - Imports: Ensure you import useTable from @refinedev/core and Table from antd. - Hook Usage: Use the useTable hook to get tableProps. - Table Rendering: Use the Table component and pass tableProps to it. This will display the latest activities in a table format with columns for the title, description, and creation date. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

correct-apricotOP•8mo ago

@kapa.ai do best this code import React from "react"; import { useTable } from "@refinedev/core"; import { Table, Card } from "antd"; import { BaseRecord, useMany } from "@refinedev/core"; export const LatestActivities = () => { const { tableProps, isLoading } = useTable({ syncWithLocation: true, initialSorter: [ { field: "codigo_oficio", order: "asc", }, ], initialPageSize: 5, }); if (isLoading) { return <div>Cargando...</div>; } return ( <Card title="Últimas actividades" bordered={false}> <Table {...tableProps} rowKey="id"> <Table.Column title="Codigo Oficio" dataIndex="codigo_oficio" key="codigo_oficio" /> <Table.Column title="Asunto" dataIndex="asunto" key="asunto" /> </Table> </Card> ); };

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To improve the given code, we can make a few enhancements for better readability, maintainability, and performance. Here are the steps: 1. Remove Unused Imports: Remove any imports that are not being used in the component. 2. Add Loading Spinner: Instead of just displaying "Cargando...", we can use Ant Design's Spin component to show a loading spinner. 3. Type Annotations: Add type annotations for better TypeScript support. 4. Error Handling: Optionally, you can add error handling to manage any potential errors during data fetching. Here is the improved code:

import React from "react";
import { useTable } from "@refinedev/core";
import { Table, Card, Spin } from "antd";

export const LatestActivities: React.FC = () => {
  const { tableProps, isLoading } = useTable({
    syncWithLocation: true,
    initialSorter: [
      {
        field: "codigo_oficio",
        order: "asc",
      },
    ],
    initialPageSize: 5,
  });

  return (
    <Card title="Últimas actividades" bordered={false}>
      {isLoading ? (
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <Spin size="large" />
        </div>
      ) : (
        <Table {...tableProps} rowKey="id">
          <Table.Column title="Codigo Oficio" dataIndex="codigo_oficio" key="codigo_oficio" />
          <Table.Column title="Asunto" dataIndex="asunto" key="asunto" />
        </Table>
      )}
    </Card>
  );
};

import React from "react";
import { useTable } from "@refinedev/core";
import { Table, Card, Spin } from "antd";

export const LatestActivities: React.FC = () => {
  const { tableProps, isLoading } = useTable({
    syncWithLocation: true,
    initialSorter: [
      {
        field: "codigo_oficio",
        order: "asc",
      },
    ],
    initialPageSize: 5,
  });

  return (
    <Card title="Últimas actividades" bordered={false}>
      {isLoading ? (
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <Spin size="large" />
        </div>
      ) : (
        <Table {...tableProps} rowKey="id">
          <Table.Column title="Codigo Oficio" dataIndex="codigo_oficio" key="codigo_oficio" />
          <Table.Column title="Asunto" dataIndex="asunto" key="asunto" />
        </Table>
      )}
    </Card>
  );
};

Summary of Improvements - Removed Unused Imports: Removed BaseRecord and useMany as they were not used. - Loading Spinner: Added Ant Design's Spin component for a better loading state. - Type Annotations: Ensured the component is typed as React.FC. - Error Handling: Although not added in this example, consider adding error handling for robustness. This code will now display a loading spinner while fetching data and render the table once the data is loaded. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

correct-apricotOP•8mo ago

@kapa.ai How do I get this route code to give me the shape data in the dashboard route with antd and strapi App.tsx <Route path="/dashboard" element={<Dashboard />} /> <Route path="/formas"> <Route index element={<FormasList/>} /> <Route path="create" element={<FormasCreate />} /> <Route path="edit/:id" element={<FormasEdit />} /> <Route path="show/:id" element={<FormasShow />} /> </Route> Dashboard.tsx export const Dashboard: React.FC = () => { const { data: formas } = useList({ resource: "formas", }); return ( <div className="site-card-wrapper"> <Row gutter={16}> <Col span={8}> <Card title="Oficios por revisar" bordered={false}> {formas?.data.total ?? 0} </Card> </Col> <Col span={8}> <Card title="Oficios en curso (cambiar)" bordered={false}> {/* {dailyOrders?.data.total ?? 0} /} </Card> </Col> <Col span={8}> <Card title="Nuevos oficios" bordered={false}> {/ {newCustomers?.data.total ?? 0} /} </Card> </Col> </Row> <Row gutter={[32, 32]} style={{ marginTop: "32px", }} >
<Col xs={24} sm={24} xl={14} xxl={16}> {/ <LatestActivities /> /} </Col>
<Col xs={24} sm={24} xl={10} xxl={8}> {/ <UpcomingEvents /> /} </Col> </Row> <Col span={12}> {/ <PieChart data={pieData} /> /} </Col> {/ <Row gutter={16} style={{ marginTop: 16 }}> <Col span={24}> <Calendar /> </Col> </Row> */} </div> ); };

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To get the shape data in the dashboard route using Ant Design and Strapi, you can follow the steps below. This example assumes you have a Strapi backend set up and integrated with Refine. Step-by-Step Guide 1. Set Up Routes in App.tsx: Ensure you have the routes set up correctly in your App.tsx file.

   import React from "react";
   import { BrowserRouter, Routes, Route } from "react-router-dom";
   import { Dashboard } from "./pages/Dashboard";
   import { FormasList, FormasCreate, FormasEdit, FormasShow } from "./pages/Formas";

   const App: React.FC = () => {
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/formas">
             <Route index element={<FormasList />} />
             <Route path="create" element={<FormasCreate />} />
             <Route path="edit/:id" element={<FormasEdit />} />
             <Route path="show/:id" element={<FormasShow />} />
           </Route>
         </Routes>
       </BrowserRouter>
     );
   };

   export default App;

   import React from "react";
   import { BrowserRouter, Routes, Route } from "react-router-dom";
   import { Dashboard } from "./pages/Dashboard";
   import { FormasList, FormasCreate, FormasEdit, FormasShow } from "./pages/Formas";

   const App: React.FC = () => {
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/formas">
             <Route index element={<FormasList />} />
             <Route path="create" element={<FormasCreate />} />
             <Route path="edit/:id" element={<FormasEdit />} />
             <Route path="show/:id" element={<FormasShow />} />
           </Route>
         </Routes>
       </BrowserRouter>
     );
   };

   export default App;

2. Fetch Data in Dashboard.tsx: Use the useList hook to fetch data from the formas resource and display it in the dashboard.

   import React from "react";
   import { useList } from "@refinedev/core";
   import { Row, Col, Card } from "antd";

   export const Dashboard: React.FC = () => {
     const { data: formas, isLoading } = useList({
       resource: "formas",
     });

     if (isLoading) {
       return <div>Cargando...</div>;
     }
return (
       <div className="site-card-wrapper">
         <Row gutter={16}>
           <Col span={8}>
             <Card title="Oficios por revisar" bordered={false}>
               {formas?.data.length ?? 0}
             </Card>
           </Col>
           <Col span={8}>
             <Card title="Oficios en curso (cambiar)" bordered={false}>
               {/* Add your data here */}
             </Card>
           </Col>
           <Col span={8}>
             <Card title="Nuevos oficios" bordered={false}>
               {/* Add your data here */}
             </Card>
           </Col>
         </Row>
         <Row
           gutter={[32, 32]}
           style={{
             marginTop: "32px",
           }}
         >
           <Col xs={24} sm={24} xl={14} xxl={16}>
             {/* <LatestActivities /> */}
           </Col>
           <Col xs={24} sm={24} xl={10} xxl={8}>
             {/* <UpcomingEvents /> */}
           </Col>
         </Row>
         <Col span={12}>
           {/* <PieChart data={pieData} /> */}
         </Col>
         {/* <Row gutter={16} style={{ marginTop: 16 }}>
           <Col span={24}>
             <Calendar />
           </Col>
         </Row> */}
       </div>
     );
   };

   import React from "react";
   import { useList } from "@refinedev/core";
   import { Row, Col, Card } from "antd";

   export const Dashboard: React.FC = () => {
     const { data: formas, isLoading } = useList({
       resource: "formas",
     });

     if (isLoading) {
       return <div>Cargando...</div>;
     }
return (
       <div className="site-card-wrapper">
         <Row gutter={16}>
           <Col span={8}>
             <Card title="Oficios por revisar" bordered={false}>
               {formas?.data.length ?? 0}
             </Card>
           </Col>
           <Col span={8}>
             <Card title="Oficios en curso (cambiar)" bordered={false}>
               {/* Add your data here */}
             </Card>
           </Col>
           <Col span={8}>
             <Card title="Nuevos oficios" bordered={false}>
               {/* Add your data here */}
             </Card>
           </Col>
         </Row>
         <Row
           gutter={[32, 32]}
           style={{
             marginTop: "32px",
           }}
         >
           <Col xs={24} sm={24} xl={14} xxl={16}>
             {/* <LatestActivities /> */}
           </Col>
           <Col xs={24} sm={24} xl={10} xxl={8}>
             {/* <UpcomingEvents /> */}
           </Col>
         </Row>
         <Col span={12}>
           {/* <PieChart data={pieData} /> */}
         </Col>
         {/* <Row gutter={16} style={{ marginTop: 16 }}>
           <Col span={24}>
             <Calendar />
           </Col>
         </Row> */}
       </div>
     );
   };

Summary - Routes Setup: Ensure the routes are correctly set up in App.tsx. - Data Fetching: Use the useList hook to fetch data from the formas resource. - Display Data: Display the fetched data in the Ant Design Card components within the Dashboard component. This setup will allow you to fetch and display the latest ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

Make a card with strapi

Did you find this page helpful?