chatbox
profile view
So these are mockups for my social network project.
My question is that when a user logs in he is presented with this view.
There are two parent components THE LEFT PANE and RIGHT PANE.
THE LEFT PANE remains there for the whole session. BUT inside right pane I have to render
Chat box(when someone clicks on a friend from the list).
Pending request Component(When the see pending request button is
clicked)
Search Friends(When make friends button is clicked)
Profile View (When someone clicks on the interactive I button
Priorities:
I do not want to show the change in the address bar when any
component changes. So cannot use Browser Router.
Possible Solution but in doubt
I could use Conditional rendering by attaching some state variable
with each button click and when that button is clicked determining
the state i should render that specific component.
I could use Memory Router in react router in order to keep the code
clean and do not show the change in the address bar.
Help
CAN ANYONE WITH A GOOD EXPERIENCE IN REACT TELL ME IS THERE ANY OTHER WAY OF DOING THIS? AND IF NOT THEN WHICH IS A BETTER OPTION BETWEEN THESE TWO?
Pls refer to the images to get full idea about the situation.
thanks.
P.S. I can only post two links the other two components of pending request and make friends would be loaded the same way inside the right pane.
I think the best way would be to use the memory router Coz it would help to keep your code neat and understandable for reusability
Related
I have a web application that uses ReactJS to handle client side navigation between the pages on the Nav bar. What I want to do next is set up an area of one of these pages in order that it can perform its own navigation and routing that is local to it's own area. Think of this page area as a kind of container for a game type app. My question is what would be the best approach for this? a) have all the navigation within that container handled by manual manipulation of id selectors or b) somehow leverage ReactJS routing just for this enclosed area.
If the answer is (b) I'd appreciate some guidance from all you ReactJS/front end gurus out there who don't mind helping a newbie out.
I've attached an image that hopefully depicts what I'm trying to achieve.
To reiterate: as the user clicks either left or right buttons the contents of the 'content frame' are changed accordingly. My question is if this is a valid use case for react router or would I be better off doing this by manual component rendering?
Page navigation
Cheers
I'm building a single page application with React and Backbone and am trying to figure out best practices for handling navigation between content in the app. My app will have a sidebar with links, for example, to "photos" and "settings". The sidebar is always present, so upon clicking "settings" I want the settings component to be rendered without the entire page reloading. Slack is a great example of what I'm looking for, where clicking a different channel switches the conversation content, but does not reload the entire page.
I had a few ideas on how to implement this, but i'm not sure what's best:
Have a general react component (console.jsx) that accepts a urlparameter as a prop to determine which content (photos or settings) to render.
or 2. have a general react component and define a state variable that represents which content to render.
Any help would be greatly appreciated!
Have you heard about react router? Seems to be what you want.
react router
So I've been going round and round trying to figure out the best way to have a footer that has a hidden panel for actions that slides up. The site is pretty basic, it has a header, content area and footer. I made a simple wireframe to explain this a bit easier:
So ideally the content panel are say something like posts, when clicked I would like to open the Secondary actions panel with the edit form prepopulated with the data from the content panel. If the Icon is clicked I would like to pop that same Secondary actions panel with a blank add new post form. Where I struggle with this is the convention of how to do this and what is the best via AngularJS. The secondary actions panel and footer are wrapped within a FooterController, but the content panels are wrapped inside a separate controller. I'm not sure whether I should be using a directive or a service.
I'm currently utilizing angular-ui-router but this doesn't manage the ui events that I need to happen.
Any advice would be greatly appreciated, I'm very knew to AngularJS so I'm trying to learn the right way of doing things with AngularJS rather than just building some hacked up crap that I'll end up scrapping later on!
Thanks!
I think secondary panel should have its own ui-view (with its own controller) instead of staying inside the footer.
For it to know which item has been clicked, you can pass through the ui-router state.
Let's say your control panel has post id 1234, then it should have a ui-sref="stateName({postId: post.id})"
And this state in ui-router will specify which controller/template it should fire, and inside that controller you can get the id from $stateParams.postId
You can then use the post id to get the post either remotely or from service if you have stored them earlier.
I'm working on my first project in Ionic Framework. The app is using ui-router for state management and ion-side-menu for navigation. Even though states and navigation have been really smooth, I'm having trouble understanding transitions between states and the back button.
Scenario 1: The side menu has a list of the main states in the app and the user can navigate by tapping on them. When they do so and the transition ends successfully, I don't want the back button to appear at the top left instead of the side menu toggle. I want to see the toggle and the side menu again.
Scenario 2: When the user submits a post, I want the user to transition into the 'My Posts' state with the newly created post at the top (I already achieved this resolve in the state). So after the post is submitted I have: $state.go('app.myposts.list'); When the 'My Posts' is rendered, I see the back button at the top again, but I want the user to see the menu toggle.
I read the docs on both side-menu and ui-router, and $ionicHistory but I haven't been able to find the answer for what the true logic of this is. Can anyone help me?
Thanks in advance!
I'm wondering what the best way is to handle a list of items and displaying an item detail when a user clicks/selects one of the items. An example of this would be showing a list of email messages in the left sidebar and showing the message details in the main content area when a user clicks on one of the messages.
Using #pangrantz's great answer on how to mark active menu item using router infrastructure I was able to come up with a working example: jsFiddle
But there are a couple things that don't seem quite right:
First, in #connectOutlets in the Router's show state, I'm setting the selected message on the controller as well as connecting the outlet with the same object. I would think I could do one or the other.
connectOutlets: function(router, context) {
router.set('messagesController.selected', context);
router.get('applicationController').connectOutlet('message-details', 'messageDetails', context);
}
Second, I'm transitioning to the same state from both the index and show states. I'm not even sure I want to be transitioning to a new state - I just want to hook up the outlet.
showDetails: Ember.Route.transitionTo('show')
Is there anything I can change to make this code more idiomatic? Thanks!
This code looks pretty idiomatic to my eyes. You are right, you do not need to set the selected message. When you connect the outlet for message details it will set the selected message as content on the message details controller.
You should IMO be transitioning from a index to a show state as this is good RESTful practice and also allows users to bookmark individual messages. I would make the URL to the index state be '/messages' rather than '/'.