feat: headless functionality in hook

src/OAuth2Login.jsx

@@ -1,120 +1,38 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import PopupWindow from './PopupWindow';
-import { toQuery } from './utils';
+import useOAuth2Login from './useOAuth2Login';
 
-const responseTypeLocationKeys = {
-  code: 'search',
-  token: 'hash',
-};
+function OAuth2Login(props) {
+  const {
+    id, className, buttonText, children, render, ...hookProps
+  } = props;
 
-const responseTypeDataKeys = {
-  code: 'code',
-  token: 'access_token',
-};
+  const { activate } = useOAuth2Login({
+    ...hookProps,
+    popupName: buttonText,
+  });
 
-class OAuth2Login extends Component {
-  constructor(props) {
-    super(props);
-    this.onBtnClick = this.onBtnClick.bind(this);
-    this.onRequest = this.onRequest.bind(this);
-    this.onSuccess = this.onSuccess.bind(this);
-    this.onFailure = this.onFailure.bind(this);
+  function handleClick() {
+    activate();
   }
 
-  onBtnClick() {
-    const {
-      buttonText,
-      authorizationUrl,
-      clientId,
-      scope,
-      redirectUri,
-      state,
-      responseType,
-      popupWidth,
-      popupHeight,
-      isCrossOrigin,
-      extraParams,
-    } = this.props;
-    const payload = {
-      client_id: clientId,
-      scope,
-      redirect_uri: redirectUri,
-      response_type: responseType,
-      ...extraParams,
-    };
-    if (state) {
-      payload.state = state;
-    }
-    const search = toQuery(payload);
-    const width = popupWidth;
-    const height = popupHeight;
-    const left = window.screenX + ((window.outerWidth - width) / 2);
-    const top = window.screenY + ((window.outerHeight - height) / 2.5);
-    const locationKey = responseTypeLocationKeys[responseType];
-    const popup = PopupWindow.open(
-      buttonText,
-      `${authorizationUrl}?${search}`,
-      {
-        height, width, top, left,
-      },
-      {
-        locationKey,
-        isCrossOrigin,
-      },
-    );
-    this.popup = popup;
-
-    this.onRequest();
-    popup
-      .then(this.onSuccess)
-      .catch(this.onFailure);
+  if (render) {
+    return render({
+      className, buttonText, children, onClick: handleClick,
+    });
   }
 
-  onRequest() {
-    const { onRequest } = this.props;
-    onRequest();
-  }
-
-  onSuccess(data) {
-    const { responseType, onSuccess, isCrossOrigin } = this.props;
-    const responseKey = responseTypeDataKeys[responseType];
-
-    // Cross origin requests will already handle this, let's just return the data
-    if (!isCrossOrigin && !data[responseKey]) {
-      console.error('received data', data);
-      return this.onFailure(new Error(`'${responseKey}' not found in received data`));
-    }
-
-    return onSuccess(data);
-  }
-
-  onFailure(error) {
-    const { onFailure } = this.props;
-    onFailure(error);
-  }
-
-  render() {
-    const {
-      id, className, buttonText, children, render,
-    } = this.props;
-
-    if (render) {
-      return render({
-        className, buttonText, children, onClick: this.onBtnClick,
-      });
-    }
-    const attrs = { onClick: this.onBtnClick };
-    if (id) {
-      attrs.id = id;
-    }
-    if (className) {
-      attrs.className = className;
-    }
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <button type="button" {...attrs}>{ children || buttonText }</button>;
-  }
+  return (
+    <button
+      type="button"
+      id={id}
+      className={className}
+      onClick={handleClick}
+    >
+      { children || buttonText }
+    </button>
+  );
 }
 
 OAuth2Login.defaultProps = {

src/index.js

@@ -1,3 +1,8 @@
 import OAuth2Login from './OAuth2Login';
+import useOAuth2Login from './useOAuth2Login';
+
+export {
+  useOAuth2Login,
+};
 
 export default OAuth2Login;

src/useOAuth2Login.jsx

@@ -0,0 +1,98 @@
+import PopupWindow from './PopupWindow';
+import { toQuery } from './utils';
+
+const responseTypeLocationKeys = {
+  code: 'search',
+  token: 'hash',
+};
+
+const responseTypeDataKeys = {
+  code: 'code',
+  token: 'access_token',
+};
+
+function useOAuth2Login(options) {
+  const {
+    authorizationUrl,
+    clientId,
+    scope,
+    redirectUri,
+    state,
+    responseType,
+    popupWidth,
+    popupHeight,
+    popupName,
+    isCrossOrigin,
+    extraParams,
+    onFailure,
+    onSuccess,
+    onRequest,
+  } = options;
+
+  function activate() {
+    function handleRequest() {
+      if (onRequest) {
+        onRequest();
+      }
+    }
+
+    function handleSuccess(data) {
+      const responseKey = responseTypeDataKeys[responseType];
+
+      // Cross origin requests will already handle this, let's just return the data
+      if (!isCrossOrigin && !data[responseKey]) {
+        console.error('received data', data);
+        return onFailure && onFailure(new Error(`'${responseKey}' not found in received data`));
+      }
+
+      return onSuccess && onSuccess(data);
+    }
+
+    function handleFailure(error) {
+      onFailure && onFailure(error);
+    }
+
+    const payload = {
+      client_id: clientId,
+      scope,
+      redirect_uri: redirectUri,
+      response_type: responseType,
+      ...extraParams,
+    };
+
+    if (state) {
+      payload.state = state;
+    }
+    const search = toQuery(payload);
+    const width = popupWidth;
+    const height = popupHeight;
+    const left = window.screenX + ((window.outerWidth - width) / 2);
+    const top = window.screenY + ((window.outerHeight - height) / 2.5);
+    const locationKey = responseTypeLocationKeys[responseType];
+
+    const popup = PopupWindow.open(
+      popupName,
+      `${authorizationUrl}?${search}`,
+      {
+        height, width, top, left,
+      },
+      {
+        locationKey,
+        isCrossOrigin,
+      },
+    );
+
+    handleRequest();
+
+    popup
+      .then(handleSuccess)
+      .catch(handleFailure);
+
+  }
+
+  return {
+    activate,
+  };
+}
+
+export default useOAuth2Login;