add error fallback and loader

src/components/App/App.js

@@ -1,22 +1,25 @@
 import { Box } from '@material-ui/core';
+import { AppProvider } from '../AppProvider';
 import { CoordsProvider } from '../CoordsProvider';
 import { LeftPanel } from '../LeftPanel';
 import { RightPanel } from '../RightPanel';
 import { WeatherProvider } from '../WeatherProvider';
 
 function App() {
   return (
-    <CoordsProvider>
-      <WeatherProvider>
-        <Box
-          display="flex"
-          flexDirection={['column-reverse', 'column-reverse', 'row']}
-        >
-          <LeftPanel />
-          <RightPanel />
-        </Box>
-      </WeatherProvider>
-    </CoordsProvider>
+    <AppProvider>
+      <CoordsProvider>
+        <WeatherProvider>
+          <Box
+            display="flex"
+            flexDirection={['column-reverse', 'column-reverse', 'row']}
+          >
+            <LeftPanel />
+            <RightPanel />
+          </Box>
+        </WeatherProvider>
+      </CoordsProvider>
+    </AppProvider>
   );
 }
 

src/components/AppProvider/AppProvider.js

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import { AppContext } from '../../contexts';
+
+function AppProvider({ children }) {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <AppContext.Provider value={{ loading, setLoading }}>
+      {children}
+    </AppContext.Provider>
+  );
+}
+
+export default AppProvider;

src/components/AppProvider/index.js

@@ -0,0 +1 @@
+export { default as AppProvider } from './AppProvider';

src/components/CoordsProvider/CoordsProvider.js

@@ -1,36 +1,33 @@
 import { useState, useEffect } from 'react';
+import { ErrorFallback } from '../ErrorFallback';
+import { Loader } from '../Loader';
 import { CoordsContext } from '../../contexts';
 
 function CoordsProvider({ children }) {
   const [coords, setCoords] = useState(null);
   const [error, setError] = useState(null);
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     navigator.geolocation.getCurrentPosition(
       ({ coords }) => {
         setCoords(coords);
-        setLoading(false);
       },
       (geoError) => {
         setError(geoError);
-        setLoading(false);
       },
     );
   }, []);
 
-  if (loading || error) {
-    return null;
+  if (error) {
+    return <ErrorFallback />;
+  }
+
+  if (!coords) {
+    return <Loader />;
   }
 
   return (
-    <CoordsContext.Provider
-      value={{
-        coords,
-        error,
-        loading,
-      }}
-    >
+    <CoordsContext.Provider value={{ coords, error }}>
       {children}
     </CoordsContext.Provider>
   );

src/components/ErrorFallback/ErrorFallback.js

@@ -0,0 +1,14 @@
+import { Box, Typography } from '@material-ui/core';
+
+function ErrorFallback() {
+  return (
+    <Box p={5}>
+      <Typography variant="h4">
+        Something went wrong. Either the API could not be reached, or permission
+        to access location was not granted.
+      </Typography>
+    </Box>
+  );
+}
+
+export default ErrorFallback;

src/components/ErrorFallback/index.js

@@ -0,0 +1 @@
+export { default as ErrorFallback } from './ErrorFallback';

src/components/Loader/Loader.js

@@ -0,0 +1,11 @@
+import { Box, CircularProgress } from '@material-ui/core';
+
+function Loader() {
+  return (
+    <Box p={10} textAlign="center" width={1}>
+      <CircularProgress />
+    </Box>
+  );
+}
+
+export default Loader;

src/components/Loader/index.js

@@ -0,0 +1 @@
+export { default as Loader } from './Loader';

src/components/WeatherProvider/WeatherProvider.js

@@ -1,4 +1,5 @@
-import useSWR from 'swr';
+import { ErrorFallback } from '../ErrorFallback';
+import { Loader } from '../Loader';
 import { WeatherContext } from '../../contexts';
 import {
   DAILY_FORECAST_URL,
@@ -16,12 +17,12 @@ function WeatherProvider({ children }) {
     HOURLY_FORECAST_URL,
   );
 
-  if (!dailyData || !hourlyData) {
-    return null;
+  if (dailyError || hourlyError) {
+    return <ErrorFallback />;
   }
 
-  if (dailyError || hourlyError) {
-    return <div>Something went wrong :(</div>;
+  if (!dailyData || !hourlyData) {
+    return <Loader />;
   }
 
   return (

src/contexts/AppContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AppContext = createContext({});
+
+export default AppContext;

src/contexts/index.js

@@ -1,2 +1,3 @@
+export { default as AppContext } from './AppContext';
 export { default as CoordsContext } from './CoordsContext';
 export { default as WeatherContext } from './WeatherContext';

src/hooks/index.js

@@ -1,3 +1,4 @@
+export { default as useApp } from './useApp';
 export { default as useCurrentCoords } from './useCurrentCoords';
 export { default as useGetForecast } from './useGetForecast';
 export { default as useTodayHourlyData } from './useTodayHourlyData';

src/hooks/useApp.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { AppContext } from '../contexts';
+
+function useApp() {
+  return useContext(AppContext);
+}
+
+export default useApp;