How to use react-admin - 10 common examples

const composeFilter = (paramsFilter) => {
    const flatFilter = fetchUtils.flattenObject(paramsFilter)
    const filter = Object.keys(flatFilter).map(key => {
      const splitKey = key.split('||');
      let ops = splitKey[1] ? splitKey[1] : 'cont';
      let field = splitKey[0];
      // code below allows multifield filters in react admin (date range for example). Here is an example:
      //
      // 
      //   
      //   
      // 
      if (field.indexOf('_') == 0 && field.indexOf('.') > -1) {
        field = field.split(/\.(.+)/)[1];
      }
      return field + '||' + ops + '||' + flatFilter[key];
    })
    return filter;

const ActiveField = ({ className, source, record = {}, resource, ...rest }) => {
    const notify = useNotify();
    const [checked, setChecked] = React.useState(
        get(record, 'subscription.active')
    );

    const handleChange = (record, resource) => {
        toggleMasterEnable(record, resource)
            .then(({ data }) => setChecked(get(data, 'master_enable')))
            .catch(error => notify(error.toString(), 'warning'));
    };

    // When the page refresh button is pressed, the ActiveField will receive a
    // new record prop. When this happens we should update the state of the
    // switch to reflect the newest IS-04 data
    useEffect(() => {
        setChecked(get(record, 'subscription.active'));
    }, [record]);

export const BatchPlayButton = ({
  resource,
  selectedIds,
  action,
  label,
  icon,
  className,
}) => {
  const dispatch = useDispatch()
  const translate = useTranslate()
  const dataProvider = useDataProvider()
  const unselectAll = useUnselectAll()
  const notify = useNotify()

  const addToQueue = () => {
    dataProvider
      .getMany(resource, { ids: selectedIds })
      .then((response) => {
        // Add tracks to a map for easy lookup by ID, needed for the next step
        const tracks = response.data.reduce(
          (acc, cur) => ({ ...acc, [cur.id]: cur }),
          {}
        )
        // Add the tracks to the queue in the selection order
        dispatch(action(tracks, selectedIds))
      })
      .catch(() => {
        notify('ra.page.error', 'warning')
      })

const ConnectionManagementTab = ({
    controllerProps,
    receiverData,
    ...props
}) => {
    const notify = useNotify();
    const refreshWholeView = useRefresh();
    // we need to force update the sender data without refreshing
    // the whole view
    const [refresh, setRefresh] = useState(true);
    const [filter, setFilter] = useState({
        transport: get(receiverData, 'transport'),
    });
    const [paginationURL, setPaginationURL] = useState(null);
    const { data, loaded, pagination } = useGetList({
        ...props,
        filter,
        paginationURL,
        resource: 'senders',
        refresh,
    });

    // receiverData initialises undefined, update when no longer null

export const BatchPlayButton = ({
  resource,
  selectedIds,
  action,
  label,
  icon,
  className,
}) => {
  const dispatch = useDispatch()
  const translate = useTranslate()
  const dataProvider = useDataProvider()
  const unselectAll = useUnselectAll()
  const notify = useNotify()

  const addToQueue = () => {
    dataProvider
      .getMany(resource, { ids: selectedIds })
      .then((response) => {
        // Add tracks to a map for easy lookup by ID, needed for the next step
        const tracks = response.data.reduce(
          (acc, cur) => ({ ...acc, [cur.id]: cur }),
          {}
        )
        // Add the tracks to the queue in the selection order
        dispatch(action(tracks, selectedIds))
      })
      .catch(() => {

({ selectedIds, albumId, onClose, onItemAdded }, ref) => {
    const notify = useNotify()
    const translate = useTranslate()
    const dataProvider = useDataProvider()
    const { ids, data, loaded } = useGetList(
      'playlist',
      { page: 1, perPage: -1 },
      { field: 'name', order: 'ASC' },
      {}
    )

    if (!loaded) {
      return <menuitem>Loading...</menuitem>
    }

    // TODO: This is temporary, while we don't have the "New Playlist" option in the menu
    if (ids.length === 0) {
      return (
        <menuitem> {</menuitem>

error: null,
        loading: true,
        loaded: data !== undefined && !isEmptyList(data),
        pagination: null,
        url: null,
    });
    if (!isEqual(state.data, data) || state.total !== total) {
        setState(
            Object.assign(Object.assign({}, state), {
                data,
                total,
                loaded: true,
            })
        );
    }
    const dataProvider = useDataProvider();
    useEffect(() => {
        setState(prevState =>
            Object.assign(Object.assign({}, prevState), { loading: true })
        );
        dataProvider[type](resource, payload, options)
            .then(response => {
                // We only care about the dataProvider url response here, because
                // the list data was already passed to the SUCCESS redux reducer.
                setState(prevState =>
                    Object.assign(Object.assign({}, prevState), {
                        error: null,
                        loading: false,
                        loaded: true,
                        pagination: response.pagination,
                        url: response.url,
                    })

({ selectedIds, albumId, onClose, onItemAdded }, ref) => {
    const notify = useNotify()
    const translate = useTranslate()
    const dataProvider = useDataProvider()
    const { ids, data, loaded } = useGetList(
      'playlist',
      { page: 1, perPage: -1 },
      { field: 'name', order: 'ASC' },
      {}
    )

    if (!loaded) {
      return <menuitem>Loading...</menuitem>
    }

    // TODO: This is temporary, while we don't have the "New Playlist" option in the menu
    if (ids.length === 0) {
      return (
        <menuitem> {
            e.stopPropagation()</menuitem>

const PlaylistSubmenu = ({
  isSidebarOpen,
  isToggled,
  name,
  dense,
  handleToggle,
  onMenuClick,
}) => {
  const refresh = useRefresh()
  const [playLists, setPlaylists] = useState([])
  const { data } = useGetList(
    'playlist',
    { page: 1, perPage: -1 },
    { field: 'name', order: 'ASC' },
    {}
  )

  useEffect(() => {
    if (data && typeof data === 'object') {
      const isEmpty = !Object.keys(data).length
      if (!isEmpty) {
        setPlaylists(Object.values(data))
      } else if (isEmpty && playLists.length) {
        refresh()
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps

{data.map(item => (
                                
                                    
                                        {
                                            // Using linkToRecord as ReferenceField will
                                            // make a new unnecessary network request
                                        }
                                        
                                            
                                        
                                    
                                    {QueryVersion() >= 'v1.2' && (