Re-refactored Codebase

src/components/app.js

@@ -19,7 +19,6 @@ const DetailsContainer = styled.div`
 `;
 
 const AppLink = styled.a`
-    font-family: Roboto, sans-serif;
     flex: 1 0 auto;
     color: ${selectedTheme.mainColor};
     font-weight: 500;
@@ -34,7 +33,6 @@ const AppLink = styled.a`
 `;
 
 const AppDescription = styled.p`
-    font-family: Roboto, sans-serif;
     text-transform: uppercase;
     margin: 0;
     font-size: 0.65rem;

src/components/appCategory.js

@@ -4,17 +4,17 @@ import { App } from './app';
 import { ItemList, Item, SubHeadline } from './elements';
 
 const CategoryHeadline = styled(SubHeadline)`
+    padding-top: 1rem;
     font-size: 1.25rem;
 `;
 
 const CategoryContainer = styled.div`
     width: 100%;
-    padding-top: 1rem;
 `;
 
-export const Category = ({ name, items }) => (
+export const AppCategory = ({ name, items }) => (
     <CategoryContainer>
-        <CategoryHeadline>{name}</CategoryHeadline>
+        {name && <CategoryHeadline>{name}</CategoryHeadline>}
         <ItemList>
             {items.map((app, idx) => (
                 <Item key={[app.name, idx].join('')}>

src/components/appList.js

@@ -1,13 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { App } from './app';
+import { AppCategory } from './appCategory';
-import { Category } from './category';
 
 import {
     handleResponse,
     Headline,
     ListContainer,
-    ItemList,
-    Item,
     ErrorMessage,
 } from './elements';
 
@@ -39,29 +36,19 @@ const AppList = () => {
     return (
         <ListContainer>
             <Headline>Applications</Headline>
-
+            {error && <ErrorMessage>{error}</ErrorMessage>}
             {categories &&
-                categories.map((category, idx) => (
+                categories.map(({ name, items }, idx) => (
-                    <Category
+                    <AppCategory
-                        key={[category.name, idx].join('')}
+                        key={[name, idx].join('')}
-                        name={category.name}
+                        name={name}
-                        items={category.items}
+                        items={items}
                     />
                 ))}
-
+            <AppCategory
-            <ItemList>
+                name={categories ? 'Uncategorized apps' : null}
-                {error && <ErrorMessage>{error}</ErrorMessage>}
+                items={apps}
-                {apps.map((app, idx) => (
+            />
-                    <Item key={[app.name, idx].join('')}>
-                        <App
-                            name={app.name}
-                            icon={app.icon}
-                            url={app.url}
-                            displayURL={app.displayURL}
-                        />
-                    </Item>
-                ))}
-            </ItemList>
         </ListContainer>
     );
 };

src/components/bookmarkGroup.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Item, SubHeadline } from './elements';
+import selectedTheme from './themeManager';
+
+const GroupContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 2 1 auto;
+    padding: 1rem 0;
+`;
+
+const Bookmark = styled.a`
+    font-weight: 400;
+    text-decoration: none;
+    color: ${selectedTheme.accentColor};
+    padding-top: 10px;
+    font-size: 14px;
+
+    &:hover {
+        text-decoration: underline;
+    }
+`;
+
+export const BookmarkGroup = ({ name: groupName, items }) => (
+    <Item>
+        <GroupContainer>
+            <SubHeadline>{groupName}</SubHeadline>
+            {items.map(({ name, url }, idx) => (
+                <Bookmark key={[name, idx].join('')} href={url}>
+                    {name}
+                </Bookmark>
+            ))}
+        </GroupContainer>
+    </Item>
+);

src/components/bookmarkList.js

@@ -1,35 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
-import selectedTheme from './themeManager';
 import {
     handleResponse,
     Headline,
-    SubHeadline,
     ListContainer,
     ItemList,
-    Item,
     ErrorMessage,
 } from './elements';
 
-const BookmarkGroup = styled.div`
+import { BookmarkGroup } from './bookmarkGroup';
-    display: flex;
-    flex-direction: column;
-    flex: 2 1 auto;
-    padding: 1rem 0;
-`;
-
-const Bookmark = styled.a`
-    font-weight: 400;
-    text-decoration: none;
-    color: ${selectedTheme.accentColor};
-    padding-top: 10px;
-    font-size: 14px;
-
-    &:hover {
-        text-decoration: underline;
-    }
-`;
 
 const useBookmarkData = () => {
     const [bookmarkData, setBookmarkData] = useState({
@@ -63,22 +42,15 @@ const BookmarkList = () => {
     return (
         <ListContainer>
             <Headline>Bookmarks</Headline>
+            {error && <ErrorMessage>{error}</ErrorMessage>}
             <ItemList>
-                {error && <ErrorMessage>{error}</ErrorMessage>}
+                {groups.map(({ name, items }, idx) => (
-                {groups.map((group, idx) => {
+                    <BookmarkGroup
-                    return (
+                        key={[name, idx].join('')}
-                        <Item key={[group.name, idx].join('')}>
+                        name={name}
-                            <BookmarkGroup>
+                        items={items}
-                                <SubHeadline>{group.name}</SubHeadline>
+                    />
-                                {group.items.map(({ url, name: linkName }) => (
+                ))}
-                                    <Bookmark key={linkName} href={url}>
-                                        {linkName}
-                                    </Bookmark>
-                                ))}
-                            </BookmarkGroup>
-                        </Item>
-                    );
-                })}
             </ItemList>
         </ListContainer>
     );

src/components/settingsModal.js

@@ -39,7 +39,6 @@ const FormContainer = styled.div`
 `;
 
 const Table = styled.table`
-    font-family: Roboto, sans-serif;
     font-weight: 400;
     background: none;
     color: ${selectedTheme.mainColor};