From 280a09afd7877618703c841d891cb424adb234c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 3 Jun 2021 10:10:25 +0100
Subject: [PATCH] Add client SDK function to get a component action and clean
 up date range picker

---
 packages/client/src/sdk.js                    |  2 ++
 packages/client/src/utils/getAction.js        | 19 +++++++++++++++++++
 .../src/DateRangePicker.svelte                | 19 +++++++++----------
 3 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 packages/client/src/utils/getAction.js

diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 7eef69441d..bf467e141f 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -9,6 +9,7 @@ import {
 import { styleable } from "./utils/styleable"
 import transition from "./utils/transition"
 import { linkable } from "./utils/linkable"
+import { getAction } from "./utils/getAction"
 import Provider from "./components/Provider.svelte"
 import { ActionTypes } from "./constants"
 
@@ -22,6 +23,7 @@ export default {
   styleable,
   transition,
   linkable,
+  getAction,
   Provider,
   ActionTypes,
 }
diff --git a/packages/client/src/utils/getAction.js b/packages/client/src/utils/getAction.js
new file mode 100644
index 0000000000..cd97fcf079
--- /dev/null
+++ b/packages/client/src/utils/getAction.js
@@ -0,0 +1,19 @@
+import { get } from "svelte/store"
+import { getContext } from "svelte"
+
+/**
+ * Gets a component action.
+ * @param id The component ID that provides the action
+ * @param type The action type to get
+ * @returns {null|*} The action function
+ */
+export const getAction = (id, type) => {
+  if (!id || !type) {
+    return null
+  }
+  const context = getContext("context")
+  if (!context) {
+    return null
+  }
+  return get(context)?.[`${id}_${type}`]
+}
diff --git a/packages/standard-components/src/DateRangePicker.svelte b/packages/standard-components/src/DateRangePicker.svelte
index cdcfe48cd6..d0e768faa0 100644
--- a/packages/standard-components/src/DateRangePicker.svelte
+++ b/packages/standard-components/src/DateRangePicker.svelte
@@ -13,7 +13,9 @@
 
   const dataContext = getContext("context")
   const component = getContext("component")
-  const { styleable, builderStore, ActionTypes } = getContext("sdk")
+  const { styleable, builderStore, ActionTypes, getAction } = getContext("sdk")
+
+  const setQuery = getAction(dataProvider?.id, ActionTypes.SetDataProviderQuery)
   const options = [
     "Last 1 day",
     "Last 7 days",
@@ -26,10 +28,11 @@
 
   const updateDateRange = option => {
     const query = dataProvider?.state?.query
-    if (!query) {
+    if (!query || !setQuery) {
       return
     }
 
+    value = option
     let low = dayjs.utc().subtract(1, "year")
     let high = dayjs.utc().add(1, "day")
 
@@ -45,7 +48,8 @@
       low = dayjs.utc().subtract(6, "months")
     }
 
-    const newQuery = {
+    // Update data provider query with the new filter
+    setQuery({
       ...query,
       range: {
         ...query.range,
@@ -54,15 +58,10 @@
           low: low.format(),
         },
       },
-    }
-
-    const setQuery =
-      $dataContext[`${dataProvider.id}_${ActionTypes.SetDataProviderQuery}`]
-    if (setQuery) {
-      setQuery(newQuery)
-    }
+    })
   }
 
+  // Update the range on mount to the initial value
   onMount(() => {
     updateDateRange(value)
   })