Release 2.0.0

kwent · Jun 16, 2022 · 0774f2b · 0774f2b
1 parent e43f279
commit 0774f2b
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 2.0.0
+
+- Contact API deprecation solved and People API implementation added
+
 ## 1.0.1
 
 - Fix extractGivenNameFromEntry & extractFamilyNameFromEntry is not defined

diff --git a/demo/index.html b/demo/index.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html>
-  <link rel="stylesheet" href="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
+  <!-- CSS only -->
   <div id="google-contacts"></div>
-  <script src="//use.fontawesome.com/3bd7769ce1.js"></script>
   <script src="/webpack-dev-server.js"></script>
   <script src="bundle.js"></script>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-google-contacts",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "A Google Button to import user's gmail contacts",
   "main": "dist/google-contacts.js",
   "scripts": {
@@ -67,7 +67,7 @@
     "react-hot-loader": "4.13.0",
     "react-test-renderer": "17.0.1",
     "webpack": "5.17.0",
-    "webpack-cli": "4.4.0",
+    "webpack-cli": "4.10.0",
     "webpack-dev-server": "3.11.2"
   },
   "peerDependencies": {

diff --git a/src/google-contacts.js b/src/google-contacts.js
@@ -42,7 +42,7 @@ class GoogleContacts extends Component {
   }
 
   handleImportContacts(res, pageToken = null) {
-    const { onFailure } = this.props
+    const { onFailure, maxResults } = this.props
 
     if (res) {
       const authResponse = res.getAuthResponse()
@@ -52,7 +52,7 @@ class GoogleContacts extends Component {
             path: 'https://people.googleapis.com/v1/otherContacts',
             params: {
               readMask: 'names,emailAddresses',
-              pageSize: this.props.maxResults > 1000 ? 1000 : this.props.maxResults,
+              pageSize: maxResults > 1000 ? 1000 : maxResults,
               ...(pageToken && { pageToken })
             },
             headers: {
@@ -69,14 +69,15 @@ class GoogleContacts extends Component {
   }
 
   handleNextDataFetch(response, authResponse) {
+    const { maxResults } = this.props
     // Parse the response body
     const parsedData = JSON.parse(response.body)
 
     // Store the fetched data so that we can use it later
     this.allData = [...this.allData, ...parsedData.otherContacts]
 
     // If we have more data and the number of data we fethced is less than maxResults then fetch again using the nextPageToken
-    if ('nextPageToken' in parsedData && this.props.maxResults < this.allData.length) {
+    if ('nextPageToken' in parsedData && maxResults < this.allData.length) {
       this.handleImportContacts(authResponse, parsedData.nextPageToken)
     } else {
       this.handleParseContacts()
@@ -118,6 +119,8 @@ class GoogleContacts extends Component {
       onSuccess
     } = this.props
 
+    const { disable } = this.state
+
     const params = {
       client_id: clientId,
       cookie_policy: cookiePolicy,
@@ -137,7 +140,7 @@ class GoogleContacts extends Component {
     if (e) {
       e.preventDefault() // to prevent submit if used within form
     }
-    if (!this.state.disabled) {
+    if (!disable) {
       const _signIn = () => {
         const auth2 = window.gapi.auth2.getAuthInstance()
         const options = { prompt }
@@ -166,8 +169,9 @@ class GoogleContacts extends Component {
   }
 
   render() {
-    const { tag, type, className, disabledStyle, buttonText, children, render, theme, icon } = this.props
-    const disabled = this.state.disabled || this.props.disabled
+    const { tag, type, className, disabledStyle, buttonText, children, render, theme, icon, disabled: disabledProps } = this.props
+    const { active, hovered, disabled: disabledState } = this.state
+    const disabled = disabledState || disabledProps
 
     if (render) {
       return render({ onClick: this.signIn })
@@ -204,15 +208,15 @@ class GoogleContacts extends Component {
         return Object.assign({}, initialStyle, disabledStyle)
       }
 
-      if (this.state.active) {
+      if (active) {
         if (theme === 'dark') {
           return Object.assign({}, initialStyle, activeStyle)
         }
 
         return Object.assign({}, initialStyle, activeStyle)
       }
 
-      if (this.state.hovered) {
+      if (hovered) {
         return Object.assign({}, initialStyle, hoveredStyle)
       }
 
@@ -232,7 +236,7 @@ class GoogleContacts extends Component {
         className
       },
       [
-        icon && <Icon key={1} active={this.state.active} />,
+        icon && <Icon key={1} active={active} />,
         <ButtonContent key={2} icon={icon}>
           {children || buttonText}
         </ButtonContent>
@@ -244,50 +248,50 @@ class GoogleContacts extends Component {
 }
 
 GoogleContacts.propTypes = {
-  onSuccess: PropTypes.func.isRequired,
-  onFailure: PropTypes.func.isRequired,
-  clientId: PropTypes.string.isRequired,
-  jsSrc: PropTypes.string,
-  onRequest: PropTypes.func,
+  accessType: PropTypes.string,
   buttonText: PropTypes.node,
+  children: PropTypes.node,
   className: PropTypes.string,
-  redirectUri: PropTypes.string,
+  clientId: PropTypes.string.isRequired,
   cookiePolicy: PropTypes.string,
-  loginHint: PropTypes.string,
-  hostedDomain: PropTypes.string,
-  children: PropTypes.node,
-  disabledStyle: PropTypes.object,
-  prompt: PropTypes.string,
-  tag: PropTypes.string,
   disabled: PropTypes.bool,
+  disabledStyle: PropTypes.object,
   discoveryDocs: PropTypes.array,
-  uxMode: PropTypes.string,
-  responseType: PropTypes.string,
-  type: PropTypes.string,
-  accessType: PropTypes.string,
+  hostedDomain: PropTypes.string,
+  icon: PropTypes.bool,
+  jsSrc: PropTypes.string,
+  loginHint: PropTypes.string,
+  maxResults: PropTypes.number,
+  onFailure: PropTypes.func.isRequired,
+  onRequest: PropTypes.func,
+  onSuccess: PropTypes.func.isRequired,
+  prompt: PropTypes.string,
+  redirectUri: PropTypes.string,
   render: PropTypes.func,
+  responseType: PropTypes.string,
+  tag: PropTypes.string,
   theme: PropTypes.string,
-  icon: PropTypes.bool,
-  maxResults: PropTypes.number
+  type: PropTypes.string,
+  uxMode: PropTypes.string
 }
 
 GoogleContacts.defaultProps = {
-  type: 'button',
-  tag: 'button',
-  buttonText: 'Import from Gmail',
   accessType: 'online',
-  prompt: 'consent',
+  buttonText: 'Import from Gmail',
   cookiePolicy: 'single_host_origin',
-  uxMode: 'popup',
   disabled: false,
-  maxResults: 999,
   disabledStyle: {
     opacity: 0.6
   },
   icon: true,
-  theme: 'light',
+  jsSrc: 'https://apis.google.com/js/api.js',
+  maxResults: 999,
   onRequest: () => {},
-  jsSrc: 'https://apis.google.com/js/api.js'
+  prompt: 'consent',
+  tag: 'button',
+  theme: 'light',
+  type: 'button',
+  uxMode: 'popup'
 }
 
 export default GoogleContacts
diff --git a/src/icon.js b/src/icon.js
@@ -1,24 +1,36 @@
 import React from 'react'
 
-export default ({ active }) => (
-  <div style={{ marginRight: 10, background: active ? '#eee' : '#fff', padding: 10, borderRadius: 2 }}>
-    <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
-      <g fill="#000" fillRule="evenodd">
-        <path
-          d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
-          fill="#EA4335"
-        />
-        <path d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z" fill="#4285F4" />
-        <path
-          d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
-          fill="#FBBC05"
-        />
-        <path
-          d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
-          fill="#34A853"
-        />
-        <path fill="none" d="M0 0h18v18H0z" />
-      </g>
-    </svg>
-  </div>
-)
+export default function Icon({ active }) {
+  return (
+    <div
+      style={{
+        background: active ? '#eee' : '#fff',
+        borderRadius: 2,
+        marginRight: 10,
+        padding: 10
+      }}
+    >
+      <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg">
+        <g fill="#000" fillRule="evenodd">
+          <path
+            d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
+            fill="#EA4335"
+          />
+          <path
+            d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z"
+            fill="#4285F4"
+          />
+          <path
+            d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
+            fill="#FBBC05"
+          />
+          <path
+            d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
+            fill="#34A853"
+          />
+          <path d="M0 0h18v18H0z" fill="none" />
+        </g>
+      </svg>
+    </div>
+  )
+}