From 29bb6cc8fda7225e2afa92929a5ce8491e9ca2d5 Mon Sep 17 00:00:00 2001 From: Jorge Samuel Mendes de Jesus Date: Mon, 19 Apr 2021 16:37:42 +0200 Subject: [PATCH 01/12] Dockerfile/K8s implementation, prod/dev run (#24) --- .dockerignore | 3 +++ .env.default | 2 -- run.sh | 1 - 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.dockerignore b/.dockerignore index ab7d3a8..f062a29 100644 --- a/.dockerignore +++ b/.dockerignore @@ -14,5 +14,8 @@ npm-debug.log .editorconfig .dockerignore .env +<<<<<<< HEAD Dockerfile .cloudbuild.yaml +======= +>>>>>>> Dockerfile/K8s implementation, prod/dev run (#24) 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/run.sh b/run.sh index 7583fad..e0fdf99 100755 --- a/run.sh +++ b/run.sh @@ -40,4 +40,3 @@ esac #node index.js #yarn start #exec pm2 start --no-daemon yarn -- start - From e00fe1ed3b6e7ab0cacaec7257759394d75d3353 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Luena=20Rodr=C3=ADguez?= Date: Sun, 6 Jun 2021 11:50:41 +0200 Subject: [PATCH 02/12] 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 --- .dockerignore | 3 --- .env.default | 2 ++ components/explore/component.js | 12 +----------- components/user-modal/style.scss | 2 -- 4 files changed, 3 insertions(+), 16 deletions(-) diff --git a/.dockerignore b/.dockerignore index f062a29..ab7d3a8 100644 --- a/.dockerignore +++ b/.dockerignore @@ -14,8 +14,5 @@ npm-debug.log .editorconfig .dockerignore .env -<<<<<<< HEAD Dockerfile .cloudbuild.yaml -======= ->>>>>>> Dockerfile/K8s implementation, prod/dev run (#24) 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/components/explore/component.js b/components/explore/component.js index a29f6ab..2527eaf 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 { isModalShown } from 'utils/explore'; + import { useHasMounted, useDesktop } from 'utils/hooks'; import { toggleBasemap, toggleLabels, toggleRoads } from 'utils/map'; import { @@ -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/user-modal/style.scss b/components/user-modal/style.scss index 1e9797a..6ad7d43 100644 --- a/components/user-modal/style.scss +++ b/components/user-modal/style.scss @@ -62,5 +62,3 @@ } } } - - From 93a14808100e04fa7ab07bb6e4794d9f2a59becf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Luena=20Rodr=C3=ADguez?= Date: Mon, 7 Jun 2021 17:09:20 +0200 Subject: [PATCH 03/12] 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 | 1 - 1 file changed, 1 deletion(-) diff --git a/components/explore/component.js b/components/explore/component.js index 2527eaf..fe1ba2b 100644 --- a/components/explore/component.js +++ b/components/explore/component.js @@ -6,7 +6,6 @@ import throttle from 'lodash/debounce'; import { Router } from 'lib/routes'; import { logEvent } from 'utils/analytics'; - import { useHasMounted, useDesktop } from 'utils/hooks'; import { toggleBasemap, toggleLabels, toggleRoads } from 'utils/map'; import { From dbc89c895e346120f3f29ed384ec6107b22cdc80 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 04/12] airtable modal removed (#39) --- .env.default | 2 - README.md | 5 +- 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 | 64 ---------- run.sh | 2 - 10 files changed, 2 insertions(+), 409 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/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 6ad7d43..0000000 --- a/components/user-modal/style.scss +++ /dev/null @@ -1,64 +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 e0fdf99..57ed9e2 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 From 36b5c334b75926dc38f6649842161b76a0054e9a Mon Sep 17 00:00:00 2001 From: mluena Date: Tue, 21 Sep 2021 10:33:09 +0200 Subject: [PATCH 05/12] | missing --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a2db6e5..f373a0e 100644 --- a/README.md +++ b/README.md @@ -44,7 +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 +| AWS_MAX_Z_TILE_STORAGE | Maximum zoom at which tiles generated on-the-fly will be saved in the AWS S3 bucket | ## Deployment From 7708c364996c9e081f315fac35a4a54606b24e39 Mon Sep 17 00:00:00 2001 From: Jorge Samuel Mendes de Jesus Date: Tue, 9 Nov 2021 09:47:37 +0100 Subject: [PATCH 06/12] Update docker to bullseye #45 --- Dockerfile | 6 +++--- run.sh | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Dockerfile b/Dockerfile index ede5796..da064db 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM docker.io/debian:stable-slim@sha256:a939c03c4d3e3f53e3ef4ef6e75cb681a3ad56537842f95bf89755da86559b13 +FROM docker.io/debian:bullseye-slim@sha256:312218c8dae688bae4e9d12926704fa9af6f7307a6edb4f66e479702a9af5a0c # Source: https://www.kabisa.nl/tech/nvm-in-docker/ # docker build --force-rm --no-cache -t soils-revealed:latest . @@ -7,8 +7,8 @@ FROM docker.io/debian:stable-slim@sha256:a939c03c4d3e3f53e3ef4ef6e75cb681a3ad565 SHELL ["/bin/bash","-l","-c"] ENV DEBIAN_FRONTEND noninteractive -RUN apt-get update \ - && apt-get install -y tini curl \ +RUN apt update \ + && apt install -y tini curl \ && rm -rf /var/lib/apt/lists/* RUN mkdir /soils-revealed diff --git a/run.sh b/run.sh index 57ed9e2..d7928e7 100755 --- a/run.sh +++ b/run.sh @@ -13,9 +13,9 @@ 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\ - echo -e "Initiating yarn build" +AWS_MAX_Z_TILE_STORAGE=$AWS_MAX_Z_TILE_STORAGE" >> .env + echo -e "Initiating yarn build" yarn build } From 0604349233049c34c53faf87bfcef5a409908035 Mon Sep 17 00:00:00 2001 From: Sidney Gijzen Date: Tue, 9 Nov 2021 13:16:41 +0100 Subject: [PATCH 07/12] 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 --- components/footer/component.js | 12 ++ components/homepage/section-1/component.js | 23 +++- components/homepage/section-7/component.js | 23 +++- components/join-us-modal/component.js | 104 ++++++++++++++++++ components/join-us-modal/index.js | 3 + components/join-us-modal/style.scss | 19 ++++ ...sharing-agreement-soils-revealed-isric.pdf | Bin 0 -> 735628 bytes public/images/inta-logo.jpg | Bin 0 -> 24656 bytes ...oin-us-wosis-present-data-contributors.jpg | Bin 0 -> 78908 bytes 9 files changed, 178 insertions(+), 6 deletions(-) create mode 100644 components/join-us-modal/component.js create mode 100644 components/join-us-modal/index.js create mode 100644 components/join-us-modal/style.scss create mode 100644 public/files/data-sharing-agreement-soils-revealed-isric.pdf create mode 100644 public/images/inta-logo.jpg create mode 100644 public/images/join-us-wosis-present-data-contributors.jpg diff --git a/components/footer/component.js b/components/footer/component.js index 4708091..e727815 100644 --- a/components/footer/component.js +++ b/components/footer/component.js @@ -3,15 +3,18 @@ import { Link } from 'lib/routes'; import Icon from 'components/icon'; import AboutModal from 'components/about-modal'; +import JoinUsModal from 'components/join-us-modal'; import './style.scss'; const Footer = () => { const [aboutModalOpen, setAboutModalOpen] = useState(false); + const [joinUsModalOpen, setJoinUsModalOpen] = useState(false); return ( <> setAboutModalOpen(false)} /> + setJoinUsModalOpen(false)} />