DRY

packages/builder/src/stores/builder/screenComponent.ts

@@ -3,37 +3,29 @@ import { tables } from "./tables"
 import { selectedScreen } from "./screens"
 import { viewsV2 } from "./viewsV2"
 import { findComponentsBySettingsType } from "@/helpers/screen"
-import { Screen, Table, ViewV2 } from "@budibase/types"
+import { Screen } from "@budibase/types"
+
+function reduceBy<TItem extends {}, TKey extends keyof TItem>(
+  key: TKey,
+  list: TItem[]
+) {
+  return list.reduce(
+    (result, item) => ({
+      ...result,
+      [item[key] as string]: item,
+    }),
+    {}
+  )
+}
 
 export const screenComponentErrors = derived(
   [selectedScreen, tables, viewsV2],
   ([$selectedScreen, $tables, $viewsV2]): Record<string, string[]> => {
-    function flattenTablesAndViews(tables: Table[], views: ViewV2[]) {
-      return {
-        ...tables.reduce(
-          (list, table) => ({
-            ...list,
-            [table._id!]: table,
-          }),
-          {}
-        ),
-        ...views.reduce(
-          (list, view) => ({
-            ...list,
-            [view.id]: view,
-          }),
-          {}
-        ),
-      }
-    }
-
     function getInvalidDatasources(
       screen: Screen,
       datasources: Record<string, any>
     ) {
       const friendlyNameByType = {
-        table: "table",
-        view: "view",
         viewV2: "view",
       }
 
@@ -45,7 +37,7 @@ export const screenComponentErrors = derived(
         const { resourceId, type, label } = component[setting.key]
         if (!datasources[resourceId]) {
           const friendlyTypeName =
-            friendlyNameByType[type as keyof typeof friendlyNameByType]
+            friendlyNameByType[type as keyof typeof friendlyNameByType] ?? type
           result[component._id!] = [
             `The ${friendlyTypeName} named "${label}" does not exist`,
           ]
@@ -55,7 +47,11 @@ export const screenComponentErrors = derived(
       return result
     }
 
-    const datasources = flattenTablesAndViews($tables.list, $viewsV2.list)
+    const datasources = {
+      ...reduceBy("_id", $tables.list),
+      ...reduceBy("id", $viewsV2.list),
+    }
+
     return getInvalidDatasources($selectedScreen, datasources)
   }
 )