From 3be5816383a5e3dfdb8c244a1381318de7313c4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Luena=20Rodr=C3=ADguez?= <maluenarod@gmail.com>
Date: Mon, 7 Jun 2021 17:09:20 +0200
Subject: [PATCH] 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  |  4 ++--
 components/forms/radio/index.js  |  1 +
 components/user-modal/style.scss |  1 +
 utils/explore.js                 | 23 +++++++++++++++++++++++
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/components/explore/component.js b/components/explore/component.js
index e0a9d70..a29f6ab 100644
--- a/components/explore/component.js
+++ b/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);
diff --git a/components/forms/radio/index.js b/components/forms/radio/index.js
index d5302eb..5887bbf 100644
--- a/components/forms/radio/index.js
+++ b/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,
diff --git a/components/user-modal/style.scss b/components/user-modal/style.scss
index eae02b9..1e9797a 100644
--- a/components/user-modal/style.scss
+++ b/components/user-modal/style.scss
@@ -63,3 +63,4 @@
   }
 }
 
+
diff --git a/utils/explore.js b/utils/explore.js
index cba04b6..48c2e24 100644
--- a/utils/explore.js
+++ b/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;
+};