Showing Weather Forecast Using A Modal

Do you want to know the weather before walking your dog? The target audience of my dog poop tracker app are dog owners who spot piles not picked up by other dog owners. Naturally, weather condition comes to mind as dog walking is by default an outdoor activity. During these brutal subzero winters days in Chicago, maybe showing a -5F feels-like temperature will incentivize some to keep the walk short to avoid the unnecessary torture, to human or pooch.

Since weather condition or forecast is something people take a quick glance of and move on, we don’t need it to be displayed on a dedicated webpage that requires deliberate navigation action. Therefore, a modal is the perfect solution. Modal is a window that temporarily blocks access to the main page view while giving the content displayed the focus it requires. Then as soon as the attention is no longer needed, it can quickly be removed by a simple click (don’t even need a dedicated close button) and the main view is restored instantly.

I added a Weather button to the menu. The weather forecast information modal pops up when the button is clicked. Even though the modal comes with its own close button (x), user can click anywhere on outside the modal window to close and thus restoring the main map view.

Here’s the setup in JSX.

Since modal is a temporary view, we don’t treat it like other standalone components. So how do we structure the Semantic UI components to fit it in? The answer lies in how we want to trigger the display of the modal. In this case, I want to have a button on the menu bar to trigger the modal. Conceptually, the structure is like this:

<Menu>
<Menu.Item>
….
</Menu.Item>
<Menu.Item>
…
</Menu.Item>
<Menu.Item>
…item that triggers modal…
</Menu item>
</Menu>

As you can see in the code above, the JSX is arranged this way:

<Menu>
<Menu.Item>
….
</Menu.Item>
<Menu.Item>
…
</Menu.Item>
<Modal trigger={<Menu.Item>
…button that triggers modal…
</Menu.item>}>
<Modal.Content>
…display weather information…
</Modal.Content>
</Modal>
</Menu>

Structurally, the modal is one of the menu items. As a modal window is never shown until triggered and it dominates the entire view focus when activated, the component’s position in the JSX hierarchy is not really that important. By focusing on the menu item that triggers the modal, the trigger button is in its proper place while all the modal action items fall into place.

Now we can retrieve the weather information and display it.

The trigger button in the menu item will call the getWeather function when clicked. I use the Weather API to obtain current condition and next day forecast. I format the returned JSON data based on information I want to display and plug them into local state. Once page is refreshed after setState, the modal is displayed with all the weather data stored in local state.

There you go. It feels like -5F outside so walk your furry friend quick and stay warm. But make sure you pick up!