rqa5hb Recruitment Form

[sashco-m]

Ticket: https://app.clickup.com/t/rqa5hb

This is going to contain instructions to test this whole recruitment process end to end (as of Jan 26 2023), suggest improvements, and where to do them.

SETUP

Have exective-dashboard, waterloop-cms and waterloop-website all running locally. Follow the readme's. It should be fine to have executive-dashboard and waterloop-cms on master. It is genuinely possible that your computer may not have enough RAM to run all 3 at the same time. Mine can barely. Be careful opening new chrome tabs.

Search on slack for usual setup issues, including environment variables (which are needed for both executive-dashboard and waterloop-cms.

LET'S GET STARTED

1. Open the waterloop-cms frontend. The first step is to create a new posting for the current term. This will then appear on waterloop-website.

a) On the CMS home page, click the notepad button under current openings

b) Click new opening

c) Give it a name, the correct term, and then save it

d) By default the job is set to closed. Set it to open so we can see it on waterloop-website

2. Open the waterloop-website frontend. Click job postings, then you should see the job you've added. If not, make sure you created it for the correct term (the current term). Click more info

a) Now we have the posting detail. Hit apply

CHECKPOINT (content added in this PR)

b) Now we've reached the recruitment form. THIS is the meat and potatoes of this PR. Fill it out, and be sure to upload a pdf in the resume section. Any pdf works.

c) It'll say the name of the pdf if it uploaded properly. Open the network table in chrome devtools to see what happens behind the scenes when you click submit

3. Final stretch

a) We see two http requests are made. One to executive-dashboard's resume endpoint, for uploading the resume. This returns a google drive link to the resume. We also see an application call, which puts the application itself (including the resume link) inside the executive-dashboard db

b) The payload should look like this. Sidenote: you likely have access to that resume link. If you're curious, its under the external google drive under WEB TEAM.

c) A popup is shown after a long wait. Accepting returns back to the home screen.

PROBLEMS

1. The form is formatted funky. To fix this, styling changes would have to be made in the recruitment form, src/components/RecruitmentForm/RecruitmentForm.tsx
   2.~~ The api calls after hitting submit take time. If you're curious, they happen at src/components/RecruitmentForm/hooks/recruitment-form.ts. There needs to be some kind of feedback, it could be a spinning button, the whole application form spinning, some kind of notification, anything. ~~
   a) One easy way to do this is to have an isApplying field in the redux store. We then have an action that sets this field to true after hitting apply, which then some logic on the front end displays some message. Once we receive either a success/fail, we can have an action that sets it to false. What I'm describing sounds simple, but the code has grown so confusing from having several generations of waterloop developers work on this, so it may not be simple.

IMPORTANT FILES

1. The recruitment form itself src/components/RecruitmentForm/RecruitmentForm.tsx
2. The reducer/actions all-in-one file src/components/RecruitmentForm/hooks/recruitment-form.ts. This file is awful. Luckily, to fix these issues you shouldn't have to touch/understand much.
3. You might need src/pages/Recruitment/RecruitmentApplicantForm.tsx, which is the parent component of the recruitment form. Notably, it's where the onSuccess function that displays the success alert lives.

NOTES

In theory you should be able to see this application from the executive-dashboard FE. I don't have enough knowledge to test that out.

[netlify]

✅ Deploy Preview for waterloop ready!

Name	Link
🔨 Latest commit	f9002dd
🔍 Latest deploy log	https://app.netlify.com/sites/waterloop/deploys/63dc41ffb718860008aed111
😎 Deploy Preview	https://deploy-preview-161--waterloop.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[sashco-m]

Fixed both problems mentioned in PR: updated formatting and added loading spinner

[jmawloo]

Thanks Sashco! Really appreciate your work on getting this feature to work :)