Self PR #1
Self PR #1
Conversation
…d localStorage token
| @@ -0,0 +1,51 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
public routes in order to prevent auth user redirect to login and signup page
| /** | ||
| * Get User Handler | ||
| */ | ||
| getUserHandler = () => { |
There was a problem hiding this comment.
get user information to edit from url query params
| role: { value: role }, | ||
| } = e.target; | ||
| const match = this.getUrlParams(); | ||
| const checkRoleChange = user.data.id === Number(match.params.id) && user.data.role !== role; |
There was a problem hiding this comment.
check if the current user change it role, in order to redirect to proper action
| @@ -0,0 +1,109 @@ | |||
| .pagination { | |||
There was a problem hiding this comment.
some styling for pagination
| @@ -0,0 +1,3 @@ | |||
| import { createBrowserHistory } from 'history'; | |||
There was a problem hiding this comment.
history in order to work with connect router redux redirect methods
| import auth from './auth.reducer'; | ||
| import users from './users.reducer'; | ||
|
|
||
| const rootReducer = combineReducers({ |
There was a problem hiding this comment.
Used separated reducer and mix them
| @@ -0,0 +1,25 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
Separated routes file
| <PrivateRoute path="/users/:id" component={EditUser} allowedRoles={adminRoles} /> | ||
| <PrivateRoute path="/users" component={Users} allowedRoles={adminRoles} /> | ||
| <PrivateRoute path="/home" component={Home} allowedRoles={userRoles} /> | ||
| <Redirect to="/login" /> |
There was a problem hiding this comment.
any other path goes to login page
| const store = createStore( | ||
| connectRouter(history)(rootReducer), | ||
| preloadedState, | ||
| composeWithDevTools(applyMiddleware(routerMiddleware(history), thunk, api, logger)) |
There was a problem hiding this comment.
for dev env, used logger
| @@ -0,0 +1,5 @@ | |||
| if (process.env.NODE_ENV === 'production') { | |||
There was a problem hiding this comment.
used 2 env in order to change different options between them
| const store = createStore( | ||
| connectRouter(history)(rootReducer), | ||
| preloadedState, | ||
| compose(applyMiddleware(routerMiddleware(history), thunk, api)) |
There was a problem hiding this comment.
logger is not used to in prod env
|
|
||
| const initialState = { | ||
| isFetching: false, | ||
| }; |
There was a problem hiding this comment.
created initial state
| let filtered; | ||
| switch (action.type) { | ||
| case GET_USERS_REQUEST: | ||
| return { |
There was a problem hiding this comment.
every action return the state, action and isfetching in order to handle render method data
| isFetching: false, | ||
| }; | ||
| case LOGOUT_SUCCESS: | ||
| localStorage.removeItem('token'); |
There was a problem hiding this comment.
logout remove the token and return an empty user
| isFetching: true, | ||
| }; | ||
| case LOGIN_SUCCESS: | ||
| localStorage.setItem('token', JSON.stringify(action.data.access_token)); |
There was a problem hiding this comment.
login set a new jwt token
| return { | ||
| ...state, | ||
| data: action.data, | ||
| isAuth: true, |
There was a problem hiding this comment.
isauth works to control private routes and menus
|
|
||
| const initialState = { | ||
| isFetching: false, | ||
| isAuth: false, |
There was a problem hiding this comment.
by default the user is not auth
| * @param {Object} payload | ||
| * @return {Boolean} | ||
| */ | ||
| const validate = payload => { |
There was a problem hiding this comment.
validation form by field, using regex and adding a complete array of error to work with errormessage component
| * Get headers | ||
| * @return {Object} headers | ||
| */ | ||
| const getHeaders = () => { |
There was a problem hiding this comment.
get headers method in order to apply auth jwt token for auth routes
| * @param {Object} actionWith | ||
| * @param {Object} store | ||
| */ | ||
| export const api = async (callAPI, next, actionWith, store) => { |
There was a problem hiding this comment.
used async - await feature, more readably
| type: successType, | ||
| }) | ||
| ); | ||
| if (nextType) { |
There was a problem hiding this comment.
in order to dispatch next action defined in action file
| </ul> | ||
| </div> | ||
| )} | ||
| {this.renderPaginate()} |
There was a problem hiding this comment.
separate render pagination for better understanding
|
|
||
| return ( | ||
| <div className="m-2 text-center"> | ||
| <div className="m-2 text-center"> |
| <div> | ||
| {users.filtered && ( | ||
| <div> | ||
| <ul className="list-unstyled"> |
| > | ||
| Delete User | ||
| </button> | ||
| <NavLink className="btn btn-primary" to={`/users/${item.id}`}> |
There was a problem hiding this comment.
redirect to edit user with query param id
|
|
||
| if (users.count <= limitUsers) { | ||
| return ( | ||
| <div className="m-2"> |
There was a problem hiding this comment.
pagination external component
| const { getUsers } = this.props; | ||
|
|
||
| getUsers(data.selected + 1); | ||
| window.scrollTo(0, 0); |
There was a problem hiding this comment.
every time go to next page in pagination scroll to up
| /** | ||
| * Filter user list action | ||
| */ | ||
| filterUserList = event => { |
There was a problem hiding this comment.
Filter user and handle with pagination
| </NavLink> | ||
| </div> | ||
| {user.data && | ||
| !user.isFetching && ( |
There was a problem hiding this comment.
waiting for redux and api return data
| @@ -0,0 +1,13 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
dummy home page to work with different roles
Self Pr