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

components/explore/component.js

@@ -6,7 +6,7 @@ import throttle from 'lodash/debounce';
 
 import { Router } from 'lib/routes';
 import { logEvent } from 'utils/analytics';
-import { isFirstVisit } from 'utils/explore';
+import { isModalShown } from 'utils/explore';
 import { useHasMounted, useDesktop } from 'utils/hooks';
 import { toggleBasemap, toggleLabels, toggleRoads } from 'utils/map';
 import {
@@ -80,7 +80,7 @@ const Explore = ({
 
   // User recruitment modal. This modal should appear just the first time the user
   // visits the map section
-  const [userModalOpen, setUserModalOpen] = useState(isFirstVisit());
+  const [userModalOpen, setUserModalOpen] = useState(isModalShown());
 
   const handleModalClose = () => {
     setUserModalOpen(false);

components/forms/radio/index.js

@@ -27,6 +27,7 @@ const Radio = ({ id, name, disabled, checked, onChange, children, className, req
     </label>
   </div>
 );
+
 Radio.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,

components/user-modal/style.scss

@@ -63,3 +63,4 @@
   }
 }
 
+

utils/explore.js

@@ -22,3 +22,26 @@ export const isFirstVisit = () => {
 
   return isFirstVisit;
 };
+
+/* This function tracks the first time the app shows the recruitment modal to users */
+
+export const isModalShown = () => {
+  let modalShown = true;
+
+  try {
+    const storedValue = localStorage.getItem('showUserRecruitmentModal');
+    modalShown = storedValue !== 'false';
+  } catch (e) {
+    console.error('Unable to access the localStorage.');
+  }
+
+  if (modalShown) {
+    try {
+      localStorage.setItem('showUserRecruitmentModal', 'false');
+    } catch (e) {
+      console.error('Unable to access the localStorage.');
+    }
+  }
+
+  return modalShown;
+};