Merge pull request #90 from propeldata/sasha/fix/PRO-2109_Loading_sta…

…te_issues_when_refreshing_component Sasha/fix/pro 2109 loading state issues when refreshing component
propeldata · Jun 29, 2023 · 56330a3 · 56330a3
2 parents 42fd151 + e95d13d
commit 56330a3
Show file tree

Hide file tree

Showing 1,254 changed files with 197 additions and 116 deletions.
diff --git a/app/examples/react-16/src/components/CounterConnectedTest.jsx b/app/examples/react-16/src/components/CounterConnectedTest.jsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { Counter, RelativeTimeRange } from '@propeldata/react-counter'
 
+const { REACT_APP_PROPEL_ACCESS_TOKEN, REACT_APP_METRIC_UNIQUE_NAME_1 } = process.env
+
 export function CounterConnectedTest() {
   const [fontColor, setFontColor] = React.useState('#000')
 
@@ -10,8 +12,8 @@ export function CounterConnectedTest() {
       <div className="h-60 flex justify-center items-center">
         <Counter
           query={{
-            accessToken: '<PROPEL_ACCESS_TOKEN>',
-            metric: 'queryCount',
+            accessToken: REACT_APP_PROPEL_ACCESS_TOKEN,
+            metric: REACT_APP_METRIC_UNIQUE_NAME_1,
             timeRange: {
               relative: RelativeTimeRange.LastNDays,
               n: 30
@@ -20,7 +22,7 @@ export function CounterConnectedTest() {
           styles={{ font: { size: '3rem', color: fontColor } }}
         />
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <input
           className="border-2 bg-white p-1 h-9"
           type="color"

diff --git a/app/examples/react-16/src/components/CounterStaticTest.jsx b/app/examples/react-16/src/components/CounterStaticTest.jsx
@@ -15,26 +15,23 @@ export function CounterStaticTest() {
   const [mockData, setMockData] = React.useState(mockData1)
   const [fontColor, setFontColor] = React.useState('#000')
 
-  const { data, isLoading } = useFakeData(mockData)
+  const { data, isLoading, setIsLoading } = useFakeData(mockData)
 
   const handleReFetchMock = () => {
-    setMockData({ value: undefined })
+    setIsLoading(true)
     setTimeout(() => {
       setMockData(mockData2)
+      setIsLoading(false)
     }, 2000)
   }
 
   return (
     <div className="p-4 border-2 bg-neutral-100 border-slate-600 rounded m-3">
       <h2 className="text-2xl">Counter Static</h2>
       <div className="h-60 flex justify-center items-center">
-        <Counter
-          value={data?.value}
-          loading={isLoading || !data?.value}
-          styles={{ font: { size: '3rem', color: fontColor } }}
-        />
+        <Counter value={data?.value} loading={isLoading} styles={{ font: { size: '3rem', color: fontColor } }} />
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <button
           className="border-2 bg-white p-1 h-9"
           onClick={() => setMockData(mockData === mockData1 ? mockData2 : mockData1)}

diff --git a/app/examples/react-16/src/components/LeaderboardConnectedTest.jsx b/app/examples/react-16/src/components/LeaderboardConnectedTest.jsx
@@ -1,6 +1,14 @@
 import React from 'react'
 import { Leaderboard, RelativeTimeRange } from '@propeldata/react-leaderboard'
 
+const {
+  REACT_APP_PROPEL_ACCESS_TOKEN,
+  REACT_APP_METRIC_UNIQUE_NAME_1,
+  REACT_APP_DIMENSION_1,
+  REACT_APP_DIMENSION_2,
+  REACT_APP_DIMENSION_3
+} = process.env
+
 export function LeaderboardConnectedTest() {
   const [barsColor, setBarsColor] = React.useState('#ccc')
   const [chartType, setChartType] = React.useState('bar')
@@ -10,19 +18,19 @@ export function LeaderboardConnectedTest() {
       <h2 className="text-2xl">Leaderboard Connected</h2>
       <Leaderboard
         query={{
-          accessToken: '<PROPEL_ACCESS_TOKEN>',
+          accessToken: REACT_APP_PROPEL_ACCESS_TOKEN,
           dimensions: [
             {
-              columnName: 'METRIC_TYPE'
+              columnName: REACT_APP_DIMENSION_1
             },
             {
-              columnName: 'ENVIRONMENT_ID'
+              columnName: REACT_APP_DIMENSION_2
             },
             {
-              columnName: 'ACCOUNT_ID'
+              columnName: REACT_APP_DIMENSION_3
             }
           ],
-          metric: 'queryCount',
+          metric: REACT_APP_METRIC_UNIQUE_NAME_1,
           rowLimit: 8,
           timeRange: {
             relative: RelativeTimeRange.LastNDays,
@@ -36,7 +44,7 @@ export function LeaderboardConnectedTest() {
           canvas: { backgroundColor: '#f5f5f5' }
         }}
       />
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <input
           className="border-2 bg-white p-1 h-9"
           type="color"

diff --git a/app/examples/react-16/src/components/LeaderboardStaticTest.jsx b/app/examples/react-16/src/components/LeaderboardStaticTest.jsx
@@ -28,12 +28,13 @@ export function LeaderboardStaticTest() {
   const [barsColor, setBarsColor] = React.useState('#ccc')
   const [chartType, setChartType] = React.useState('bar')
 
-  const { data, isLoading } = useFakeData(mockData)
+  const { data, isLoading, setIsLoading } = useFakeData(mockData)
 
   const handleReFetchMock = () => {
-    setMockData({ headers: undefined, rows: undefined })
+    setIsLoading(true)
     setTimeout(() => {
       setMockData(mockData2)
+      setIsLoading(false)
     }, 2000)
   }
 
@@ -44,14 +45,14 @@ export function LeaderboardStaticTest() {
         headers={data?.headers}
         rows={data?.rows}
         variant={chartType}
-        loading={isLoading || !data?.headers || !data.rows}
+        loading={isLoading}
         styles={{
           bar: { backgroundColor: barsColor },
           table: { height: '200px', backgroundColor: '#f5f5f5', header: { backgroundColor: '#f5f5f5' } },
           canvas: { backgroundColor: '#f5f5f5' }
         }}
       />
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <button
           className="border-2 bg-white p-1 h-9"
           onClick={() => setMockData(mockData === mockData1 ? mockData2 : mockData1)}

diff --git a/app/examples/react-16/src/components/TimeSeriesConnectedTest.jsx b/app/examples/react-16/src/components/TimeSeriesConnectedTest.jsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { RelativeTimeRange, TimeSeries, TimeSeriesGranularity } from '@propeldata/react-time-series'
 
+const { REACT_APP_PROPEL_ACCESS_TOKEN, REACT_APP_METRIC_UNIQUE_NAME_1 } = process.env
+
 export function TimeSeriesConnectedTest() {
   const [barsColor, setBarsColor] = React.useState('#ccc')
   const [chartType, setChartType] = React.useState('bar')
@@ -11,8 +13,8 @@ export function TimeSeriesConnectedTest() {
       <h2 className="text-2xl">TimeSeries Connected</h2>
       <TimeSeries
         query={{
-          accessToken: '<PROPEL_ACCESS_TOKEN>',
-          metric: 'queryCount',
+          accessToken: REACT_APP_PROPEL_ACCESS_TOKEN,
+          metric: REACT_APP_METRIC_UNIQUE_NAME_1,
           timeRange: {
             relative: RelativeTimeRange.LastNDays,
             n: 30
@@ -26,7 +28,7 @@ export function TimeSeriesConnectedTest() {
           point: { style: pointStyle }
         }}
       />
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <input
           className="border-2 bg-white p-1 h-9"
           type="color"

diff --git a/app/examples/react-16/src/components/TimeSeriesStaticTest.jsx b/app/examples/react-16/src/components/TimeSeriesStaticTest.jsx
@@ -61,12 +61,13 @@ export function TimeSeriesStaticTest() {
   const [chartType, setChartType] = React.useState('bar')
   const [pointStyle, setPointStyle] = React.useState('cross')
 
-  const { data, isLoading } = useFakeData(mockData)
+  const { data, isLoading, setIsLoading } = useFakeData(mockData)
 
   const handleReFetchMock = () => {
-    setMockData({ labels: undefined, values: undefined })
+    setIsLoading(true)
     setTimeout(() => {
       setMockData(mockData2)
+      setIsLoading(false)
     }, 2000)
   }
 
@@ -77,14 +78,14 @@ export function TimeSeriesStaticTest() {
         variant={chartType}
         labels={data?.labels}
         values={data?.values}
-        loading={isLoading || !data?.labels || !data.values}
+        loading={isLoading}
         styles={{
           bar: { backgroundColor: barsColor },
           canvas: { backgroundColor: '#f5f5f5' },
           point: { style: pointStyle }
         }}
       />
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <button
           className="border-2 bg-white p-1 h-9"
           onClick={() => setMockData(mockData === mockData1 ? mockData2 : mockData1)}

diff --git a/app/examples/react-17/src/components/CounterConnectedTest.jsx b/app/examples/react-17/src/components/CounterConnectedTest.jsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { Counter, RelativeTimeRange } from '@propeldata/react-counter'
 
+const { REACT_APP_PROPEL_ACCESS_TOKEN, REACT_APP_METRIC_UNIQUE_NAME_1 } = process.env
+
 export function CounterConnectedTest() {
   const [fontColor, setFontColor] = React.useState('#000')
 
@@ -10,8 +12,8 @@ export function CounterConnectedTest() {
       <div className="h-60 flex justify-center items-center">
         <Counter
           query={{
-            accessToken: '<PROPEL_ACCESS_TOKEN>',
-            metric: 'queryCount',
+            accessToken: REACT_APP_PROPEL_ACCESS_TOKEN,
+            metric: REACT_APP_METRIC_UNIQUE_NAME_1,
             timeRange: {
               relative: RelativeTimeRange.LastNDays,
               n: 30
@@ -20,7 +22,7 @@ export function CounterConnectedTest() {
           styles={{ font: { size: '3rem', color: fontColor } }}
         />
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <input
           className="border-2 bg-white p-1 h-9"
           type="color"

diff --git a/app/examples/react-17/src/components/CounterStaticTest.jsx b/app/examples/react-17/src/components/CounterStaticTest.jsx
@@ -15,26 +15,23 @@ export function CounterStaticTest() {
   const [mockData, setMockData] = React.useState(mockData1)
   const [fontColor, setFontColor] = React.useState('#000')
 
-  const { data, isLoading } = useFakeData(mockData)
+  const { data, isLoading, setIsLoading } = useFakeData(mockData)
 
   const handleReFetchMock = () => {
-    setMockData({ value: undefined })
+    setIsLoading(true)
     setTimeout(() => {
       setMockData(mockData2)
+      setIsLoading(false)
     }, 2000)
   }
 
   return (
     <div className="p-4 border-2 bg-neutral-100 border-slate-600 rounded m-3">
       <h2 className="text-2xl">Counter Static</h2>
       <div className="h-60 flex justify-center items-center">
-        <Counter
-          value={data?.value}
-          loading={isLoading || !data?.value}
-          styles={{ font: { size: '3rem', color: fontColor } }}
-        />
+        <Counter value={data?.value} loading={isLoading} styles={{ font: { size: '3rem', color: fontColor } }} />
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <button
           className="border-2 bg-white p-1 h-9"
           onClick={() => setMockData(mockData === mockData1 ? mockData2 : mockData1)}

diff --git a/app/examples/react-17/src/components/LeaderboardConnectedTest.jsx b/app/examples/react-17/src/components/LeaderboardConnectedTest.jsx
@@ -1,6 +1,14 @@
 import React from 'react'
 import { Leaderboard, RelativeTimeRange } from '@propeldata/react-leaderboard'
 
+const {
+  REACT_APP_PROPEL_ACCESS_TOKEN,
+  REACT_APP_METRIC_UNIQUE_NAME_1,
+  REACT_APP_DIMENSION_1,
+  REACT_APP_DIMENSION_2,
+  REACT_APP_DIMENSION_3
+} = process.env
+
 export function LeaderboardConnectedTest() {
   const [barsColor, setBarsColor] = React.useState('#ccc')
   const [chartType, setChartType] = React.useState('bar')
@@ -10,19 +18,19 @@ export function LeaderboardConnectedTest() {
       <h2 className="text-2xl">Leaderboard Connected</h2>
       <Leaderboard
         query={{
-          accessToken: '<PROPEL_ACCESS_TOKEN>',
+          accessToken: REACT_APP_PROPEL_ACCESS_TOKEN,
           dimensions: [
             {
-              columnName: 'METRIC_TYPE'
+              columnName: REACT_APP_DIMENSION_1
             },
             {
-              columnName: 'ENVIRONMENT_ID'
+              columnName: REACT_APP_DIMENSION_2
             },
             {
-              columnName: 'ACCOUNT_ID'
+              columnName: REACT_APP_DIMENSION_3
             }
           ],
-          metric: 'queryCount',
+          metric: REACT_APP_METRIC_UNIQUE_NAME_1,
           rowLimit: 8,
           timeRange: {
             relative: RelativeTimeRange.LastNDays,
@@ -36,7 +44,7 @@ export function LeaderboardConnectedTest() {
           canvas: { backgroundColor: '#f5f5f5' }
         }}
       />
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <input
           className="border-2 bg-white p-1 h-9"
           type="color"

diff --git a/app/examples/react-17/src/components/LeaderboardStaticTest.jsx b/app/examples/react-17/src/components/LeaderboardStaticTest.jsx
@@ -28,12 +28,13 @@ export function LeaderboardStaticTest() {
   const [barsColor, setBarsColor] = React.useState('#ccc')
   const [chartType, setChartType] = React.useState('bar')
 
-  const { data, isLoading } = useFakeData(mockData)
+  const { data, isLoading, setIsLoading } = useFakeData(mockData)
 
   const handleReFetchMock = () => {
-    setMockData({ headers: undefined, rows: undefined })
+    setIsLoading(true)
     setTimeout(() => {
       setMockData(mockData2)
+      setIsLoading(false)
     }, 2000)
   }
 
@@ -44,14 +45,14 @@ export function LeaderboardStaticTest() {
         headers={data?.headers}
         rows={data?.rows}
         variant={chartType}
-        loading={isLoading || !data?.headers || !data.rows}
+        loading={isLoading}
         styles={{
           bar: { backgroundColor: barsColor },
           table: { height: '200px', backgroundColor: '#f5f5f5', header: { backgroundColor: '#f5f5f5' } },
           canvas: { backgroundColor: '#f5f5f5' }
         }}
       />
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <button
           className="border-2 bg-white p-1 h-9"
           onClick={() => setMockData(mockData === mockData1 ? mockData2 : mockData1)}

diff --git a/app/examples/react-17/src/components/TimeSeriesConnectedTest.jsx b/app/examples/react-17/src/components/TimeSeriesConnectedTest.jsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { RelativeTimeRange, TimeSeries, TimeSeriesGranularity } from '@propeldata/react-time-series'
 
+const { REACT_APP_PROPEL_ACCESS_TOKEN, REACT_APP_METRIC_UNIQUE_NAME_1 } = process.env
+
 export function TimeSeriesConnectedTest() {
   const [barsColor, setBarsColor] = React.useState('#ccc')
   const [chartType, setChartType] = React.useState('bar')
@@ -11,8 +13,8 @@ export function TimeSeriesConnectedTest() {
       <h2 className="text-2xl">TimeSeries Connected</h2>
       <TimeSeries
         query={{
-          accessToken: '<PROPEL_ACCESS_TOKEN>',
-          metric: 'queryCount',
+          accessToken: REACT_APP_PROPEL_ACCESS_TOKEN,
+          metric: REACT_APP_METRIC_UNIQUE_NAME_1,
           timeRange: {
             relative: RelativeTimeRange.LastNDays,
             n: 30
@@ -26,7 +28,7 @@ export function TimeSeriesConnectedTest() {
           point: { style: pointStyle }
         }}
       />
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 mt-1">
         <input
           className="border-2 bg-white p-1 h-9"
           type="color"