Added settings fetch logic.

public/settings.json

@@ -0,0 +1,6 @@
+{
+  "slideshows": [
+    "pics",
+    ["memes", "funny"]
+  ]
+}

src/components/SlideshowPicker/SlideshowPicker.js

@@ -1,10 +1,29 @@
 import React from 'react';
+import useFetch from '../../hooks/fetch';
 import './SlideshowPicker.css';
 
 const SlideshowPicker = () => {
+  const { data: settings, error, loading } = useFetch('/settings.json');
+
+  if (loading) {
+    return (
+      <div>
+        LOADING
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div>
+        {error}
+      </div>
+    );
+  }
+
   return (
     <div className="container">
-
+      {JSON.stringify(settings)}
     </div>
   );
 };

src/hooks/fetch.js

@@ -0,0 +1,35 @@
+import { useEffect, useMemo, useState } from 'react';
+import axios from 'axios';
+
+const useFetch = (url) => {
+  const http = useMemo(() => {
+    return axios.create({
+      baseURL: ''
+    });
+  }, []);
+
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    setData(null);
+    setError(null);
+
+    http.get(url)
+      .then((response) => {
+        setData(response.data);
+      })
+      .catch((error) => {
+        setError(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [url, http]);
+
+  return { data, error, loading };
+};
+
+export default useFetch;