Top 10 Examples of "react-admin in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'react-admin' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
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 nullexport 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' && (