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