allow refreshing location

src/components/CoordsProvider/CoordsProvider.js

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { ErrorFallback } from '../ErrorFallback';
 import { Loader } from '../Loader';
 import { CoordsContext } from '../../contexts';
+import { getCoords } from '../../utils/getCoords';
 import { localStorage } from '../../utils/localStorage';
 
 function CoordsProvider({ children }) {
@@ -16,18 +17,7 @@ function CoordsProvider({ children }) {
       return;
     }
 
-    navigator.geolocation.getCurrentPosition(
-      ({ coords }) => {
-        setCoords(coords);
-        localStorage.setItem('coords', {
-          latitude: coords.latitude,
-          longitude: coords.longitude,
-        });
-      },
-      (geoError) => {
-        setError(geoError);
-      },
-    );
+    refreshCoords(setCoords, setError);
   }, []);
 
   if (error) {
@@ -39,10 +29,28 @@ function CoordsProvider({ children }) {
   }
 
   return (
-    <CoordsContext.Provider value={{ coords, error }}>
+    <CoordsContext.Provider
+      value={{
+        coords,
+        error,
+        refreshCoords: () => refreshCoords(setCoords, setError),
+      }}
+    >
       {children}
     </CoordsContext.Provider>
   );
 }
 
+async function refreshCoords(setCoords, setError) {
+  setCoords(null);
+  setError(null);
+
+  try {
+    const coords = await getCoords();
+    setCoords(coords);
+  } catch (error) {
+    setError(error);
+  }
+}
+
 export default CoordsProvider;

src/components/Header/Header.js

@@ -1,17 +1,39 @@
-import { Box, Typography } from '@material-ui/core';
+import { Box, Button, Typography } from '@material-ui/core';
 
-function Header() {
+function Header({ refreshCoords }) {
   return (
-    <Box display="flex" mb={6} flexDirection={['column', 'row']}>
-      <Box mr={2}>
-        <Typography variant="h3" style={{ fontWeight: 200 }}>
-          Weather
+    <Box
+      display="flex"
+      flexDirection={['column-reverse', 'column-reverse', 'row']}
+      justifyContent="space-between"
+      mb={6}
+    >
+      <Box
+        display="flex"
+        flexDirection={['column', 'row']}
+        textAlign={['center', 'center', 'left']}
+      >
+        <Typography variant="h3">
+          <span style={{ fontWeight: 200 }}>Weather</span>{' '}
+          <span style={{ fontWeight: 600 }}>Forecast</span>
         </Typography>
       </Box>
 
-      <Typography variant="h3" style={{ fontWeight: 600 }}>
-        Forecast
-      </Typography>
+      <Box
+        mb={[4, 4, 0]}
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+      >
+        <Button
+          color="primary"
+          disableElevation
+          onClick={() => refreshCoords()}
+          variant="outlined"
+        >
+          Refresh Location
+        </Button>
+      </Box>
     </Box>
   );
 }

src/components/Header/HeaderContainer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Header from './Header';
+import { useCurrentCoords } from '../../hooks';
+
+function HeaderContainer() {
+  const { refreshCoords } = useCurrentCoords();
+
+  return <Header refreshCoords={refreshCoords} />;
+}
+
+export default HeaderContainer;

src/components/Header/index.js

@@ -1 +1 @@
-export { default as Header } from './Header';
+export { default as Header } from './HeaderContainer';

src/utils/getCoords.js

@@ -0,0 +1,22 @@
+import { localStorage } from './localStorage';
+
+async function getCoords() {
+  return new Promise((resolve, reject) => {
+    navigator.geolocation.getCurrentPosition(
+      ({ coords }) => {
+        localStorage.setItem('coords', {
+          latitude: coords.latitude,
+          longitude: coords.longitude,
+        });
+
+        resolve(coords);
+      },
+      (error) => {
+        reject(error);
+      },
+      { timeout: 5000 },
+    );
+  });
+}
+
+export { getCoords };