Theme / Row actions / Snippers stores

packages/builder/src/stores/builder/rowActions.ts

@@ -6,18 +6,29 @@ import { automationStore } from "./automations"
 import { API } from "@/api"
 import { getSequentialName } from "@/helpers/duplicate"
 
-const initialState = {}
+interface RowAction {
+  id: string
+  name: string
+  tableId: string
+  allowedSources?: string[]
+}
 
-export class RowActionStore extends BudiStore {
+interface RowActionState {
+  [tableId: string]: RowAction[]
+}
+
+const initialState: RowActionState = {}
+
+export class RowActionStore extends BudiStore<RowActionState> {
   constructor() {
     super(initialState)
   }
 
   reset = () => {
-    this.store.set(initialState)
+    this.set(initialState)
   }
 
-  refreshRowActions = async sourceId => {
+  refreshRowActions = async (sourceId: string) => {
     if (!sourceId) {
       return
     }
@@ -34,26 +45,30 @@ export class RowActionStore extends BudiStore {
 
     // Fetch row actions for this table
     const res = await API.rowActions.fetch(tableId)
-    const actions = Object.values(res || {})
+    const actions = Object.values(res || {}) as RowAction[]
     this.update(state => ({
       ...state,
       [tableId]: actions,
     }))
   }
 
-  createRowAction = async (tableId, viewId, name) => {
+  createRowAction = async (tableId: string, viewId?: string, name?: string) => {
     if (!tableId) {
       return
     }
 
     // Get a unique name for this action
     if (!name) {
-      const existingRowActions = get(this.store)[tableId] || []
+      const existingRowActions = get(this)[tableId] || []
       name = getSequentialName(existingRowActions, "New row action ", {
         getName: x => x.name,
       })
     }
 
+    if (!name) {
+      return
+    }
+
     // Create the action
     const res = await API.rowActions.create(tableId, name)
 
@@ -73,41 +88,35 @@ export class RowActionStore extends BudiStore {
     return res
   }
 
-  enableView = async (tableId, rowActionId, viewId) => {
+  enableView = async (tableId: string, rowActionId: string, viewId: string) => {
     await API.rowActions.enableView(tableId, rowActionId, viewId)
     await this.refreshRowActions(tableId)
   }
 
-  disableView = async (tableId, rowActionId, viewId) => {
+  disableView = async (
+    tableId: string,
+    rowActionId: string,
+    viewId: string
+  ) => {
     await API.rowActions.disableView(tableId, rowActionId, viewId)
     await this.refreshRowActions(tableId)
   }
 
-  rename = async (tableId, rowActionId, name) => {
-    await API.rowActions.update({
-      tableId,
-      rowActionId,
-      name,
-    })
-    await this.refreshRowActions(tableId)
-    automationStore.actions.fetch()
-  }
-
-  delete = async (tableId, rowActionId) => {
+  delete = async (tableId: string, rowActionId: string) => {
     await API.rowActions.delete(tableId, rowActionId)
     await this.refreshRowActions(tableId)
     // We don't need to refresh automations as we can only delete row actions
     // from the automations store, so we already handle the state update there
   }
 
-  trigger = async (sourceId, rowActionId, rowId) => {
+  trigger = async (sourceId: string, rowActionId: string, rowId: string) => {
     await API.rowActions.trigger(sourceId, rowActionId, rowId)
   }
 }
 
 const store = new RowActionStore()
-const derivedStore = derived(store, $store => {
-  let map = {}
+const derivedStore = derived<RowActionStore, RowActionState>(store, $store => {
+  const map: RowActionState = {}
 
   // Generate an entry for every view as well
   Object.keys($store || {}).forEach(tableId => {
@@ -115,7 +124,7 @@ const derivedStore = derived(store, $store => {
     map[tableId] = $store[tableId]
     for (let action of $store[tableId]) {
       const otherSources = (action.allowedSources || []).filter(
-        sourceId => sourceId !== tableId
+        (sourceId: string) => sourceId !== tableId
       )
       for (let source of otherSources) {
         map[source] ??= []

packages/builder/src/stores/builder/snippets.js

@@ -1,35 +0,0 @@
-import { writable, get } from "svelte/store"
-import { API } from "@/api"
-import { appStore } from "./app"
-
-const createsnippets = () => {
-  const store = writable([])
-
-  const syncMetadata = metadata => {
-    store.set(metadata?.snippets || [])
-  }
-
-  const saveSnippet = async updatedSnippet => {
-    const snippets = [
-      ...get(store).filter(snippet => snippet.name !== updatedSnippet.name),
-      updatedSnippet,
-    ]
-    const app = await API.saveAppMetadata(get(appStore).appId, { snippets })
-    syncMetadata(app)
-  }
-
-  const deleteSnippet = async snippetName => {
-    const snippets = get(store).filter(snippet => snippet.name !== snippetName)
-    const app = await API.saveAppMetadata(get(appStore).appId, { snippets })
-    syncMetadata(app)
-  }
-
-  return {
-    ...store,
-    syncMetadata,
-    saveSnippet,
-    deleteSnippet,
-  }
-}
-
-export const snippets = createsnippets()

packages/builder/src/stores/builder/snippets.ts

@@ -0,0 +1,32 @@
+import { get } from "svelte/store"
+import { API } from "@/api"
+import { appStore } from "./app"
+import { BudiStore } from "../BudiStore"
+import { Snippet, UpdateAppResponse } from "@budibase/types"
+
+export class SnippetStore extends BudiStore<Snippet[]> {
+  constructor() {
+    super([])
+  }
+
+  syncMetadata = (metadata: UpdateAppResponse) => {
+    this.set(metadata?.snippets || [])
+  }
+
+  saveSnippet = async (updatedSnippet: Snippet) => {
+    const snippets = [
+      ...get(this).filter(snippet => snippet.name !== updatedSnippet.name),
+      updatedSnippet,
+    ]
+    const app = await API.saveAppMetadata(get(appStore).appId, { snippets })
+    this.syncMetadata(app)
+  }
+
+  deleteSnippet = async (snippetName: string) => {
+    const snippets = get(this).filter(snippet => snippet.name !== snippetName)
+    const app = await API.saveAppMetadata(get(appStore).appId, { snippets })
+    this.syncMetadata(app)
+  }
+}
+
+export const snippets = new SnippetStore()

packages/builder/src/stores/builder/theme.js

@@ -1,58 +0,0 @@
-import { writable, get } from "svelte/store"
-import { API } from "@/api"
-import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
-
-export const createThemeStore = () => {
-  const store = writable({
-    theme: DefaultAppTheme,
-    customTheme: {},
-  })
-
-  const syncAppTheme = app => {
-    store.update(state => {
-      const theme = ensureValidTheme(app.theme, DefaultAppTheme)
-      return {
-        ...state,
-        theme,
-        customTheme: app.customTheme,
-      }
-    })
-  }
-
-  const save = async (theme, appId) => {
-    const app = await API.saveAppMetadata(appId, { theme })
-    store.update(state => {
-      state.theme = app.theme
-      return state
-    })
-  }
-
-  const saveCustom = async (theme, appId) => {
-    const updated = { ...get(store).customTheme, ...theme }
-    const app = await API.saveAppMetadata(appId, { customTheme: updated })
-    store.update(state => {
-      state.customTheme = app.customTheme
-      return state
-    })
-  }
-
-  const syncMetadata = metadata => {
-    const { theme, customTheme } = metadata
-    store.update(state => ({
-      ...state,
-      theme: ensureValidTheme(theme, DefaultAppTheme),
-      customTheme,
-    }))
-  }
-
-  return {
-    subscribe: store.subscribe,
-    update: store.update,
-    syncMetadata,
-    syncAppTheme,
-    save,
-    saveCustom,
-  }
-}
-
-export const themeStore = createThemeStore()

packages/builder/src/stores/builder/theme.ts

@@ -0,0 +1,67 @@
+import { get } from "svelte/store"
+import { API } from "@/api"
+import { BudiStore } from "../BudiStore"
+import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
+import { App, UpdateAppResponse, Theme, AppCustomTheme } from "@budibase/types"
+
+interface ThemeState {
+  theme: Theme
+  customTheme: AppCustomTheme
+}
+
+export class ThemeStore extends BudiStore<ThemeState> {
+  constructor() {
+    super({
+      theme: DefaultAppTheme as Theme,
+      customTheme: {},
+    })
+  }
+
+  syncAppTheme = (app: App) => {
+    this.update(state => {
+      const theme = ensureValidTheme(
+        app.theme as Theme | undefined,
+        DefaultAppTheme
+      ) as Theme
+      return {
+        ...state,
+        theme,
+        customTheme: app.customTheme || {},
+      }
+    })
+  }
+
+  save = async (theme: Theme, appId: string) => {
+    const app = await API.saveAppMetadata(appId, { theme })
+    this.update(state => ({
+      ...state,
+      theme: ensureValidTheme(
+        app.theme as Theme | undefined,
+        DefaultAppTheme
+      ) as Theme,
+    }))
+  }
+
+  saveCustom = async (theme: Partial<AppCustomTheme>, appId: string) => {
+    const updated = { ...get(this).customTheme, ...theme }
+    const app = await API.saveAppMetadata(appId, { customTheme: updated })
+    this.update(state => ({
+      ...state,
+      customTheme: app.customTheme || {},
+    }))
+  }
+
+  syncMetadata = (metadata: UpdateAppResponse) => {
+    const { theme, customTheme } = metadata
+    this.update(state => ({
+      ...state,
+      theme: ensureValidTheme(
+        theme as Theme | undefined,
+        DefaultAppTheme
+      ) as Theme,
+      customTheme: customTheme || {},
+    }))
+  }
+}
+
+export const themeStore = new ThemeStore()