Import page - Refine

popular-magenta · 2023-11-27T16:20:31.252Z

Howdy, I want to create a page where I can - import a json file with a list of items - check if those items already exist - show the results of the compare in a table - accept the changes and update the db I thought that I would ask if anyone has done something similar?

K

kapa.ai•11/27/23, 4:20 PM

Hi @silentnyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•11/27/23, 4:21 PM

----------------------
Hmm, I don't know enough to give you a confident answer yet. However, I can provide some guidance based on the information available.

For importing a JSON file, you might want to look into how to import CSV files as described in this guide (https://refine.dev/blog/how-to-import-csv/). The process for JSON would be similar, but you would need to parse the JSON data instead of CSV data.

For checking if items already exist and updating the database, you would need to use refine's data provider methods. Unfortunately, the extracts provided do not contain specific examples of this.

For displaying the results in a table, you can use refine's

Table

Table

component. Here's an example of how to create a table from the documentation (https://refine.dev/blog/manage-hackathons-with-refine/):

K

kapa.ai•11/27/23, 4:21 PM

import {  
 List,  
 Table,  
 useTable,  
 Space,  
 ShowButton,  
 EditButton,  
 TextField,  
} from "@pankod/refine";  
  
import dayjs from "dayjs";  
  
import { HackathonType } from "interfaces";  
  
export const HackathonsList: React.FC = () => {  
 const { tableProps } = useTable<HackathonType>();  
  
 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="name" title="Name" />  
 <Table.Column  
 dataIndex="start"  
 title="Starts"  
 render={(value) => (  
 <TextField value={dayjs(value).format("DD/MMMM dddd")} />  
 )}  
 />  
 <Table.Column  
 dataIndex="end"  
 title="Ends"  
 render={(value) => (  
 <TextField value={dayjs(value).format("DD/MMMM dddd")} />  
 )}  
 />  
 <Table.Column  
 title="Actions"  
 dataIndex="actions"  
 render={(_text, record: HackathonType): React.ReactNode => {  
 return (  
 <Space>  
 <ShowButton size="small" recordItemId={record.id} hideText />  
 <EditButton size="small" recordItemId={record.id} hideText />  
 </Space>  
 );  
 }}  
 />  
 </Table>  
 </List>  
 );  
};

import {  
 List,  
 Table,  
 useTable,  
 Space,  
 ShowButton,  
 EditButton,  
 TextField,  
} from "@pankod/refine";  
  
import dayjs from "dayjs";  
  
import { HackathonType } from "interfaces";  
  
export const HackathonsList: React.FC = () => {  
 const { tableProps } = useTable<HackathonType>();  
  
 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="name" title="Name" />  
 <Table.Column  
 dataIndex="start"  
 title="Starts"  
 render={(value) => (  
 <TextField value={dayjs(value).format("DD/MMMM dddd")} />  
 )}  
 />  
 <Table.Column  
 dataIndex="end"  
 title="Ends"  
 render={(value) => (  
 <TextField value={dayjs(value).format("DD/MMMM dddd")} />  
 )}  
 />  
 <Table.Column  
 title="Actions"  
 dataIndex="actions"  
 render={(_text, record: HackathonType): React.ReactNode => {  
 return (  
 <Space>  
 <ShowButton size="small" recordItemId={record.id} hideText />  
 <EditButton size="small" recordItemId={record.id} hideText />  
 </Space>  
 );  
 }}  
 />  
 </Table>  
 </List>  
 );  
};

import {  
 List,  
 Table,  
 useTable,  
 Space,  
 ShowButton,  
 EditButton,  
 TextField,  
} from "@pankod/refine";  
  
import dayjs from "dayjs";  
  
import { HackathonType } from "interfaces";  
  
export const HackathonsList: React.FC = () => {  
 const { tableProps } = useTable<HackathonType>();  
  
 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="name" title="Name" />  
 <Table.Column  
 dataIndex="start"  
 title="Starts"  
 render={(value) => (  
 <TextField value={dayjs(value).format("DD/MMMM dddd")} />  
 )}  
 />  
 <Table.Column  
 dataIndex="end"  
 title="Ends"  
 render={(value) => (  
 <TextField value={dayjs(value).format("DD/MMMM dddd")} />  
 )}  
 />  
 <Table.Column  
 title="Actions"  
 dataIndex="actions"  
 render={(_text, record: HackathonType): React.ReactNode => {  
 return (  
 <Space>  
 <ShowButton size="small" recordItemId={record.id} hideText />  
 <EditButton size="small" recordItemId={record.id} hideText />  
 </Space>  
 );  
 }}  
 />  
 </Table>  
 </List>  
 );  
};

import {  
 List,  
 Table,  
 useTable,  
 Space,  
 ShowButton,  
 EditButton,  
 TextField,  
} from "@pankod/refine";  
  
import dayjs from "dayjs";  
  
import { HackathonType } from "interfaces";  
  
export const HackathonsList: React.FC = () => {  
 const { tableProps } = useTable<HackathonType>();  
  
 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="name" title="Name" />  
 <Table.Column  
 dataIndex="start"  
 title="Starts"  
 render={(value) => (  
 <TextField value={dayjs(value).format("DD/MMMM dddd")} />  
 )}  
 />  
 <Table.Column  
 dataIndex="end"  
 title="Ends"  
 render={(value) => (  
 <TextField value={dayjs(value).format("DD/MMMM dddd")} />  
 )}  
 />  
 <Table.Column  
 title="Actions"  
 dataIndex="actions"  
 render={(_text, record: HackathonType): React.ReactNode => {  
 return (  
 <Space>  
 <ShowButton size="small" recordItemId={record.id} hideText />  
 <EditButton size="small" recordItemId={record.id} hideText />  
 </Space>  
 );  
 }}  
 />  
 </Table>  
 </List>  
 );  
};

This example shows a table with columns for ID, name, start, and end. You would need to adjust this to match the data in your JSON file.

For more detailed information, I recommend checking out the refine documentation (https://refine.dev/docs/getting-started/overview/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•11/27/23, 4:21 PM

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

O

Omer•11/27/23, 4:34 PM

Hey @silentnyte ,
Perhaps you could take a look at https://csvbox.io or https://tableflow.com.

CSV Importer Tool for Web Apps, SaaS, and APIs | csvbox.io

A drop-in CSV import widget to allow your users to upload spreadsheets, map columns, and validate data all with a few clicks. You receive clean and ready to use data in your web app.

TableFlow | The open source CSV importer

TableFlow is an open source data import platform for companies to collect and transform customer data. Instead of building an in-house file upload and processing service, businesses can embed or link to TableFlow's customizable importer to manage their data onboarding needs.

P

popular-magentaOP•11/27/23, 4:38 PM

Are these built with refine?

O

Omer•11/27/23, 5:01 PM

No