Refactor #2

README.md

@@ -69,6 +69,8 @@ There's a couple of things you can / need to configure to get Dashboard to look
 
 If you don't require a specific component, just remove the file from your `data`-directory. Dashboard won't render the components whose files are not present. With no files present, only the greeter will be shown.
 
+If you're running into problems with configuring your files and you can't seem to get them to work, feel free to open an issue, I'd be happy to help! :smile:
+
 ### Apps
 
 To show the apps you want to show, change `apps.json` to resemble the following:

src/components/appCategory.tsx

@@ -29,7 +29,7 @@ export const AppCategory = ({ name, items }: IAppCategoryProps) => (
           <App
             name={app.name}
             icon={app.icon}
-            URL={app.URL}
+            url={app.url}
             displayURL={app.displayURL}
           />
         </Item>

src/components/bookmarkGroup.tsx

@@ -28,7 +28,7 @@ export interface IBookmarkProps {
 }
 
 export interface IBookmarkGroupProps {
-  groupName: string;
+  name: string;
   items: Array<IBookmarkProps>;
 }
 
@@ -36,10 +36,10 @@ export interface IBookmarkGroupProps {
  * Renders a given bookmark group
  * @param {IBookmarkGroupProps} props - The given props of the bookmark group
  */
-export const BookmarkGroup = ({ groupName, items }: IBookmarkGroupProps) => (
+export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => (
   <Item>
     <GroupContainer>
-      <SubHeadline>{groupName}</SubHeadline>
+      <SubHeadline>{name}</SubHeadline>
       {items.map(({ name, url }, idx) => (
         <Bookmark key={[name, idx].join("")} href={url}>
           {name}

src/components/bookmarkList.tsx

@@ -10,17 +10,15 @@ interface IBookmarkListProps {
  * Renders a given list of categorized bookmarks
  * @param {IBookmarkListProps} props - The props of the given bookmark list
  */
-const BookmarkList = ({ groups }: IBookmarkListProps) => {
+const BookmarkList = ({ groups }: IBookmarkListProps) => (
-  return (
+  <ListContainer>
-    <ListContainer>
+    <Headline>Bookmarks</Headline>
-      <Headline>Bookmarks</Headline>
+    <ItemList>
-      <ItemList>
+      {groups.map(({ name, items }, idx) => (
-        {groups.map(({ groupName, items }, idx) => (
+        <BookmarkGroup key={[name, idx].join("")} name={name} items={items} />
-          <BookmarkGroup key={[groupName, idx].join("")} groupName={groupName} items={items} />
+      ))}
-        ))}
+    </ItemList>
-      </ItemList>
+  </ListContainer>
-    </ListContainer>
+);
-  );
-};
 
 export default BookmarkList;

src/components/greeter.tsx

@@ -109,16 +109,11 @@ const getDateString = () => {
 /**
  * Renders the Greeter
  */
-const Greeter = () => {
+const Greeter = () => (
-  let date = getDateString();
+  <GreeterContainer>
-  let greeting = getGreeting();
+    <DateText>{getDateString()}</DateText>
-
+    <GreetText>{getGreeting()}</GreetText>
-  return (
+  </GreeterContainer>
-    <GreeterContainer>
+);
-      <DateText>{date}</DateText>
-      <GreetText>{greeting}</GreetText>
-    </GreeterContainer>
-  );
-};
 
 export default Greeter;

src/components/imprint.tsx

@@ -90,19 +90,24 @@ const Imprint = ({ imprint }: IImprintComponentProps) => (
               }
             }}
           >
-            <ModalSubHeadline>
+            <div>
-              Information in accordance with section 5 TMG
+              <ModalSubHeadline>
+                Information in accordance with section 5 TMG
             </ModalSubHeadline>
-            <>
+              <>
-              {imprint.name && <ImprintField field={imprint.name} />}
+                {imprint.name && <ImprintField field={imprint.name} />}
-              {imprint.address && <ImprintField field={imprint.address} />}
+                {imprint.address && <ImprintField field={imprint.address} />}
-              {imprint.email && <ImprintField field={imprint.email} />}
+                {imprint.email && <ImprintField field={imprint.email} />}
-              {imprint.phone && <ImprintField field={imprint.phone} />}
+                {imprint.phone && <ImprintField field={imprint.phone} />}
-              {imprint.url && <ImprintField field={imprint.url} />}
+                {imprint.url && <ImprintField field={imprint.url} />}
-            </>
+              </>
-            <Text>
+            </div>
-              {imprint.text}
+            <div>
-            </Text>
+              <ModalSubHeadline>
+                Imprint
+            </ModalSubHeadline>
+              {imprint.text && <Text>{imprint.text}</Text>}
+            </div>
           </Modal>
         </ItemContainer>
       </ItemList>