Added production support for themes

also some css improvements

src/components/appList.js

@@ -4,7 +4,14 @@ import styled from 'styled-components';
 
 import selectedTheme from './themeManager';
 
-import { Headline, ListContainer, ItemList, Item, RefreshButton, ErrorMessage } from './elements';
+import {
+    Headline,
+    ListContainer,
+    ItemList,
+    Item,
+    RefreshButton,
+    ErrorMessage
+} from './elements';
 
 const IconContainer = styled.div`
     margin-right: 0.5vh;
@@ -41,14 +48,14 @@ const App = styled.div`
     padding: 1rem;
 `;
 
-function handleResponse(response) {
+const handleResponse = response => {
     if (response.ok) {
         return response.json();
     }
     throw new Error('Failed to load app data.');
-}
+};
 
-function useAppData() {
+const useAppData = () => {
     const [appData, setAppData] = useState({ apps: [], error: false });
     const fetchAppData = useCallback(() => {
         (process.env.NODE_ENV === 'production'
@@ -63,15 +70,11 @@ function useAppData() {
             });
     }, []);
 
-    useEffect(() => {
-        console.log(appData)
-    }, [appData]);
-
     useEffect(() => {
         fetchAppData();
     }, [fetchAppData]);
     return { appData, fetchAppData };
-}
+};
 
 const AppList = () => {
     const {

src/components/bookmarkList.js

@@ -2,7 +2,14 @@ import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import selectedTheme from './themeManager';
-import { Headline, ListContainer, ItemList, Item, RefreshButton, ErrorMessage } from './elements';
+import {
+    Headline,
+    ListContainer,
+    ItemList,
+    Item,
+    RefreshButton,
+    ErrorMessage
+} from './elements';
 
 const Group = styled.h4`
     font-family: Roboto, sans-serif;
@@ -28,15 +35,18 @@ const Bookmark = styled.a`
     font-size: 14px;
 `;
 
-function handleResponse(response) {
+const handleResponse = response => {
     if (response.ok) {
         return response.json();
     }
     throw new Error('Failed to load app data.');
-}
+};
 
 const useBookmarkData = () => {
-    const [bookmarkData, setBookmarkData] = useState({ groups: [], error: false });
+    const [bookmarkData, setBookmarkData] = useState({
+        groups: [],
+        error: false
+    });
     const fetchBookmarkData = useCallback(() => {
         (process.env.NODE_ENV === 'production'
             ? fetch('/bookmarks.json').then(handleResponse)
@@ -54,7 +64,7 @@ const useBookmarkData = () => {
         fetchBookmarkData();
     }, [fetchBookmarkData]);
     return { bookmarkData, fetchBookmarkData };
-}
+};
 
 const BookmarkList = () => {
     const {
@@ -63,7 +73,7 @@ const BookmarkList = () => {
     } = useBookmarkData();
     return (
         <ListContainer>
-            <Headline>Applications</Headline>
+            <Headline>Bookmarks</Headline>
             <RefreshButton onClick={fetchBookmarkData}>refresh</RefreshButton>
             <ItemList>
                 {error && <ErrorMessage>{error}</ErrorMessage>}

src/components/elements.js

@@ -28,7 +28,6 @@ export const ItemList = styled.ul`
 `;
 
 export const Item = styled.li`
-    max-height: 100px;
     overflow: hidden;
     position: relative;
     list-style: none;

src/components/settingsModal.js

@@ -1,13 +1,12 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import Select from 'react-select';
 
 import searchData from './data/search.json';
-import themeData from './data/themes.json';
 
 import selectedTheme, { setTheme } from './themeManager';
-import { Button, IconButton } from './elements';
+import { Button, IconButton, ErrorMessage } from './elements';
 
 const Modal = styled.div`
     position: absolute;
@@ -103,10 +102,43 @@ const SelectorStyle = {
     }
 };
 
+const handleResponse = response => {
+    if (response.ok) {
+        return response.json();
+    }
+    throw new Error('Failed to load app data.');
+};
+
+const useThemeData = () => {
+    const [themeData, setThemeData] = useState({ themes: [], error: false });
+    const fetchThemeData = useCallback(() => {
+        (process.env.NODE_ENV === 'production'
+            ? fetch('/themes.json').then(handleResponse)
+            : import('./data/themes.json')
+        )
+            .then(jsonResponse => {
+                setThemeData({ ...jsonResponse, error: false });
+            })
+            .catch(error => {
+                setThemeData({ themes: [], error: error.message });
+            });
+    }, []);
+
+    useEffect(() => {
+        fetchThemeData();
+    }, [fetchThemeData]);
+    return { themeData, fetchThemeData };
+};
+
 const SettingsModal = () => {
     const [modalHidden, setModalHidden] = useState(true);
     const [newTheme, setNewTheme] = useState();
 
+    const {
+        themeData: { themes, error },
+        fetchThemeData
+    } = useThemeData();
+
     return (
         <>
             <IconButton
@@ -118,17 +150,19 @@ const SettingsModal = () => {
                     icon="close"
                     onClick={() => setModalHidden(!modalHidden)}
                 />
+                {error && <ErrorMessage>{error}</ErrorMessage>}
                 <SelectContainer>
                     <Headline>Theme:</Headline>
                     <FormContainer>
                         <Select
-                            options={themeData.themes}
+                            options={themes}
                             defaultValue={selectedTheme}
                             onChange={e => {
                                 setNewTheme(e);
                             }}
                             styles={SelectorStyle}
                         />
+                        <Button onClick={fetchThemeData}>Refresh</Button>
                         <Button
                             onClick={() => setTheme(JSON.stringify(newTheme))}
                         >

src/components/themeManager.js

@@ -1,4 +1,10 @@
-import themeData from './data/themes.json';
+const defaultTheme = {
+    label: 'Classic',
+    value: 0,
+    mainColor: '#000000',
+    accentColor: '#1e272e',
+    backgroundColor: '#ffffff'
+};
 
 const setTheme = theme => {
     localStorage.setItem('theme', theme);
@@ -10,7 +16,7 @@ const resetTheme = () => {
 };
 
 const getTheme = () => {
-    let selectedTheme = themeData.themes[0];
+    let selectedTheme = defaultTheme;
 
     if (
         localStorage.getItem('theme') &&