From 6199e0b40f1e381237871956fded70f3068bc9f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Luena=20Rodr=C3=ADguez?= Date: Tue, 21 Sep 2021 09:06:36 +0200 Subject: [PATCH] airtable modal removed (#39) --- .env.default | 2 - README.md | 5 +- components/explore/component.js | 10 -- components/explore/tour/component.js | 2 +- 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 | 66 ---------- run.sh | 2 - 11 files changed, 2 insertions(+), 421 deletions(-) delete mode 100644 components/user-modal/component.js delete mode 100644 components/user-modal/content/constants.js delete mode 100644 components/user-modal/content/step1.js delete mode 100644 components/user-modal/content/step2.js delete mode 100644 components/user-modal/index.js delete mode 100644 components/user-modal/style.scss diff --git a/.env.default b/.env.default index cbda645..eafb378 100644 --- a/.env.default +++ b/.env.default @@ -9,5 +9,3 @@ 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 033cd36..a2db6e5 100644 --- a/README.md +++ b/README.md @@ -44,10 +44,7 @@ Below is a description of each of the keys. | AWS_BUCKET_NAME | Name of the AWS S3 bucket storing the tiles of the soils layers | | 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 | - +| AWS_MAX_Z_TILE_STORAGE | Maximum zoom at which tiles generated on-the-fly will be saved in the AWS S3 bucket ## Deployment diff --git a/components/explore/component.js b/components/explore/component.js index a29f6ab..d0c3350 100644 --- a/components/explore/component.js +++ b/components/explore/component.js @@ -29,7 +29,6 @@ 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'; @@ -78,14 +77,6 @@ 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(isModalShown()); - - 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 @@ -232,7 +223,6 @@ const Explore = ({ className="c-explore" style={isDesktop ? { backgroundColor: BASEMAPS[basemap].backgroundColor } : undefined} > - {isDesktop && ( <> {showTour && } diff --git a/components/explore/tour/component.js b/components/explore/tour/component.js index a9bfe15..0de566e 100644 --- a/components/explore/tour/component.js +++ b/components/explore/tour/component.js @@ -154,7 +154,7 @@ const ExploreTour = props => { previousShowTour.current = showTour; } } - }, [previousShowTour.current, showTour, props, stepIndex, setOpened, updateShowTour]); + }, [showTour, props, stepIndex, setOpened, updateShowTour]); const onChange = useCallback( ({ action, type }) => { diff --git a/components/user-modal/component.js b/components/user-modal/component.js deleted file mode 100644 index 5ac1726..0000000 --- a/components/user-modal/component.js +++ /dev/null @@ -1,95 +0,0 @@ -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 ( - - {step === 'step1' && ( - - )} - {step === 'step2' && ( - - )} - - ); -}; - -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 deleted file mode 100644 index f9ea0ad..0000000 --- a/components/user-modal/content/constants.js +++ /dev/null @@ -1,22 +0,0 @@ -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 deleted file mode 100644 index bd242af..0000000 --- a/components/user-modal/content/step1.js +++ /dev/null @@ -1,140 +0,0 @@ -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 }) => ( -
onClick(e)}> -

Can you tell us a bit about yourself?

-

- In which sector do you work: * (pick the one that brought you to this map) -

-
- {userTypeOptions.map(option => ( - - handleUserData('job_role', option.slug)} - required - > - {option.label} - - {option.slug === 'other' && ( - <> - - handleUserData('job_role_description', currentTarget.value) - } - required={userData.job_role_description === 'other'} - /> - - )} - - ))} -
- -

- Please tell us what you are using Soils platform for: * -

- -
- {useTypeOptions.map(option => ( - - handleUserData('map_usage', option.slug)} - required - > - {option.label} - - {option.slug === 'other' && ( - <> - handleUserData('map_usage_description', e.currentTarget.value)} - required={userData.map_usage === 'other'} - /> - - )} - - ))} -
-
-
-
-

*required fields

-
-
-
- - {error && ( -

- Unable to create user entry, please try again. -

- )} -
-
-
- -
-
-
-
-); - -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 deleted file mode 100644 index 19a7d56..0000000 --- a/components/user-modal/content/step2.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const Step2 = ({ userData, handleUserData, onClick, error }) => ( -
!error && onClick(e)}> -

Thank you!

-
-

Would you like to hep us to improve this map?

-

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

-
-
-
- handleUserData('email', currentTarget.value)} - /> -
-
-

- 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{' '} - - Privacy policy - -

-
- - {error && ( -

- Unable to update user entry, please try again. -

- )} - -
-
-
- -
-
-
-
-
-); - -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 deleted file mode 100644 index b404d7f..0000000 --- a/components/user-modal/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './component'; diff --git a/components/user-modal/style.scss b/components/user-modal/style.scss deleted file mode 100644 index 1e9797a..0000000 --- a/components/user-modal/style.scss +++ /dev/null @@ -1,66 +0,0 @@ -@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/run.sh b/run.sh index 7583fad..9278c82 100755 --- a/run.sh +++ b/run.sh @@ -14,8 +14,6 @@ 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