Added bookmark support

data/bookmarks.json

@@ -0,0 +1,98 @@
+{
+    "groups": [
+        {
+            "name": "Wikis",
+            "items": [
+                {
+                    "name": "Wikipedia",
+                    "url": "https://en.wikipedia.org/"
+                },
+                {
+                    "name": "Arch Linux Wiki",
+                    "url": "https://archlinux.org/"
+                }
+            ]
+        },
+        {
+            "name": "Dev",
+            "items": [
+                {
+                    "name": "Codepen",
+                    "url": "https://codepen.io/"
+                },
+                {
+                    "name": "JSFiddle",
+                    "url": "https://jsfiddle.net/"
+                },
+                {
+                    "name": "Pastebin",
+                    "url": "https://pastebin.com/"
+                }
+            ]
+        },
+        {
+            "name": "Media",
+            "items": [
+                {
+                    "name": "Soundcloud",
+                    "url": "https://soundcloud.com"
+                },
+                {
+                    "name": "YouTube",
+                    "url": "https://youtube.com"
+                },
+                {
+                    "name": "Twitch",
+                    "url": "https://twitch.tv"
+                }
+            ]
+        },
+        {
+            "name": "Social Networks",
+            "items": [
+                {
+                    "name": "Facebook",
+                    "url": "https://facebook.com"
+                },
+                {
+                    "name": "Twitter",
+                    "url": "https://twitter.com"
+                },
+                {
+                    "name": "Instagram",
+                    "url": "https://instagram.com"
+                }
+            ]
+        },
+        {
+            "name": "Imageboards",
+            "items": [
+                {
+                    "name": "Reddit",
+                    "url": "https://reddit.com"
+                },
+                {
+                    "name": "4chan",
+                    "url": "https://4chan.org"
+                }
+            ]
+        },
+        {
+            "name": "Tech",
+            "items": [
+                {
+                    "name": "Hackernoon",
+                    "url": "https://hackernoon.com"
+                },
+                {
+                    "name": "The Verge",
+                    "url": "https://theverge.com"
+                },
+                {
+                    "name": "Hackernews",
+                    "url": "https://news.ycombinator.com"
+                }
+            ]
+        }
+    ]
+}

data/search.json

@@ -0,0 +1,64 @@
+{
+    "providers": [
+        {
+            "name": "Allmusic",
+            "url": "https://www.allmusic.com/search/all/",
+            "prefix": "/a"
+        },
+        {
+            "name": "Discogs",
+            "url": "https://www.discogs.com/search/?q=",
+            "prefix": "/di"
+        },
+        {
+            "name": "Duck Duck Go",
+            "url": "https://duckduckgo.com/?q=",
+            "prefix": "/d"
+        },
+        {
+            "name": "iMDB",
+            "url": "https://www.imdb.com/find?q=",
+            "prefix": "/i"
+        },
+        {
+            "name": "TheMovieDB",
+            "url": "https://www.themoviedb.org/search?query=",
+            "prefix": "/m"
+        },
+        {
+            "name": "Reddit",
+            "url": "https://www.reddit.com/search?q=",
+            "prefix": "/r"
+        },
+        {
+            "name": "Qwant",
+            "url": "https://www.qwant.com/?q=",
+            "prefix": "/q"
+        },
+        {
+            "name": "Soundcloud",
+            "url": "https://soundcloud.com/search?q=",
+            "prefix": "/so"
+        },
+        {
+            "name": "Spotify",
+            "url": "https://open.spotify.com/search/results/",
+            "prefix": "/s"
+        },
+        {
+            "name": "TheTVDB",
+            "url": "https://www.thetvdb.com/search?q=",
+            "prefix": "/tv"
+        },
+        {
+            "name": "Trakt",
+            "url": "https://trakt.tv/search?query=",
+            "prefix": "/t"
+        },
+        {
+            "name": "YouTube",
+            "url": "https://youtube.com/results?search_query=",
+            "prefix": "/yt"
+        }
+    ]
+}

data/themes.json

@@ -0,0 +1,25 @@
+{
+    "themes": [
+        {
+            "label": "Classic",
+            "value": 0,
+            "mainColor": "#000000",
+            "accentColor": "#1e272e",
+            "backgroundColor": "#ffffff"
+        },
+        {
+            "label": "Dark",
+            "value": 1,
+            "mainColor": "#ffffff",
+            "accentColor": "#999999",
+            "backgroundColor": "#000000"
+        },
+        {
+            "label": "Raw",
+            "value": 2,
+            "mainColor": "",
+            "accentColor": "",
+            "backgroundColor": "#ffffff"
+        }
+    ]
+}

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 = () => (
+function handleResponse(response) {
-    <ListContainer>
+    if (response.ok) {
-        <Headline>Bookmarks</Headline>
+        return response.json();
-        <ItemList>
+    }
-            {bookmarkData.groups.map(({ name, items }) => (
+    throw new Error('Failed to load app data.');
-                <Item key={name}>
+}
-                    <BookmarkGroup>
-                        <Group>{name}</Group>
-                        {items.map(({ url, name: linkName }) => (
-                            <Bookmark key={linkName} href={url}>
-                                {linkName}
-                            </Bookmark>
-                        ))}
-                    </BookmarkGroup>
-                </Item>
-            ))}
-        </ItemList>
-    </ListContainer>
-);
 
-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 &&