useSegment.js

import PropTypes from 'prop-types';
import { useState, useEffect, useContext, createContext } from 'react';
import { useRouter } from 'next/router';
import merge from 'deepmerge';
import usePrevious from 'hooks/usePrevious';

const useProvideSegment = () => {
  const [location, setLocation] = useState();
  const router = useRouter();

  const referrer = usePrevious(location);

  const identify = async (userId = null, traits = {}, options = {}) => {
    const promise = new Promise((resolve) => {
      window.analytics.identify(
        userId,
        traits,
        merge(options, {
          context: {
            page: {
              referrer,
            },
          },
        }),
        () => {
          resolve();
        },
      );
    });

    return promise;
  };

  const group = (groupId = null, traits = {}, options = {}) => {
    const promise = new Promise((resolve) => {
      window.analytics.group(
        groupId,
        traits,
        merge(options, {
          context: {
            page: {
              referrer,
            },
          },
        }),
        () => {
          resolve();
        },
      );
    });

    return promise;
  };

  const track = (event, properties = {}, options = {}) => {
    window.analytics.track(
      event,
      properties,
      merge(options, {
        context: {
          page: {
            referrer,
          },
        },
      }),
    );
  };

  const page = () => {
    window.analytics.page(
      {
        referrer,
      },
      {
        context: {
          page: {
            referrer,
          },
        },
      },
    );
  };

  useEffect(() => {
    setLocation(window.location.href);

    if (location) {
      page();
    }
  }, [router.asPath]);

  return {
    identify,
    group,
    track,
  };
};

// create the context
const segmentContext = createContext();

// provide it to the tree
export const ProvideSegment = ({ children }) => {
  const segment = useProvideSegment();
  return (
    <segmentContext.Provider value={segment}>
      {children}
    </segmentContext.Provider>
  );
};

export const useSegment = () => useContext(segmentContext);

ProvideSegment.propTypes = {
  children: PropTypes.node.isRequired,
};