Merge pull request #15331 from Budibase/ts/notification-store

Typing notification store

packages/client/src/api/api.js → packages/client/src/api/api.ts

@@ -1,6 +1,10 @@
 import { createAPIClient } from "@budibase/frontend-core"
-import { authStore } from "../stores/auth.js"
-import { notificationStore, devToolsEnabled, devToolsStore } from "../stores/"
+import { authStore } from "../stores/auth"
+import {
+  notificationStore,
+  devToolsEnabled,
+  devToolsStore,
+} from "../stores/index"
 import { get } from "svelte/store"
 
 export const API = createAPIClient({

packages/client/src/api/index.js

@@ -1,5 +1,5 @@
-import { API } from "./api.js"
-import { patchAPI } from "./patches.js"
+import { API } from "./api"
+import { patchAPI } from "./patches"
 
 // Certain endpoints which return rows need patched so that they transform
 // and enrich the row docs, so that they can be correctly handled by the

packages/client/src/index.d.ts

@@ -0,0 +1,5 @@
+interface Window {
+  "##BUDIBASE_APP_ID##": string
+  "##BUDIBASE_IN_BUILDER##": string
+  MIGRATING_APP: boolean
+}

packages/client/src/stores/auth.js → packages/client/src/stores/auth.ts

@@ -2,7 +2,9 @@ import { API } from "api"
 import { writable } from "svelte/store"
 
 const createAuthStore = () => {
-  const store = writable(null)
+  const store = writable<{
+    csrfToken?: string
+  } | null>(null)
 
   // Fetches the user object if someone is logged in and has reloaded the page
   const fetchUser = async () => {

packages/client/src/stores/derived/currentRole.js

@@ -1,7 +1,7 @@
 import { derived } from "svelte/store"
 import { Constants } from "@budibase/frontend-core"
 import { devToolsStore } from "../devTools.js"
-import { authStore } from "../auth.js"
+import { authStore } from "../auth"
 import { devToolsEnabled } from "./devToolsEnabled.js"
 
 // Derive the current role of the logged-in user

packages/client/src/stores/notification.js → packages/client/src/stores/notification.ts

@@ -6,19 +6,19 @@ const DEFAULT_NOTIFICATION_TIMEOUT = 3000
 const createNotificationStore = () => {
   let block = false
 
-  const store = writable([])
+  const store = writable<{ id: string; message: string; count: number }[]>([])
 
   const blockNotifications = (timeout = 1000) => {
     block = true
     setTimeout(() => (block = false), timeout)
   }
 
   const send = (
-    message,
+    message: string,
     type = "info",
-    icon,
+    icon: string,
     autoDismiss = true,
-    duration,
+    duration?: number,
     count = 1
   ) => {
     if (block) {
@@ -66,7 +66,7 @@ const createNotificationStore = () => {
     }
   }
 
-  const dismiss = id => {
+  const dismiss = (id: string) => {
     store.update(state => {
       return state.filter(n => n.id !== id)
     })
@@ -76,13 +76,13 @@ const createNotificationStore = () => {
     subscribe: store.subscribe,
     actions: {
       send,
-      info: (msg, autoDismiss, duration) =>
+      info: (msg: string, autoDismiss?: boolean, duration?: number) =>
         send(msg, "info", "Info", autoDismiss ?? true, duration),
-      success: (msg, autoDismiss, duration) =>
+      success: (msg: string, autoDismiss?: boolean, duration?: number) =>
         send(msg, "success", "CheckmarkCircle", autoDismiss ?? true, duration),
-      warning: (msg, autoDismiss, duration) =>
+      warning: (msg: string, autoDismiss?: boolean, duration?: number) =>
         send(msg, "warning", "Alert", autoDismiss ?? true, duration),
-      error: (msg, autoDismiss, duration) =>
+      error: (msg: string, autoDismiss?: boolean, duration?: number) =>
         send(msg, "error", "Alert", autoDismiss ?? false, duration),
       blockNotifications,
       dismiss,

packages/client/src/stores/routes.js → packages/client/src/stores/routes.ts

@@ -4,8 +4,24 @@ import { API } from "api"
 import { peekStore } from "./peek"
 import { builderStore } from "./builder"
 
+interface Route {
+  path: string
+  screenId: string
+}
+
+interface StoreType {
+  routes: Route[]
+  routeParams: {}
+  activeRoute?: Route | null
+  routeSessionId: number
+  routerLoaded: boolean
+  queryParams?: {
+    peek?: boolean
+  }
+}
+
 const createRouteStore = () => {
-  const initialState = {
+  const initialState: StoreType = {
     routes: [],
     routeParams: {},
     activeRoute: null,
@@ -22,7 +38,7 @@ const createRouteStore = () => {
     } catch (error) {
       routeConfig = null
     }
-    let routes = []
+    const routes: Route[] = []
     Object.values(routeConfig?.routes || {}).forEach(route => {
       Object.entries(route.subpaths || {}).forEach(([path, config]) => {
         routes.push({
@@ -43,13 +59,13 @@ const createRouteStore = () => {
       return state
     })
   }
-  const setRouteParams = routeParams => {
+  const setRouteParams = (routeParams: StoreType["routeParams"]) => {
     store.update(state => {
       state.routeParams = routeParams
       return state
     })
   }
-  const setQueryParams = queryParams => {
+  const setQueryParams = (queryParams: { peek?: boolean }) => {
     store.update(state => {
       state.queryParams = {
         ...queryParams,
@@ -60,13 +76,13 @@ const createRouteStore = () => {
       return state
     })
   }
-  const setActiveRoute = route => {
+  const setActiveRoute = (route: string) => {
     store.update(state => {
       state.activeRoute = state.routes.find(x => x.path === route)
       return state
     })
   }
-  const navigate = (url, peek, externalNewTab) => {
+  const navigate = (url: string, peek: boolean, externalNewTab: boolean) => {
     if (get(builderStore).inBuilder) {
       return
     }
@@ -93,7 +109,7 @@ const createRouteStore = () => {
   const setRouterLoaded = () => {
     store.update(state => ({ ...state, routerLoaded: true }))
   }
-  const createFullURL = relativeURL => {
+  const createFullURL = (relativeURL: string) => {
     if (!relativeURL?.startsWith("/")) {
       return relativeURL
     }

packages/frontend-core/src/api/index.ts

@@ -68,13 +68,13 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
   ): Promise<APIError> => {
     // Try to read a message from the error
     let message = response.statusText
-    let json: any = null
+    let json = null
     try {
       json = await response.json()
       if (json?.message) {
         message = json.message
       } else if (json?.error) {
-        message = json.error
+        message = JSON.stringify(json.error)
       }
     } catch (error) {
       // Do nothing
@@ -93,7 +93,7 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
   // Generates an error object from a string
   const makeError = (
     message: string,
-    url?: string,
+    url: string,
     method?: HTTPMethod
   ): APIError => {
     return {
@@ -226,7 +226,7 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
         return await handler(callConfig)
       } catch (error) {
         if (config?.onError) {
-          config.onError(error)
+          config.onError(error as APIError)
         }
         throw error
       }
@@ -239,13 +239,9 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
     patch: requestApiCall(HTTPMethod.PATCH),
     delete: requestApiCall(HTTPMethod.DELETE),
     put: requestApiCall(HTTPMethod.PUT),
-    error: (message: string) => {
-      throw makeError(message)
-    },
     invalidateCache: () => {
       cache = {}
     },
-
     // Generic utility to extract the current app ID. Assumes that any client
     // that exists in an app context will be attaching our app ID header.
     getAppID: (): string => {

packages/frontend-core/src/api/types.ts

@@ -46,7 +46,7 @@ export type Headers = Record<string, string>
 export type APIClientConfig = {
   enableCaching?: boolean
   attachHeaders?: (headers: Headers) => void
-  onError?: (error: any) => void
+  onError?: (error: APIError) => void
   onMigrationDetected?: (migration: string) => void
 }
 
@@ -86,14 +86,13 @@ export type BaseAPIClient = {
   patch: <RequestT = null, ResponseT = void>(
     params: APICallParams<RequestT, ResponseT>
   ) => Promise<ResponseT>
-  error: (message: string) => void
   invalidateCache: () => void
   getAppID: () => string
 }
 
 export type APIError = {
   message?: string
-  url?: string
+  url: string
   method?: HTTPMethod
   json: any
   status: number

packages/types/src/api/web/global/self.ts

@@ -15,5 +15,5 @@ export interface GetGlobalSelfResponse extends User {
   license: License
   budibaseAccess: boolean
   accountPortalAccess: boolean
-  csrfToken: boolean
+  csrfToken: string
 }

packages/types/src/documents/app/screen.ts

@@ -33,11 +33,6 @@ export interface ScreenRoutesViewOutput extends Document {
 export type ScreenRoutingJson = Record<
   string,
   {
-    subpaths: Record<
-      string,
-      {
-        screens: Record<string, string>
-      }
-    >
+    subpaths: Record<string, any>
   }
 >