Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal to recruit user (airtable) #30

Merged
merged 6 commits into from
Jun 6, 2021
Merged

Conversation

mluena
Copy link
Contributor

@mluena mluena commented May 28, 2021

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)

Screenshot 2021-05-28 at 11 54 44

Copy link
Member

@clementprdhomme clementprdhomme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

map_usage_description: PropTypes.string,
email: PropTypes.string,
}),
user: PropTypes.string.isRequired,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

))}
</div>

<h5 className="mt-4">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You probably want something like this:

Suggested change
<h5 className="mt-4">
<p className="h5 mt-4">

Comment on lines 81 to 83
<label aria-label="hidden" className="visually-hidden">
jmap usage description
</label>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚮

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

});

const handleCreateUser = async () => {
const user = await createUserEntry({ ...userData });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

};

const handleUpdateUser = () => {
updateUserEntry(userId, userData);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

// 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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

const [userModalOpen, setUserModalOpen] = useState(modalStatus === null);

const handleModalClose = () => {
myStorage.setItem('modal', 'filled');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@clementprdhomme clementprdhomme mentioned this pull request May 31, 2021
@clementprdhomme
Copy link
Member

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
Copy link
Contributor Author

mluena commented Jun 2, 2021

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

@jorgejesus
Copy link
Contributor

Yes I will. It will be done tomorrow morning.

@jorgejesus
Copy link
Contributor

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
Copy link
Contributor

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 jorgejesus merged commit 73e0c7e into develop Jun 6, 2021
@jorgejesus
Copy link
Contributor

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

jorgejesus added a commit that referenced this pull request Jun 22, 2021
* 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>
@Vizzuality Vizzuality deleted a comment from clementprdhomme Sep 21, 2021
@Vizzuality Vizzuality deleted a comment from clementprdhomme Sep 21, 2021
@Vizzuality Vizzuality deleted a comment from clementprdhomme Sep 21, 2021
@Vizzuality Vizzuality deleted a comment from clementprdhomme Sep 21, 2021
@Vizzuality Vizzuality deleted a comment from clementprdhomme Sep 21, 2021
@Vizzuality Vizzuality deleted a comment from clementprdhomme Sep 21, 2021
@Vizzuality Vizzuality deleted a comment from clementprdhomme Sep 21, 2021
mluena added a commit that referenced this pull request Sep 21, 2021
* 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>
jorgejesus added a commit that referenced this pull request Nov 9, 2021
* 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>
jorgejesus added a commit that referenced this pull request Nov 30, 2021
* 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>
jorgejesus added a commit that referenced this pull request Apr 20, 2023
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants