From 73e0c7e30aa14b13f5ef42b5a72381377bb31ffb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Luena=20Rodr=C3=ADguez?= <maluenarod@gmail.com>
Date: Sun, 6 Jun 2021 11:50:41 +0200
Subject: [PATCH] Modal to recruit user (airtable) (#30)

* Modal to recruit user (airtable)

* airtable: prevent giving a description if 'other' field is not selected

* mobile fixes

* updates in user recruitment  modal

* Updated env variable structure

* cloudbuild configuration - automatic deployment

Co-authored-by: Jorge S. Mendes de Jesus <jorge.mendesdejesus@isric.org>
---
 .cloudbuild.yaml                           |  29 +++++
 .dockerignore                              |   2 +
 .env.default                               |   2 +
 README.md                                  |  16 +--
 components/explore/component.js            |  11 ++
 components/forms/radio/index.js            |   5 +-
 components/user-modal/component.js         |  95 ++++++++++++++
 components/user-modal/content/constants.js |  22 ++++
 components/user-modal/content/step1.js     | 140 +++++++++++++++++++++
 components/user-modal/content/step2.js     |  78 ++++++++++++
 components/user-modal/index.js             |   1 +
 components/user-modal/style.scss           |  65 ++++++++++
 package.json                               |   3 +-
 run.sh                                     |  17 ++-
 utils/airtable.js                          |  35 ++++++
 yarn.lock                                  |  28 ++++-
 16 files changed, 536 insertions(+), 13 deletions(-)
 create mode 100644 .cloudbuild.yaml
 create mode 100644 components/user-modal/component.js
 create mode 100644 components/user-modal/content/constants.js
 create mode 100644 components/user-modal/content/step1.js
 create mode 100644 components/user-modal/content/step2.js
 create mode 100644 components/user-modal/index.js
 create mode 100644 components/user-modal/style.scss
 create mode 100644 utils/airtable.js

diff --git a/.cloudbuild.yaml b/.cloudbuild.yaml
new file mode 100644
index 0000000..7837d15
--- /dev/null
+++ b/.cloudbuild.yaml
@@ -0,0 +1,29 @@
+steps:
+  - id: 'build-image'
+    name: 'gcr.io/cloud-builders/docker'
+    args:
+      - 'build'
+      - '-t'
+      - 'eu.gcr.io/$PROJECT_ID/$REPO_NAME/$BRANCH_NAME/$REPO_NAME:$SHORT_SHA'
+      - '-t'
+      - 'eu.gcr.io/$PROJECT_ID/$REPO_NAME/$BRANCH_NAME/$REPO_NAME:latest'
+      - '.'
+      - '-f'
+      - './Dockerfile'
+    timeout: 1200s
+  - id: 'push-to-registry'
+    name: 'gcr.io/cloud-builders/docker'
+    args:
+      - 'push'
+      - 'eu.gcr.io/$PROJECT_ID/$REPO_NAME/$BRANCH_NAME/$REPO_NAME'
+  - id: 'deploy-to-gke'
+    name: 'gcr.io/cloud-builders/gcloud'
+    env:
+      - 'KUBECONFIG=/.kube/config'
+    entrypoint: 'bash'
+    args:
+      - '-c'
+      - |
+        gcloud container clusters get-credentials soils-revealed-cluster  --project=$PROJECT_ID --zone=europe-west4-a
+        kubectl set image deployment/$REPO_NAME --namespace=$BRANCH_NAME soils-revealed=eu.gcr.io/$PROJECT_ID/$REPO_NAME/$BRANCH_NAME/$REPO_NAME:$SHORT_SHA
+        kubectl rollout restart deployment $REPO_NAME --namespace=$BRANCH_NAME
diff --git a/.dockerignore b/.dockerignore
index 329282c..9eadd8e 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -14,3 +14,5 @@ npm-debug.log
 .editorconfig
 .dockerignore
 .env
+.Dockerfile
+.cloudbuild.yaml
diff --git a/.env.default b/.env.default
index eafb378..cbda645 100644
--- a/.env.default
+++ b/.env.default
@@ -9,3 +9,5 @@ AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
 AWS_MAX_Z_TILE_STORAGE=
 DEPLOYMENT_KEY=
+AIRTABLE_API_KEY=
+AIRTABLE_USER_ID=
diff --git a/README.md b/README.md
index 97ab754..033cd36 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,9 @@ Below is a description of each of the keys.
 | AWS_ACCESS_KEY_ID | Access key ID of the AWS server storing the tiles of the soils layers |
 | AWS_SECRET_ACCESS_KEY | Secret access key of the AWS server storing the tiles of the soils layers |
 | AWS_MAX_Z_TILE_STORAGE | Maximum zoom at which tiles generated on-the-fly will be saved in the AWS S3 bucket |
+| AIRTABLE_API_KEY | Secret access key for [Airtable](https://airtable.com/) |
+| AIRTABLE_USER_ID | Airtable User ID |
+
 
 ## Deployment
 
@@ -66,19 +69,18 @@ docker run -p3001:3001 --env-file .env soils-revealed:latest /soils-revealed/run
 
 ### Google GKE
 
-Public deployment is based on Google Cloud build and Google GKE (Kubernetes). Up on push to `master` or `develop`, the following steps will happen:
+Public deployment is based on Google Cloud build and file `.cloudbuild.yaml`. Up on push to `master` or `develop`, the following steps will happen:
 
 1. Github will trigger a Google Cloud run trigger
 2. Google cloud will pull the branch content.
-3. Docker build will be initicated.
-4. After completed Docker image is stored on a private repository.
-5. Image will then be deplyed into the soils-revealed cluster.
+3. Docker build will be iniciated, using `Dockerfile` and `.cloudbuild.yaml`  
+4. After completed Docker image is stored on a private repository, using tags `latest` and `$SHORT_SHA`
+5. Google Cloud build will update the image on GKE and make a `kubectl rollout restart`
 6. GKE contains a specific `ConfigMap` with all .env necessary for deployment.
 7. `gee.key.json` is added to the pods using a `ConfigMap` mount
+ 
 
-GKE will implement the available Dockerfile.
-
-Overall, deploying to either environment takes between 5 to 10 minutes to complete.
+Overall, deploying to either environment takes between 5 to 10 minutes to complete. If deployment is not successful GKE will continue implementing the previous deployment.
 
 ## Architecture
 
diff --git a/components/explore/component.js b/components/explore/component.js
index fe1ba2b..e0a9d70 100644
--- a/components/explore/component.js
+++ b/components/explore/component.js
@@ -6,6 +6,7 @@ import throttle from 'lodash/debounce';
 
 import { Router } from 'lib/routes';
 import { logEvent } from 'utils/analytics';
+import { isFirstVisit } from 'utils/explore';
 import { useHasMounted, useDesktop } from 'utils/hooks';
 import { toggleBasemap, toggleLabels, toggleRoads } from 'utils/map';
 import {
@@ -28,6 +29,7 @@ import InfoModal from './info-modal';
 import InteractiveFeaturePopup from './interactive-feature-popup';
 import DrawBoard from './draw-board';
 import MapContainer from './map-container';
+import UserModal from 'components/user-modal';
 
 import './style.scss';
 
@@ -76,6 +78,14 @@ const Explore = ({
   const [interactiveFeatures, setInteractiveFeatures] = useState(null);
   const [showTour, setShowTour] = useState(false);
 
+  // User recruitment modal. This modal should appear just the first time the user
+  // visits the map section
+  const [userModalOpen, setUserModalOpen] = useState(isFirstVisit());
+
+  const handleModalClose = () => {
+    setUserModalOpen(false);
+  };
+
   // When the user clicks the popup's button that triggers its close, the map also receives the
   // event and it opens a new popup right after
   // This is a bug of react-map-gl's library
@@ -222,6 +232,7 @@ const Explore = ({
       className="c-explore"
       style={isDesktop ? { backgroundColor: BASEMAPS[basemap].backgroundColor } : undefined}
     >
+      <UserModal open={userModalOpen} onClose={handleModalClose} />
       {isDesktop && (
         <>
           {showTour && <Tour />}
diff --git a/components/forms/radio/index.js b/components/forms/radio/index.js
index b8db140..d5302eb 100644
--- a/components/forms/radio/index.js
+++ b/components/forms/radio/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import './style.scss';
 
-const Radio = ({ id, name, disabled, checked, onChange, children, className }) => (
+const Radio = ({ id, name, disabled, checked, onChange, children, className, required }) => (
   <div
     className={[
       'custom-control',
@@ -20,6 +20,7 @@ const Radio = ({ id, name, disabled, checked, onChange, children, className }) =
       name={name}
       checked={checked}
       onChange={onChange}
+      required={required}
     />
     <label className="custom-control-label" htmlFor={id}>
       {children}
@@ -34,6 +35,7 @@ Radio.propTypes = {
   onChange: PropTypes.func,
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
+  required: PropTypes.bool,
 };
 
 Radio.defaultProps = {
@@ -41,6 +43,7 @@ Radio.defaultProps = {
   checked: false,
   onChange: null,
   className: null,
+  required: false,
 };
 
 export default Radio;
diff --git a/components/user-modal/component.js b/components/user-modal/component.js
new file mode 100644
index 0000000..5ac1726
--- /dev/null
+++ b/components/user-modal/component.js
@@ -0,0 +1,95 @@
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Modal from 'components/modal';
+
+import { createUserEntry, updateUserEntry } from 'utils/airtable';
+
+import Step1 from './content/step1';
+import Step2 from './content/step2';
+
+import './style.scss';
+
+const UserModal = ({ open, onClose }) => {
+  const [step, setStep] = useState('step1');
+  const [userId, setUserId] = useState(null);
+  const [userData, setUserData] = useState({
+    job_role: '',
+    job_role_description: '',
+    map_usage: '',
+    map_usage_description: '',
+    email: '',
+  });
+  const [userEntryError, setCreateUserEntryError] = useState(null);
+
+  const handleCreateUser = async e => {
+    e.preventDefault();
+    try {
+      const user = await createUserEntry({ ...userData });
+      setUserId(user[0].id);
+      setStep('step2');
+    } catch (e) {
+      setCreateUserEntryError(e.message);
+    }
+  };
+
+  const handleUpdateUser = async e => {
+    e.preventDefault();
+    try {
+      await updateUserEntry(userId, userData);
+      onClose();
+    } catch (e) {
+      setCreateUserEntryError(e.message);
+    }
+  };
+
+  const userDataUpdate = useCallback(
+    (key, value) => {
+      if (key === 'job_role_description') {
+        setUserData({
+          ...userData,
+          job_role: 'other',
+          [key]: value,
+        });
+      } else if (key === 'map_usage_description') {
+        setUserData({
+          ...userData,
+          map_usage: 'other',
+          [key]: value,
+        });
+      } else setUserData({ ...userData, [key]: value });
+    },
+    [userData]
+  );
+
+  return (
+    <Modal open={open} onClose={onClose} title="User details" className="c-user-modal">
+      {step === 'step1' && (
+        <Step1
+          key="step1"
+          user={userId}
+          userData={userData}
+          handleUserData={userDataUpdate}
+          onClick={handleCreateUser}
+          error={userEntryError}
+        />
+      )}
+      {step === 'step2' && (
+        <Step2
+          key="step2"
+          userData={userData}
+          handleUserData={userDataUpdate}
+          onClick={handleUpdateUser}
+          error={userEntryError}
+        />
+      )}
+    </Modal>
+  );
+};
+
+UserModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default UserModal;
diff --git a/components/user-modal/content/constants.js b/components/user-modal/content/constants.js
new file mode 100644
index 0000000..f9ea0ad
--- /dev/null
+++ b/components/user-modal/content/constants.js
@@ -0,0 +1,22 @@
+export const userTypeOptions = [
+  { label: 'Academic research', slug: 'Academic research' },
+  { label: 'Government (local, regional or traditional)', slug: 'Government' },
+  { label: 'Private sector', slug: 'Private sector' },
+  { label: 'NGO sector', slug: 'NGO sector' },
+  { label: 'Other [please specify]', slug: 'other', value: '' },
+];
+
+export const useTypeOptions = [
+  { label: 'Curiosity', slug: 'Curiosity' },
+  { label: 'Education', slug: 'Education' },
+  { label: 'Research purposes', slug: 'Research purposes' },
+  { label: 'Planning & Land management', slug: 'Planning and land management' },
+  { label: 'Policy-making', slug: 'Policy-making' },
+  { label: 'Impact & Evaluation', slug: 'Impact and evaluation' },
+  { label: 'Other [please specify]', slug: 'other', value: '' },
+];
+
+export default {
+  userTypeOptions,
+  useTypeOptions,
+};
diff --git a/components/user-modal/content/step1.js b/components/user-modal/content/step1.js
new file mode 100644
index 0000000..bd242af
--- /dev/null
+++ b/components/user-modal/content/step1.js
@@ -0,0 +1,140 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import Radio from 'components/forms/radio';
+
+import { userTypeOptions, useTypeOptions } from './constants';
+
+const Step1 = ({ onClick, userData, handleUserData, error }) => (
+  <form onSubmit={e => onClick(e)}>
+    <h1 className="h4 mb-4">Can you tell us a bit about yourself?</h1>
+    <p className="h5 mt-4">
+      In which sector do you work: * (pick the one that brought you to this map)
+    </p>
+    <div className="form-group user-modal-radio-input-container">
+      {userTypeOptions.map(option => (
+        <Fragment key={option.slug}>
+          <Radio
+            key={option.slug}
+            id={`job-role-${option.slug}`}
+            className="mr-4"
+            name="job-role"
+            checked={option.slug === (userData.job_role || userData.job_role_description)}
+            onChange={() => handleUserData('job_role', option.slug)}
+            required
+          >
+            {option.label}
+          </Radio>
+          {option.slug === 'other' && (
+            <>
+              <input
+                type="text"
+                id="job_role_description"
+                name="job_role_description"
+                className="user-modal-text-input"
+                placeholder="insert your profession"
+                aria-label="insert your profession"
+                disabled={option.slug !== 'other'}
+                value={userData.job_role_description}
+                onChange={({ currentTarget }) =>
+                  handleUserData('job_role_description', currentTarget.value)
+                }
+                required={userData.job_role_description === 'other'}
+              />
+            </>
+          )}
+        </Fragment>
+      ))}
+    </div>
+
+    <p className="h5 mt-4">
+      Please tell us what you are using Soils platform for: <sup>*</sup>
+    </p>
+
+    <div className="form-group user-modal-radio-input-container">
+      {useTypeOptions.map(option => (
+        <Fragment key={option.slug}>
+          <Radio
+            key={option.slug}
+            id={`map_usage-${option.slug}`}
+            className="mr-4"
+            name="map-usage"
+            checked={option.slug === userData.map_usage}
+            onChange={() => handleUserData('map_usage', option.slug)}
+            required
+          >
+            {option.label}
+          </Radio>
+          {option.slug === 'other' && (
+            <>
+              <input
+                type="text"
+                id="map_usage_description"
+                name="map_usage_description"
+                className="user-modal-text-input"
+                value={userData.map_usage_description}
+                placeholder="insert your profession"
+                aria-label="insert your profession"
+                disabled={option.slug !== 'other'}
+                onChange={e => handleUserData('map_usage_description', e.currentTarget.value)}
+                required={userData.map_usage === 'other'}
+              />
+            </>
+          )}
+        </Fragment>
+      ))}
+    </div>
+    <div className="container mt-3">
+      <div className="row">
+        <div className="col-sm-12 text-left mb-3">
+          <p className="user-modal-content-note">*required fields</p>
+        </div>
+      </div>
+    </div>
+
+    {error && (
+      <p className="alert alert-danger" role="alert">
+        Unable to create user entry, please try again.
+      </p>
+    )}
+    <div className="container mt-3">
+      <div className="row">
+        <div className="col-sm-12 text-center mb-3">
+          <button
+            type="submit"
+            className="btn btn-primary btn-fixed-width"
+            disabled={
+              userData.job_role === '' ||
+              (userData.job_role === 'other' && userData.job_role.description === '') ||
+              userData.map_usage === '' ||
+              (userData.map_usage === 'other' && userData.map_usage.description === '')
+            }
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+);
+
+Step1.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  handleUserData: PropTypes.func.isRequired,
+  userData: PropTypes.shape({
+    job_role: PropTypes.string,
+    job_role_description: PropTypes.string,
+    map_usage: PropTypes.string,
+    map_usage_description: PropTypes.string,
+    email: PropTypes.string,
+  }),
+  user: PropTypes.string,
+  error: PropTypes.string,
+};
+
+Step1.defaultProps = {
+  user: null,
+  error: null,
+};
+
+export default Step1;
diff --git a/components/user-modal/content/step2.js b/components/user-modal/content/step2.js
new file mode 100644
index 0000000..19a7d56
--- /dev/null
+++ b/components/user-modal/content/step2.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Step2 = ({ userData, handleUserData, onClick, error }) => (
+  <form onSubmit={e => !error && onClick(e)}>
+    <h2 className="mb-4 text-center">Thank you!</h2>
+    <div className="text-size-base">
+      <p>Would you like to hep us to improve this map?</p>
+      <p>
+        Feedback is really important to us. If you’d like to provide your opinion, write down your
+        email and we might invite you for a one-to-one chat session.
+      </p>
+    </div>
+    <div className="user-modal-input">
+      <div className="form-group mt-3">
+        <input
+          type="email"
+          id="email"
+          aria-label="insert your email"
+          className="form-control user-modal-text-input"
+          placeholder="insert your email"
+          value={userData.email}
+          onChange={({ currentTarget }) => handleUserData('email', currentTarget.value)}
+        />
+      </div>
+      <div className="user-modal-content-note text-center">
+        <p>
+          Your email address will be used by Simbiotica SL DBA Vizzuality on behalf of The Nature
+          Conservancy. We will only be using your email address to contact you in order to conduct
+          user research on this website.Your email will not be shared with any thirsd parties. For
+          more information and instructions on exercisong your rights on this data please read our{' '}
+          <a
+            href="https://www.nature.org/en-us/about-us/who-we-are/accountability/privacy-policy/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Privacy policy
+          </a>
+        </p>
+      </div>
+
+      {error && (
+        <p className="alert alert-danger" role="alert">
+          Unable to update user entry, please try again.
+        </p>
+      )}
+
+      <div className="container mt-3">
+        <div className="row">
+          <div className="col-sm-12 text-center mb-3">
+            <button type="submit" className="btn btn-primary btn-fixed-width">
+              Done
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+);
+
+Step2.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  handleUserData: PropTypes.func.isRequired,
+  userData: PropTypes.shape({
+    job_role: PropTypes.string,
+    job_role_description: PropTypes.string,
+    map_usage: PropTypes.string,
+    map_usage_description: PropTypes.string,
+    email: PropTypes.string,
+  }),
+  error: PropTypes.string,
+};
+
+Step2.defaultProps = {
+  error: null,
+};
+
+export default Step2;
diff --git a/components/user-modal/index.js b/components/user-modal/index.js
new file mode 100644
index 0000000..b404d7f
--- /dev/null
+++ b/components/user-modal/index.js
@@ -0,0 +1 @@
+export { default } from './component';
diff --git a/components/user-modal/style.scss b/components/user-modal/style.scss
new file mode 100644
index 0000000..eae02b9
--- /dev/null
+++ b/components/user-modal/style.scss
@@ -0,0 +1,65 @@
+@import 'css/settings';
+
+.c-user-modal {
+  max-width: rem(850);
+  display: flex;
+  justify-content: center;
+
+  @include media-breakpoint-up(lg, $grid-breakpoints) {
+    padding: rem(50) rem(100);
+  }
+
+  h1,
+  h2 {
+    @include font-size($font-size-xxl);
+    text-align: left;
+  }
+
+  .text-size-base {
+    @include font-size($font-size-base);
+  }
+
+  .user-modal-radio-input-container {
+    max-width: 100%;
+    max-height: 100%;
+    flex-wrap: wrap;
+    flex-direction: column;
+    display: flex;
+
+    @include media-breakpoint-up(sm, $grid-breakpoints) {
+      max-height: 125px;
+    }
+
+    .custom-radio {
+      @include media-breakpoint-up(sm, $grid-breakpoints) {
+        width: 50%;
+      }
+    }
+  }
+
+  .user-modal-text-input {
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid $primary;
+    border-radius: 0;
+    padding-left: 0;
+    max-width: 180px;
+  }
+
+  .user-modal-content-note {
+    font-family: $font-family-2;
+    @include font-size($font-size-xxs);
+    font-weight: initial;
+    opacity: 50%;
+
+    p {
+      text-align: justify;
+
+      a {
+        text-decoration: underline;
+        color: $text-color-1;
+      }
+    }
+  }
+}
+
diff --git a/package.json b/package.json
index 8faaec6..d830fa6 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,9 @@
     "@turf/area": "^6.0.1",
     "@turf/bbox": "^6.0.1",
     "@zeit/next-sass": "^1.0.1",
-    "axios": "^0.19.2",
+    "airtable": "^0.11.1",
     "aws-sdk": "^2.808.0",
+    "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
     "classnames": "^2.2.6",
     "dayjs": "^1.9.6",
diff --git a/run.sh b/run.sh
index f7af374..7583fad 100755
--- a/run.sh
+++ b/run.sh
@@ -4,9 +4,20 @@ yarn_build () {
   echo -e "Using: $(cat .env)"
   source /root/.nvm/nvm.sh
   echo -e "Preparing .env file"
-  echo -e "PORT=$PORT\nMAPBOX_API_KEY=$MAPBOX_API_KEY\nAPI_URL=$API_URL\nANALYSIS_API_URL=$ANALYSIS_API_URL\nGOOGLE_ANALYTICS_KEY=$GOOGLE_ANALYTICS_KEY\nAWS_REGION=$AWS_REGION\nAWS_BUCKET_NAME=$AWS_BUCKET_NAME\nAWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID\nAWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY\nAWS_MAX_Z_TILE_STORAGE=$AWS_MAX_Z_TILE_STORAGE" >> .env
+  echo -e "PORT=$PORT\n\
+MAPBOX_API_KEY=$MAPBOX_API_KEY\n\
+API_URL=$API_URL\n\
+ANALYSIS_API_URL=$ANALYSIS_API_URL\n\
+GOOGLE_ANALYTICS_KEY=$GOOGLE_ANALYTICS_KEY\n\
+AWS_REGION=$AWS_REGION\n\
+AWS_BUCKET_NAME=$AWS_BUCKET_NAME\n\
+AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID\n\
+AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY\n\
+AWS_MAX_Z_TILE_STORAGE=$AWS_MAX_Z_TILE_STORAGE\n\
+AIRTABLE_API_KEY=$AIRTABLE_API_KEY\n\
+AIRTABLE_USER_ID=$AIRTABLE_USER_ID" >> .env
   echo -e "Initiating yarn build"
-  
+
   yarn build
 
 }
@@ -29,4 +40,4 @@ esac
 #node index.js
 #yarn start
 #exec pm2 start --no-daemon yarn -- start
- 
+
diff --git a/utils/airtable.js b/utils/airtable.js
new file mode 100644
index 0000000..8daffe8
--- /dev/null
+++ b/utils/airtable.js
@@ -0,0 +1,35 @@
+import Airtable from 'airtable';
+
+const { AIRTABLE_API_KEY: API_KEY } = process.env;
+const { AIRTABLE_USER_ID: USER_ID } = process.env;
+
+const USERS_TABLE = 'Soils-Recruitment-2021';
+
+const userResearchBase = new Airtable({
+  apiKey: API_KEY,
+}).base(USER_ID);
+const createUserEntry = userData => {
+  return new Promise((resolve, reject) => {
+    userResearchBase(USERS_TABLE).create([{ fields: userData }], (error, records) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve(records);
+    });
+  });
+};
+
+const updateUserEntry = (id, userData) => {
+  return new Promise((resolve, reject) => {
+    userResearchBase(USERS_TABLE).update([{ id, fields: userData }], (error, records) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve(records);
+    });
+  });
+};
+
+export { createUserEntry, updateUserEntry };
diff --git a/yarn.lock b/yarn.lock
index 40df4e0..111f049 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1451,6 +1451,11 @@
   dependencies:
     "@types/geojson" "*"
 
+"@types/node@>=8.0.0 <15":
+  version "14.17.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.1.tgz#5e07e0cb2ff793aa7a1b41deae76221e6166049f"
+  integrity sha512-/tpUyFD7meeooTRwl3sYlihx2BrJE7q9XF71EguPFIySj9B7qgnRtHsHTho+0AUm4m1SvWGm6uSncrR94q6Vtw==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -1717,6 +1722,11 @@ abort-controller@3.0.0, abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
+abortcontroller-polyfill@^1.4.0:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz#1b5b487bd6436b5b764fd52a612509702c3144b5"
+  integrity sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==
+
 accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -1790,6 +1800,17 @@ agent-base@6:
   dependencies:
     debug "4"
 
+airtable@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/airtable/-/airtable-0.11.1.tgz#2fda51da04f5e4be7092351ea7be3cfdcf308347"
+  integrity sha512-33zBuUDhLl+FWWAFxFjS1a+vJr/b+UK//EV943nuiimChWph6YykQjYPmu/GucQ30g7mgaqq+98uPD4rfDHOgg==
+  dependencies:
+    "@types/node" ">=8.0.0 <15"
+    abort-controller "^3.0.0"
+    abortcontroller-polyfill "^1.4.0"
+    lodash "^4.17.21"
+    node-fetch "^2.6.1"
+
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -6388,6 +6409,11 @@ lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.1
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 lolex@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
@@ -7007,7 +7033,7 @@ node-fetch@2.6.0, node-fetch@^2.3.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
-node-fetch@2.6.1:
+node-fetch@2.6.1, node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==