Add notification feature + fixes

Author: lcameroon

App.tsx

@@ -8,12 +8,12 @@ import setupAxiosInterceptors from './src/App/shared/interceptors/axios.intercep
 import initStore from './src/App/store';
 // Screens
 import App from './src/App';
-import Dashboard from './src/App/features/Home/containers/DashboardContainer';
+import Home from './src/App/features/Home/containers/HomeContainer';
 
 const RootStack = StackNavigator(
  {
  App,
- Dashboard
+ Home
  },
  {
  initialRouteName: 'App'

package.json

@@ -48,6 +48,7 @@
  "react-redux": "^5.0.7",
  "react-redux-loading-bar": "^4.0.5",
  "react-router-dom": "^4.3.1",
+ "react-toastify": "^4.1.0",
  "reactstrap": "^6.3.0",
  "redux": "^4.0.0",
  "redux-form": "^7.4.2",
@@ -108,4 +109,4 @@
  "^.+\\.tsx?$": "ts-jest"
  }
  }
-}
+}

src/App/features/Admin/UserManagement/actions/index.ts

@@ -7,6 +7,7 @@ import {
 } from 'react-jhipster';
 
 import { IUser } from '../models/user.model';
+import appConstants from '../../../../shared/constants';
 
 export const ACTION_TYPES = {
  FETCH_ROLES: 'userManagement/FETCH_ROLES',
@@ -19,6 +20,7 @@ export const ACTION_TYPES = {
 };
 
 const apiUrl = 'api/users';
+const { errorMessage } = appConstants;
 
 // Actions
 export const getUsers: ICrudGetAllAction<IUser> = (page, size, sort) => {
@@ -45,16 +47,25 @@ export const getUser: ICrudGetAction<IUser> = id => {
 export const createUser: ICrudPutAction<IUser> = user => async dispatch => {
  const result = await dispatch({
  type: ACTION_TYPES.CREATE_USER,
- payload: axios.post(apiUrl, user)
+ payload: axios.post(apiUrl, user),
+ meta: {
+ successMessage: `User has been created successfully`,
+ errorMessage
+ }
  });
  dispatch(getUsers());
  return result;
 };
 
 export const updateUser: ICrudPutAction<IUser> = user => async dispatch => {
+ const requestUrl = `${apiUrl}/${user.id}`;
  const result = await dispatch({
  type: ACTION_TYPES.UPDATE_USER,
- payload: axios.put(apiUrl, user)
+ payload: axios.put(requestUrl, user),
+ meta: {
+ successMessage: `User has been updated successfully`,
+ errorMessage
+ }
  });
  dispatch(getUsers());
  return result;
@@ -64,7 +75,11 @@ export const deleteUser: ICrudDeleteAction<IUser> = id => async dispatch => {
  const requestUrl = `${apiUrl}/${id}`;
  const result = await dispatch({
  type: ACTION_TYPES.DELETE_USER,
- payload: axios.delete(requestUrl)
+ payload: axios.delete(requestUrl),
+ meta: {
+ successMessage: `User has been deleted successfully`,
+ errorMessage
+ }
  });
  dispatch(getUsers());
  return result;

src/App/features/Admin/UserManagement/components/UserManagementDeleteModal/index.tsx

@@ -17,10 +17,20 @@ export class UserManagementList extends React.Component<IUserManagementProps | a
  sort,
  toggleActive,
  handlePagination,
+ confirmDelete,
  itemsPerPage,
  activePage
  } = this.props;
 
+ const onConfirm = (id: number) => {
+ const isOk = confirm(
+ `Confirm delete operation\nAre you sure you want to delete this User?`
+ );
+ if (isOk) {
+ confirmDelete(id);
+ }
+ };
+
  return (
  <div>
  <h2 className="userManagement-page-heading">
@@ -142,8 +152,7 @@ export class UserManagementList extends React.Component<IUserManagementProps | a
  <span className="d-none d-md-inline">Edit</span>
  </Button>
  <Button
- tag={Link}
- to={`${match.url}/${user.id}/delete`}
+ onClick={() => onConfirm(user.id)}
  color="danger"
  size="sm"
  disabled={account.login === user.login}

src/App/features/Admin/UserManagement/components/UserManagementList/index.tsx

@@ -4,7 +4,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { getSortState, IPaginationBaseState } from 'react-jhipster';
 
 import appConstants from '../../../../shared/constants';
-import { getUsers, updateUser } from '../actions';
+import { getUsers, updateUser, deleteUser } from '../actions';
 import { IRootState } from '../../../../reducers';
 import { selectUserManagementUsers, selectUserManagementTotalItems } from '../reducers';
 import { selectAuthUser } from '../../../../shared/reducers/auth.reducer';
@@ -48,6 +48,10 @@ export class UserManagementListContainer extends React.Component<
 
  handlePagination = activePage => this.setState({ activePage }, () => this.sortUsers());
 
+ confirmDelete = (useId: number) => {
+ this.props.deleteUser(useId);
+ };
+
  getUsers = () => {
  const { activePage, itemsPerPage, sort, order } = this.state;
  this.props.getUsers(activePage - 1, itemsPerPage, `${sort},${order}`);
@@ -70,6 +74,7 @@ export class UserManagementListContainer extends React.Component<
  account={account}
  sort={this.sort}
  handlePagination={this.handlePagination}
+ confirmDelete={this.confirmDelete}
  itemsPerPage={this.state.itemsPerPage}
  activePage={this.state.activePage}
  toggleActive={this.toggleActive}
@@ -84,7 +89,7 @@ const mapStateToProps = (state: IRootState) => ({
  account: selectAuthUser(state)
 });
 
-const mapDispatchToProps = { getUsers, updateUser };
+const mapDispatchToProps = { getUsers, updateUser, deleteUser };
 
 type StateProps = ReturnType<typeof mapStateToProps | any>;
 type DispatchProps = typeof mapDispatchToProps;

src/App/features/Admin/UserManagement/containers/UserManagementDeleteModalContainer.tsx

@@ -5,7 +5,6 @@ import ErrorBoundaryRoute from '../../../../shared/helpers/error-boundary-route.
 import UserManagement from '../containers/UserManagementListContainer';
 import UserManagementDetail from '../containers/UserManagementDetailContainer';
 import UserManagementUpdate from '../containers/UserManagementFormContainer';
-import UserManagementDeleteModal from '../containers/UserManagementDeleteModalContainer';
 
 const Routes = ({ match }) => (
  <>
@@ -27,10 +26,6 @@ const Routes = ({ match }) => (
  />
  <ErrorBoundaryRoute path={match.url} component={UserManagement} />
  </Switch>
- <ErrorBoundaryRoute
- path={`${match.url}/:id/delete`}
- component={UserManagementDeleteModal}
- />
  </>
 );
 

src/App/features/Admin/UserManagement/containers/UserManagementListContainer.tsx

@@ -44,7 +44,7 @@ const styles = StyleSheet.create({
 
 export default StackNavigator(
  {
- Dashboard: {
+ Home: {
  screen: DashboardScreen
  }
  },