From cd9924361e162cb1383f7052d0ba5113ce852d0d Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Thu, 10 Nov 2022 13:36:24 -0300
Subject: [PATCH] [FIX] Non primitive dependency on useSubscriptionRoles
 (#4618)

* [FIX] Non primitive dependency on useSubscriptionRoles

* removed sort

* Remove JSON.parse and order by array

Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 app/lib/hooks/usePermissions.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/lib/hooks/usePermissions.ts b/app/lib/hooks/usePermissions.ts
index c15c29b6..8f482f55 100644
--- a/app/lib/hooks/usePermissions.ts
+++ b/app/lib/hooks/usePermissions.ts
@@ -1,8 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { dequal } from 'dequal';
 import { Subscription } from 'rxjs';
 import { createSelector } from 'reselect';
 import { shallowEqual } from 'react-redux';
+import { orderBy } from 'lodash';
 
 import { TSupportedPermissions } from '../../reducers/permissions';
 import { IApplicationState, TSubscriptionModel } from '../../definitions';
@@ -17,6 +18,7 @@ const getPermissionsSelector = createSelector(
 
 const useSubscriptionRoles = (rid?: string): TSubscriptionModel['roles'] => {
 	const [subscriptionRoles, setSubscriptionRoles] = useState<TSubscriptionModel['roles']>([]);
+	const subscriptionRoleRef = useRef<TSubscriptionModel['roles']>([]);
 
 	useEffect(() => {
 		if (!rid) {
@@ -29,16 +31,20 @@ const useSubscriptionRoles = (rid?: string): TSubscriptionModel['roles'] => {
 			}
 			const observable = sub.observe();
 			subSubscription = observable.subscribe(s => {
-				if (!dequal(subscriptionRoles, s.roles)) {
-					setSubscriptionRoles(s.roles);
+				const newRoles = orderBy(s.roles);
+				if (!dequal(subscriptionRoleRef.current, newRoles)) {
+					subscriptionRoleRef.current = newRoles;
+					setSubscriptionRoles(newRoles);
 				}
 			});
 		});
 
 		return () => {
-			if (subSubscription && subSubscription?.unsubscribe) subSubscription.unsubscribe();
+			if (subSubscription && subSubscription?.unsubscribe) {
+				subSubscription.unsubscribe();
+			}
 		};
-	}, [subscriptionRoles]);
+	}, []);
 
 	return subscriptionRoles;
 };