I am using admin-on-rest in my React app and wonder how is possible to make a custom page containing Show (or another detail component) with specified resource Id (for example: I want my app to fetch only resource with id = 1)
I don't know if this is canonical or the intended way to do things but you can supply both basePath and record as props to the ShowButton and EditButton components.
You can use this to redirect your user basically anywhere.
It should be possible (using some switch case or dependent input addon) to also add these props to the ListButton in the Show and Edit view and redirect your user back to the originating ListView.
Here is documentation to supply actions to the List view.
https://marmelab.com/admin-on-rest/List.html#actions
Related
So I have a Create Order page where you can add a part number, quantity, etc... and then you can click Save where it will then save this order to the backend. I have another page called Saved orders that renders all these saved orders in separate rows in a table with a "Edit" button next to each one. When you click "Edit" it should redirect you to the Create Order page, but instead of being empty, it should be populated with all the information for that order. So if you want you can add more items, change quantity, etc.. How would I do this? I am looking for a conceptual answer.
So here is the idea, we don't pass lots of data via routes or even props etc. What we can do here is use the unique id or any other property and based on that we'll get our data and use it. There can be multiple ways to do this, I'll give you 2:
Little setup
Make a route for Edit which takes id as a param, so that for each edit we have a dynamic route, something like this:
<Route exact path="/order/edit/:id component={CreateOrder} />
(assuming CreateOrder is the name of the destined component).
Now your edit button should redirect to the relevant route upon click. For Class based component, you will have your button something like this:
<button onClick={()=>this.props.history.push(`/order/edit/${id}`)} />
and on CreateOrder Component, get the value of id param in componentDidMount (class based) or useEffect hook (function based).
for class based, you'll use this.props.match.params.id
for function based, you can use useParams() hook, like
let {id} = useParams()
As you are using same component for Creating and Editing, so apply a check on the basis of id, so if id is not null, treat your component as Edit otherwise Create.
if Edit, then either
Make an API Call
use your id to make a get request which will get all the fields for that particular order, and then set it into your State,
OR
Use Browser Storage
use browser localStorage or any state management tool like Redux, MobX etc and instead of calling an API get data for that particular id by using Array.find()
Based on your needs you can pick any option.
If a user goes to a page that requires a context beyond what's on the url, I'd like to redirect them elsewhere. The use case is:
/todos/list - this page shows the user their list of todos. It contains links to:
/todos/edit?id=1 - this page allows the user to view/edit details about a particular todo.
If a user were to go directly to /todos/edit (with no id), I'd like to redirect them to /todos/list. I have tried doing this via navigate('list') conditionally in the constructor. This does update the browser url correctly, but it doesn't render the /todos/list page. Is this possible to do? Or is this not possible to do the para below?
I understand the more common url would be /todos/edit/1 so that reach router would handle my issue w/out me needing to deal with it. However, I'm just using this as an example of a piece of information required to render the page that isn't necessarily part of the the url path.
of course as soon as I type the question in stackoverflow, I find the answer is in the docs right in front of my face:
https://reach.tech/router/api/Redirect
I have a dropdown which will a client list. Based on what i select in the dropdown i want to open a new tab for that particular client. Is there any way to do it?
I tried window.open(), while it works but it appends URl to http://localhost:3000/[object%20Object]. I dont what object to get appended in the URL. TIA
The window.open() method accepts a URL, so passing a component/javascript in the way that you require is not possible.
Consider setting up a route, say /popup-tableau that exclusively renders the <Tableau /> component, and then call:
window.open('/popup-tableau')
The idea here is that your application will open the new window, and a second instance of your application will be started (inside the new window), and directed to the route /popup-tableau which will display the <Tableau /> component in the way you require.
I have a panel on the left hand side of my app.
On the right side, the admin can select a 'User Name'. Once the User Name is selected, i need to get categories of the selected user. From the displayed categories, I can chose one for which it will display all the items.
User Name > categories > items
I also want my url to change accordingly like localhost/users/categories/items
The left side will not change at all in this process, hence I do not want to re-render it. At present I have three pages, with the navigation configured.
Actually I want to place some animations on the right side as an option is clicked. The alternative i found was to define onClick and change the component with some animation - but this kind of does not allow me to change the url.
What is the best way to handle this?
I am using next-js in my react application.
The alternative i found was to define onClick and change the component with some animation...
That's a correct approach.
...but this kind of does not allow me to change the url.
You can user browser's history to manipulate url without page reload.
For instance
const state = {};
const pageTitle = 'My Item';
const url = 'users/categories/items';
history.pushState(state, pageTitle, url);
If you have <a href's /> in your page, you might want to override their behaviour too, otherwise they'll trigger a page reload as well.
I currently have a button that onClicks to history.goBack but I want it to direct the user to another path if there isn't a previous page (in the case the user visits the page directly by typing in the URL in the URL bar instead of clicking within the site to get there). When I checked out this.props.history there isn't an object containing the history of pages visited or a boolean that tells me if there is a page for history.goBack to work on. How do I check that? Looking at the docs for history library, there is suppose to be an entries property but this somehow didn't make it into react-router.
You can use go() property to move further back.
Eg. go(-1) will be equivalent of goBack() and go(1) will be equivalent of goForward().
I don't think there is a way to list all the paths on the stack, but you could allways implement history that you can push to and control.