diff --git a/public/settings.json b/public/settings.json
new file mode 100644
index 0000000..1c8668a
--- /dev/null
+++ b/public/settings.json
@@ -0,0 +1,6 @@
+{
+ "slideshows": [
+ "pics",
+ ["memes", "funny"]
+ ]
+}
\ No newline at end of file
diff --git a/src/components/SlideshowPicker/SlideshowPicker.js b/src/components/SlideshowPicker/SlideshowPicker.js
index 8f73ce0..d7cf019 100644
--- a/src/components/SlideshowPicker/SlideshowPicker.js
+++ b/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 (
+
+ LOADING
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ {error}
+
+ );
+ }
+
return (
-
+ {JSON.stringify(settings)}
);
};
diff --git a/src/hooks/fetch.js b/src/hooks/fetch.js
new file mode 100644
index 0000000..825e171
--- /dev/null
+++ b/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;