FixText color of subheadings not displaying
Fixed a bug where the h2 subheading wasn't displaying its proper text color. The issue was related to the `components/ui/Feature/Feature.tsx` component.
After the fix was pushed, the result is exactly as expected. The `Exotic travel destinations` subheading has a pink color, while the `White sand beaches` subheading has a blue color.
Now both subheadings matches the background color of its pictures.
ImprovementMinor refactoring
Moved the constants.ts file out of the wordpress directory. Previously, it was only used by the WordPress API. With this change, the constants are now globally accessible by any future API integrations.
Before:
import { ... } from ../constants After:
import { ... } from @config/constants FeatureNewsletter functionality
After reviewing the Hotjar recording, I noticed MJ trying to subscribe to the newsletter, without success. Not surprisingly, the reason for this was that the newsletter had no functionality implemented.
Although I did not receive any feedback regarding the newsletter, I have now added proper functionality that let’s the user subscribe to the newsletter
FixContact form validation
On my PE1 submission I received feedback that my contact form validation was not showing. After doing some investigation, I quickly realized that the reason the validation messages did not show, was because I was not calling the <Alert /> component.
This stupid one-liner mistake was the reason why the validation failed:
{alert && <Alert type="info" message="{alert}" />}Although it is a very small mistake, it emphasizes how important it is to always check the source code and its functionality before submission. One thing I can definitely get better at is unit testing and debugging along the way. It is not always the case that theoretical code works practically. Lessons learned.
In addition to that, I also decided to rewrite the whole contact component using a third party library. The reason is simple: why reinvent the wheel? Another reason is that the current code was getting quite long and difficult to read.
I spent a couple of hours trying to figure out how I would approach this implementation. After conducting some research I figured the best approach would be to use the react-hook-form package. It is lightweight, has type definitions (yes, ✨typescript✨), it's easier to work with, makes the code look cleaner, easier to read — and a bunch of more reasons.
Once that had been figured out, I started reading the API documentation at the React Hook Form website. Then I put the pieces together, one by one.
End result: