Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Update list programmatically #6318

Closed
Bossieh opened this issue May 31, 2021 · 2 comments
Closed

Feature request: Update list programmatically #6318

Bossieh opened this issue May 31, 2021 · 2 comments

Comments

@Bossieh
Copy link

Bossieh commented May 31, 2021

I would love a way to programmatically update a specific list.

On my "Edit machine" page I have multiple tabs, a couple tabs have a List component with related records.

On one tab I have added a button to add a user via a Dialog so the user can stay on the same page, I used this article as inspiration: https://marmelab.com/react-admin/AdvancedTutorials.html#custom-forms-and-ui-for-related-records

After a user is added I call useRefresh() to update the list, but useRefresh() refreshes everything instead of only the users List.

Some simplified code to demonstrate what I mean:

const MachineEdit = (props) => {
    const [showAddUserDialog, setShowAddUserDialog] = useState(false);

    return (
        <Edit {...props} undoable={false}>
            <TabbedForm {...props}>
                <FormTab label="Machine">
                    ...
                </FormTab>
                <FormTab label="Users">
                    <AddUserDialog
                        open={showAddUserDialog}
                        onClose={() => {
                            setShowAddUserDialog(false)
                        }}
                        onSuccess={() => {
                            setShowAddUserDialog(false)
                            // <<<<<<<<<< here i would like to trigger the list below to update
                        }}
                        machineId={props.id}
                    />
                    <Button
                        size="small"
                        label="Toevoegen"
                        onClick={() => {
                            setShowAddUserDialog(true);
                        }}
                    >
                        <AddIcon/>
                    </Button>
                    <List
                        {...props}
                        style={{
                            width: '100%'
                        }}
                        resource="machine-users"
                        filter={{
                            machineId: props.id
                        }}
                        actions={<UserListActions props={props} machineId={props.id} />}
                    >
                        <Datagrid rowClick="edit">
                            <TextField source="id"/>
                            <ReferenceField
                                reference="users"
                                source="userId"
                                target="id"
                            >
                                <TextField source="email"/>
                            </ReferenceField>
                        </Datagrid>
                    </List>
                </FormTab>
            </TabbedForm>
        </Edit>
    )
}
@Bossieh Bossieh changed the title Update list programmatically Feature request: Update list programmatically May 31, 2021
@fzaninotto
Copy link
Member

#6237, to be released in the next minor release, exposes a refetch callback to refresh just the dataProvider call you want.

@Bossieh
Copy link
Author

Bossieh commented Jun 14, 2021

According to the documentation I should be able to get a callback to refresh the list data:

https://marmelab.com/react-admin/doc/3.16/List.html#uselistcontext

I am using 3.16 but it seems like the callback is not implemented yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants