replace use-api-data with axios

Author: Riley Johnston

package-lock.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@carbon/react": "^1.5.0",
+    "axios": "^0.27.2",
     "body-parser": "^1.20.0",
     "concurrently": "^7.2.1",
     "cross-env": "^7.0.3",
@@ -17,8 +18,7 @@
     "ibm-watson": "^7.0.0",
     "lint-staged": "^13.0.1",
     "morgan": "^1.10.0",
-    "sass": "^1.52.3",
-    "use-data-api": "^1.0.1"
+    "sass": "^1.52.3"
   },
   "scripts": {
     "dev": "concurrently \"npm:client\" \"npm:server\"",

package.json

@@ -9,7 +9,7 @@ import {
   TextArea,
   Tile,
 } from '@carbon/react';
-import useDataApi from 'use-data-api';
+import axios from 'axios';
 import { sampleText } from '../../data/sampleText';
 import { mapVoicesToDropdownItems } from './utils';
 
@@ -19,15 +19,19 @@ export const ControlContainer = ({ onSynthesize }) => {
   const [voices, setVoices] = useState([]);
   const [selectedVoice, setSelectedVoice] = useState();
   const [text, setText] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
 
-  const [{ data, isLoading, isError }, doFetch] = useDataApi(VOICES_ENDPOINT, {
-    voices: [],
-  });
-
+  // Get voices data
   useEffect(() => {
-    doFetch(VOICES_ENDPOINT);
-    setVoices(data.voices);
-  }, [data, doFetch, isError, isLoading]);
+    axios(VOICES_ENDPOINT)
+      .then(({ data }) => setVoices(data.voices))
+      .catch(err => {
+        console.log(err);
+        setIsError(true);
+      })
+      .finally(setIsLoading(false));
+  }, []);
 
   // Default to initial voice once all voices are loaded.
   useEffect(() => {