feat: add LinkedIn component (render props)

Author: nvh95

.eslintrc.js

@@ -16,8 +16,6 @@ module.exports = {
 
   rules: {
     '@typescript-eslint/no-unused-vars': 'error',
-    // to enforce using type for object type definitions, can be type or interface
-    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
   },
 
   env: {

preview/App.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import { LinkedInCallback } from '../src/LinkedInCallback';
-import LinkedInPage from './LinkedInPage';
+// import LinkedInPage from './LinkedInPageHook';
+import LinkedInPage from './LinkedInPageRenderProps';
 
 function App() {
   return (

preview/LinkedInPage.jsx preview/LinkedInPageHook.jsxpreview/LinkedInPage.jsx renamed to preview/LinkedInPageHook.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useLinkedIn } from '../src/useLinkedIn';
 import linkedin from '../assets/linkedin.png';
@@ -17,19 +17,19 @@ function LinkedInPage() {
       setErrorMessage(error.errorMessage);
     },
   });
-  const [code, setCode] = React.useState('');
-  const [errorMessage, setErrorMessage] = React.useState('');
+  const [code, setCode] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
 
   return (
     <div>
-      <div style={{ cursor: 'pointer' }} onClick={linkedInLogin}>
-        <img
-          src={linkedin}
-          alt="Log in with Linked In"
-          style={{ maxWidth: '180px' }}
-        />
-      </div>
-
+      hooks
+      <br />
+      <img
+        onClick={linkedInLogin}
+        src={linkedin}
+        alt="Sign in with Linked In"
+        style={{ maxWidth: '180px', cursor: 'pointer' }}
+      />
       {!code && <div>No code</div>}
       {code && <div>Code: {code}</div>}
       {errorMessage && <div>{errorMessage}</div>}

preview/LinkedInPageRenderProps.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+
+import { LinkedIn } from '../src/LinkedIn';
+import linkedin from '../assets/linkedin.png';
+
+function LinkedInPage() {
+  const [code, setCode] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  return (
+    <div>
+      render props
+      <br />
+      <LinkedIn
+        clientId="86vhj2q7ukf83q"
+        redirectUri={`${window.location.origin}/linkedin`}
+        onSuccess={(code) => {
+          console.log(code);
+          setCode(code);
+        }}
+        scope="r_emailaddress r_liteprofile"
+        onError={(error) => {
+          console.log(error);
+          setErrorMessage(error.errorMessage);
+        }}
+      >
+        {({ linkedInLogin }) => (
+          <img
+            onClick={linkedInLogin}
+            src={linkedin}
+            alt="Sign in with Linked In"
+            style={{ maxWidth: '180px', cursor: 'pointer' }}
+          />
+        )}
+      </LinkedIn>
+      {!code && <div>No code</div>}
+      {code && <div>Code: {code}</div>}
+      {errorMessage && <div>{errorMessage}</div>}
+    </div>
+  );
+}
+
+export default LinkedInPage;

src/LinkedIn.tsx

@@ -0,0 +1,22 @@
+import { LinkedInType } from './types';
+import { useLinkedIn } from './useLinkedIn';
+
+export function LinkedIn({
+  children,
+  redirectUri,
+  clientId,
+  onSuccess,
+  onError,
+  scope,
+  closePopupMessage,
+}: LinkedInType) {
+  const { linkedInLogin } = useLinkedIn({
+    redirectUri,
+    clientId,
+    onSuccess,
+    onError,
+    scope,
+    closePopupMessage,
+  });
+  return children({ linkedInLogin });
+}

src/index.ts

@@ -1,2 +1,3 @@
 export * from './useLinkedIn';
+export * from './LinkedIn';
 export * from './LinkedInCallback';

src/types.ts

@@ -0,0 +1,18 @@
+export interface useLinkedInType {
+  redirectUri: string;
+  clientId: string;
+  onSuccess: (code: string) => void;
+  onError?: ({
+    error,
+    errorMessage,
+  }: {
+    error: string;
+    errorMessage: string;
+  }) => void;
+  scope?: string;
+  closePopupMessage?: string;
+}
+
+export interface LinkedInType extends useLinkedInType {
+  children: ({ linkedInLogin }) => JSX.Element;
+}

src/useLinkedIn.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
+import { useLinkedInType } from './types';
 import { LINKEDIN_OAUTH2_STATE } from './utils';
 
 const getPopupPositionProperties = ({ width = 600, height = 600 }) => {
@@ -18,29 +19,14 @@ const generateRandomString = (length = 20) => {
   return result;
 };
 
-type LinkedInType = {
-  redirectUri: string;
-  clientId: string;
-  onSuccess: (code: string) => void;
-  onError?: ({
-    error,
-    errorMessage,
-  }: {
-    error: string;
-    errorMessage: string;
-  }) => void;
-  scope?: string;
-  closePopupMessage?: string;
-};
-
 export function useLinkedIn({
   redirectUri,
   clientId,
   onSuccess,
   onError,
   scope = 'r_emailaddress',
   closePopupMessage = 'User closed the popup',
-}: LinkedInType) {
+}: useLinkedInType) {
   const popupRef = useRef<Window>(null);
   const popUpIntervalRef = useRef<number>(null);