Utilizing Geo-Location Coordinates In A Weather App with GatsbyJS, TypeScript, Recoil and React!

Introduction

In the previous article we looked at interrogating the browser for geo-location coordinates. Assuming the user provides permission to the browser to provide their coordinates to this app, and there are no errors, we will have coordinates provided by the react-geolocated tool.

This post shows what we can do with coordinates data.

I am doing something a little weird in that these component files do not do anything except run some hooks and return no real content. My line of thinking here is to allow these functions to run in their own time.

The Components

src/content-apps/weather/data/utilize-coordinates-locale.tsx

import React from 'react';
//  hooks
import useLocationNameQuery from '../hooks/use-location-name-query-by-coords';
//  types
import { Coordinates } from '../types';

interface Props extends Coordinates {
  dev?: boolean;
}

const UtilizeCoordinatesLocale = (props: Props) => {
  const { latitude, longitude } = props;

  useLocationNameQuery({ latitude, longitude });

  return <></>;
};

export default UtilizeCoordinatesLocale;

src/content-apps/weather/data/utilize-coordinates-forecast.tsx

import React from 'react';
//  hooks
import useWeatherForecastQuery from '../hooks/use-weather-forecast-query-by-coords';
//  types
import { Coordinates } from '../types';

interface Props extends Coordinates {
  dev?: boolean;
}

const UtilizeCoordinatesForecast = (props: Props) => {
  const { latitude, longitude } = props;

  useWeatherForecastQuery({ latitude, longitude });

  return <></>;
};

export default UtilizeCoordinatesForecast;

A Briefing

These components have only one purpose each and that is to give some space for a hook to run. Each hook will use the coordinates supplied in a slightly different way. This separates our concerns nicely, but we have an overhead of creating a couple of files that essentially return nothing - apparently.

Is that wrong?

What Now?

Ah, you will have to wait for the next exciting installment dear coder.

Thank you for reading thus far.

Happy coding and creating! 🌦️⚛️

#GatsbyJS #TypeScript #ReactJS #ReactQuery #Recoil #ChakraUI #WeatherApp #FrontendDev #WebDev #CodingTips

Photo by Bjark on Unsplash