From 96d12f6f80946062cc42b654dbf7d5b909f1620f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 12:43:52 +0200
Subject: [PATCH] refactor(nc-gui): use computed value in all permissions state

---
 .../composables/useUIPermission/index.ts      | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 09b08cafcb..e7e593ac03 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -1,7 +1,7 @@
 import { isString } from '@vueuse/core'
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { USER_PROJECT_ROLES, useGlobal, useState } from '#imports'
+import { USER_PROJECT_ROLES, computed, useGlobal, useState } from '#imports'
 import type { ProjectRole, Role, Roles } from '~/lib'
 
 export function useUIPermission() {
@@ -9,23 +9,25 @@ export function useUIPermission() {
 
   const projectRoles = useState<Roles<ProjectRole>>(USER_PROJECT_ROLES, () => ({}))
 
-  const allRoles = useState<Roles>('allRoles', () => {
-    let userRoles = user.value?.roles
+  const allRoles = useState<Roles>('allRoles', () =>
+    computed(() => {
+      let userRoles = user.value?.roles
 
-    // if string populate key-value paired object
-    if (isString(userRoles)) {
-      userRoles = userRoles.split(',').reduce<Roles>((acc, role) => {
-        acc[role] = true
-        return acc
-      }, {})
-    }
+      // if string populate key-value paired object
+      if (isString(userRoles)) {
+        userRoles = userRoles.split(',').reduce<Roles>((acc, role) => {
+          acc[role] = true
+          return acc
+        }, {})
+      }
 
-    // merge user role and project specific user roles
-    return {
-      ...userRoles,
-      ...projectRoles.value,
-    }
-  })
+      // merge user role and project specific user roles
+      return {
+        ...userRoles,
+        ...projectRoles.value,
+      }
+    }),
+  )
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
     let roles = { ...allRoles.value }