But Wait… There’s More! — Adding Like Functionality to JetLog + Custom Markers

But Wait… There’s More! — Adding Like Functionality to JetLog + Custom Markers [React + Redux]

My app JetLog — a Google maps integrated memory map for users to plot their travels, was finished, well at least the foundation of it was. Users could create and sign-in to accounts and create and view their travels “Logs” in both a stream and as a pin on a map.

Custom Marker

A firm believer that the little touches can make all the difference, I wanted to take ownership of the Google Maps Marker. In my case I was utilizing react-google-maps as a React component wrapper to persist the Google Maps API. The Marker component allows for a prop of Icon which one can simply pass in an image as a named import into.

<a href="https://medium.com/media/627faf408302e2f37c75b7e1774a9939/href">https://medium.com/media/627faf408302e2f37c75b7e1774a9939/href</a>

Dropping in a marker template in Sketch, adding the JetLog branding, and resizing here and there until I was content, I had my marker.

Marker w/ JetLog Paper Plane Logo

Adding Likes +1

As we all know, no app is complete until people can like things. I kid, but adding the ability for user’s to like a log would allow me to explore Patch Requests and provide additional nuance to my application while garnering a better grasp of Redux reducers.

1. To start I would simply establish a basic non-Redux Like component:

<a href="https://medium.com/media/a777108779cf4e1343f14b5d9fcf4b62/href">https://medium.com/media/a777108779cf4e1343f14b5d9fcf4b62/href</a>

2. Then I would get it working in Redux:

<a href="https://medium.com/media/3f71264926b1d59c7248c83a1a6d869e/href">https://medium.com/media/3f71264926b1d59c7248c83a1a6d869e/href</a>

3. Having confirmed it was working I would then make all Logs responsible for managing their own likes in the API and persist their values server side:

<a href="https://medium.com/media/1cd80becdbdef7b23925ca4eacc34cab/href">https://medium.com/media/1cd80becdbdef7b23925ca4eacc34cab/href</a>

As always thank you for reading and if you have any questions about what I’ve done here, what I’m up to, or just generally want to chat feel free to reach out to me at:[email protected]