Added bookmark support

src/components/appList.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import selectedTheme from './themeManager';
 
-import { Headline, ListContainer, ItemList, Item, Button } from './elements';
+import { Headline, ListContainer, ItemList, Item, RefreshButton, ErrorMessage } from './elements';
 
 const IconContainer = styled.div`
     margin-right: 0.5vh;
@@ -41,16 +41,6 @@ const App = styled.div`
     padding: 1rem;
 `;
 
-const ErrorMessage = styled.p`
-    color: red;
-`;
-
-const RefreshButton = styled(Button)`
-    display: relative;
-    top: 0;
-    float: right;
-`;
-
 function handleResponse(response) {
     if (response.ok) {
         return response.json();
@@ -72,6 +62,11 @@ function useAppData() {
                 setAppData({ apps: [], error: error.message });
             });
     }, []);
+    
+    useEffect(() => {
+        console.log(appData)
+    }, [appData]);
+
     useEffect(() => {
         fetchAppData();
     }, [fetchAppData]);

src/components/bookmarkList.js

@@ -1,10 +1,8 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import bookmarkData from './data/bookmarks.json';
-
 import selectedTheme from './themeManager';
-import { Headline, ListContainer, ItemList, Item } from './elements';
+import { Headline, ListContainer, ItemList, Item, RefreshButton, ErrorMessage } from './elements';
 
 const Group = styled.h4`
     font-family: Roboto, sans-serif;
@@ -30,24 +28,62 @@ const Bookmark = styled.a`
     font-size: 14px;
 `;
 
-const bookmarkList = () => (
-    <ListContainer>
-        <Headline>Bookmarks</Headline>
-        <ItemList>
-            {bookmarkData.groups.map(({ name, items }) => (
-                <Item key={name}>
-                    <BookmarkGroup>
-                        <Group>{name}</Group>
-                        {items.map(({ url, name: linkName }) => (
-                            <Bookmark key={linkName} href={url}>
-                                {linkName}
-                            </Bookmark>
-                        ))}
-                    </BookmarkGroup>
-                </Item>
-            ))}
-        </ItemList>
-    </ListContainer>
-);
+function handleResponse(response) {
+    if (response.ok) {
+        return response.json();
+    }
+    throw new Error('Failed to load app data.');
+}
 
-export default bookmarkList;
+const useBookmarkData = () => {
+    const [bookmarkData, setBookmarkData] = useState({ groups: [], error: false });
+    const fetchBookmarkData = useCallback(() => {
+        (process.env.NODE_ENV === 'production'
+            ? fetch('/bookmarks.json').then(handleResponse)
+            : import('./data/bookmarks.json')
+        )
+            .then(jsonResponse => {
+                setBookmarkData({ ...jsonResponse, error: false });
+            })
+            .catch(error => {
+                setBookmarkData({ groups: [], error: error.message });
+            });
+    }, []);
+
+    useEffect(() => {
+        fetchBookmarkData();
+    }, [fetchBookmarkData]);
+    return { bookmarkData, fetchBookmarkData };
+}
+
+const BookmarkList = () => {
+    const {
+        bookmarkData: { groups, error },
+        fetchBookmarkData
+    } = useBookmarkData();
+    return (
+        <ListContainer>
+            <Headline>Applications</Headline>
+            <RefreshButton onClick={fetchBookmarkData}>refresh</RefreshButton>
+            <ItemList>
+                {error && <ErrorMessage>{error}</ErrorMessage>}
+                {groups.map((group, idx) => {
+                    return (
+                        <Item key={[group.name, idx].join('')}>
+                            <BookmarkGroup>
+                                <Group>{group.name}</Group>
+                                {group.items.map(({ url, name: linkName }) => (
+                                    <Bookmark key={linkName} href={url}>
+                                        {linkName}
+                                    </Bookmark>
+                                ))}
+                            </BookmarkGroup>
+                        </Item>
+                    );
+                })}
+            </ItemList>
+        </ListContainer>
+    );
+};
+
+export default BookmarkList;

src/components/data/apps.json

@@ -1,7 +1,7 @@
 {
     "apps": [
         {
-            "name": "PiHole",
+            "name": "my pi hole",
             "displayURL": "example.com",
             "URL": "https://example.com",
             "icon": "vpn_lock"

src/components/elements.js

@@ -51,6 +51,16 @@ const StyledButton = styled.button`
     background: none;
 `;
 
+export const RefreshButton = styled(Button)`
+    display: relative;
+    top: 0;
+    float: right;
+`;
+
+export const ErrorMessage = styled.p`
+    color: red;
+`;
+
 export const IconButton = props => {
     if (
         props.icon &&