How to use the hyperview/src/services/url.getUrlFromHref function in hyperview

navigate = (
    href: string,
    action: NavAction,
    element: Element,
    opts: BehaviorOptions,
  ): void => {
    const { showIndicatorId, delay } = opts;
    const formData: ?FormData = getFormData(element);

    // Serialize form data as query params, if present.
    const baseUrl = UrlService.getUrlFromHref(href, this.url);
    const url = UrlService.addFormDataToUrl(baseUrl, formData);

    let preloadScreen = null;
    if (showIndicatorId) {
      const screens: NodeList<element> = this.document.getElementsByTagNameNS(
        Namespaces.HYPERVIEW,
        'screen',
      );
      const loadingScreen: ?Element = Array.from(screens).find(
        s =&gt; s &amp;&amp; s.getAttribute('id') === showIndicatorId,
      );
      if (loadingScreen) {
        preloadScreen = Date.now(); // Not trully unique but sufficient for our use-case
        this.setPreloadScreen(preloadScreen, loadingScreen);
      }
    }</element>

fetchElement = (href, verb, root, formData) => {
    verb = verb || 'GET';
    if (href[0] === '#') {
      return new Promise((resolve, reject) => {
        const element = root.getElementById(href.slice(1));
        if (element) {
          resolve(element.cloneNode(true));
        }
        reject();
      });
    }

    // For GET requests, we can't include a body so we encode the form data as a query
    // string in the URL.
    const url = verb === 'GET'
      ? UrlService.addFormDataToUrl(UrlService.getUrlFromHref(href, this.state.url), formData)
      : UrlService.getUrlFromHref(href, this.state.url);

    const options = {
      method: verb,
      headers: getHyperviewHeaders(),
      // For non-GET requests, include the formdata as the body of the request.
      body: verb === 'GET' ? undefined : formData,
    };

    return this.props.fetch(url, options)
      .then(response => response.text())
      .then(responseText => {
        if (typeof this.props.onParseBefore === 'function') {
          this.props.onParseBefore(url);
        }
        const parsed = this.parser.parseFromString(responseText).documentElement;

verb = verb || 'GET';
    if (href[0] === '#') {
      return new Promise((resolve, reject) => {
        const element = root.getElementById(href.slice(1));
        if (element) {
          resolve(element.cloneNode(true));
        }
        reject();
      });
    }

    // For GET requests, we can't include a body so we encode the form data as a query
    // string in the URL.
    const url = verb === 'GET'
      ? UrlService.addFormDataToUrl(UrlService.getUrlFromHref(href, this.state.url), formData)
      : UrlService.getUrlFromHref(href, this.state.url);

    const options = {
      method: verb,
      headers: getHyperviewHeaders(),
      // For non-GET requests, include the formdata as the body of the request.
      body: verb === 'GET' ? undefined : formData,
    };

    return this.props.fetch(url, options)
      .then(response => response.text())
      .then(responseText => {
        if (typeof this.props.onParseBefore === 'function') {
          this.props.onParseBefore(url);
        }
        const parsed = this.parser.parseFromString(responseText).documentElement;
        if (typeof this.props.onParseAfter === 'function') {

reload = (opt_href) => {
    const url = (opt_href === undefined || opt_href === '#')
      ? this.state.url
      : UrlService.getUrlFromHref(opt_href, this.state.url);
    this.needsLoad = true;
    this.setState({
      error: false,
      url,
    });
  }