Remove extra API calls

arimacdev · Jan 31, 2023 · 8ef7d93 · 8ef7d93
1 parent 1c39633
commit 8ef7d93
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 22 deletions.
diff --git a/packages/google-analytics-embed-react/package.json b/packages/google-analytics-embed-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "google-analytics-embed-react",
   "description": "Bringing the Google Analytics Embed Components for your ReactJS application",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -10,6 +10,7 @@
     "type": "git",
     "url": "git+https://github.com/arimacdev/google-analytics-embed-react.git"
   },
+  "license": "MIT",
   "author": {
     "name": "WhizSid",
     "url": "https://github.com/whizsid",
@@ -49,5 +50,8 @@
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
+  },
+  "dependencies": {
+    "react-fast-compare": "^3.2"
   }
 }
diff --git a/packages/google-analytics-embed-react/rollup.config.js b/packages/google-analytics-embed-react/rollup.config.js
@@ -22,17 +22,17 @@ export default {
   ],
   plugins: [
     typescript(),
-      babel({ 
-          babelHelpers: 'bundled',
-          exclude: 'node_modules/**',
-          extensions: [".js", ".jsx", ".ts", ".tsx"],
-          plugins: [],
-          presets: ["@babel/preset-react", "@babel/preset-env"]
-      }),
     peerDepsExternal(),
     resolve({
       browser: true
     }),
-    commonjs()
+    commonjs(),
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      plugins: [],
+      presets: ['@babel/preset-react', '@babel/preset-env']
+    }),
   ]
 };
diff --git a/packages/google-analytics-embed-react/src/DataChart.tsx b/packages/google-analytics-embed-react/src/DataChart.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import GoogleAnalyticsContext, { GoogleAnalyticsState } from './GoogleAnalyticsContext';
+import equal from 'react-fast-compare';
 
 export type DataChartProps<T> = {
   /** Query */
@@ -33,25 +34,40 @@ class DataChart<O> extends React.Component<DataChartProps<O>> {
   }
 
   componentDidMount(): void {
-    this.componentDidUpdate();
+    this.componentDidUpdate({ query: null } as any);
   }
 
-  componentDidUpdate(): void {
+  componentDidUpdate(prevProps: DataChartProps<O>): void {
     const gaState = this.context as GoogleAnalyticsState;
     const { query, children, style, className, onSuccess, onError, ...chartOptions } = this.props;
     // Rendering the component only if a user authenticated
     if (gaState === 'AUTH_SUCCESS') {
       // Updating the existing chart with new options if already rendered
       if (this.googleDataChart != null) {
-        this.googleDataChart.set({
-          query,
-          chart: {
-            container: this.elementRef.current as HTMLElement,
-            type: this.chartType as any,
-            options: chartOptions as any
-          }
-        });
-        this.googleDataChart.execute();
+        const {
+          query: prevQuery,
+          children: _children,
+          style: _style,
+          className: _className,
+          onSuccess: _onSuccess,
+          onError: _onError,
+          ...prevChartOptions
+        } = prevProps;
+
+        if (
+          prevQuery != null &&
+          (!equal(prevQuery, query) || !equal(prevChartOptions, chartOptions))
+        ) {
+          this.googleDataChart.set({
+            query,
+            chart: {
+              container: this.elementRef.current as HTMLElement,
+              type: this.chartType as any,
+              options: chartOptions as any
+            }
+          });
+          this.googleDataChart.execute();
+        }
       } else {
         // Creating a chart if a chart instance not created
         this.googleDataChart = new gapi.analytics.googleCharts.DataChart({

diff --git a/sites/react-backend-auth/package.json b/sites/react-backend-auth/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "google-analytics-embed-react": "0.0.2",
+    "google-analytics-embed-react": "0.0.3",
     "react": "*",
     "react-dom": "*",
     "axios": "*"

diff --git a/sites/react-frontend-auth/package.json b/sites/react-frontend-auth/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "google-analytics-embed-react": "0.0.2",
+    "google-analytics-embed-react": "0.0.3",
     "react": "*",
     "react-dom": "*"
   },