Creating a usePermissions hook to centralize rules?

[tago-SE]

Hi,

We are using react-query to determine some basic permissions based on content inside the cache but I'm not sure if the setup we've created is a sound one as I'm still a noob when it comes to React.

Here is a sample of how the code looks. It seems to work. But I'm specifically looking for any traps related to state changes that such an implementation can result in that I've overlooked?

Also, if this is not the correct place for this question I'll see myself to stack overflow next.

export const usePermissions = () => {
  const { data: user } = useUser();
  const associationId = user?.selectedassociation?.associationId || undefined;
  const { data: users } = useGetUsersByAssociationId(associationId);
  const { data: applications } = useGetUserApplicationsByAssociationId(associationId);

  const isGroupAdmin =
    users?.filter((u) => (u.handle === user?.external_id || u.handle === user?.internal_id) && u.role === "admin")
      ?.length > 0;

  const canCreateApplications = isGroupAdmin;
  const canDeleteApplications = isGroupAdmin;
  const canAddExternalUsers = isGroupAdmin && user?.type === PortalUserTypeId.PartnerEmployee;
  const isLoggedIn = !!user;

  const getUserHandle = (user: IPortalUser) => {
    if (!user) {
      return undefined;
    }
    if (user.type === PortalUserTypeId.IfEmployee) return user.internal_id;
    if (user.type === PortalUserTypeId.PartnerEmployee) return user.external_id;
    return undefined;
  };
  const userHandle = useMemo(() => getUserHandle(user), [user]);

  const isApplicationAdmin = (applicationId: string) => {
    if (!userHandle) return false;

    if (!applicationId) return false;

    const app = applications?.find((app) => app.id === applicationId);
    if (!app) return false;

    return app?.adminIds?.includes(userHandle);
  };

  const isGroupOrAppAdmin = (applicationId: string) => {
    return isGroupAdmin || !!isApplicationAdmin(applicationId);
  };

  const canManageApplicationInfo = (applicationId: string) => {
    return !!isGroupOrAppAdmin(associationId);
  };


  return {
    isLoggedIn,
    isGroupAdmin,
    canCreateApplications,
    canDeleteApplications,
    canAddExternalUsers,
    isApplicationAdmin,
    canManageApplicationInfo,
  };
};

// Example of react-query wrapper used in the beginning:

export const useUser = () => {
  const key = getUserKey();
  const { isLoading, error, data, ...rest } = useQuery<IPortalUser>(key, getUser, {
    staleTime: StaleTime,
    notifyOnChangeProps: ["data", "error"],
    retry: false
  });
  return {
    data: data,
    error: error,
    isLoading:  isLoading,
    ...rest
  };
};

Thanks for your input.

[TkDodo]

That’s a lot of code. Do you have any specific questions? Generally, custom hooks are good 😊