Modal to recruit user (airtable) #30

mluena · 2021-05-28T09:23:48Z

This PR adds a modal to recruit users through airtable. It includes:

Connection to airtable (Soils-Recruitment-2021)
Modal in map section (it should appear just the first time the user enters to the page)

clementprdhomme

Once the changes are implemented, we need to ask Jorge to add the two new env keys to the servers.

clementprdhomme · 2021-05-31T09:27:55Z

components/user-modal/content/step1.js

+
+const Step1 = ({ onClick, userData, handleUserData, user }) => (
+  <section>
+    <h4 className="mb-4">Can you tell us a bit about yourself?</h4>


This should be an h1. If you want the h4 style, you can use the class .h4.

Suggested change

<h4 className="mb-4">Can you tell us a bit about yourself?</h4>

<h1 className="h4 mb-4">Can you tell us a bit about yourself?</h1>

clementprdhomme · 2021-05-31T09:34:22Z

components/user-modal/content/step1.js

+const Step1 = ({ onClick, userData, handleUserData, user }) => (
+  <section>
+    <h4 className="mb-4">Can you tell us a bit about yourself?</h4>
+    <h5 className="mt-4">


I don't think this needs to be a title at all. Feel free to use the class .h5 if you want to reuse the style.

clementprdhomme · 2021-05-31T09:37:15Z

components/user-modal/content/step1.js

+    map_usage_description: PropTypes.string,
+    email: PropTypes.string,
+  }),
+  user: PropTypes.string.isRequired,


The default value is null, so if you mark it as required, you get an error in the console.

clementprdhomme · 2021-05-31T09:40:14Z

components/user-modal/content/step1.js

+    </h5>
+    <div className="form-group user-modal-radio-input-container">
+      {userTypeOptions.map(option => (
+        <>


There's an error in the console because this element doesn't have a key. Use:

Suggested change

<>

<Fragment key={option.slug}>

instead and remove the key from the <Radio /> component.

clementprdhomme · 2021-05-31T09:45:39Z

components/user-modal/content/step1.js

+      ))}
+    </div>
+
+    <h5 className="mt-4">


You probably want something like this:

Suggested change

<h5 className="mt-4">

<p className="h5 mt-4">

clementprdhomme · 2021-05-31T10:01:10Z

components/user-modal/content/step1.js

+              <label aria-label="hidden" className="visually-hidden">
+                jmap usage description
+              </label>


🚮

Suggested change

<label aria-label="hidden" className="visually-hidden">

jmap usage description

</label>

clementprdhomme · 2021-05-31T10:02:49Z

components/user-modal/component.js

+  });
+
+  const handleCreateUser = async () => {
+    const user = await createUserEntry({ ...userData });


createUserEntry can reject. Put a try/catch around it.

It'd be great if you could display an error message in the UI if this fails.

clementprdhomme · 2021-05-31T10:03:08Z

components/user-modal/component.js

+  };
+
+  const handleUpdateUser = () => {
+    updateUserEntry(userId, userData);


Same here: put a try/catch, and adding an error message in the UI would be nice.

clementprdhomme · 2021-05-31T10:05:00Z

components/explore/component.js

+  // User data modal, prevent modal to appear again after first visit
+  const myStorage = typeof window !== 'undefined' ? window.localStorage : null;
+  const modalStatus = typeof window !== 'undefined' && myStorage.getItem('modal');
+  const [userModalOpen, setUserModalOpen] = useState(modalStatus === null);


Can you use a more descriptive name? In a few months, we won't remember what “modal” is.

clementprdhomme · 2021-05-31T10:05:35Z

components/explore/component.js

+  const [userModalOpen, setUserModalOpen] = useState(modalStatus === null);
+
+  const handleModalClose = () => {
+    myStorage.setItem('modal', 'filled');


Same here: 'modal' could be named something else like 'userResearchModal'.

clementprdhomme · 2021-06-01T08:40:41Z

Hi @jorgejesus,

This PR contains the new user research modal that will be displayed on the map page. María added two new environment variables:

AIRTABLE_API_KEY
AIRTABLE_USER_ID

Could you add them to the configuration of the staging and production server? You should have received some shared credentials from LastPass with the values in there.

mluena · 2021-06-02T16:11:54Z

Hi @jorgejesus,
Could you confirm when you add the variables mentioned above?
Thank you!

jorgejesus · 2021-06-02T16:23:58Z

Yes I will. It will be done tomorrow morning.

jorgejesus · 2021-06-03T09:52:08Z

Ground control to Majors @mluena @clementprdhomme:

committed an update to run.sh (removal of extra envs)
Local tested docker build

Can I merge to develop ?!

jorgejesus · 2021-06-04T16:10:52Z

Hi @mluena @clementprdhomme

Added file .cloudbuild.yaml necessary for automatic deployment into K8s
Updated README.md to indicate the deployment strategy
On the k8s side, staging.soilsrevealed.org has the necessary configurations for deployment with new variables.
If staging works will implement automatic deployment on master
Will deploy to staging saturday morning (5th July)

jorgejesus · 2021-06-06T10:20:59Z

This is ISRIC ground control to Majours @mluena and @clementprdhomme automatic merge and automatic deployment has been successful with a perfect landing on stagning.soilsrevealed.org. ROGER OUT

* Dockerfile/K8s implementation, prod/dev run (#24) * Delete the GitHub Actions The app will now be built with ISRIC's Google Cloud account * google search verification file added (#31) * 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> * Typo on .dockerignore * Feat/modal check (#35) * Modal to recruit user (airtable) * airtable: prevent giving a description if 'other' field is not selected * updates in user recruitment modal * user modal local storage function Co-authored-by: Jorge Samuel Mendes de Jesus <jorge.jesus@gmail.com> Co-authored-by: Clément Prod'homme <contact@clementprodhomme.fr> Co-authored-by: Jorge S. Mendes de Jesus <jorge.mendesdejesus@isric.org>

* 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>

* Dockerfile/K8s implementation, prod/dev run (#24) * 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> * Feat/modal check (#35) * Modal to recruit user (airtable) * airtable: prevent giving a description if 'other' field is not selected * updates in user recruitment modal * user modal local storage function * airtable modal removed (#39) * | missing * Update docker to bullseye #45 Co-authored-by: Jorge Samuel Mendes de Jesus <jorge.jesus@gmail.com> Co-authored-by: Jorge S. Mendes de Jesus <jorge.mendesdejesus@isric.org>

* Dockerfile/K8s implementation, prod/dev run (#24) * 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> * Feat/modal check (#35) * Modal to recruit user (airtable) * airtable: prevent giving a description if 'other' field is not selected * updates in user recruitment modal * user modal local storage function * airtable modal removed (#39) * | missing * Update docker to bullseye #45 * Modal Join us (#44) * Add 'Join us' modal * Add action button 'Join us' to top and bottom of Homepage * Add link 'Join us' in footer menu Co-authored-by: Jorge Samuel Mendes de Jesus <jorge.mendesdejesus@isric.org> Co-authored-by: María Luena Rodríguez <maluenarod@gmail.com> Co-authored-by: Sidney Gijzen <sidneygijzen@users.noreply.github.com>

* Dockerfile/K8s implementation, prod/dev run (#24) * 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> * Feat/modal check (#35) * Modal to recruit user (airtable) * airtable: prevent giving a description if 'other' field is not selected * updates in user recruitment modal * user modal local storage function * airtable modal removed (#39) * | missing * Update docker to bullseye #45 * Modal Join us (#44) * Add 'Join us' modal * Add action button 'Join us' to top and bottom of Homepage * Add link 'Join us' in footer menu Co-authored-by: Jorge Samuel Mendes de Jesus <jorge.mendesdejesus@isric.org> * add Inrae to About Us modal (#59) * Fix: new cluster name and env for cluster name * Fix: Possible fix for google clould build variable * Update: Rool back to fix k8s name The implementation of google env variable from cloud build is tricky, no time to look into it * Triggering a google build --------- Co-authored-by: María Luena Rodríguez <maluenarod@gmail.com> Co-authored-by: Sidney Gijzen <sidneygijzen@users.noreply.github.com>

mluena added 2 commits May 28, 2021 10:41

Modal to recruit user (airtable)

ca8643c

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

5504677

mluena force-pushed the feature/airtable-modal branch from 552c427 to 5504677 Compare May 28, 2021 11:00

mobile fixes

c6cfceb

mluena requested a review from clementprdhomme May 31, 2021 09:13

clementprdhomme requested changes May 31, 2021

View reviewed changes

clementprdhomme mentioned this pull request May 31, 2021

merge #32

Merged

updates in user recruitment modal

422d125

Updated env variable structure

08bc53f

cloudbuild configuration - automatic deployment

2e955b8

jorgejesus merged commit 73e0c7e into develop Jun 6, 2021

Vizzuality deleted a comment from clementprdhomme Sep 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modal to recruit user (airtable) #30

Modal to recruit user (airtable) #30

mluena commented May 28, 2021 •

edited

clementprdhomme left a comment

clementprdhomme May 31, 2021

clementprdhomme May 31, 2021

clementprdhomme May 31, 2021

clementprdhomme May 31, 2021

clementprdhomme May 31, 2021

clementprdhomme May 31, 2021

clementprdhomme May 31, 2021

clementprdhomme May 31, 2021

clementprdhomme May 31, 2021

clementprdhomme May 31, 2021

clementprdhomme commented Jun 1, 2021

mluena commented Jun 2, 2021 •

edited

jorgejesus commented Jun 2, 2021

jorgejesus commented Jun 3, 2021

jorgejesus commented Jun 4, 2021

jorgejesus commented Jun 6, 2021

	<h4 className="mb-4">Can you tell us a bit about yourself?</h4>
	<h1 className="h4 mb-4">Can you tell us a bit about yourself?</h1>

	<label aria-label="hidden" className="visually-hidden">
	jmap usage description
	</label>

Modal to recruit user (airtable) #30

Modal to recruit user (airtable) #30

Conversation

mluena commented May 28, 2021 • edited

clementprdhomme left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clementprdhomme commented Jun 1, 2021

mluena commented Jun 2, 2021 • edited

jorgejesus commented Jun 2, 2021

jorgejesus commented Jun 3, 2021

jorgejesus commented Jun 4, 2021

jorgejesus commented Jun 6, 2021

mluena commented May 28, 2021 •

edited

mluena commented Jun 2, 2021 •

edited