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
Related
I have a component that is a navigation bar. The navigation bar persists within all screens in specific parts of my project, and is the highest level component at all given times.
Is it possible to somehow get a page-change event (so if I go from say, /main/viewer to /main/documents ) without having a callback triggering a pagechange going from navigation bar all the way down to the viewer component?
These components are nested in each other, as the NavBar displays main screen, which then directs to different component for different screens, which in turn have components that call different screens based on buttons pressed, etc etc.
I'm trying to get the simplest way to get a page-change event, so that I can trigger a function in viewer, which prompts to save any edits done, if page is about to be changed through the nav-bar (or another means) and not via a button in the viewer.
currently, I navigate between pages/components by using this.,props.history and then either .push("path", props) and .goBack() which is usually the last line on a function to handle exiting the component.
I have written a react component composed of two child components. All three are functional components which utilize hooks.
Think of a visit to Amazon searching for a video card. On the left are filters you might use: resolution, type of connection, number of connections, etc. As you choose filter values the component to the right displays applicable thumbnails for those items matching your selected criteria.
When clicking on one of the thumbnails, the parent and children (filter and thumbnails) windows are replaced with a detail component. The original window is not visible. Hitting the back key, the original components, including the selected filters and thumbnails, should be as before.
However, when hitting the back-key, the original component with its children displays without any of the selected filters.
I am using react v16.11.0 and react-router-dom v5.1.2.
Clearly I am lost. Can anyone suggest an approach?
I used rather than . The router was not recording the transition in history. I was already at the route to which I wished to navigate before hitting the back-key.
I have four buttons and each button displays different information such as text, photos, map etc. I want to press a button and display information below it without navigating to a new screen.
Make each button set the component state, and have your render method query that state. Based on what the state is, you render method can display different components.
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.
I should create ExtJs4 app, which should have main menu, and each menu item should open a new page with different url, so if the user copies the url and pastes on other browser tab, the app should open that menu item.
I want to use ExtJs's recommended MVC architecture, but I don't know how I can use it with multiple pages/urls. All their examples are using single page.
One option is to reload the page each time when the user clicks on particular menu Item, so every url/menu item/page will be separate ExtJS app with it's MVC. But I think this approach has drawbacks, since the page will be reloaded every time and it's not good for performance. Also it's causes difficulties in reusing of components (common models, stores and views for different pages ).
So I would like to have one single app for all pages, but I don't know is there any solution to have different urls for different views (in my case: for different menu items).
Or is there another approach for such applications?
You would probably want to use a Viewport, and make the Center Region a Container.
The Center Region Container would usually have a Card or Tab layout.
When the user navigates to a new view (Component), you add that view to the Container, and make it active.
The big mistake is to change the URL first. You don't want to do that.
You want to navigate, and then set the URL if the navigation was successful. You should probably not use ExtJS's History component, as it is incorrectly implemented. I would recommend using HTML5 pushState.
You should make sure your navigation system works without changing the URL bar too.
I would recommend reading up on Navigation in Microsoft Prism, WPF, and Silverlight, as there is more documentation there, and then apply that to ExtJS.
http://msdn.microsoft.com/en-us/library/gg430881(v=pandp.40).aspx
Here is an example Navigation process:
call app.requestNavigate('contacts/5'); you would add this yourself.
you parse this fragment to:
navigationContext = {
fragment: 'contacts/5',
xtype: 'contacts-form',
parameters:{
id: 5
}
}
OPTIONAL: If using forms:
get active item from the navigation region (your center region). if exists, call confirmNavigationRequest(callback) . you will need to add this method or event.
if callback(true), proceed with the navigation. this allows the user to cancel a navigation, if say the form is "dirty"
END OPTIONAL
the easy way is to then create a new widget of navigationContext.xtype, add it to the navigation region, then call setActiveItem(widget). destroy the previous active item if it existed.
then call history.pushState(null, null, navigationContext.fragment)
then raise a 'navigatedto' event on the view, passing the context, and you can load the data from there.
More advanced scenarios include:
keep the previous component alive if you expect to return to it. add a keepAlive property and if true, don't destroy when add new components to container.
search the container and ask each component if it wants to handle the current navigation request (for example if a form loaded with contact-5 was already hidden in your navigation region, or if you want to re-use a form)