[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>
This commit is contained in:
Reinaldo Neto 2022-11-10 13:36:24 -03:00 committed by Diego Mello
parent 2ab648de07
commit a770136ae2
1 changed files with 11 additions and 5 deletions

View File

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