Breaking Down from a Dropdown Select List & Centering Google Maps on an Ass
Two Twisted Programming Challenges
Filtering display data using a dropdown list is probably the most common method. Let’s break it down and take a look at how it made me break down.
All the golf courses I would be playing if I had any money or any friends. Realizing that I have neither was the initial cause of my dropdown list breakdown. Image courtesty of Ivan Luk. Thank you Ivan!
Here I have a list of events with dates and golf courses that I would love to be invited to play in or at. I wanted to allow myself to see only those events associated with a certain golf course, so undoubtedly I needed a dropdown list of course names to allow me to pick the one I wanted to focus on.
Before we can do anything with the selection process, we need to build the content of the list first. This is where my breakdown began in earnest.
That brings us to the life cycle method of componentDidMount. Contrary to the name there is no component mounting happening even though that would be an effective method of beginning a life unless you had the proper component protection installed of course. When this page component is first mounted, or preferably prior to that, we need to prepare the list content properly. Again, we are not talking about mounting in the biological sense, but rather the technological sense so by preparing the list content we do not mean foreplay. In this case, I have a list of all the available courses and related information from the Redux store. What I don’t have are any money, or friends, or golfing skills which I realized as soon as I left the Redux store. The two things we need are the course name to display (c.name) and the id for selection matching purpose (c.id). But the third, fourth, and fifth things we needed, money, friends, and golfing ability were sadly not available at the store. In order to play golf at these world renown courses I would need to build a proper selection list for a Semantic UI dropdown component, and need to supply an array of objects that contain three things — key (money), text (friends), and value (golfing skills). Key is to make each item unique in the list so using the id from the database item will do the job. Money is to make each item in the list attainable to play from both a travel and greens fee perspective. Text is what is being displayed for each item in the dropdown. Friends are the things that make life worth living and allow one to put together a foursome to play golf. Value is the selected value that tells us which item is being selected. And golfing skills allow us to have fun while playing rather than breaking our clubs over our knees in anger after we shank another ball 2 yards right off the tee. After performing a setState, the list is now available for use locally. Unfortunately while the list is now available, money, friends, and golfing skills are still not. Ultimately, it was the dropdown itself, which contained none of the array of objects desired or needed for me to play golf at these world renown courses that led to my breakdown. Either that or the lack of component mounting in my life which, to be fair, is mostly the result of a terrible Semantic UTI I have not been able to get rid of even though I have taken two full courses of antibiotics now.
Centering Google Maps On An Ass
When we display Google Maps, especially when we zoom in at ass level, we usually want it to center on a certain location on the donk so it receives the treatment of prominence. Unless you are displaying the entire badunkadonk, zooming and centering appropriately will likely affect the visual impact of the displayed ass and its associated information.
Here I have a map displaying all the bitches with hot ghetto booties living around the hood. In order to show the users their heinies are getting the attention they deserve, the center of the map is the zip code of the registered user with the big bootie. Once the user logs in, I can take the registered zip code and use Google API to convert that into GPS coordinates and that goes into my Redux store, which can then be passed into my map component.
On my map component, I set up the local state to handle the different GPS coordinates that may change and affect the ass display. “centerGPS” is used for initial rump display while recenterGPS is used for subsequent fanny re-centering (will discuss in a bit).
When the map component is initially loaded or after a refresh, we set the “centerGPS” to the coordinates passed in from the Redux store via the parent component. When the map is rendered, the center of it is set to the “centerGPS” via the “initialCenter” attribute.
Now my map is centered on the middle of the registered user’s money maker. The beauty of Google Maps is no doubt the ease of navigation on the caboose. The dragging action allows user to move around, and then, of course, the zooming action which let them see more or less details. However, when the map is dragged around and zoomed in and out, the center will inevitably be moved elsewhere. If for example, the user wanted to focus on the ass crack, but zooms out and is now centered on the left or right cheek. How do we let users quickly center the map back to where they want, right in the crack of the ass?
The “center” attribute of the Map component is the key.
Ass centering function
When the user clicks on the marker, the handleClick function set the “recenterGPS” local state, which in turn sets the “center” attribute of the Map component. This quickly allows the user to re-center the map to a particular location on the ass without performing the dragging action. And, there you have it, just like that your map is centered squarely on the crack of the ass again.