React Router - Nested Routes for Sidebar - javascript

I have a question regarding routing in a react client CMS app that I'm working on. We use react-router but this question has to do with routing in general.
While the user visits a page of a website, we have a drawer/sidebar which allows the user to manage basic entities of the website like pages, media, users etc. Currently we are using redux actions to show/hide elements in the page. We found this a little bit confusing and not very practical. We want to change that and to move this navigation functionality to the router. We use react-router of course.
We are thinking to add some additional routes to the app in order to keep the currently visible page in the url. For example consider that the user opens the app and visits a page:
#app/page/someflag
Now consider that the user wants to manage users:
#app/page/someflag/manage/users
In this case a sidebar/drawer appears with a list of the users and when we click to edit one of them we can have a route like:
#app/page/someflag/manage/users/edit/10
Do you thing these routes are ok? Any suggestions?

Related

How to have same URL for home feed but also for login page if user is not logged in?

So I am working on a PERN stack app (postgresql, expressjs, reactjs, nodejs).
And I was wondering... How does facebook or instagram code the thing where, If I am logged in, the url: www.instagram.com shows my feed, but if I am not logged in, www.instagram.com shows the login page (without changing the url to something like instagram.com/login or similar...)
So my question is, how do they do this?
I have tried looking into solutions with react router, and couldn't find any :/...
I think this could be done by changing the state of the app but thats not how I would like to resolve the routing on my app.. (it's a social media kind of app)
As a general logical flow, I would suggest the following:
Define a home route i.e the app base url (/) such that it's a common route for both authorized and non-authorized pages. This should also be the root route component in the react-router.
Check user session/authentication in the home route as the first step:
If the user is authenticated, render authorized components and sub-routes eg: /profile, /account, etc.
Else, render public components which is usually the login/signup pages.
On logout, redirect the user back to home route (/).
This is a very high-level flow which is usually pretty much the same regardless of the stack you use.

React UniversalRouter prevent user leaving the page

I am currently using UniversalRouter for routing in a react application that contains a form and other UI elements to allow users with admin permissions to make changes to data within the app for other users to see. I would like to be able to detect when a user is about to leave the page so that I can display a warning and give the user a choice to save their changes or abandon them.
I have seen other results that seem to address this problem for React-Router, but I have yet to find any results for achieving this using UniversalRouter.
In looking back at one of the blog posts where I discovered UniversalRouter, it seems like this would be something that I would need to implement by communicating with redux (i.e. by subscribing to state changes) rather than through the router directly.
I'll keep looking into this and self-answer if I get something working, but I would be very interested to know if anyone else has already implemented this 'warn the user about unsaved changes when they're about to leave the page' functionality in an app that uses UniversalRouter.

Updating header after log in

I created a shopping website in reactjs where I have divided the app.js file in to header ,routes and footer.the router is by default redirected to welcome page.But after I login I am redirecting my page to the same welcome page.but then I am not able to update my header with user name and logout by updating the existing nav.i know it is because of the fact that the header is not getting rerendered.But can some one help me to some how make it rerender?
You shoud use redux.
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in
different environments (client, server, and native), and are easy to
test. On top of that, it provides a great developer experience, such
as live code editing combined with a time traveling debugger.
You can use Redux together with React, or with any other view library.
It is tiny (2kB, including dependencies).
There are many topics about redux.
there is a function called: mapStateToProps.
suppose you have a action (login,logout,addToCart,removeToCart etc.) at A component.
You want to B and C listen to your actions. for example when user do logout, you want to remove username of your header. at this here redux helps you!

What is the best practice for multiple user panels in Angular2

I will start with a new large project. I will use Angular2 but I don't know what is the best practice for a project that includes multiple user panels. I need your experiences and advice.
The project will have a landing page. On the landing page also will be a login form. If user information (username-password) are correct the user will be redirected to the panel as the type of the user. If the user an administrator, will be redirected to Admin Panel (dashboard), if not will be redirected to User Panel.
My question is:
What is the best practice to build such kind of project?
Each panel and the landing page as a separate Angular App
localhost (landing page app)
localhost/admin (admin panel app)
localhost/user (user panel app)
Or
All in one Angular App that includes landing page and other user panels in it
localhost (one app with all features)
This project will have many user types (admin, student, teacher, parent for now) and each type will have a panel with absolutely different features.
You can define your routes with the router, and you can use a guard to assign to these routes.
The guard can implement the logic you need for your several user roles.
The basic example is a guard for a route that activates only if the user is logged in. You can go further and then define your roles with a service and then guard your routes depending on the user role from the service.
The official documentation is pretty good : https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

Angular2 Bootstraping two application one ofter other in same page

I am working on a project in angular2. It has two part, first part is login and other is dashboard. I want to develop login part in one app and the dashboard part in other app.
The problem is, I cant not load dashboard app after login app in same page.
I found a link in which they Bootstrap two application in same page, But I want to load one app at the time in same page.
The link in which they Bootstrap two app in same page is:
Bootstrapping multiple Angular 2 applications on the same page
Main purpose for doing so: Security
Suppose the user wants to log in, I want the Dashboard app get bootstrapped by Angular2 separately.
Why I'm not using separate components is because I don't want to expose other components that are loaded along side the Login component.
I see two main options here (I'm sure there are others):
Option 1: Separate apps for login and dashboard
You could make your login and dashboard app each have their own urls, e.g. https://myhost:1234/login and https://myhost:1234/dash.
When users try to go to /dash, the server checks if they are logged in, and redirects to /login if they are not. When users log in through /login, the server sets up the session, then redirects to /dash.
Option 2:
Use a guard on the router, that prevents the user from navigating to dashboard unless they are logged in.
See the TempHire Sample Application for an example using guards. In this example, the guard performs an ajax call to the server, and uses the response to determine whether to proceed. (The response also brings the Breeze metadata to the client, but that's because it's a Breeze app.)

Categories