Extract hooks to expose methods such as onChoose()

[max-carroll]

I am getting some styling issues as I am using grid layout (via Material UI), this problem could be solved by allowing some classNames to be passed to the div, or extracting a hook like useGooglePicker (see example below)

I'm happy to implement this, and I'm going to implement this in my fork, I suppose since this is the number one google picker library we should take responsibility to keep it up to date.

This could potentially be a breaking change so we could perhaps make this a major version increment

useGooglePicker = ( props ) => {

 return {
   handleChoose
}

}

[max-carroll]

I'm having real trouble getting this code up and running, I think its not been built to be system agnostic perhaps some of the build commands look unix specific (with commands like rm rf)

I've decided to just extract the source code into my own project as a result of this but will share with you how I changed it into hooks.

With these changes here it is currently possible to use it as it was (without any breaking changes) or use the hook without the component

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import loadScript from 'load-script'

const GOOGLE_SDK_URL = 'https://apis.google.com/js/api.js'

let scriptLoadingStarted = false

const useGooglePicker = ({
  authImmediate,
  clientId,
  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.auth
  }

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

  const onApiLoad = () => {
    window.gapi.load('auth')
    window.gapi.load('picker')
  }

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

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

    const token = window.gapi.auth.getToken()
    const oauthToken = token && token.access_token

    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)
      .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

// original source code at https://github.com/sdoomz/react-google-picker/blob/master/src/react-google-picker.js