I have a question regarding the architecture of an React application.
The application consists from main widget and a few other child widgets. Each of them may have other child widgets too. The widgets don't know what do they do, neither how many they are (they are provided by the user).
Here is an example:
In the picture below there are initially two widgets, each of them have several child widgets.
On step #1 the two widgets are visible and they have a few child widgets too.
On step #2 the user clicked somewhere on the page. Because of that, another child widget appeared in the first widget.
On step #3, user clicked in some of the child widgets in widget 2. In this case, only this widget should appear. The others in widget 2 should disappear.
On step #4 clicking on a child widget in widget 2 should cause that widget 1 will disappear entirely.
The question is - how do we manage this situation? I imagine clicking on child widget or somewhere on the page should notify the root so it will add a new widget or skip rendering of the other ones. However, I can't really imagine what to put in the state and how exactly to achieve this.
So, here is how we did it in the end of the ends:
We invented so called "exclusive mode" of an widget. The parent component passes a callback function via properties. Then, a child widget may request to be rendered in "exclusive mode".
When rendering in exclusive more is being requested, the parent renders only those widget, which key matches with the key of the widget, requested exclusive access.
In this way, only one Toolbar may be rendered or only some button may be rendered in given Toolbar.
Related
In my React app, I have tabs at the top of the app, a sidebar for navigation and a section to the right of the sidebar, and below the tabs that show content. When the user clicks on a tab, the sidebar loads its navigation data from the backend. Then after loading it, by default it selects the first item in the sidebar and loads the content details. The content details are made up of different components and several backend calls may need to be made.
What I would like to do is display a progress bar just above the tabs which is shown the moment the user clicks on the tab. The progress bar is only dismissed after the entire content for both the sidebar and content details has been loaded. The sidebar and content details do not update or are even shown until they have completely retrieved all their data from the backend and done any other initialization.
Determining exactly when all the content has been loaded is tricky as each component in the sidebar and content details are responsible for retrieving data from the backend. The only solution I could think of is for each component to implement a publisher/subscriber mechanism. Each parent component notifies each child component that it needs to load its data. When the child component receives this notification and has retrieved its data from the backend and finished any other initialization, it then notifies the parent that it has completed. Only when the top-level component gets all notifications from all its direct children, does it then dismiss the progress bar and cause the content to be displayed.
Another possible approach is to have only the first child component retrieve all the data from the backend on behalf of all the descendent components and cache it in the local repository. This would eliminate the need for descendent components from having to call the backend and could quickly just retrieve the data from the local repository. But there is still the issue of initializing each nested component. If I show the entire content while it is still in the initialization phase, the user would notice this. Still, I suspect React renders most stuff so fast that users will probably not notice it.
I'm not sure if this is the approach I should be taking or if there is something more inherent in React that handles this.
A similar website where you can see this is at Google's:
https://fuchsia.dev
although this site probably has much fewer backend calls than the one I am working on. But in general, this is close to what I am looking to achieve.
Your solution with the subscriber pattern will work fine, but if you want something less complex, there are two common approaches:
If you are using redux, every child component dispatches that it is loading data right now with their unique id. When it finishes (or component is unmounted), it dispatches an action to remove the loading information. Parent component just checks redux store, if there is anything loading.
The second approach without redux is to pass a callback to the child components from the parent through props. This callback expects two parameters: unique id and bool value representing if the child components starts/finishes loading. When the child component starts loading, it calls the callback from the parent with a unique id and value true. When the child component finishes loading, it calls the callback again with the same unique id and value false. Parent component set to its state which child components are loading and renders the loading accordingly.
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 am using custom Directive's approach in AngularJS for making dashboard with widgets and for widgets m using angular-gridster
(https://github.com/ManifestWebDesign/angular-gridster).
Requirements:
On right side menu created by custom directive is present.and for routing purpose UI Router in used.
1-I need to open a dashboard firstly empty.
2-when click to Menu1 one widget is opened with data from state menu1 and same for Menu2
3-when 2nd option is clicked another widget added to dashboard without affecting previously opened one and so on.
4-all the widgets have independent data.and navigation in each widget is according to the respective menu.
WorkFlow:
1-empty dashboard is opened via custom directive.
2-widgets are added by providing click event to menu1 and menu2.which will broadcast event.and against that click event a widget is added to widgets array holding information about that widget.
Problem:
problem is routing basically.till now there is no routing involved.info is passed by broadcasting a click event.and by this i have achieved this coloured area.
but the further navigation creates problem.when a state changes by clicking Menu1 or Menu2 it affects both the widgets and and ui-view portion in both widgets show same data.if Menu1 is clicked both widgets show data from Menu1 and vice versa.
Now.i have tried enough solutions but here i want an idea from ui router experts or custom directives' experts.cz i hv tried many possible ways and stuck here for almost a week.
Thanx very very much if anyone can help.
There is a similar question already answered (more than once) How to set default child view with Angular UI Router. I am not sure how can the answer which is based on an non-intuitive rule:
Using an empty url means that this child state will become active when its parent's url is navigated to. Urls of child states are automatically appended to the urls of their parent.
be further extended to include the solution for my case where I want the grand-child state become active when the grand-parent is selected. Specifically, I have the abstract state named 'root', then one of its first level children is named 'root.son" which has several children of its own: 'root.son.grandson1', ', 'root.son.grandson2', etc.
Here is the graphical depiction of this same situation:
Instead I want the content of the Overview tab (grandson of Health Data) to be which as the consequence of the click on Health Data Menu Item as shown below:
Note that this second image was created by clicking on the "Overview" tab in the situation depicted on the first image.
Loading multiple child forms from a loop into a MDI parent form. They are displayed one at a time. I would like to display all the created forms at once. I tried only using the .Show() method after they are all created, but they still only display one at a time.
Perhaps layouting your children forms using the MdiLayout Enumeration.