I have a custom route:
<Route
exact
path="/assetsBulkCreate"
component={ComponentWithPermissions(AssetsBulkCreate)}
/>
It is used to create assets in bulk:
export const AssetsBulkCreate = ({permissions, ...props}) => {
return (
<Create
resource="assets/bulkInsert"
...
This works.
However, after we hit save the page is redirected to the Dashboard.
I would like to redirect it to the list of the resource assets (which is a different resource).
How can this be done?
P.S. The redirect prop does not let us specify a different resource, so I cannot use list as value there (it does not even work because the custom route does not have a list).
The redirect prop also accept a function. See the documentation
For example:
const redirect = (basePath, id, data) => `/author/${data.author_id}/show`;
export const PostEdit = (props) => {
<Edit {...props}>
<SimpleForm redirect={redirect}>
...
</SimpleForm>
</Edit>
);
You can redirect to the list view. See documentation
export const PostCreate = (props) => {
<Create {...props}>
<SimpleForm redirect="list">
...
</SimpleForm>
</Edit>
);
Related
So in the docs it says just to add a prop on the edit component with an onSuccess / onFailure function and I've done that but navigating to the page to edit throws an error like this:
Warning: Unknown event handler property `onSuccess`. It will be ignored.
code here:
export const AffiliateEdit = (props) => {
const notify = useNotify();
const onSuccess = () => {
notify('Affiliate saved successfully');
}
return (
<Edit {...props} onSuccess={onSuccess}>
<SimpleForm redirect="list">
<ColorInput source="color" />
<TextInput source="name" validate={[required()]} />
<ReferenceInput
source="network_id"
reference="networks"
validate={[required()]}
>
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput
source="reference"
validate={[required()]}
helperText="Please use all lower case, no spaces or underscores e.g affiliatename"
/>
</SimpleForm>
</Edit>
)
};
doc ref here: https://marmelab.com/react-admin/CreateEdit.html
Nvm figured it out, just needed to update react-admin lol
react-admin loads the <Dashboard> at the base "/". And for that reason, the custom page never opens by default because the <Admin> always routes to the dashboard.
I've implemented <PrivateRoutes> to handle authentication and it's a success.The <Login> page is loaded by default, and upon authentication, it routes to dashboard.
Challenge: This process breaks the functionality of Sidebar <links>, like "Users".
// CustomRoutes.js
export default [
<Route exact path="/login" component={LoginPage} noLayout />,
<Route exact path="/forgot-password" component={ForgotPassword} noLayout />,
<Route exact path="/confirm-password" component={ConfirmForgotPassword} noLayout />,
<PrivateRoute path="/" loggedIn={localStorage.getItem("access_token")} component={dashboard} />
];
And then...
// PrivateRoute.js
import React from "react";
import { Redirect, Route } from "react-router-dom";
const PrivateRoute = ({ path, component: Component, ...rest }) => {
const isLoggedIn = localStorage.getItem("access_token");
return (
<Route
path={path}
{...rest}
render={props => isLoggedIn
? <Component {...props} />
: <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
}
/>
);
};
export default PrivateRoute;
Here's how it looks within the main <App>
// App.js
const App = () => (
<Admin
theme={myTheme}
dashboard={dashboard}
authProvider={authProvider}
dataProvider={dataProvider}
customRoutes={customRoutes}
loginPage={LoginPage}
logoutButton={LogoutButton}
forgotPassword={ForgotPassword}
>
<Resource name="users" list={UserList} create={UserCreate} show={UserShow} icon={UserIcon} />
</Admin>
);
export default App;
Please note that the <resource> "users" is not working.
Do I need to add custom route for that too?
Alright, let's debug this step-by-step:
We can take advantage of react-admin directly to handle the authentication via the authProvider.
Once you include the authProvider, react-adminenables a new page on the /login
route, which displays a <Login> form asking for username and password.
You can definitely customize that login page (as I assume you did),
and I advise that you avoid using a <PrivateRoute> since the authProvider redirects all users who aren't yet authenticated to /login.
Kindly note that <Admin> creates an application with its own state, routing, and controller logic.In your code, you added forgotPassword which is not a prop accepted by <Admin.
<admin
// remove this...
- forgotPassword={ForgotPassword}
>
I wonder exactly what error you get in this case, but this is the main bug.
So I'm using the ra-data-json-server as a data provider and the bult in <SimpleForm> component as a form for the <Edit> view, and I'm facing a pretty strange issue, as it says in documentation, when submitted, the <SimpleForm> forces data provider to make a PUT request to the API, but in my case it does not.
Here's my Edit view compnent:
export const UserEdit = props => {
return (
<Edit {...props}>
<SimpleForm>
<ArrayInput source="applications">
<SimpleFormIterator source="applications">
{/* some inputs */}
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Edit>
);
};
And the admin component itself:
export const AdminComp = () => {
return (
<Admin
loginPage={CustomLoginPage}
authProvider={authProvider}
locale="ru"
i18nProvider={i18nProvider}
dataProvider={dataProvider}
>
<Resource
name="students"
list={UserList}
edit={UserEdit}
/>
</Admin>
);
};
And everytime I get into the Edit view and hit the save button it just doesn't do anything.
I managed to make it at least call the update in data provider, but it would call it with the old form data even though it was modified already.
I also tried reinstalling react-admin to the latest version which is what some people reccomended but it didn't help.
I'm using react-admin and trying to create a filter with autocomplete field that will make a query as I type and will only start sending the query when the search criteria length is longer then 2.
I'm currently using shouldRenderSuggestions inside of my AutocompleteInput field but this still send two requests with an empty string in the "nickname" filter, this is the code part:
<AutocompleteInput optionText="nickname" shouldRenderSuggestions={(val) => {
return val.trim().length > 2
}}/>
The thing that happens is when I fill in the first and second letters the GET request is sent but with an empty string in the nickname field,
The string input is for example:"abc":
1ST request:
http://website.loc/clients?filter={"nickname":""}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]
2ND request:
http://website.loc/clients?filter={"nickname":""}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]
3RD request:
http://website.loc/clients?filter={"nickname":"abc"}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]
I want to avoid from sending the first two requests entirely.
The full code of the component:
const PostPagination = props => (
<Pagination rowsPerPageOptions={[]} {...props} />
);
const PostFilter = (props) => (
<Filter {...props}>
<ReferenceInput label="Client"
source="client_id"
reference="clients"
allowEmpty
filterToQuery={searchText => ({ nickname: searchText })}>
<AutocompleteInput optionText="nickname" shouldRenderSuggestions={(val) => {
return val.trim().length > 2
}}/>
</ReferenceInput>
</Filter>
);
const PostsList = props => {
return (
<List {...props} perPage={15}
pagination={<PostPagination/>}
filters={<PostFilter/>}
exporter={false}>
<Datagrid>
<TextField source="nickname" sortable={false}/>
<DateField label="Created" source="created_at" showTime/>
</Datagrid>
</List>
);
};
Edit: same question goes for "search-as-you-type" fields like <TextInput> inside a <Filter> field, I started to ask a new question but realized it will be kind of a duplicate,
This is the code that also sends requests starting from 1 char, in this case there isn't even a shouldRenderSuggestions option to force it to send empty requests
const ClientFilter = (props) => (
<Filter {...props}>
<TextInput label="Search" source="str" alwaysOn/>
</Filter>
);
Live example of code in codesandbox.io
I stumbled upon this issue, too. The best I've come up with so far is a small wrapper component that prevents the ReferenceInput from triggering API requests unless a certain condition is met:
const ConditionalFilter = (props) => {
const { children, condition, setFilter } = props;
const conditionalSetFilter = (val) => {
if (setFilter && condition(val)) setFilter(val);
};
return React.cloneElement(children, { ...props, setFilter: conditionalSetFilter });
};
Used like this:
const condition = val => val.trim().length > 2;
return (
<ReferenceInput
source="…"
reference="…"
shouldRenderSuggestions={condition}
>
<ConditionalFilter condition={condition}>
<AutocompleteInput />
</ConditionalFilter>
</ReferenceInput>
);
Update for react-admin v3: (without the wrapper component, which is no longer necessary/useful)
const condition = (val) => !!val && val.trim().length > 2;
return (
<ReferenceInput
source="…"
reference="…"
filterToQuery={(val) => (condition(val) ? { name: val.trim() } : {})}
>
<AutocompleteInput shouldRenderSuggestions={condition} />
</ReferenceInput>
);
I have a component available at different urls. This is a simplified version of my app.js
<Router>
<Switch>
<Route path="/login"
render={() => {
return <SignUpAndRegister status="login" />;
}}
</Route>
<Route path="/register"
render={() => {
return <SignUpAndRegister status="register" />;
}}
</Route>
</Switch>
<Router>
I pass the status prop and then in the component setState based on the prop value. This works so far but I also need Links within the component that link to other other state. When your on the register page/state I have a link to login. When you're on the login page/state I have a link to register.
This means I have to have a link to change the url and also call a function to setState:
<Link
to="/login"
onClick={() => this.registerOrLogin('login')}
>
Log in
</Link>
How can I have the components state change when a url change is detected? It seems like browserHistory did this prior to v4 but I cant find an up up date solution.
I can set the state within the SignUpAndRegister component when it first mounts and then every time new props are received eg when the url changes.
componentDidMount() {
this.setState({ status: this.props.status });
}
componentWillReceiveProps(props) {
this.setState({ status: props.status });
}