ra-core-ee

import { canAccessWithPermissions } from '@react-admin/ra-core-ee';

const authProvider = {
    // ...
    canAccess: async ({ action, resource, record }) => {
        const permissions = JSON.parse(localStorage.getItem('permissions'));
        return canAccessWithPermissions({
            permissions,
            action,
            resource,
            record,
        });
    }
};

import { canAccessWithPermissions } from "@react-admin/ra-core-ee";

const authProvider = {
    // ...
    canAccess: async ({ action, resource, record }) => {
        const permissions = JSON.parse(localStorage.getItem("permissions"));
        return canAccessWithPermissions({
            permissions,
            action,
            resource,
            record,
        });
    },
};

const dataProviderWithRevisions = {
    ...dataProvider,
    getRevisions: async (resource, params) => {
        const { recordId } = params;
        // ...
        return { data: revisions };
    },
    addRevision: async (resource, params) => {
        const { recordId, data, authorId, message, description } = params;
        // ...
        return { data: revision };
    },
    deleteRevisions: async resource => {
        const { recordId } = params;
        // ...
        return { data: deletedRevisionIds };
    },
};

const dataProviderWithRevisions = {
    ...dataProvider,
    getRevisions: async (resource, params) => {
        const { recordId } = params;
        // ...
        return { data: revisions };
    },
    addRevision: async (resource, params) => {
        const { recordId, data, authorId, message, description } = params;
        // ...
        return { data: revision };
    },
    deleteRevisions: async (resource) => {
        const { recordId } = params;
        // ...
        return { data: deletedRevisionIds };
    },
};

// in src/dataProvider.ts
import { addRevisionMethodsBasedOnSingleResource } from '@react-admin/ra-core-ee';
import baseDataProvider from './baseDataProvider';

export const dataProvider = addRevisionMethodsBasedOnSingleResource(
    baseDataProvider,
    { resourceName: 'revisions' }
);

// in src/dataProvider.ts
import { addRevisionMethodsBasedOnSingleResource } from "@react-admin/ra-core-ee";
import baseDataProvider from "./baseDataProvider";

export const dataProvider = addRevisionMethodsBasedOnSingleResource(baseDataProvider, { resourceName: "revisions" });

// in src/dataProvider.ts
import { addRevisionMethodsBasedOnRelatedResource } from '@react-admin/ra-core-ee';
import baseDataProvider from './baseDataProvider';

export const dataProvider = addRevisionMethodsBasedOnRelatedResource(
    baseDataProvider,
    { getRevisionResourceName: resource => `${resource}_history` }
);

// in src/dataProvider.ts
import { addRevisionMethodsBasedOnRelatedResource } from "@react-admin/ra-core-ee";
import baseDataProvider from "./baseDataProvider";

export const dataProvider = addRevisionMethodsBasedOnRelatedResource(baseDataProvider, {
    getRevisionResourceName: (resource) => `${resource}_history`,
});

// in src/App.tsx
import { CoreAdmin } from 'ra-core';
import { dataProvider } from './dataProvider';

const App = () => <CoreAdmin dataProvider={dataProvider}>{/* ... */}</CoreAdmin>;

// in src/App.tsx
import { CoreAdmin } from "ra-core";
import { dataProvider } from "./dataProvider";

const App = () => <CoreAdmin dataProvider={dataProvider}>{/* ... */}</CoreAdmin>;

import React, { ReactNode, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { 
    EditBase, 
    SaveContextProvider, 
    useSaveContext, 
    useResourceContext, 
    useRecordContext,
    type SaveContextValue 
} from 'ra-core';
import { SimpleForm, TextInput, DeleteButton } from 'my-react-admin-ui-library';
import { 
    useAddRevisionAfterMutation, 
    useGenerateChangeMessage, 
    useApplyChangesBasedOnSearchParam,
    useDeleteRevisions,
    useGetRevisions,
    REVISION_FIELD 
} from '@react-admin/ra-core-ee';

export const ProductEdit = () => (
    <EditBase>
        <div style={{ display: 'flex' }}>
            <CreateRevisionOnSave>
                <SimpleForm>
                    <ApplyChangesBasedOnSearchParam />
                    <TextInput source="reference" />
                    <TextInput source="category" />
                    <DeleteWithRevisionsButton />
                </SimpleForm>
            </CreateRevisionOnSave>
            {/* Aside showing the revisions list */}
            <div style={{ marginLeft: '2em' }}>
                <h3>Revisions</h3>
                <RevisionList />
            </div>
        </div>
    </EditBase>
)

// Automatically create a new revision on save
const CreateRevisionOnSave = ({ children }: { children: ReactNode }) => {
    const originalSaveContext = useSaveContext();
    useAddRevisionAfterMutation();
    const generateChangeMessage = useGenerateChangeMessage();

    // Wrap the original save function to add the revision data before saving
    const saveContext = useMemo<SaveContextValue>(
        () => ({
            ...originalSaveContext,
            save: async (record, callbacks) =>
                originalSaveContext.save!(
                    {
                        ...record,
                        // Store the revision metadata in a special field that will be removed by the middleware
                        [REVISION_FIELD]: {
                            message: generateChangeMessage({ data: record }),
                            description: '',
                            authorId: 'john',
                        },
                    },
                    callbacks
                ),
        }),
        [generateChangeMessage, originalSaveContext]
    );

    return (
        <SaveContextProvider value={saveContext}>
            {children}
        </SaveContextProvider>
    );
};

// Applies the changes from a selected revision to the form
// and shows a warning message if the form has been pre-filled
const ApplyChangesBasedOnSearchParam = () => {
    const hasCustomParams = useApplyChangesBasedOnSearchParam();
    return hasCustomParams ? (
        <div
            style={{
                backgroundColor: '#fff3cd',
                color: '#856404',
                border: '1px solid #856404',
                padding: '0.75em 1em',
            }}
            role="alert"
        >
            This form has been pre-filled with the changes from a previous
            revision. You can still modify the data before saving it.
        </div>
    ) : null;
};

// Deletes all revisions when the record is deleted
const DeleteWithRevisionsButton = () => {
    const resource = useResourceContext();
    const record = useRecordContext();
    const [deleteRevisions] = useDeleteRevisions();
    return (
        <DeleteButton
            mutationOptions={{
                onSettled: (_data, error) => {
                    if (error) return;
                    deleteRevisions(resource, { recordId: record?.id });
                },
            }}
            label="Delete with revisions"
        />
    );
};

// Shows the list of revisions for the current record
// with a link to revert to any revision
const RevisionList = () => {
    const record = useRecordContext();
    const resource = useResourceContext();
    const { data: revisions } = useGetRevisions(resource || '', {
        recordId: record?.id,
    });

    if (!revisions) return null;

    return (
        <ul>
            {revisions.map(revision => (
                <li key={revision.id}>
                    {revision.id} - {revision.date} - {revision.authorId} -{' '}
                    {revision.message} - {revision.description} -{' '}
                    <Link
                        to={`/${resource}/${record?.id}/?_change=${JSON.stringify(revision.data)}`}
                    >
                        Load revision
                    </Link>
                </li>
            ))}
        </ul>
    );
};

import React, { useMemo } from "react";
import { Link } from "react-router-dom";
import { EditBase, SaveContextProvider, useSaveContext, useResourceContext, useRecordContext } from "ra-core";
import { SimpleForm, TextInput, DeleteButton } from "my-react-admin-ui-library";
import {
    useAddRevisionAfterMutation,
    useGenerateChangeMessage,
    useApplyChangesBasedOnSearchParam,
    useDeleteRevisions,
    useGetRevisions,
    REVISION_FIELD,
} from "@react-admin/ra-core-ee";

export const ProductEdit = () => (
    <EditBase>
        <div style={{ display: "flex" }}>
            <CreateRevisionOnSave>
                <SimpleForm>
                    <ApplyChangesBasedOnSearchParam />
                    <TextInput source="reference" />
                    <TextInput source="category" />
                    <DeleteWithRevisionsButton />
                </SimpleForm>
            </CreateRevisionOnSave>
            {/* Aside showing the revisions list */}
            <div style={{ marginLeft: "2em" }}>
                <h3>Revisions</h3>
                <RevisionList />
            </div>
        </div>
    </EditBase>
);

// Automatically create a new revision on save
const CreateRevisionOnSave = ({ children }) => {
    const originalSaveContext = useSaveContext();
    useAddRevisionAfterMutation();
    const generateChangeMessage = useGenerateChangeMessage();

    // Wrap the original save function to add the revision data before saving
    const saveContext = useMemo(
        () => ({
            ...originalSaveContext,
            save: async (record, callbacks) =>
                originalSaveContext.save(
                    {
                        ...record,
                        // Store the revision metadata in a special field that will be removed by the middleware
                        [REVISION_FIELD]: {
                            message: generateChangeMessage({ data: record }),
                            description: "",
                            authorId: "john",
                        },
                    },
                    callbacks
                ),
        }),
        [generateChangeMessage, originalSaveContext]
    );

    return <SaveContextProvider value={saveContext}>{children}</SaveContextProvider>;
};

// Applies the changes from a selected revision to the form
// and shows a warning message if the form has been pre-filled
const ApplyChangesBasedOnSearchParam = () => {
    const hasCustomParams = useApplyChangesBasedOnSearchParam();
    return hasCustomParams ? (
        <div
            style={{
                backgroundColor: "#fff3cd",
                color: "#856404",
                border: "1px solid #856404",
                padding: "0.75em 1em",
            }}
            role="alert"
        >
            This form has been pre-filled with the changes from a previous revision. You can still modify the data
            before saving it.
        </div>
    ) : null;
};

// Deletes all revisions when the record is deleted
const DeleteWithRevisionsButton = () => {
    const resource = useResourceContext();
    const record = useRecordContext();
    const [deleteRevisions] = useDeleteRevisions();
    return (
        <DeleteButton
            mutationOptions={{
                onSettled: (_data, error) => {
                    if (error) return;
                    deleteRevisions(resource, { recordId: record?.id });
                },
            }}
            label="Delete with revisions"
        />
    );
};

// Shows the list of revisions for the current record
// with a link to revert to any revision
const RevisionList = () => {
    const record = useRecordContext();
    const resource = useResourceContext();
    const { data: revisions } = useGetRevisions(resource || "", {
        recordId: record?.id,
    });

    if (!revisions) return null;

    return (
        <ul>
            {revisions.map((revision) => (
                <li key={revision.id}>
                    {revision.id} - {revision.date} - {revision.authorId} - {revision.message} - {revision.description}{" "}
                    -{" "}
                    <Link to={`/${resource}/${record?.id}/?_change=${JSON.stringify(revision.data)}`}>
                        Load revision
                    </Link>
                </li>
            ))}
        </ul>
    );
};

import React, { ReactNode, useMemo } from 'react';
import { 
    EditBase, 
    SaveContextProvider, 
    useSaveContext, 
    type SaveContextValue 
} from 'ra-core';
import { SimpleForm, TextInput, DeleteButton } from 'my-react-admin-ui-library';
import { 
    useAddRevisionAfterMutation, 
    useGenerateChangeMessage, 
    REVISION_FIELD 
} from '@react-admin/ra-core-ee';

export const ProductEdit = () => (
    <EditBase>
        <CreateRevisionOnSave>
            <SimpleForm>
                <TextInput source="reference" />
                <TextInput source="category" />
            </SimpleForm>
        </CreateRevisionOnSave>
    </EditBase>
)

const CreateRevisionOnSave = ({ children }: { children: ReactNode }) => {
    const originalSaveContext = useSaveContext();
    useAddRevisionAfterMutation();
    const generateChangeMessage = useGenerateChangeMessage();

    // Wrap the original save function to add the revision data before saving
    const saveContext = useMemo<SaveContextValue>(
        () => ({
            ...originalSaveContext,
            save: async (record, callbacks) =>
                originalSaveContext.save!(
                    {
                        ...record,
                        // Store the revision metadata in a special field that will be removed by the middleware
                        [REVISION_FIELD]: {
                            message: generateChangeMessage({ data: record }),
                            description: '',
                            authorId: 'john',
                        },
                    },
                    callbacks
                ),
        }),
        [generateChangeMessage, originalSaveContext]
    );

    return (
        <SaveContextProvider value={saveContext}>
            {children}
        </SaveContextProvider>
    );
};

import React, { useMemo } from "react";
import { EditBase, SaveContextProvider, useSaveContext } from "ra-core";
import { SimpleForm, TextInput } from "my-react-admin-ui-library";
import { useAddRevisionAfterMutation, useGenerateChangeMessage, REVISION_FIELD } from "@react-admin/ra-core-ee";

export const ProductEdit = () => (
    <EditBase>
        <CreateRevisionOnSave>
            <SimpleForm>
                <TextInput source="reference" />
                <TextInput source="category" />
            </SimpleForm>
        </CreateRevisionOnSave>
    </EditBase>
);

const CreateRevisionOnSave = ({ children }) => {
    const originalSaveContext = useSaveContext();
    useAddRevisionAfterMutation();
    const generateChangeMessage = useGenerateChangeMessage();

    // Wrap the original save function to add the revision data before saving
    const saveContext = useMemo(
        () => ({
            ...originalSaveContext,
            save: async (record, callbacks) =>
                originalSaveContext.save(
                    {
                        ...record,
                        // Store the revision metadata in a special field that will be removed by the middleware
                        [REVISION_FIELD]: {
                            message: generateChangeMessage({ data: record }),
                            description: "",
                            authorId: "john",
                        },
                    },
                    callbacks
                ),
        }),
        [generateChangeMessage, originalSaveContext]
    );

    return <SaveContextProvider value={saveContext}>{children}</SaveContextProvider>;
};

import { EditBase } from 'ra-core';
import { SimpleForm, TextInput } from 'my-react-admin-ui-library';
import { useGenerateChangeMessage } from '@react-admin/ra-core-ee';

const ProductEdit = () => {
    const generateChangeMessage = useGenerateChangeMessage();
    
    const handleSave = (data) => {
        const message = generateChangeMessage({ data });
        // message might be: "Changed name, description" or "Initial revision"
        console.log(message);
    };

    return (
        <EditBase mutationOptions={{ onSuccess: handleSave }}>
            <SimpleForm>
                <TextInput source="name" />
                <TextInput source="description" />
            </SimpleForm>
        </EditBase>
    );
};

import { EditBase } from "ra-core";
import { SimpleForm, TextInput } from "my-react-admin-ui-library";
import { useGenerateChangeMessage } from "@react-admin/ra-core-ee";

const ProductEdit = () => {
    const generateChangeMessage = useGenerateChangeMessage();
    const handleSave = (data) => {
        const message = generateChangeMessage({ data });
        // message might be: "Changed name, description" or "Initial revision"
        console.log(message);
    };

    return (
        <EditBase mutationOptions={{ onSuccess: handleSave }}>
            <SimpleForm>
                <TextInput source="name" />
                <TextInput source="description" />
            </SimpleForm>
        </EditBase>
    );
};

import { EditBase } from 'ra-core';
import { SimpleForm, TextInput } from 'my-react-admin-ui-library';
import { useApplyChangesBasedOnSearchParam } from '@react-admin/ra-core-ee';

const ApplyChangesBasedOnSearchParam = () => {
    const hasCustomParams = useApplyChangesBasedOnSearchParam();
    return hasCustomParams ? (
        <div
            style={{
                backgroundColor: '#fff3cd',
                color: '#856404',
                border: '1px solid #856404',
                padding: '0.75em 1em',
            }}
            role="alert"
        >
            This form has been pre-filled with the changes from a previous
            revision. You can still modify the data before saving it.
        </div>
    ) : null;
};

const ProductEdit = () => (
    <EditBase>
        <SimpleForm>
            <ApplyChangesBasedOnSearchParam />
            <TextInput source="name" />
            <TextInput source="description" />
        </SimpleForm>
    </EditBase>
);

import { EditBase } from "ra-core";
import { SimpleForm, TextInput } from "my-react-admin-ui-library";
import { useApplyChangesBasedOnSearchParam } from "@react-admin/ra-core-ee";

const ApplyChangesBasedOnSearchParam = () => {
    const hasCustomParams = useApplyChangesBasedOnSearchParam();
    return hasCustomParams ? (
        <div
            style={{
                backgroundColor: "#fff3cd",
                color: "#856404",
                border: "1px solid #856404",
                padding: "0.75em 1em",
            }}
            role="alert"
        >
            This form has been pre-filled with the changes from a previous revision. You can still modify the data
            before saving it.
        </div>
    ) : null;
};

const ProductEdit = () => (
    <EditBase>
        <SimpleForm>
            <ApplyChangesBasedOnSearchParam />
            <TextInput source="name" />
            <TextInput source="description" />
        </SimpleForm>
    </EditBase>
);

import { useGetRevisions } from '@react-admin/ra-core-ee';

const RevisionList = ({ recordId }) => {
    const { 
        data: revisions, 
        isPending, 
        error,
    } = useGetRevisions('products', { recordId });
    
    if (isPending) return <div>Loading revisions...</div>;
    if (error) return <div>Error: {error.message}</div>;
    
    return (
        <ul>
            {revisions?.map(revision => (
                <li key={revision.id}>
                    {revision.message} - {revision.date}
                </li>
            ))}
        </ul>
    );
};

import { useGetRevisions } from "@react-admin/ra-core-ee";

const RevisionList = ({ recordId }) => {
    const { data: revisions, isPending, error } = useGetRevisions("products", { recordId });
    if (isPending) return <div>Loading revisions...</div>;
    if (error) return <div>Error: {error.message}</div>;
    return (
        <ul>
            {revisions?.map((revision) => (
                <li key={revision.id}>
                    {revision.message} - {revision.date}
                </li>
            ))}
        </ul>
    );
};

import { 
    EditBase, 
    Form,
    useResourceContext, 
    useRecordContext,
} from 'ra-core';
import { TextInput, DeleteButton } from 'my-react-admin-ui-library';
import { useDeleteRevisions } from '@react-admin/ra-core-ee';

const DeleteWithRevisionsButton = () => {
    const resource = useResourceContext();
    const record = useRecordContext();
    const [deleteRevisions] = useDeleteRevisions();
    return (
        <DeleteButton
            mutationOptions={{
                onSettled: (_data, error) => {
                    if (error) return;
                    deleteRevisions(resource, { recordId: record?.id });
                },
            }}
            label="Delete with revisions"
        />
    );
};

export const ProductEdit = () => (
    <EditBase>
        <Form>
            <TextInput source="reference" />
            <TextInput source="category" />
            <DeleteWithRevisionsButton />
        </Form>
    </EditBase>
)

import { EditBase, Form, useResourceContext, useRecordContext } from "ra-core";
import { TextInput, DeleteButton } from "my-react-admin-ui-library";
import { useDeleteRevisions } from "@react-admin/ra-core-ee";

const DeleteWithRevisionsButton = () => {
    const resource = useResourceContext();
    const record = useRecordContext();
    const [deleteRevisions] = useDeleteRevisions();
    return (
        <DeleteButton
            mutationOptions={{
                onSettled: (_data, error) => {
                    if (error) return;
                    deleteRevisions(resource, { recordId: record?.id });
                },
            }}
            label="Delete with revisions"
        />
    );
};

export const ProductEdit = () => (
    <EditBase>
        <Form>
            <TextInput source="reference" />
            <TextInput source="category" />
            <DeleteWithRevisionsButton />
        </Form>
    </EditBase>
);

// on the publisher side
const [publish] = usePublish();
publish(topic, event);

// on the subscriber side
useSubscribe(topic, callback);

// on the publisher side
const [publish] = usePublish();
publish(topic, event);

// on the subscriber side
useSubscribe(topic, callback);

import  { Form, useCreate, useGetIdentity, useRecordContext } from 'ra-core';
import  { useGetLockLive } from '@react-admin/ra-core-ee';
import { TextInput, SelectInput } from '@components/admin/TextInput';

export const NewMessageForm = () => {
    const [create, { isLoading: isCreating }] = useCreate();
    const record = useRecordContext();

    const { data: lock } = useGetLockLive('tickets', { id: record.id });
    const { identity } = useGetIdentity();
    const isFormDisabled = lock && lock.identity !== identity?.id;

    const [doLock] = useLockOnCall({ resource: 'tickets' });
    const handleSubmit = (values: any) => {
        /* ... */
    };

    return (
        <Form onSubmit={handleSubmit}>
            <TextInput
                source="message"
                multiline
                onFocus={() => {
                    doLock();
                }}
                disabled={isFormDisabled}
            />
            <SelectInput
                source="status"
                choices={statusChoices}
                disabled={isFormDisabled}
            />
            <button type="submit" disabled={isCreating || isFormDisabled}>
                Submit
            </button>
        </Form>
    );
};

import { Form, useCreate, useGetIdentity, useRecordContext } from "ra-core";
import { useGetLockLive } from "@react-admin/ra-core-ee";
import { TextInput, SelectInput } from "@components/admin/TextInput";

export const NewMessageForm = () => {
    const [create, { isLoading: isCreating }] = useCreate();
    const record = useRecordContext();

    const { data: lock } = useGetLockLive("tickets", { id: record.id });
    const { identity } = useGetIdentity();
    const isFormDisabled = lock && lock.identity !== identity?.id;

    const [doLock] = useLockOnCall({ resource: "tickets" });
    const handleSubmit = (values) => {
        /* ... */
    };

    return (
        <Form onSubmit={handleSubmit}>
            <TextInput
                source="message"
                multiline
                onFocus={() => {
                    doLock();
                }}
                disabled={isFormDisabled}
            />
            <SelectInput source="status" choices={statusChoices} disabled={isFormDisabled} />
            <button type="submit" disabled={isCreating || isFormDisabled}>
                Submit
            </button>
        </Form>
    );
};

import { addRealTimeMethodsBasedOnSupabase, ListLiveUpdate } from '@react-admin/ra-core-ee';
import { supabaseDataProvider } from 'ra-supabase';
import { createClient } from '@supabase/supabase-js';
import { CoreAdmin, Resource, ListBase } from 'ra-core';

const supabaseClient = createClient(
    process.env.SUPABASE_URL,
    process.env.SUPABASE_ANON_KEY
);

const dataProvider = supabaseDataProvider({
    instanceUrl: process.env.SUPABASE_URL,
    apiKey: process.env.SUPABASE_ANON_KEY,
    supabaseClient
});

const realTimeDataProvider = addRealTimeMethodsBasedOnSupabase({
    dataProvider,
    supabaseClient,
});

export const App = () => {
    return (
        <CoreAdmin dataProvider={realTimeDataProvider}>
            <Resource name="sales" list={SaleList} />
        </CoreAdmin>
    );
};

const SaleList = () => (
    <List>
        {/* List view */}
        <ListLiveUpdate />
    </List>
);

import { addRealTimeMethodsBasedOnSupabase, ListLiveUpdate } from "@react-admin/ra-core-ee";
import { supabaseDataProvider } from "ra-supabase";
import { createClient } from "@supabase/supabase-js";
import { CoreAdmin, Resource } from "ra-core";

const supabaseClient = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY);

const dataProvider = supabaseDataProvider({
    instanceUrl: process.env.SUPABASE_URL,
    apiKey: process.env.SUPABASE_ANON_KEY,
    supabaseClient,
});

const realTimeDataProvider = addRealTimeMethodsBasedOnSupabase({
    dataProvider,
    supabaseClient,
});

export const App = () => {
    return (
        <CoreAdmin dataProvider={realTimeDataProvider}>
            <Resource name="sales" list={SaleList} />
        </CoreAdmin>
    );
};

const SaleList = () => (
    <List>
        {/* List view */}
        <ListLiveUpdate />
    </List>
);

import { ListBase } from 'ra-core';
import {
    HydraAdmin,
    ResourceGuesser,
    FieldGuesser,
    hydraDataProvider,
} from '@api-platform/admin';
import {
    ListLiveUpdate,
    addRealTimeMethodsBasedOnApiPlatform,
} from '@react-admin/ra-core-ee';

const dataProvider = hydraDataProvider({
    entrypoint: 'https://localhost',
});
const realTimeDataProvider = addRealTimeMethodsBasedOnApiPlatform(
    // The original dataProvider (should be a hydra data provider passed by API-Platform)
    dataProvider,
    // The API-Platform Mercure Hub URL
    'https://localhost/.well-known/mercure',
    // JWT token to authenticate against the API-Platform Mercure Hub
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.obDjwCgqtPuIvwBlTxUEmibbBf0zypKCNzNKP7Op2UM',
    // The topic URL used by API-Platform (without a slash at the end)
    'https://localhost'
);

const App = () => {
    return (
        <HydraAdmin
            entrypoint="https://localhost"
            dataProvider={realTimeDataProvider}
        >
            <ResourceGuesser name="greetings" list={GreetingsList} />
        </HydraAdmin>
    );
};

// Example for connecting a list of greetings
const GreetingsList = () => (
    <ListBase>
        {/* List view */}
    </ListBase>
);

import { ListBase } from "ra-core";
import { HydraAdmin, ResourceGuesser, hydraDataProvider } from "@api-platform/admin";
import { addRealTimeMethodsBasedOnApiPlatform } from "@react-admin/ra-core-ee";

const dataProvider = hydraDataProvider({
    entrypoint: "https://localhost",
});
const realTimeDataProvider = addRealTimeMethodsBasedOnApiPlatform(
    // The original dataProvider (should be a hydra data provider passed by API-Platform)
    dataProvider,
    // The API-Platform Mercure Hub URL
    "https://localhost/.well-known/mercure",
    // JWT token to authenticate against the API-Platform Mercure Hub
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.obDjwCgqtPuIvwBlTxUEmibbBf0zypKCNzNKP7Op2UM",
    // The topic URL used by API-Platform (without a slash at the end)
    "https://localhost"
);

const App = () => {
    return (
        <HydraAdmin entrypoint="https://localhost" dataProvider={realTimeDataProvider}>
            <ResourceGuesser name="greetings" list={GreetingsList} />
        </HydraAdmin>
    );
};

// Example for connecting a list of greetings
const GreetingsList = () => <ListBase>{/* List view */}</ListBase>;

import { hydraDataProvider } from '@api-platform/admin';
import { addRealTimeMethodsBasedOnApiPlatform } from '@react-admin/ra-realtime';

const dataProvider = hydraDataProvider({
    entrypoint: 'https://localhost',
});

function myTransformTopicFromRaRealtime(topic: string): string {
    const [_basename, _resourcePrefix, resource, ...id] = topic.split('/');
    if (!id || id.length === 0) {
        return `/${resource}/{id}`;
    }
    const originId = id[2];
    return `/${resource}/${originId}`;
}

const realTimeDataProvider = addRealTimeMethodsBasedOnApiPlatform(
    dataProvider,
    'https://localhost/.well-known/mercure',
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.obDjwCgqtPuIvwBlTxUEmibbBf0zypKCNzNKP7Op2UM',
    'https://localhost',
    // Pass the custom transformTopicFromRaRealtime function here
    myTransformTopicFromRaRealtime
);

import { hydraDataProvider } from "@api-platform/admin";
import { addRealTimeMethodsBasedOnApiPlatform } from "@react-admin/ra-realtime";

const dataProvider = hydraDataProvider({
    entrypoint: "https://localhost",
});

function myTransformTopicFromRaRealtime(topic) {
    const [_basename, _resourcePrefix, resource, ...id] = topic.split("/");
    if (!id || id.length === 0) {
        return `/${resource}/{id}`;
    }
    const originId = id[2];
    return `/${resource}/${originId}`;
}

const realTimeDataProvider = addRealTimeMethodsBasedOnApiPlatform(
    dataProvider,
    "https://localhost/.well-known/mercure",
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.obDjwCgqtPuIvwBlTxUEmibbBf0zypKCNzNKP7Op2UM",
    "https://localhost",
    // Pass the custom transformTopicFromRaRealtime function here
    myTransformTopicFromRaRealtime
);

import { addRealTimeMethodsBasedOnMercure } from '@react-admin/ra-core-ee';
import { CoreAdmin } from 'ra-core';

const realTimeDataProvider = addRealTimeMethodsBasedOnMercure(
    // original dataProvider
    dataProvider,
    // Mercure hub URL
    'http://path.to.my.api/.well-known/mercure',
    // JWT token to authenticate against the Mercure Hub
    'eyJhbGciOiJIUzI1NiJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdLCJzdWJzY3JpYmUiOlsiKiJdfX0.SWKHNF9wneXTSjBg81YN5iH8Xb2iTf_JwhfUY5Iyhsw'
);

const App = () => (
    <CoreAdmin dataProvider={realTimeDataProvider}>{/* ... */}</CoreAdmin>
);

import { addRealTimeMethodsBasedOnMercure } from "@react-admin/ra-core-ee";
import { CoreAdmin } from "ra-core";

const realTimeDataProvider = addRealTimeMethodsBasedOnMercure(
    // original dataProvider
    dataProvider,
    // Mercure hub URL
    "http://path.to.my.api/.well-known/mercure",
    // JWT token to authenticate against the Mercure Hub
    "eyJhbGciOiJIUzI1NiJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdLCJzdWJzY3JpYmUiOlsiKiJdfX0.SWKHNF9wneXTSjBg81YN5iH8Xb2iTf_JwhfUY5Iyhsw"
);

const App = () => <CoreAdmin dataProvider={realTimeDataProvider}>{/* ... */}</CoreAdmin>;

let subscriptions = [];

const dataProvider = {
    // regular dataProvider methods like getList, getOne, etc,
    // ...
    subscribe: async (topic, subscriptionCallback) => {
        subscriptions.push({ topic, subscriptionCallback });
        return Promise.resolve({ data: null });
    },

    unsubscribe: async (topic, subscriptionCallback) => {
        subscriptions = subscriptions.filter(
            subscription =>
                subscription.topic !== topic ||
                subscription.subscriptionCallback !== subscriptionCallback
        );
        return Promise.resolve({ data: null });
    },

    publish: (topic, event) => {
        if (!topic) {
            return Promise.reject(new Error('missing topic'));
        }
        if (!event.type) {
            return Promise.reject(new Error('missing event type'));
        }
        subscriptions.map(
            subscription =>
                topic === subscription.topic &&
                subscription.subscriptionCallback(event)
        );
        return Promise.resolve({ data: null });
    },
};

let subscriptions = [];

const dataProvider = {
    // regular dataProvider methods like getList, getOne, etc,
    // ...
    subscribe: async (topic, subscriptionCallback) => {
        subscriptions.push({ topic, subscriptionCallback });
        return Promise.resolve({ data: null });
    },

    unsubscribe: async (topic, subscriptionCallback) => {
        subscriptions = subscriptions.filter(
            (subscription) => subscription.topic !== topic || subscription.subscriptionCallback !== subscriptionCallback
        );
        return Promise.resolve({ data: null });
    },

    publish: (topic, event) => {
        if (!topic) {
            return Promise.reject(new Error("missing topic"));
        }
        if (!event.type) {
            return Promise.reject(new Error("missing event type"));
        }
        subscriptions.map((subscription) => topic === subscription.topic && subscription.subscriptionCallback(event));
        return Promise.resolve({ data: null });
    },
};

import { CoreAdmin } from 'ra-core';
import { addLocksMethodsBasedOnALockResource } from '@react-admin/ra-core-ee';

const dataProviderWithLocks = addLocksMethodsBasedOnALockResource(
    dataProvider // original dataProvider
);

const App = () => (
    <CoreAdmin dataProvider={dataProviderWithLocks}>{/* ... */}</CoreAdmin>
);

import { CoreAdmin } from "ra-core";
import { addLocksMethodsBasedOnALockResource } from "@react-admin/ra-core-ee";

const dataProviderWithLocks = addLocksMethodsBasedOnALockResource(
    dataProvider // original dataProvider
);

const App = () => <CoreAdmin dataProvider={dataProviderWithLocks}>{/* ... */}</CoreAdmin>;

import React, { useState } from 'react';
import { useDataProvider, useNotify } from 'ra-core';

const MessageList = () => {
    const notify = useNotify();
    const [messages, setMessages] = useState([]);
    const dataProvider = useDataProvider();

    useEffect(() => {
        const callback = event => {
            // event is like
            // {
            //     topic: 'messages',
            //     type: 'created',
            //     payload: 'New message',
            // }
            setMessages(messages => [...messages, event.payload]);
            notify('New message');
        };
        // subscribe to the 'messages' topic on mount
        dataProvider.subscribe('messages', callback);
        // unsubscribe on unmount
        return () => dataProvider.unsubscribe('messages', callback);
    }, [setMessages, notify, dataProvider]);

    return (
        <ul>
            {messages.map((message, index) => (
                <li key={index}>{message}</li>
            ))}
        </ul>
    );
};

import React, { useState } from "react";
import { useDataProvider, useNotify } from "ra-core";

const MessageList = () => {
    const notify = useNotify();
    const [messages, setMessages] = useState([]);
    const dataProvider = useDataProvider();

    useEffect(() => {
        const callback = (event) => {
            // event is like
            // {
            //     topic: 'messages',
            //     type: 'created',
            //     payload: 'New message',
            // }
            setMessages((messages) => [...messages, event.payload]);
            notify("New message");
        };
        // subscribe to the 'messages' topic on mount
        dataProvider.subscribe("messages", callback);
        // unsubscribe on unmount
        return () => dataProvider.unsubscribe("messages", callback);
    }, [setMessages, notify, dataProvider]);

    return (
        <ul>
            {messages.map((message, index) => (
                <li key={index}>{message}</li>
            ))}
        </ul>
    );
};

import React from 'react';
import { useDataProvider, useNotify } from 'ra-core';

const SendMessageButton = () => {
    const dataProvider = useDataProvider();
    const notify = useNotify();
    const handleClick = () => {
        dataProvider
            .publish('messages', { type: 'created', payload: 'New message' })
            .then(() => notify('Message sent'));
    };

    return <button onClick={handleClick}>Send new message</button>;
};

import React from "react";
import { useDataProvider, useNotify } from "ra-core";

const SendMessageButton = () => {
    const dataProvider = useDataProvider();
    const notify = useNotify();
    const handleClick = () => {
        dataProvider
            .publish("messages", { type: "created", payload: "New message" })
            .then(() => notify("Message sent"));
    };

    return <button onClick={handleClick}>Send new message</button>;
};

const publish = usePublish();
publish(topic, event, options);

const publish = usePublish();
publish(topic, event, options);

import { useInput, useGetIdentity } from 'ra-core';
import { usePublish } from '@react-admin/ra-core-ee';

const MessageInput = ({ channel }) => {
    const [publish, { isLoading }] = usePublish();
    const { id, field, fieldState } = useInput({ source: 'message' });
    const { identity } = useGetIdentity();

    const handleUserInput = event => {
        publish(`chat/${channel}`, {
            type: 'typing',
            payload: { user: identity },
        });
    };

    return (
        <label htmlFor={id}>
            Type your message
            <input id={id} {...field} onInput={handleUserInput} />
        </label>
    );
};

import { useInput, useGetIdentity } from "ra-core";
import { usePublish } from "@react-admin/ra-core-ee";

const MessageInput = ({ channel }) => {
    const [publish, { isLoading }] = usePublish();
    const { id, field, fieldState } = useInput({ source: "message" });
    const { identity } = useGetIdentity();

    const handleUserInput = (event) => {
        publish(`chat/${channel}`, {
            type: "typing",
            payload: { user: identity },
        });
    };

    return (
        <label htmlFor={id}>
            Type your message
            <input id={id} {...field} onInput={handleUserInput} />
        </label>
    );
};

const [publish, { isLoading, error, data }] = usePublish();

const [publish, { isLoading, error, data }] = usePublish();