at the end of the day, it was inevitable

frontend/app/components/common/hooks/useForm.js

@@ -0,0 +1,65 @@
+import { useState, useCallback } from 'react';
+import { cloneDeep } from 'lodash';
+
+function useForm({ errors: initialErrors, ...rest }) {
+  const [form, setForm] = useState(rest);
+  const [errors, setErrors] = useState(initialErrors);
+
+  const handleChange = useCallback((name, value, err = undefined) => {
+    setForm((form) => ({
+      ...form,
+      [name]: value
+    }));
+
+    if (errors) {
+      setErrors((errors) => ({
+        ...errors,
+        [name]: err !== undefined ? err : errors[name]
+      }));
+    }
+  }, []);
+
+  const handleValidation = useCallback((name, err) => {
+    setErrors((errors) => ({
+      ...errors,
+      [name]: err
+    }));
+  }, []);
+
+  const validateSubmit = useCallback(() => {
+    let failed;
+    for (let val in errors) {
+      const fieldError = errors[val];
+      if (fieldError) {
+        failed = true;
+      } else if (fieldError === null && !form[val] && form[val] !== 0) {
+        failed = true;
+        handleValidation(val, true);
+      }
+    }
+    if (failed) {
+      return false;
+    } else {
+      return cloneDeep(form);
+    }
+  }, [form, errors, handleValidation]);
+
+  function resetForm(values = {}) {
+    // eslint-disable-next-line no-unused-vars
+    const { errors, ...formValues } = values;
+    setForm(formValues || rest);
+    setErrors(initialErrors);
+  }
+
+  return {
+    form,
+    handleChange,
+    handleValidation,
+    setForm,
+    validateSubmit,
+    errors,
+    resetForm
+  };
+}
+
+export default useForm;

frontend/app/components/common/hooks/useIsMounted.js

@@ -0,0 +1,16 @@
+import { useRef, useEffect } from 'react';
+
+function useIsMounted() {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return isMounted;
+}
+
+export default useIsMounted;

frontend/app/components/common/hooks/usePageTracking.js

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { isLive } from '../../../common/constants';
+
+function usePageTracking() {
+  const location = useLocation();
+  const history = useHistory();
+
+  useEffect(() => {
+    // google analytics
+    if (window.gtag && isLive) {
+      setTimeout(() => {
+        window.gtag('event', 'page_view', {
+          page_location: window.location.href,
+          page_path: location.pathname + location.search
+          // page_title: '<Page Title>',
+        });
+      }, 0);
+    }
+  }, [window.gtag, location]);
+
+  useEffect(() => {
+    isLive &&
+      history.listen(() => {
+        // Added to history listen to prevent first pageview call which is called by hubspot tracking script
+        setTimeout(() => { // to wait until document title updates
+          const _hsq = window._hsq;
+          if (location && _hsq) {
+            // hubspot tracking
+            _hsq.push(['setPath', location.pathname + location.search]);
+            _hsq.push(['trackPageView']);
+          }
+
+          if (location && window.lintrk) {
+            // linkedin insight tracking
+            window.lintrk('track');
+          }
+        }, 0);
+      });
+  }, []);
+
+  return null;
+}
+
+export default usePageTracking;