How to prevent table from refreshing when clicking on edit button with usego?

11 Replies

Hi @daw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The information provided does not contain any details about a usego function or method in the context of Refine or Ant Design. It's possible there may be a typo or misunderstanding in your question. If you're referring to the useEditableTable hook in Refine with Ant Design, this hook allows you to make a table row editable. You can control the editing state of a row by using the setId function that returns from useEditableTable. This function can be used to put a line to edit mode whenever it's clicked on. Here's an example:

import { List, TextField, useEditableTable } from "@refinedev/antd";  
import { Table, Form, Input } from "antd";  
  
export const PostList: React.FC = () => {  
 const { tableProps, formProps, isEditing, setId } = useEditableTable<IPost>();  
  
 return (  
 <List>  
 <Form {...formProps}>  
 <Table  
 {...tableProps}  
 key="id"  
 onRow={(record) => ({  
 onClick: (event: any) => {  
 if (event.target.nodeName === "TD") {  
 setId && setId(record.id);  
 }  
 },  
 })}  
 >  
 <Table.Column key="id" dataIndex="id" title="ID" />  
 <Table.Column<IPost>  
 key="title"  
 dataIndex="title"  
 title="Title"  
 render={(value, data: any) => {  
 if (isEditing(data.id)) {  
 return (  
 <Form.Item name="title" style={{ margin: 0 }}>  
 <Input />  
 </Form.Item>  
 );  
 }  
 return <TextField value={value} />;  
 }}  
 />  
 </Table>  
 </Form>  
 </List>  
 );  
};

import { List, TextField, useEditableTable } from "@refinedev/antd";  
import { Table, Form, Input } from "antd";  
  
export const PostList: React.FC = () => {  
 const { tableProps, formProps, isEditing, setId } = useEditableTable<IPost>();  
  
 return (  
 <List>  
 <Form {...formProps}>  
 <Table  
 {...tableProps}  
 key="id"  
 onRow={(record) => ({  
 onClick: (event: any) => {  
 if (event.target.nodeName === "TD") {  
 setId && setId(record.id);  
 }  
 },  
 })}  
 >  
 <Table.Column key="id" dataIndex="id" title="ID" />  
 <Table.Column<IPost>  
 key="title"  
 dataIndex="title"  
 title="Title"  
 render={(value, data: any) => {  
 if (isEditing(data.id)) {  
 return (  
 <Form.Item name="title" style={{ margin: 0 }}>  
 <Input />  
 </Form.Item>  
 );  
 }  
 return <TextField value={value} />;  
 }}  
 />  
 </Table>  
 </Form>  
 </List>  
 );  
};

Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-editable-table#editing-by-clicking-to-row) If this doesn't answer your question, could you please provide more details or clarify your question? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

extended-salmon•4mo ago

import React, { useState } from "react"; import FullCalendar from "@fullcalendar/react"; import dayGridPlugin from "@fullcalendar/daygrid"; import timeGridPlugin from "@fullcalendar/timegrid"; import listPlugin from "@fullcalendar/list"; import { useGo, useList } from "@refinedev/core"; import interactionPlugin from "@fullcalendar/interaction"; import { Row, Col, Card } from "antd"; const CalendarList = ({ children }) => { const { data: jobs } = useList({ resource: "jobs", meta: {}, }); const go = useGo(); const handleDateClick = (arg) => { alert(arg.dateStr); }; const handleEventClick = (clickInfo) => { go({ to: { resource: "jobs", action: "edit", id: clickInfo.event.id, }, options: { keepQuery: true, }, type: "replace", }); }; return ( <> <Row gutter={[32, 32]}> <Col xs={24} xl={6}> <Card title="Upcoming projects"></Card> </Col> <Col xs={24} xl={18}> <Card> <FullCalendar height={600} plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, ]} headerToolbar={{ left: "prev,next today", center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek", }} weekends={true} events={jobs?.data?.map((job) => ({ id: String(job.id), title: job.address_street, date: job.scheduled_date, }))} eventClick={handleEventClick} /> </Card> </Col> </Row> {children} </> ); }; export default CalendarList; @kapa.ai why does the calendar view reset when i close or save the record from the edit view?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The behavior you're experiencing is likely due to the navigation action that's being performed when you save or close the record from the edit view. In your handleEventClick function, you're using the useGo hook from Refine to navigate to the edit view of a specific job. When you save or close the record, it's likely that you're being redirected back to the calendar view, which causes the calendar to reset.

const handleEventClick = (clickInfo) => {
    go({
      to: {
        resource: "jobs",
        action: "edit",
        id: clickInfo.event.id,
      },
      options: {
        keepQuery: true,
      },
      type: "replace",
    });
  };

const handleEventClick = (clickInfo) => {
    go({
      to: {
        resource: "jobs",
        action: "edit",
        id: clickInfo.event.id,
      },
      options: {
        keepQuery: true,
      },
      type: "replace",
    });
  };

The keepQuery: true option in your go function call is supposed to keep the query parameters in the URL when navigating. However, if the edit view doesn't have any query parameters that affect the state of the calendar, the calendar will still reset. If you want to maintain the state of the calendar when navigating away and back, you would need to store the state of the calendar (such as the current view and date) in the URL as query parameters, and then read these parameters when rendering the calendar. Unfortunately, the provided knowledge sources do not contain specific examples or instructions on how to achieve this. You might need to refer to the documentation of FullCalendar and Refine for more information on how to manipulate the URL and read query parameters. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

extended-salmon•4mo ago

@kapa.ai does the refine framework offer anything to achieve this?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Refine does provide a useQuery hook that you can use to read and manipulate the URL query parameters. This can be used to store the state of the calendar in the URL and read it when rendering the calendar. Here's a basic example of how you can use the useQuery hook:

import { useQuery } from "@refinedev/core";

// Inside your component
const { setQuery, query } = useQuery();

// To set a query parameter
setQuery("date", "2022-01-01");

// To read a query parameter
const date = query.date;

import { useQuery } from "@refinedev/core";

// Inside your component
const { setQuery, query } = useQuery();

// To set a query parameter
setQuery("date", "2022-01-01");

// To read a query parameter
const date = query.date;

In the context of your calendar, you could use the date query parameter to store the currently viewed date, and then use this date when rendering the calendar. You would need to update this query parameter whenever the date changes, and you might need to use the FullCalendar API to achieve this. However, the provided knowledge sources do not contain specific examples or instructions on how to integrate the useQuery hook with FullCalendar. You might need to refer to the documentation of FullCalendar and Refine for more information on how to use the useQuery hook and the FullCalendar API. Source (https://refine.dev/docs/api-references/hooks/use-query) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

extended-salmon•4mo ago

@kapa.ai useQuery doesnt exist

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. You're correct, there seems to be a misunderstanding. The Refine framework does not have a useQuery hook. I apologize for the incorrect information. Refine provides a set of hooks that can be used to interact with the URL parameters, such as useShow, useTable, and useGo. These hooks can infer parameters from the current URL and update the URL if these parameters change. However, they might not provide the level of control needed to manipulate the URL query parameters directly. For example, the useShow hook can infer resource and id parameters from the current URL, and the useTable hook can infer resource, pagination, filters, and sorters parameters from the current route, and update the current route if any of these parameters changes.

import { useShow } from "@refinedev/core";  
  
export const ShowPage = () => {  
 const { queryResult } = useShow();  
 const { data, isLoading } = queryResult;  
 if (isLoading) {  
 return <>Loading...</>;  
 }  
 return <>{data?.data.name}</>;  
};

import { useShow } from "@refinedev/core";  
  
export const ShowPage = () => {  
 const { queryResult } = useShow();  
 const { data, isLoading } = queryResult;  
 if (isLoading) {  
 return <>Loading...</>;  
 }  
 return <>{data?.data.name}</>;  
};

Source (https://refine.dev/docs/guides-concepts/general-concepts#hooks-5) If you need to manipulate the URL query parameters directly, you might need to use the native React Router useLocation and useHistory hooks or equivalent hooks from the routing library you're using. I apologize for any confusion caused, and thank you for your understanding. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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