@griddo/ax 10.1.96 → 10.2.0

package/src/containers/Sites/reducer.tsx

@@ -26,7 +26,7 @@ export interface ISitesState {
   recentSites: ISite[];
   sitesTotalItems: number;
   sitesByLang: ISite[];
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
   currentFilter: string | null;
   totalItems: number;
   currentSiteLanguages: ILanguage[];

package/src/containers/StructuredData/actions.tsx

@@ -148,7 +148,7 @@ function resetForm(setDefault?: boolean): (dispatch: Dispatch, getState: any) =>
   };
 }
 
-const filterStructuredData = (data: IStructuredData[], isTaxonomy: boolean, siteID?: number) => {
+const filterStructuredData = (data: IStructuredData[], isTaxonomy: boolean, siteID?: number | null) => {
   const scope = !siteID ? "global" : "site";
 
   const filteredData: { global: IStructuredData[]; site: IStructuredData[] } = { global: [], site: [] };
@@ -160,7 +160,7 @@ const filterStructuredData = (data: IStructuredData[], isTaxonomy: boolean, site
 
 function getStructuredData(
   token: string | null,
-  siteID?: number
+  siteID?: number | null
 ): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
     try {
@@ -227,7 +227,7 @@ function setSelectedCategory(id: string, scope: string): (dispatch: Dispatch, ge
 
 function getStructuredDataContents(
   params: IGetStructuredDataParams,
-  siteID?: number
+  siteID?: number | null
 ): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
     if (!params.dataID) {
@@ -568,6 +568,17 @@ function deleteError(error: IErrorItem): (dispatch: Dispatch, getState: any) =>
   };
 }
 
+function resetStructuredData(): (dispatch: Dispatch) => void {
+  return async (dispatch) => {
+    try {
+      dispatch(setCurrentDataContent([]));
+      dispatch(setCurrentData(null));
+      dispatch(setCurrentDataID(null));
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
 function getDataContentTranslation(langID: number): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
@@ -658,6 +669,7 @@ export {
   validateForm,
   deleteError,
   setContentFilters,
+  resetStructuredData,
   getDataContentTranslation,
   setFormValues,
   setIsTranslated,

package/src/containers/Users/actions.tsx

@@ -1,9 +1,23 @@
 import { Dispatch } from "redux";
-import { SET_USERS, SET_USER_FORM, SET_CURRENT_USER } from "./constants";
-
-import { ISetUsers, ISetCurrentUser, ISetUserForm } from "./interfaces";
-import { ICreatePasswordParams, IUser } from "@ax/types";
-import { global, users } from "@ax/api";
+import {
+  SET_USERS,
+  SET_USER_FORM,
+  SET_CURRENT_USER,
+  SET_ROLES,
+  SET_CURRENT_PERMISSIONS,
+  SET_GLOBAL_PERMISSIONS,
+} from "./constants";
+
+import {
+  ISetUsers,
+  ISetCurrentUser,
+  ISetUserForm,
+  ISetRoles,
+  ISetCurrentPermissions,
+  ISetGlobalPermissions,
+} from "./interfaces";
+import { ICreatePasswordParams, IActivateRole, IGetRoles, IRole, IUser } from "@ax/types";
+import { global, users, roles } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { handleRequest, isReqOk } from "@ax/helpers";
 
@@ -19,10 +33,22 @@ function setUserForm(userForm: IUser): ISetUserForm {
   return { type: SET_USER_FORM, payload: { userForm } };
 }
 
-function getUsers(params: any): (dispatch: Dispatch) => Promise<void> {
+function setRoles(roles: IRole[]): ISetRoles {
+  return { type: SET_ROLES, payload: { roles } };
+}
+
+function setCurrentPermissions(currentPermissions: string[]): ISetCurrentPermissions {
+  return { type: SET_CURRENT_PERMISSIONS, payload: { currentPermissions } };
+}
+
+function setGlobalPermissions(globalPermissions: string[]): ISetGlobalPermissions {
+  return { type: SET_GLOBAL_PERMISSIONS, payload: { globalPermissions } };
+}
+
+function getUsers(params: any, siteID?: number | null): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
-      const callback = async () => users.getUsers(params);
+      const callback = async () => (siteID ? users.getSiteUsers(params, siteID) : users.getUsers(params));
 
       const responseActions = {
         handleSuccess: (response: any) => {
@@ -38,18 +64,19 @@ function getUsers(params: any): (dispatch: Dispatch) => Promise<void> {
   };
 }
 
-function getUser(id: string | number, token?: string): (dispatch: Dispatch) => Promise<void> {
-  return async (dispatch) => {
+function getUser(id: string | number, token?: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+  return async (dispatch, getState) => {
     try {
       const callback = async () => users.getUser(id, token);
 
       const responseActions = {
-        handleSuccess: (response: any) => {
+        handleSuccess: (response: IUser) => {
           if (token) {
             dispatch(appActions.setToken(token));
           }
           if (id === "me") {
             dispatch(setCurrentUser(response));
+            getUserCurrentPermissions()(dispatch, getState);
           } else {
             dispatch(setUserForm(response));
           }
@@ -66,12 +93,16 @@ function getUser(id: string | number, token?: string): (dispatch: Dispatch) => P
 
 function updateUser(
   id: number,
-  data: any,
+  data: IUser,
   isProfile: boolean,
   isList?: boolean
-): (dispatch: Dispatch, getState: any) => Promise<void> {
-  return async (dispatch) => {
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
     try {
+      const {
+        sites: { currentSiteInfo },
+      } = getState();
+
       const callback = async () => users.updateUser(id, data);
 
       const responseActions = {
@@ -80,7 +111,8 @@ function updateUser(
             dispatch(setCurrentUser(response));
           } else if (isList) {
             const params = { filterQuery: "?order=dateCreated" };
-            getUsers(params)(dispatch);
+            const siteID = currentSiteInfo ? currentSiteInfo.id : null;
+            getUsers(params, siteID)(dispatch);
           } else {
             dispatch(setUserForm(response));
           }
@@ -88,16 +120,18 @@ function updateUser(
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
-      await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
+      console.log(e);
+      return false;
     }
   };
 }
 
-function updatePassword(id: string, data: any): (dispatch: Dispatch, getState: any) => Promise<boolean | undefined> {
+function updatePassword(id: number | null, data: any): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
+      if (!id) return false;
       const callback = async () => users.updatePassword(id, data);
 
       const responseActions = {
@@ -107,12 +141,13 @@ function updatePassword(id: string, data: any): (dispatch: Dispatch, getState: a
 
       return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
+      console.log(e);
+      return false;
     }
   };
 }
 
-function createUser(data: { name: string; email: string; sites: any[] }): (dispatch: Dispatch) => Promise<boolean> {
+function createUser(data: { name: string; email: string }): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
       const callback = async () => users.createUser(data);
@@ -130,15 +165,18 @@ function createUser(data: { name: string; email: string; sites: any[] }): (dispa
   };
 }
 
-function createPassword(id: string, params: ICreatePasswordParams): (dispatch: Dispatch) => Promise<boolean> {
-  return async (dispatch) => {
+function createPassword(
+  id: string,
+  params: ICreatePasswordParams
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
     try {
       const callback = async () => global.createPassword(id, params);
 
       const responseActions = {
         handleSuccess: async (response: any) => {
           dispatch(appActions.setToken(response.token));
-          await getUser("me", response.token)(dispatch);
+          await getUser("me", response.token)(dispatch, getState);
         },
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
@@ -151,13 +189,20 @@ function createPassword(id: string, params: ICreatePasswordParams): (dispatch: D
   };
 }
 
-function deleteUser(id: number | number[]): (dispatch: Dispatch) => Promise<boolean> {
-  return async (dispatch) => {
+function deleteUser(id: number | number[]): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
     try {
+      const {
+        sites: { currentSiteInfo },
+      } = getState();
+
       const params = { filterQuery: "?order=dateCreated" };
 
       const responseActions = {
-        handleSuccess: () => getUsers(params)(dispatch),
+        handleSuccess: () => {
+          const siteID = currentSiteInfo ? currentSiteInfo.id : null;
+          getUsers(params, siteID)(dispatch);
+        },
         handleError: (response: any) => {
           const {
             data: { message },
@@ -170,7 +215,7 @@ function deleteUser(id: number | number[]): (dispatch: Dispatch) => Promise<bool
 
       const callback = async () => (Array.isArray(id) ? users.deleteUserBulk(id) : users.deleteUser(id));
 
-      return await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+      return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
       console.log(e); // TODO: capturar error bien
       return false;
@@ -211,6 +256,92 @@ function resendInvitation(id: number): (dispatch: Dispatch) => Promise<boolean>
   };
 }
 
+function getRoles(params: IGetRoles, token?: string, hasLoading?: boolean): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => roles.getRoles(params, token);
+
+      const responseActions = {
+        handleSuccess: (response: any) => dispatch(setRoles(response)),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const loading = hasLoading === false ? [] : [appActions.setIsLoading];
+
+      await handleRequest(callback, responseActions, loading)(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function activateRoles(params: IActivateRole): (dispatch: Dispatch) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const { id, siteId, active } = params;
+      const getRolesParams = { siteId };
+      const responseActions = {
+        handleSuccess: () => getRoles(getRolesParams)(dispatch),
+        handleError: (response: any) => {
+          const {
+            data: { message },
+          } = response;
+          const isMultiple = Array.isArray(message) && message.length > 1;
+          const msg = isMultiple ? `The activate action failed due to ${message.length} errors.` : undefined;
+          appActions.handleError(response, isMultiple, msg)(dispatch);
+        },
+      };
+
+      const callback = async () =>
+        Array.isArray(id)
+          ? roles.activateRolesBulk({ id, siteId, active })
+          : roles.activateRole({ id, siteId, active });
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function getUserCurrentPermissions(): (dispatch: Dispatch, getState: any) => void {
+  return async (dispatch, getState) => {
+    const {
+      users: { roles, currentUser },
+      sites: { currentSiteInfo },
+    } = getState();
+
+    const userRoles = currentSiteInfo
+      ? currentUser.roles.find((roleSite: any) => roleSite.siteId === currentSiteInfo.id || roleSite.siteId === "all")
+          ?.roles
+      : currentUser.roles.find((roleSite: any) => roleSite.siteId === "global")?.roles;
+
+    let permissions: string[] = [];
+    if (userRoles && userRoles.length) {
+      userRoles.forEach((roleID: number) => {
+        const rolePerms =
+          roles &&
+          roles.reduce((acc: string[], curr: IRole) => {
+            if (curr.id === roleID) {
+              const permissions = currentSiteInfo
+                ? curr.permissions.sitePermissions
+                : [...curr.permissions.globalPermissions, ...curr.permissions.sitePermissions];
+              const keys = permissions.map((perm: any) => perm.key);
+              acc = [...acc, ...keys];
+            }
+            return acc;
+          }, []);
+        permissions = [...permissions, ...rolePerms];
+      });
+    }
+    dispatch(setCurrentPermissions(permissions));
+    if(!currentSiteInfo) {
+      dispatch(setGlobalPermissions(permissions));
+    }
+  };
+}
+
 export {
   getUsers,
   updateUser,
@@ -222,5 +353,8 @@ export {
   setCurrentUser,
   deleteUser,
   resendInvitation,
+  getRoles,
+  activateRoles,
   createPassword,
+  getUserCurrentPermissions,
 };

package/src/containers/Users/constants.tsx

@@ -1,12 +1,10 @@
-const NAME: string = "users";
+const NAME = "users";
 
-const SET_USERS: string = `${NAME}/SET_USERS`;
-const SET_CURRENT_USER: string = `${NAME}/SET_CURRENT_USER`;
-const SET_USER_FORM: string = `${NAME}/SET_USER_FORM`;
+const SET_USERS = `${NAME}/SET_USERS`;
+const SET_CURRENT_USER = `${NAME}/SET_CURRENT_USER`;
+const SET_USER_FORM = `${NAME}/SET_USER_FORM`;
+const SET_ROLES = `${NAME}/SET_ROLES`;
+const SET_CURRENT_PERMISSIONS = `${NAME}/SET_CURRENT_PERMISSIONS`;
+const SET_GLOBAL_PERMISSIONS = `${NAME}/SET_GLOBAL_PERMISSIONS`;
 
-export {
-  NAME,
-  SET_USERS,
-  SET_USER_FORM,
-  SET_CURRENT_USER
-};
+export { NAME, SET_USERS, SET_USER_FORM, SET_CURRENT_USER, SET_ROLES, SET_CURRENT_PERMISSIONS, SET_GLOBAL_PERMISSIONS };

package/src/containers/Users/interfaces.tsx

@@ -1,5 +1,12 @@
-import { IUser } from "@ax/types";
-import { SET_CURRENT_USER, SET_USERS, SET_USER_FORM } from "./constants";
+import { IRole, IUser } from "@ax/types";
+import {
+  SET_CURRENT_PERMISSIONS,
+  SET_CURRENT_USER,
+  SET_GLOBAL_PERMISSIONS,
+  SET_ROLES,
+  SET_USERS,
+  SET_USER_FORM,
+} from "./constants";
 
 export interface ISetUsers {
   type: typeof SET_USERS;
@@ -16,4 +23,19 @@ export interface ISetUserForm {
   payload: { userForm: IUser };
 }
 
-export type UsersActionsCreators = ISetUsers & ISetCurrentUser & ISetUserForm;
+export interface ISetRoles {
+  type: typeof SET_ROLES;
+  payload: { roles: IRole[] };
+}
+
+export interface ISetCurrentPermissions {
+  type: typeof SET_CURRENT_PERMISSIONS;
+  payload: { currentPermissions: string[] };
+}
+
+export interface ISetGlobalPermissions {
+  type: typeof SET_GLOBAL_PERMISSIONS;
+  payload: { globalPermissions: string[] };
+}
+
+export type UsersActionsCreators = ISetUsers & ISetCurrentUser & ISetUserForm & ISetRoles & ISetCurrentPermissions;

package/src/containers/Users/reducer.tsx

@@ -1,11 +1,20 @@
-import { IUser } from "@ax/types";
-import { SET_USERS, SET_USER_FORM, SET_CURRENT_USER } from "./constants";
-import { UsersActionsCreators } from "./interfaces";
+import { IRole, IUser } from "@ax/types";
+import {
+  SET_USERS,
+  SET_USER_FORM,
+  SET_CURRENT_USER,
+  SET_ROLES,
+  SET_CURRENT_PERMISSIONS,
+  SET_GLOBAL_PERMISSIONS,
+} from "./constants";
 
 export interface IUsersState {
   users: IUser[];
   userForm: IUser;
-  currentUser: IUser;
+  currentUser: IUser | null;
+  currentPermissions: string[];
+  globalPermissions: string[];
+  roles: IRole[];
 }
 
 export const initialState = {
@@ -16,27 +25,27 @@ export const initialState = {
     name: "",
     email: "",
     failed: 0,
-    sites: ["all"],
-  },
-  currentUser: {
-    id: null,
-    username: "",
-    name: "",
-    email: "",
-    failed: 0,
-    sites: ["all"],
+    roles: [],
+    isSuperAdmin: false,
   },
+  currentUser: null,
+  currentPermissions: [],
+  globalPermissions: [],
+  roles: [],
 };
 
-export function reducer(state = initialState, action: UsersActionsCreators): IUsersState {
+export function reducer(state = initialState, action: any): IUsersState {
   switch (action.type) {
     case SET_USERS:
     case SET_USER_FORM:
     case SET_CURRENT_USER:
+    case SET_ROLES:
+    case SET_CURRENT_PERMISSIONS:
+    case SET_GLOBAL_PERMISSIONS:
       return { ...state, ...action.payload };
     default:
       return state;
   }
 }
 
-export { initialState as usersInitialState, reducer as usersReducer };
+export { initialState as usersInitialState, reducer as usersReducer };

package/src/guards/index.tsx

@@ -1,4 +1,5 @@
 import ErrorGuard from "./error";
 import RouteLeavingGuard from "./routeLeaving";
+import Restricted from "./restricted";
 
-export { ErrorGuard, RouteLeavingGuard };
+export { ErrorGuard, RouteLeavingGuard, Restricted };

package/src/guards/restricted/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { usePermission } from "@ax/hooks";
+
+const Restricted = (props: IRestrictedProps): JSX.Element => {
+  const { to, fallback, children } = props;
+  const isAllowed = usePermission(to);
+
+  if (isAllowed) {
+    return <>{children}</>;
+  }
+
+  return <>{fallback}</>;
+};
+
+interface IRestrictedProps {
+  children: JSX.Element | JSX.Element[];
+  to: string | string[];
+  fallback?: JSX.Element;
+}
+
+export default Restricted;

package/src/hooks/index.tsx

@@ -5,6 +5,7 @@ import { useURLSearchParam } from "./location";
 import { useCategoryColors, useEmptyState, useAdaptiveText } from "./content";
 import { useWindowSize } from "./window";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
+import { usePermission, useGlobalPermission } from "./users";
 
 export {
   useModal,
@@ -20,6 +21,8 @@ export {
   useEmptyState,
   useWindowSize,
   useAdaptiveText,
+  usePermission,
+  useGlobalPermission,
   useOnMessageReceivedFromIframe,
   useOnMessageReceivedFromOutside,
 };

package/src/hooks/users.tsx

@@ -0,0 +1,38 @@
+import { useSelector } from "react-redux";
+import { IRootState } from "@ax/types";
+
+const usePermission = (permission: string | string[] | undefined): boolean => {
+  const userPermissions = useSelector((state: IRootState) => state.users.currentPermissions);
+  const isSuperAdmin = useSelector(
+    (state: IRootState) => state.users.currentUser && state.users.currentUser.isSuperAdmin
+  );
+
+  const isAllowedTo = (permissions: string[]) => userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
+
+  if (!permission || isSuperAdmin) {
+    return true;
+  }
+
+  const arrayPermission = Array.isArray(permission) ? permission : [permission];
+
+  return isAllowedTo(arrayPermission);
+};
+
+const useGlobalPermission = (permission: string | string[] | undefined): boolean => {
+  const userPermissions = useSelector((state: IRootState) => state.users.globalPermissions);
+  const isSuperAdmin = useSelector(
+    (state: IRootState) => state.users.currentUser && state.users.currentUser.isSuperAdmin
+  );
+
+  const isAllowedTo = (permissions: string[]) => userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
+
+  if (!permission || isSuperAdmin) {
+    return true;
+  }
+
+  const arrayPermission = Array.isArray(permission) ? permission : [permission];
+
+  return isAllowedTo(arrayPermission);
+};
+
+export { usePermission, useGlobalPermission };

package/src/modules/App/Routing/NavMenu/NavItem/index.tsx

@@ -1,9 +1,10 @@
 import React, { useContext } from "react";
 
 import { IRouter } from "@ax/routes";
+import { Restricted } from "@ax/guards";
+import { Icon } from "@ax/components";
 
 import NavSubItem from "./NavSubItem";
-import { Icon } from "@ax/components";
 import { NavContext } from "./../context";
 
 import * as S from "./style";
@@ -72,15 +73,19 @@ const NavItem = (props: IProps) => {
 
                     const isSelectedSubItem = location.pathname === subLink.path ? true : false;
 
-                    return (
+                    const navSubItem = (
                       <NavSubItem key={subI} active={isSelectedSubItem} type={type}>
                         <S.NavLink onClick={goToSubLink}>
-                          <S.LinkName active={isSelected}>
-                            {subLink.name}
-                          </S.LinkName>
+                          <S.LinkName active={isSelected}>{subLink.name}</S.LinkName>
                         </S.NavLink>
                       </NavSubItem>
                     );
+
+                    return subLink.permission ? (
+                      <Restricted to={subLink.permission} key={subI}>{navSubItem}</Restricted>
+                    ) : (
+                      navSubItem
+                    );
                   })}
                 </>
               )}

package/src/modules/App/Routing/NavMenu/index.tsx

@@ -5,9 +5,10 @@ import { version } from "./../../../../../package.json";
 
 import { IRouter, multisite, site } from "@ax/routes";
 
-import { IRootState } from "@ax/types";
+import { IRootState, ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { Icon, Tag } from "@ax/components";
+import { Restricted } from "@ax/guards";
 
 import NavItem from "./NavItem";
 import { NavProvider } from "./context";
@@ -54,7 +55,7 @@ const NavMenu = (props: IProps) => {
   };
 
   const goToProfile = () => {
-    const profileRoute = isSite ? "/sites/profile" : "profile";
+    const profileRoute = isSite ? "/sites/profile" : "/profile";
     setHistoryPush(profileRoute);
   };
 
@@ -140,8 +141,8 @@ const NavMenu = (props: IProps) => {
             {config.routes &&
               config.routes
                 .filter((route: IRouter) => route.showInNav)
-                .map(
-                  (route: IRouter): JSX.Element => (
+                .map((route: IRouter): JSX.Element => {
+                  const navItem = (
                     <NavItem
                       setHistoryPush={setHistoryPush}
                       key={route.name}
@@ -150,8 +151,16 @@ const NavMenu = (props: IProps) => {
                       type={config.type}
                       isOpened={isOpened}
                     />
-                  )
-                )}
+                  );
+
+                  return route.permission ? (
+                    <Restricted key={route.name} to={route.permission}>
+                      {navItem}
+                    </Restricted>
+                  ) : (
+                    navItem
+                  );
+                })}
           </S.List>
           <S.List>
             {isSitePublished && (
@@ -190,7 +199,7 @@ interface IConfig {
 
 interface INavMenuProps {
   categories: any;
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
   siteLanguages: any[];
   lang: any;
 }