Project request form #6
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Removed startbootstrap-landing-page as a dependency. It technically wasn't a dependency. I just added it for the record into package.json at the time. At the time I copied the theme file over and have modified it since. The readme still specifies and gives credit to the theme. I removed the dependency to remove a build warning of unmet peer dependencies. Added SendGrid mail library as a dependency. It's a library that will programmatically send emails via Twilio SendGrid when prospects submit the project request form.
Enabled Webpack 5 for Next.js. There are supposed performance improvements but I haven't noticed anything major yet. But then again this project is pretty small. I remember reading that Webpack 5 will be enabled by default in a future Next.js release so then this setting will become redundant and can be safely removed.
Given that the source code for this repository is public an environment variable will be needed for the SendGrid API key. Next.js uses the file ".env.local" to store environment variables for local development. Added the file to .gitignore since it may contain secrets.
Added the first version of the project request form. In it a prospect can fill out a name, phone number, email and a text project description. Once the send button is pressed an API endpoint is invoked (src/pages/api/projectrequest.js) which will send a confirmation email to the prospect and to Jón & Marteinn. Twilio SendGrid is used to deliver the emails. The projectrequest.js file depends on the environment variable SENDGRID_API_KEY. It is a secret value defined in Vercel. What remains to be done: + Form validation. Right now the forms can be submitted with no values. + Place the form properly on the front page. Right now it is located at the top of the page for development convenience. + Add a loading spinner while we wait for the API response. + Handle error states. For example no internet connectivity and when API response is not a success. + Maybe: add Rollbar or Sentry error logging. + Maybe: add guards for abuse, for example throttling. Alternatively have a replacement component ready if form needs to be unplugged on a moments notice.
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/jonrh/jonogmarteinn-is/3KMGVjgFZuxPJuDnT84zrQpRBYC6 |
Added a square loading spinner. When the submit button is pressed on the project request form it gets replaced with the spinner until the API request has resolved. Refined the project request confirmation dialog (SubmissionSuccess). Previously it was in a green <Alert> box. Now it's in a <Card> instead. Basically just a box with a white background. It had a built in style for a title and stuff. Looks a little bit better. Made the props explicitly declared in the SubmissionSuccess component. Hopefully that will make things easier to work with if the props change on the parent for some reason. After the submit button has been pressed the inputs get disabled while we wait for the API response. Added a `scrollIntoView()`. After the project request form button has been pressed and the API request has resolved we now scroll to the top of the section. More specifically to the <h1> or <h2> elements with id="verkbeidni". This is a fairly hacky solution but good enough for now I think. I guess the proper way would be to use the `useRef()` hook but I can't be bothered for such a simple case right now.
While browsing the site in the text-only browser Lynx I noticed that the navigation looked like this: * Forsíða * ⋅ * Verkefni * ⋅ * Málarameistari * ⋅ * Verkbeiðni Refactored it so that the stylistic separator is not its own <li> element but instead comes after each navigation link. Now it looks like this: * Forsíða⋅ * Verkefni⋅ * Málarameistari⋅ * Verkbeiðni I have a hunch that this may aid bots that crawl our site.
Temporarily disabled email sending in the serverless function while it is still in development to prevent exceeding the quota. The introduction text on the specific Verkbeiðni page now disappears after the form has been submitted. It contained much of the same information so no need to display it twice. Looks better.
Repository owner
deleted a comment from
H4wk-eye
Feb 21, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.