From 1626d7c248072f3ffd9bd46b15abceb9a23a6be0 Mon Sep 17 00:00:00 2001
From: serh11p <git@serh11p.com>
Date: Wed, 7 Apr 2021 17:51:57 +0300
Subject: [PATCH] Fix UI issues with analytics

---
 src/app/atoms/Button.tsx                      | 39 ++++++++++++-------
 .../PageLayout/Header/AccountDropdown.tsx     | 10 +++--
 src/app/templates/AdditionalFeeInput.tsx      |  2 +-
 src/lib/analytics/use-form-analytics.hook.ts  | 28 ++++++++-----
 4 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/app/atoms/Button.tsx b/src/app/atoms/Button.tsx
index 76007efd9..b06d02749 100644
--- a/src/app/atoms/Button.tsx
+++ b/src/app/atoms/Button.tsx
@@ -1,23 +1,34 @@
 import * as React from "react";
 
-import { AnalyticsEventCategory, TestIDProps, useAnalytics } from "lib/analytics";
+import {
+  AnalyticsEventCategory,
+  TestIDProps,
+  useAnalytics,
+} from "lib/analytics";
 
-interface Props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TestIDProps {
-}
+interface Props
+  extends React.DetailedHTMLProps<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    >,
+    TestIDProps {}
 
-export const Button = React.forwardRef<HTMLButtonElement, Props>(({
-    testID,
-    testIDProperties,
-    onClick,
-    ...props
-  }, ref) => {
+export const Button = React.forwardRef<HTMLButtonElement, Props>(
+  ({ testID, testIDProperties, onClick, ...props }, ref) => {
     const { trackEvent } = useAnalytics();
 
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-      testID !== undefined && trackEvent(testID, AnalyticsEventCategory.ButtonPress, testIDProperties);
+    const handleClick = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      testID !== undefined &&
+        trackEvent(
+          testID,
+          AnalyticsEventCategory.ButtonPress,
+          testIDProperties
+        );
 
-      onClick !== undefined && onClick(e);
-    }
-    return <button ref={ref} onClick={handleClick} {...props} />
+      return onClick !== undefined && onClick(e);
+    };
+    return <button ref={ref} onClick={handleClick} {...props} />;
   }
 );
diff --git a/src/app/layouts/PageLayout/Header/AccountDropdown.tsx b/src/app/layouts/PageLayout/Header/AccountDropdown.tsx
index 03670b10b..0c8d8febc 100644
--- a/src/app/layouts/PageLayout/Header/AccountDropdown.tsx
+++ b/src/app/layouts/PageLayout/Header/AccountDropdown.tsx
@@ -222,9 +222,13 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
       <div className="my-2">
         {actions.map(({ key, Icon, i18nKey, linkTo, onClick }) => {
           const handleClick = () => {
-            trackEvent(AccountDropdownSelectors.ActionButton, AnalyticsEventCategory.ButtonPress, { type: key });
-            onClick();
-          }
+            trackEvent(
+              AccountDropdownSelectors.ActionButton,
+              AnalyticsEventCategory.ButtonPress,
+              { type: key }
+            );
+            return onClick();
+          };
 
           const baseProps = {
             key,
diff --git a/src/app/templates/AdditionalFeeInput.tsx b/src/app/templates/AdditionalFeeInput.tsx
index 9fe20f7bd..b0f9f71a9 100644
--- a/src/app/templates/AdditionalFeeInput.tsx
+++ b/src/app/templates/AdditionalFeeInput.tsx
@@ -120,7 +120,7 @@ const AdditionalFeeInput: FC<AdditionalFeeInputProps> = (props) => {
       AdditionalFeeInputSelectors.FeeButton,
       AnalyticsEventCategory.ButtonPress
     );
-    onChange !== undefined && onChange(event);
+    return onChange !== undefined && onChange(event);
   };
 
   return (
diff --git a/src/lib/analytics/use-form-analytics.hook.ts b/src/lib/analytics/use-form-analytics.hook.ts
index 85b543f89..2355be5ca 100644
--- a/src/lib/analytics/use-form-analytics.hook.ts
+++ b/src/lib/analytics/use-form-analytics.hook.ts
@@ -1,16 +1,24 @@
+import { useMemo } from "react";
+
 import { AnalyticsEventCategory } from "./analytics-event.enum";
 import { useAnalytics } from "./use-analytics.hook";
 
 export const useFormAnalytics = (formName: string) => {
   const { trackEvent } = useAnalytics();
 
-  const trackSubmit = (properties?: object) => trackEvent(formName, AnalyticsEventCategory.FormSubmit, properties);
-  const trackSubmitSuccess = (properties?: object) => trackEvent(formName, AnalyticsEventCategory.FormSubmitSuccess, properties);
-  const trackSubmitFail = (properties?: object) => trackEvent(formName, AnalyticsEventCategory.FormSubmitFail, properties);
-
-  return {
-    trackSubmit,
-    trackSubmitSuccess,
-    trackSubmitFail
-  };
-}
+  return useMemo(
+    () => ({
+      trackSubmit: (properties?: object) =>
+        trackEvent(formName, AnalyticsEventCategory.FormSubmit, properties),
+      trackSubmitSuccess: (properties?: object) =>
+        trackEvent(
+          formName,
+          AnalyticsEventCategory.FormSubmitSuccess,
+          properties
+        ),
+      trackSubmitFail: (properties?: object) =>
+        trackEvent(formName, AnalyticsEventCategory.FormSubmitFail, properties),
+    }),
+    [formName, trackEvent]
+  );
+};