react-google-picker

gistfile1.js

// original source code at https://github.com/sdoomz/react-google-picker/blob/master/src/react-google-picker.js
import React, { useEffect } from "react";
import PropTypes from "prop-types";
import loadScript from "load-script";

const GOOGLE_SDK_URL = "https://apis.google.com/js/client.js";

let scriptLoadingStarted = false;

export const request = (url) => {
  return window.gapi.client
    .request(url)
    .getPromise()
    .then((response) => {
      if (response.status == 200) {
        try {
          let json = JSON.parse(response.body);
          return json;
        } catch (e) {
          throw new Error("Could not parse google json", e);
        }
      } else {
        throw new Error("Could not call google", response.statusText);
      }
    });
};

export const useGooglePicker = ({
  authImmediate,
  clientId,
  appId,
  developerKey,
  disabled,
  origin,
  onChange,
  onAuthenticate,
  onAuthFailed,
  createPicker,
  mimeTypes,
  multiselect,
  scope,
  navHidden,
  viewId,
  query,
}) => {
  useEffect(() => {
    if (isGoogleReady()) {
      // google api is already exists
      // init immediately
      onApiLoad();
    } else if (!scriptLoadingStarted) {
      // load google api and the init
      scriptLoadingStarted = true;
      loadScript(GOOGLE_SDK_URL, onApiLoad);
    } else {
      // is loading
    }
  }, []);

  const isGoogleReady = () => {
    return !!window.gapi;
  };

  const isGoogleAuthReady = () => {
    return !!window.gapi.auth2;
  };

  const isGooglePickerReady = () => {
    return !!window.google.picker;
  };

  const onApiLoad = () => {
    window.gapi.load("auth2");
    window.gapi.load("picker");
    window.gapi.load("client");
  };

  const doAuth = (callback) => {
    window.gapi.auth2.authorize(
      {
        client_id: clientId,
        scope: scope.join(" "),
        immediate: authImmediate,
      },
      callback
    );
  };

  const onChoose = () => {
    if (
      !isGoogleReady() ||
      !isGoogleAuthReady() ||
      !isGooglePickerReady() ||
      disabled
    ) {
      return null;
    }

    /*const token = window.gapi.auth2.getToken();
    const oauthToken = token && token.access_token;*/
    // const oauthToken = null;

    /*if (oauthToken) {
      handleCreatePicker(oauthToken);
    } else {*/
    doAuth((response) => {
      if (response.access_token) {
        handleCreatePicker(response.access_token);
      } else {
        onAuthFailed(response);
      }
    });
    //}
  };

  const handleCreatePicker = (oauthToken) => {
    onAuthenticate(oauthToken);

    if (createPicker) {
      return createPicker(window.google, oauthToken);
    }

    const googleViewId = window.google.picker.ViewId[viewId];
    const view = new window.google.picker.View(googleViewId);

    if (mimeTypes) {
      view.setMimeTypes(mimeTypes.join(","));
    }
    if (query) {
      view.setQuery(query);
    }

    if (!view) {
      throw new Error("Can't find view by viewId");
    }

    const picker = new window.google.picker.PickerBuilder()
      .addView(view)
      .setOAuthToken(oauthToken)
      .setAppId(appId)
      .setDeveloperKey(developerKey)
      .setCallback(onChange);

    if (origin) {
      picker.setOrigin(origin);
    }

    if (navHidden) {
      picker.enableFeature(window.google.picker.Feature.NAV_HIDDEN);
    }

    if (multiselect) {
      picker.enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED);
    }

    picker.build().setVisible(true);
  };

  return {
    onChoose,
  };
};

const GooglePicker = ({
  authImmediate,
  children,
  clientId,
  developerKey,
  disabled,
  origin,
  onChange,
  onAuthenticate,
  onAuthFailed,
  createPicker,
  mimeTypes,
  multiselect,
  scope,
  navHidden,
  viewId,
  query,
}) => {
  const { onChoose } = useGooglePicker({
    authImmediate,
    clientId,
    developerKey,
    disabled,
    origin,
    onChange,
    onAuthenticate,
    onAuthFailed,
    createPicker,
    mimeTypes,
    multiselect,
    scope,
    navHidden,
    viewId,
    query,
  });

  return <div onClick={onChoose}>{children}</div>;
};

GooglePicker.propTypes = {
  // children: PropTypes.node,
  clientId: PropTypes.string.isRequired,
  developerKey: PropTypes.string,
  scope: PropTypes.array,
  viewId: PropTypes.string,
  authImmediate: PropTypes.bool,
  origin: PropTypes.string,
  onChange: PropTypes.func,
  onAuthenticate: PropTypes.func,
  onAuthFailed: PropTypes.func,
  createPicker: PropTypes.func,
  mimeTypes: PropTypes.arrayOf(PropTypes.string),
  multiselect: PropTypes.bool,
  navHidden: PropTypes.bool,
  disabled: PropTypes.bool,
};

GooglePicker.defaultProps = {
  onChange: () => {},
  onAuthenticate: () => {},
  onAuthFailed: () => {},
  scope: ["https://www.googleapis.com/auth/drive.readonly"],
  viewId: "DOCS",
  authImmediate: false,
  multiselect: false,
  navHidden: false,
  disabled: false,
};

export default GooglePicker;