fix(hooks): moved region fetching into useEffect, and adding trycatch…

… to better handle errors
Availity · Sep 20, 2019 · e3d8454 · e3d8454
1 parent 0147cdb
commit e3d8454
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 27 deletions.
diff --git a/packages/hooks/src/useCurrentRegion.js b/packages/hooks/src/useCurrentRegion.js
@@ -2,26 +2,37 @@ import { useState, useEffect } from 'react';
 import { avRegionsApi } from '@availity/api-axios';
 
 export default () => {
-  const [currentRegion, setCurrentRegion] = useState(undefined);
+  const [currentRegion, setCurrentRegion] = useState();
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
 
-  const fetchCurrentRegion = async () => {
-    const response = await avRegionsApi.getCurrentRegion();
+  useEffect(() => {
+    let ignore = false;
 
-    if (response.data.regions[0] !== undefined) {
-      setCurrentRegion({
-        code: response.data.regions[0].id,
-        value: response.data.regions[0].value,
-      });
-    }
+    const fetchCurrentRegion = async () => {
+      setLoading(true);
+      try {
+        const response = await avRegionsApi.getCurrentRegion();
 
-    setLoading(false);
-  };
+        if (!ignore) {
+          setCurrentRegion({
+            code: response.data.regions[0].id,
+            value: response.data.regions[0].value,
+          });
+        }
+      } catch (error_) {
+        if (!ignore) setError(error_);
+      }
+
+      setLoading(false);
+    };
 
-  useEffect(() => {
-    setLoading(true);
     fetchCurrentRegion();
+
+    return () => {
+      ignore = true;
+    };
   }, []);
 
-  return [currentRegion, loading];
+  return [currentRegion, loading, error];
 };
diff --git a/packages/hooks/tests/useCurrentRegion.test.js b/packages/hooks/tests/useCurrentRegion.test.js
@@ -5,39 +5,55 @@ import { useCurrentRegion } from '..';
 
 jest.mock('@availity/api-axios');
 
-avRegionsApi.getCurrentRegion.mockResolvedValue({
-  config: { polling: false },
-  data: {
-    regions: [
-      {
-        id: 'FL',
-        value: 'Florida',
+const mockRegionApi = type => {
+  let body = {};
+  if (type === 'valid') {
+    body = {
+      config: { polling: false },
+      data: {
+        regions: [
+          {
+            id: 'FL',
+            value: 'Florida',
+          },
+        ],
       },
-    ],
-  },
-  status: 200,
-  statusText: 'Ok',
-});
+      status: 200,
+      statusText: 'Ok',
+    };
+  } else if (type === 'invalid') {
+    body = {
+      config: { polling: false },
+      status: 200,
+      statusText: 'Ok',
+    };
+  }
+  avRegionsApi.getCurrentRegion.mockResolvedValue(body);
+};
 
 afterEach(() => {
   jest.clearAllMocks();
   cleanup();
 });
 
 const Component = () => {
-  const [region, loading] = useCurrentRegion();
+  const [region, loading, error] = useCurrentRegion();
+
+  if (error) return <span data-testid="error">An error occurred.</span>;
 
   return loading ? <span data-testid="loading" /> : JSON.stringify(region);
 };
 
 describe('useCurrentRegion', () => {
   test('should return loading', () => {
+    mockRegionApi('valid');
     const { getByTestId } = render(<Component />);
 
     getByTestId('loading');
   });
 
   test('should return region', async () => {
+    mockRegionApi('valid');
     const { getByText } = render(<Component />);
 
     await waitForElement(() =>
@@ -49,4 +65,11 @@ describe('useCurrentRegion', () => {
       )
     );
   });
+
+  test('handles error', async () => {
+    mockRegionApi('invalid');
+    const { getByTestId } = render(<Component />);
+
+    await waitForElement(() => getByTestId('error'));
+  });
 });