Add account section

src/app/routes.js

@@ -6,6 +6,7 @@ import { Module as Plugins } from "src/modules/plugins";
 import { Module as Login } from "src/modules/login";
 import { Module as Activity } from "src/modules/activity";
 import { Module as Users } from "src/modules/users";
+import { Module as Account } from "src/modules/account";
 
 import { environment } from "./config/environment";
 
@@ -49,7 +50,7 @@ export const sections = {
   account: {
     name: "Account",
     route: "/account",
-    component: null,
+    component: Account,
     showInMenu: false
   },
   abilities: {

src/components/user/User.js

@@ -208,15 +208,12 @@ export class User extends Component {
     }));
 
     this.props
-      .onSubmit(
-        {
-          name,
-          email,
-          password,
-          role
-        },
-        this.props.user._id
-      )
+      .onSubmit({
+        name,
+        email,
+        password,
+        role
+      })
       .then(() => {
         if (!this.props.isNew) {
           this.setState(state => ({
@@ -260,7 +257,7 @@ export class User extends Component {
 
   handleDeleteConfirm() {
     event.preventDefault();
-    this.props.onDelete(this.props.user._id);
+    this.props.onDelete();
   }
 
   render() {

src/data-sources/users/index.js

@@ -1,16 +1,17 @@
-import { userMe, userMeWithAvatar, userMeIsAdmin } from "./me";
+import { userMe, userMeWithExtraData, userMeIsAdmin } from "./me";
 import {
   usersCollection,
   usersCollectionExactFiltered,
   usersCollectionFilteredAndSorted
 } from "./collection";
+import { usersModels, usersModelsWithExtraData, userAllowedRoles } from "./model";
+
 import {
-  usersModels,
-  usersModelsWithExtraData,
-  userAllowedRoles,
   isValidUserName,
-  isValidUserEmail
-} from "./model";
+  isValidUserEmail,
+  isUserNameRepeated,
+  isUserEmailRepeated
+} from "./validations";
 
 usersModels.onChangeAny(changeDetails => {
   if (
@@ -23,12 +24,18 @@ usersModels.onChangeAny(changeDetails => {
   }
 });
 
-export { userMe, userMeWithAvatar, userMeIsAdmin };
-export { usersCollection, usersCollectionExactFiltered, usersCollectionFilteredAndSorted };
 export {
+  userMe,
+  userMeWithExtraData,
+  userMeIsAdmin,
+  usersCollection,
+  usersCollectionExactFiltered,
+  usersCollectionFilteredAndSorted,
   usersModels,
   usersModelsWithExtraData,
   userAllowedRoles,
   isValidUserName,
-  isValidUserEmail
+  isValidUserEmail,
+  isUserNameRepeated,
+  isUserEmailRepeated
 };

src/data-sources/users/me.js

@@ -1,7 +1,9 @@
 import { origins, Selector } from "reactive-data-source";
 
+import { roles } from "../roles";
+
 import { userAvatar, byEmailFilter } from "./avatar";
-import { avatarValueFromResponse } from "./helpers";
+import { isSystemRole, avatarValueFromResponse } from "./helpers";
 
 export const userMe = new origins.Api(
   "/users/me",
@@ -11,15 +13,17 @@ export const userMe = new origins.Api(
   }
 );
 
-export const userMeWithAvatar = new Selector(
+export const userMeWithExtraData = new Selector(
   userMe,
   {
     source: userAvatar,
     filter: (filter, results) => byEmailFilter(results[0].email)
   },
-  (userMeData, userMeAvatarResponse) => ({
+  roles,
+  (userMeData, userMeAvatarResponse, rolesResults) => ({
     ...userMeData,
-    avatar: avatarValueFromResponse(userMeAvatarResponse)
+    avatar: avatarValueFromResponse(userMeAvatarResponse),
+    isSystemRole: isSystemRole(userMeData, rolesResults)
   }),
   {}
 );

src/data-sources/users/model.js

@@ -6,14 +6,6 @@ import { byIdFilter } from "../helpers";
 import { isSystemRole, avatarValueFromResponse } from "./helpers";
 import { userAvatar, byEmailFilter } from "./avatar";
 
-const NAME_REGEX = /^[a-z0-9_.-]*$/;
-
-const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/;
-
-export const isValidUserName = name => name.length > 4 && NAME_REGEX.test(name);
-
-export const isValidUserEmail = email => EMAIL_REGEX.test(email);
-
 export const usersModels = new origins.Api(
   "/users/:id",
   {

src/data-sources/users/validations.js

@@ -0,0 +1,25 @@
+import { usersCollectionExactFiltered } from "./collection";
+
+const NAME_REGEX = /^[a-z0-9_.-]*$/;
+
+const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/;
+
+export const isValidUserName = name => name.length > 4 && NAME_REGEX.test(name);
+
+export const isValidUserEmail = email => EMAIL_REGEX.test(email);
+
+export const isUserNameRepeated = name =>
+  usersCollectionExactFiltered
+    .filter({
+      name
+    })
+    .read()
+    .then(results => results.length > 0);
+
+export const isUserEmailRepeated = email =>
+  usersCollectionExactFiltered
+    .filter({
+      email
+    })
+    .read()
+    .then(results => results.length > 0);

src/modules/account/Layouts.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { withRouter } from "react-router-dom";
+import PropTypes from "prop-types";
+
+import { UpdateUserMe } from "./views/UpdateUserMe";
+
+// UPDATE USER
+
+export const AccountBase = ({ history }) => <UpdateUserMe goBack={() => history.goBack()} />;
+
+AccountBase.propTypes = {
+  history: PropTypes.any
+};
+
+export const Account = withRouter(AccountBase);

src/modules/account/index.js

@@ -0,0 +1,3 @@
+import { Account } from "./Layouts";
+
+export const Module = Account;

src/modules/account/views/UpdateUser.js

@@ -0,0 +1,44 @@
+import { pickBy, identity } from "lodash";
+
+import { plugins } from "reactive-data-source";
+
+import { Component as UserComponent } from "src/components/user";
+
+import {
+  usersModels,
+  usersModelsWithExtraData,
+  userAllowedRoles,
+  userMeIsAdmin,
+  isValidUserName,
+  isValidUserEmail,
+  isUserNameRepeated,
+  isUserEmailRepeated
+} from "src/data-sources/users";
+
+export const mapDataSourceToProps = ({ id }) => {
+  const readUser = usersModelsWithExtraData.byId(id).read;
+  const user = usersModels.byId(id);
+  const updateUser = user.update;
+  const deleteUser = user.delete;
+
+  const submitUpdateUser = userData => updateUser(pickBy(userData, identity));
+
+  return {
+    currentUserIsAdmin: userMeIsAdmin.read.getters.value,
+    roles: userAllowedRoles.byId(id).read.getters.value,
+    onSubmit: submitUpdateUser,
+    submitLoading: updateUser.getters.loading,
+    submitError: updateUser.getters.error,
+    user: readUser.getters.value,
+    userLoading: readUser.getters.loading,
+    userError: readUser.getters.error,
+    userDeleteLoading: deleteUser.getters.loading,
+    userDeleteError: deleteUser.getters.error,
+    isUserNameRepeated,
+    isUserEmailRepeated,
+    isValidUserName,
+    isValidUserEmail
+  };
+};
+
+export const UpdateUser = plugins.connect(mapDataSourceToProps)(UserComponent);

src/modules/account/views/UpdateUserMe.js

@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { plugins } from "reactive-data-source";
+
+import { UpdateUser } from "./UpdateUser";
+
+import { userMe } from "src/data-sources/users";
+
+export const UpdateUserMeComponent = ({ user, goBack }) =>
+  user._id ? <UpdateUser id={user._id} onCancel={goBack} /> : null;
+
+UpdateUserMeComponent.propTypes = {
+  goBack: PropTypes.func,
+  user: PropTypes.any
+};
+
+export const mapDataSourceToProps = () => ({
+  user: userMe.read.getters.value
+});
+
+export const UpdateUserMe = plugins.connect(mapDataSourceToProps)(UpdateUserMeComponent);

src/modules/menu-user/views/UserMenu.js

@@ -4,7 +4,7 @@ import { Component as UserMenuComponent } from "src/components/menu-user";
 
 import { authSession } from "src/data-sources/authentication";
 import { logout, cleanAll } from "src/data-sources/setup";
-import { userMeWithAvatar } from "src/data-sources/users";
+import { userMeWithExtraData } from "src/data-sources/users";
 
 const doLogout = event => {
   event.preventDefault();
@@ -15,9 +15,9 @@ const doLogout = event => {
 export const mapDataSourceToProps = () => {
   return {
     doLogout,
-    loading: userMeWithAvatar.read.getters.loading,
-    error: userMeWithAvatar.read.getters.error,
-    user: userMeWithAvatar.read.getters.value
+    loading: userMeWithExtraData.read.getters.loading,
+    error: userMeWithExtraData.read.getters.error,
+    user: userMeWithExtraData.read.getters.value
   };
 };
 

src/modules/users/Layouts.js

@@ -33,7 +33,7 @@ export const UsersLayout = withRouter(UsersLayoutBase);
 // UPDATE USER
 
 export const UpdateUserLayoutBase = ({ match, history }) => (
-  <CreateOrUpdateUser id={match.params.id} history={history} goBack={() => history.goBack()} />
+  <CreateOrUpdateUser id={match.params.id} goBack={() => history.goBack()} />
 );
 
 UpdateUserLayoutBase.propTypes = {
@@ -46,7 +46,7 @@ export const UpdateUserLayout = withRouter(UpdateUserLayoutBase);
 // CREATE USER
 
 export const CreateUserLayoutBase = ({ history }) => (
-  <CreateOrUpdateUser history={history} goBack={() => history.goBack()} />
+  <CreateOrUpdateUser goBack={() => history.goBack()} />
 );
 
 CreateUserLayoutBase.propTypes = {

src/modules/users/views/CreateUser.js

@@ -6,12 +6,12 @@ import {
   usersCollection,
   userMeIsAdmin,
   isValidUserName,
-  isValidUserEmail
+  isValidUserEmail,
+  isUserNameRepeated,
+  isUserEmailRepeated
 } from "src/data-sources/users";
 import { nonSystemRoles } from "src/data-sources/roles";
 
-import { isUserNameRepeated, isUserEmailRepeated } from "./helpers";
-
 export const mapDataSourceToProps = () => {
   return {
     currentUserIsAdmin: userMeIsAdmin.read.getters.value,

src/modules/users/views/UpdateUser.js

@@ -10,11 +10,11 @@ import {
   userAllowedRoles,
   userMeIsAdmin,
   isValidUserName,
-  isValidUserEmail
+  isValidUserEmail,
+  isUserNameRepeated,
+  isUserEmailRepeated
 } from "src/data-sources/users";
 
-import { isUserNameRepeated, isUserEmailRepeated } from "./helpers";
-
 export const mapDataSourceToProps = ({ id }) => {
   const readUser = usersModelsWithExtraData.byId(id).read;
   const user = usersModels.byId(id);