Merge pull request #15239 from Budibase/typing/stores-grid-users

Typing grid users stores

packages/frontend-core/src/components/grid/stores/index.ts

@@ -61,7 +61,8 @@ export type Store = BaseStore &
   ViewV2.Store &
   NonPlus.Store &
   Datasource.Store &
-  Validation.Store & {
+  Validation.Store &
+  Users.Store & {
     // TODO while typing the rest of stores
     fetch: Writable<any>
     filter: Writable<any>

packages/frontend-core/src/components/grid/stores/users.ts

@@ -1,11 +1,38 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
 import { helpers } from "@budibase/shared-core"
+import { Store as StoreContext } from "."
+import { UIUser } from "@budibase/types"
 
-export const createStores = () => {
-  const users = writable([])
+interface UIEnrichedUser extends UIUser {
+  color: string
+  label: string
+}
+
+interface UsersStore {
+  users: Writable<UIUser[]>
+}
+
+interface DerivedUsersStore {
+  userCellMap: Readable<Record<string, UIUser>>
+}
+
+interface ActionUserStore {
+  users: UsersStore["users"] &
+    Readable<UIEnrichedUser[]> & {
+      actions: {
+        updateUser: (user: UIUser) => void
+        removeUser: (sessionId: string) => void
+      }
+    }
+}
+
+export type Store = DerivedUsersStore & ActionUserStore
+
+export const createStores = (): UsersStore => {
+  const users = writable<UIUser[]>([])
 
   const enrichedUsers = derived(users, $users => {
-    return $users.map(user => ({
+    return $users.map<UIEnrichedUser>(user => ({
       ...user,
       color: helpers.getUserColor(user),
       label: helpers.getUserLabel(user),
@@ -20,7 +47,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedUsersStore => {
   const { users, focusedCellId } = context
 
   // Generate a lookup map of cell ID to the user that has it selected, to make
@@ -28,7 +55,7 @@ export const deriveStores = context => {
   const userCellMap = derived(
     [users, focusedCellId],
     ([$users, $focusedCellId]) => {
-      let map = {}
+      let map: Record<string, UIUser> = {}
       $users.forEach(user => {
         const cellId = user.gridMetadata?.focusedCellId
         if (cellId && cellId !== $focusedCellId) {
@@ -44,10 +71,10 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ActionUserStore => {
   const { users } = context
 
-  const updateUser = user => {
+  const updateUser = (user: UIUser) => {
     const $users = get(users)
     if (!$users.some(x => x.sessionId === user.sessionId)) {
       users.set([...$users, user])
@@ -60,7 +87,7 @@ export const createActions = context => {
     }
   }
 
-  const removeUser = sessionId => {
+  const removeUser = (sessionId: string) => {
     users.update(state => {
       return state.filter(x => x.sessionId !== sessionId)
     })

packages/types/src/ui/stores/grid/index.ts

@@ -2,3 +2,4 @@ export * from "./columns"
 export * from "./datasource"
 export * from "./table"
 export * from "./view"
+export * from "./user"

packages/types/src/ui/stores/grid/user.ts

@@ -0,0 +1,6 @@
+import { User } from "@budibase/types"
+
+export interface UIUser extends User {
+  sessionId: string
+  gridMetadata?: { focusedCellId?: string }
+}