fix(permissions): use permission value for stability

checkmarble · Aug 22, 2023 · a255fda · a255fda
1 parent ad2a951
commit a255fda
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/packages/app-builder/src/components/PermissionsContext.tsx b/packages/app-builder/src/components/PermissionsContext.tsx
@@ -69,11 +69,13 @@ const usePermissionRedirect = (
   const { userPermissions } = usePermissionsContext();
   const navigate = useNavigate();
 
+  const permissionValue = userPermissions[permission];
+
   useEffect(() => {
-    if (!userPermissions[permission]) {
+    if (!permissionValue) {
       navigate(options.redirectUrl, { replace: true });
     }
-  }, [navigate, options.redirectUrl, permission, userPermissions]);
+  }, [navigate, options.redirectUrl, permissionValue]);
 };
 
 export {

diff --git a/packages/app-builder/src/routes/__builder/lists/$listId.tsx b/packages/app-builder/src/routes/__builder/lists/$listId.tsx
@@ -44,7 +44,9 @@ export default function Lists() {
   const customList = useLoaderData<typeof loader>();
   const listValues = customList.values ?? [];
   const { t } = useTranslation(handle.i18n);
-  const { userPermissions } = usePermissionsContext();
+  const {
+    userPermissions: { canManageListItem, canManageList },
+  } = usePermissionsContext();
 
   const columns = useMemo<ColumnDef<ListValues>[]>(
     () => [
@@ -61,7 +63,7 @@ export default function Lists() {
                 {cell.row.original.value}
               </p>
 
-              {userPermissions.canManageListItem && (
+              {canManageListItem && (
                 <DeleteListValue
                   listId={customList.id}
                   listValueId={cell.row.original.id}
@@ -81,7 +83,7 @@ export default function Lists() {
         },
       },
     ],
-    [customList.id, listValues.length, t, userPermissions]
+    [customList.id, listValues.length, t, canManageListItem]
   );
 
   const virtualTable = useVirtualTable({
@@ -102,7 +104,7 @@ export default function Lists() {
             </Link>
             {customList.name}
           </div>
-          {userPermissions.canManageList && (
+          {canManageList && (
             <EditList
               listId={customList.id}
               name={customList.name}
@@ -129,9 +131,7 @@ export default function Lists() {
                 }}
               />
             </form>
-            {userPermissions.canManageListItem && (
-              <NewListValue listId={customList.id} />
-            )}
+            {canManageListItem && <NewListValue listId={customList.id} />}
           </div>
           {virtualTable.rows.length > 0 ? (
             <Table.Default {...virtualTable}></Table.Default>
@@ -143,7 +143,7 @@ export default function Lists() {
             </div>
           )}
         </div>
-        {userPermissions.canManageList && <DeleteList listId={customList.id} />}
+        {canManageList && <DeleteList listId={customList.id} />}
       </Page.Content>
     </Page.Container>
   );

diff --git a/packages/app-builder/src/routes/__builder/lists/index.tsx b/packages/app-builder/src/routes/__builder/lists/index.tsx
@@ -40,7 +40,9 @@ export const handle = {
 export default function ListsPage() {
   const { t } = useTranslation(handle.i18n);
   const customList = useLoaderData<typeof loader>();
-  const { userPermissions } = usePermissionsContext();
+  const {
+    userPermissions: { canManageList },
+  } = usePermissionsContext();
 
   const navigate = useNavigate();
 
@@ -79,7 +81,7 @@ export default function ListsPage() {
       </Page.Header>
       <Page.Content scrollable={false}>
         <div className="flex flex-row justify-end">
-          {userPermissions.canManageList && <CreateList />}
+          {canManageList && <CreateList />}
         </div>
         {rows.length > 0 ? (
           <Table.Container {...getContainerProps()}>

diff --git a/packages/app-builder/src/routes/__builder/scenarios/$scenarioId/i/$iterationId/view.tsx b/packages/app-builder/src/routes/__builder/scenarios/$scenarioId/i/$iterationId/view.tsx
@@ -90,7 +90,9 @@ export default function ScenarioViewLayout() {
   const { scenarioIterations, identifiers, operators } = useLoaderData<
     typeof loader
   >() as LoaderResponse;
-  const { userPermissions } = usePermissionsContext();
+  const {
+    userPermissions: { canManageScenario, canPublishScenario },
+  } = usePermissionsContext();
 
   const sortedScenarioIterations = sortScenarioIterations(
     scenarioIterations,
@@ -121,14 +123,14 @@ export default function ScenarioViewLayout() {
           />
         </div>
         <div className="flex-column flex gap-4">
-          {userPermissions.canManageScenario && (
+          {canManageScenario && (
             <CreateDraftIteration
               iterationId={currentIteration.id}
               scenarioId={currentScenario.id}
               draftId={draftIteration?.id}
             />
           )}
-          {userPermissions.canPublishScenario && (
+          {canPublishScenario && (
             <DeploymentModal
               scenarioId={currentScenario.id}
               liveVersionId={currentScenario.liveVersionId}