I'm trying to filter items in a sidebar according to roles, I tried to do a conditional render in the login submit but I think it didn't work for me, I logged in and showed the items according to role but I clicked on the sidebar and it showed everything again. it eliminated routes but it appeared in the sidebar (it clicked and "page not found" appeared) but the sidebar item did not disappear. I don't know if I should do something in the sidebar or in the routes or login.
You could have the roles into an array and when rendering, check if the user has a specific role.
Example:
{ props.userRoles.indexOf("admin") >= 0? <Component/>:null}
Related
I am trying to implement conditional rendering for our navbar's items depending on what page we're on (i.e. If we are on the chatrooms page, or "/rooms", then we don't want the "Chatrooms" nav item to render in the navbar). What I attempted to do was convert the Navbar into a class component, create a state for the currentPage and set it to window.location.pathname, and then created methods for setting the state and what nav items to render depending on the state, but it always requires me to reload the page when going from one page to another for the conditional logic to fully take effect. Is there a better way of achieving this functionality?
You could use react-router load content without refreshing the page. It's really simple to learn and use and you could probably get it up and running within an hour. You can Add Route components for the main content of the page.
When you route to a different page you could also call a setState function and change the currentPage, which in turn changes the navbar elements.
I have a material-ui drawer, when the user clicks a button to open the drawer I'd like the url to change without a navigation actually happening, if someone visits the url (such as url.com/drawer) they'll land on the page with the drawer already open (or at least in the process of opening).
I would probably put ?drawer=open as a query string parameter rather than have it be a dedicated route. When the button is clicked, navigate to the current route with ?drawer=open appended, either by having the button actually being a styled Link, or using history.push.
Context
I'm building a social network based on a parent/children relationship. It looks like a hierarchical pyramidal tree like this :
User Interface
Here is a first shot at the user interface :
The main part (big white block in the middle) is the user "wall" (as the facebook wall), with some specific fonctionalities.
The top home button is a link to the parent user.
The bottom buttons are links to children users
Navigation Animations / Transitions
I just discovered Meteor and React and feel now able to make the navigation awesome !
The idea is that when you click on a user button (parent or child), the button becomes the central wall div, a new parent user button appears from the top, old children buttons disappear and new children button appaears from aside. If needed, i'll try to make a gif.
The problem
User buttons and member wall are the same component with different state, "parent'/"current"/"child" with associated css class.
Clicking a children button or parent button will change the URL, we will go from "member/iduser1" to "member/iduser2". So the idea is to load the missing components and change the state of the ones already present on the page.
I can pass an array of children ids, the current id and the parent id to the wrapper in order to build the different components, but won't they be completly rebuild ? My goal is just to change their status
I have a list of users and a sidebar
after clicking on a list item, i get a full information about user in a sidebar, but i don't know how to change "url" when a user is being clicked.
I don,t need to render another page, i just need to change window "href" after clicking on a user, this link should be reusable, i mean i can send it to someone and he will see the clicked before user.
react-router-redux package give you a reducer, actions to do what you want.
I have an app with a Sidebar, which is its own module with its own region, and a primaryRegion that can show views from two other modules (a Dashboard view or a Detail view of an item selected from the sidebar).
When an item gets clicked in the Sidebar, it changes its display to show that it's been selected and gets displayed in the primaryRegion.
The problem I'm running into is that I've recently added routes to the app to directly display item details in the primaryRegion and I can't maintain this behavior when going directly to the Detail view for a given item.
Given that only one module can respond to a route, how can I get the Sidebar to select the item designated in the URL and also display that item's Detail view in the primaryRegion without using a global object or introducing race conditions?
Apologies for the lack of code, I'm having a hard time reducing it down to the essential parts while keeping it clear. Hopefully my description is good enough but if not please let me know and I'll provide more detail.
I can think of two options you could try:
Have Detail fire a global event when it renders, and have the Sidebar be listening for that event and highlight the correct item based on the data it gets from that event.
Or have your Sidebar handle the routing and use a variable route to determine what Detail to render. For example, have a route in the Sidebar of 'details/:id': showDetails' and then a function like:
-
showDetails: function(id) {
// highlight item with id === id here
this.primaryRegion.show(new Details(id));
}