Replace useFetcher with useFetch.

src/components/bookmarks.tsx

@@ -38,7 +38,7 @@ export interface IBookmarkGroupProps {
 }
 
 export interface IBookmarkListProps {
-  groups: Array<IBookmarkGroupProps>;
+  groups?: Array<IBookmarkGroupProps>;
 }
 
 export const Bookmark = ({ name, url, newTab }: IBookmarkProps) => {
@@ -83,15 +83,23 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => (
  * @param {IBookmarkListProps} props props of the given bookmark list
  * @returns {React.ReactNode} the bookmark list component
  */
-const BookmarkList = ({ groups }: IBookmarkListProps) => (
-  <ListContainer>
-    <Headline>Bookmarks</Headline>
-    <ItemList>
-      {groups.map(({ name, items }, index) => (
-        <BookmarkGroup key={[name, index].join("")} name={name} items={items} />
-      ))}
-    </ItemList>
-  </ListContainer>
-);
+const BookmarkList = ({ groups }: IBookmarkListProps) => {
+  if (groups === undefined || groups.length <= 0) return <></>;
+
+  return (
+    <ListContainer>
+      <Headline>Bookmarks</Headline>
+      <ItemList>
+        {groups.map(({ name, items }, index) => (
+          <BookmarkGroup
+            key={[name, index].join("")}
+            name={name}
+            items={items}
+          />
+        ))}
+      </ItemList>
+    </ListContainer>
+  );
+};
 
 export default BookmarkList;

src/components/greeter.tsx

@@ -20,7 +20,11 @@ const DateText = styled.h3`
 `;
 
 export interface IGreeterComponentProps {
-  data: IGreeterProps;
+  greeter?: IGreeterDataProps;
+}
+
+export interface IGreeterDataProps {
+  greeter: IGreeterProps;
 }
 
 export interface IGreeterProps {
@@ -114,13 +118,21 @@ export const getDateString = (
  * @param {IGreeterComponentProps} data required greeter data
  * @returns {React.ReactNode} the greeter
  */
-const Greeter = ({ data }: IGreeterComponentProps) => (
-  <GreeterContainer>
-    <DateText>
-      {getDateString(data.days, data.months, data.dateformat)}
-    </DateText>
-    <GreetText>{getGreeting(data.greetings)}</GreetText>
-  </GreeterContainer>
-);
+const Greeter = ({ greeter }: IGreeterComponentProps) => {
+  if (greeter === undefined) return <></>;
+
+  return (
+    <GreeterContainer>
+      <DateText>
+        {getDateString(
+          greeter.greeter.days,
+          greeter.greeter.months,
+          greeter.greeter.dateformat,
+        )}
+      </DateText>
+      <GreetText>{getGreeting(greeter.greeter.greetings)}</GreetText>
+    </GreeterContainer>
+  );
+};
 
 export default Greeter;

src/components/imprint.tsx

@@ -40,7 +40,7 @@ export interface IImprintProps {
 }
 
 export interface IImprintComponentProps {
-  imprint: IImprintProps;
+  imprint?: IImprintProps;
 }
 
 interface IImprintFieldComponentProps {
@@ -72,41 +72,45 @@ export const onClose = () => {
  * @param {IImprintProps} props contents of the imprint
  * @returns {React.ReactNode} the imprint node
  */
-const Imprint = ({ imprint }: IImprintComponentProps) => (
-  <>
-    <ListContainer>
-      <Headline>About</Headline>
-      <ItemList>
-        <ItemContainer>
-          <SubHeadline>Imprint</SubHeadline>
-          <Modal
-            element="text"
-            text="View Imprint"
-            title="Legal Disclosure"
-            condition={!window.location.href.endsWith("#imprint")}
-            onClose={onClose}
-          >
-            <div>
-              <ModalSubHeadline>
-                Information in accordance with section 5 TMG
-              </ModalSubHeadline>
-              <>
-                {imprint.name && <ImprintField field={imprint.name} />}
-                {imprint.address && <ImprintField field={imprint.address} />}
-                {imprint.email && <ImprintField field={imprint.email} />}
-                {imprint.phone && <ImprintField field={imprint.phone} />}
-                {imprint.url && <ImprintField field={imprint.url} />}
-              </>
-            </div>
-            <div>
-              <ModalSubHeadline>Imprint</ModalSubHeadline>
-              {imprint.text && <Text>{imprint.text}</Text>}
-            </div>
-          </Modal>
-        </ItemContainer>
-      </ItemList>
-    </ListContainer>
-  </>
-);
+const Imprint = ({ imprint }: IImprintComponentProps) => {
+  if (imprint === undefined) return <></>;
+
+  return (
+    <>
+      <ListContainer>
+        <Headline>About</Headline>
+        <ItemList>
+          <ItemContainer>
+            <SubHeadline>Imprint</SubHeadline>
+            <Modal
+              element="text"
+              text="View Imprint"
+              title="Legal Disclosure"
+              condition={!window.location.href.endsWith("#imprint")}
+              onClose={onClose}
+            >
+              <div>
+                <ModalSubHeadline>
+                  Information in accordance with section 5 TMG
+                </ModalSubHeadline>
+                <>
+                  {imprint.name && <ImprintField field={imprint.name} />}
+                  {imprint.address && <ImprintField field={imprint.address} />}
+                  {imprint.email && <ImprintField field={imprint.email} />}
+                  {imprint.phone && <ImprintField field={imprint.phone} />}
+                  {imprint.url && <ImprintField field={imprint.url} />}
+                </>
+              </div>
+              <div>
+                <ModalSubHeadline>Imprint</ModalSubHeadline>
+                {imprint.text && <Text>{imprint.text}</Text>}
+              </div>
+            </Modal>
+          </ItemContainer>
+        </ItemList>
+      </ListContainer>
+    </>
+  );
+};
 
 export default Imprint;

src/components/searchBar.tsx

@@ -48,7 +48,7 @@ export interface ISearchProps {
 }
 
 interface ISearchBarProps {
-  search: ISearchProps;
+  search?: ISearchProps;
 }
 
 export const handleQueryWithProvider = (
@@ -85,6 +85,8 @@ const SearchBar = ({ search }: ISearchBarProps) => {
 
   useEffect(() => setButtonsHidden(input === ""), [input]);
 
+  if (search === undefined) return <></>;
+
   const handleSearchQuery = (e: React.FormEvent) => {
     var query: string = input || "";
 

src/components/select.tsx

@@ -46,29 +46,15 @@ const Select = ({
       className={className}
       value={selected}
     >
-      {items.map(({ label, value }, index) => {
-        if (label === current) {
-          return (
-            <option
-              data-testid={"option-" + (testId ? `${testId}-` : "") + index}
-              key={[label, index].join("")}
-              value={value.toString()}
-            >
-              {label}
-            </option>
-          );
-        } else {
-          return (
-            <option
-              data-testid={"option-" + (testId ? `${testId}-` : "") + index}
-              key={[label, index].join("")}
-              value={value.toString()}
-            >
-              {label}
-            </option>
-          );
-        }
-      })}
+      {items.map(({ label, value }, index) => (
+        <option
+          data-testid={"option-" + (testId ? `${testId}-` : "") + index}
+          key={[label, index].join("")}
+          value={value.toString()}
+        >
+          {label}
+        </option>
+      ))}
     </List>
   );
 };

src/components/settings.tsx

@@ -4,7 +4,12 @@ import styled from "styled-components";
 import Select from "./select";
 
 import { ISearchProps } from "./searchBar";
-import { setTheme, IThemeProps, getTheme } from "../lib/useTheme";
+import {
+  setTheme,
+  IThemeProps,
+  IThemeDataProps,
+  getTheme,
+} from "../lib/useTheme";
 import { Button, SubHeadline } from "./elements";
 
 import Modal from "./modal";
@@ -88,13 +93,13 @@ const ContentContainer = styled.div`
 `;
 
 interface ISettingsProps {
-  themes: Array<IThemeProps> | undefined;
-  search: ISearchProps | undefined;
+  themes?: IThemeDataProps;
+  search?: ISearchProps;
 }
 
 /**
  * Handles the settings-modal
- * @param {Array<IThemeProps>} themes - the list of themes a user can select between
+ * @param {IThemeDataProps} themes - the list of themes a user can select between
  * @param {ISearchProps} search - the list of search providers
  */
 const Settings = ({ themes, search }: ISettingsProps) => {
@@ -104,87 +109,85 @@ const Settings = ({ themes, search }: ISettingsProps) => {
   const currentLightTheme = getTheme("light").value;
   const currentDarkTheme = getTheme("dark").value;
 
-  if (themes || search) {
-    return (
-      <Modal element="icon" icon="settings" title="Settings">
-        <ContentContainer>
-          {themes && (
-            <Section>
-              <SectionHeadline>Theme</SectionHeadline>
-              <FormContainer>
-                <div>
-                  <ThemeHeader>Light</ThemeHeader>
-                  <ThemeSelect
-                    items={themes}
-                    onChange={(theme: IThemeProps) => setNewLightTheme(theme)}
-                    current={currentLightTheme}
-                    testId="light"
-                  ></ThemeSelect>
-                </div>
-                <div>
-                  <ThemeHeader>Dark</ThemeHeader>
-                  <ThemeSelect
-                    items={themes}
-                    onChange={(theme: IThemeProps) => setNewDarkTheme(theme)}
-                    current={currentDarkTheme}
-                    testId="dark"
-                  ></ThemeSelect>
-                </div>
-                <div>
-                  <Button
-                    data-testid="button-submit"
-                    onClick={() => {
-                      if (newLightTheme) setTheme("light", newLightTheme);
-                      if (newDarkTheme) setTheme("dark", newDarkTheme);
-                    }}
-                  >
-                    Apply
-                  </Button>
-                </div>
-                <div>
-                  <Button
-                    data-testid="button-refresh"
-                    onClick={() => window.location.reload()}
-                  >
-                    Refresh
-                  </Button>
-                </div>
-              </FormContainer>
-            </Section>
-          )}
-          {search && (
-            <Section>
-              <SectionHeadline>Search Providers</SectionHeadline>
-              <>
-                <Text>Default Search Provider</Text>
-                <Code>{search.defaultProvider}</Code>
-              </>
-              <>
-                {search.providers && (
-                  <Table>
-                    <tbody>
-                      <TableRow>
-                        <HeadCell>Search Provider</HeadCell>
-                        <HeadCell>Prefix</HeadCell>
+  if (themes === undefined && search === undefined) return <></>;
+
+  return (
+    <Modal element="icon" icon="settings" title="Settings">
+      <ContentContainer>
+        {themes !== undefined && (
+          <Section>
+            <SectionHeadline>Theme</SectionHeadline>
+            <FormContainer>
+              <div>
+                <ThemeHeader>Light</ThemeHeader>
+                <ThemeSelect
+                  items={themes.themes}
+                  onChange={(theme: IThemeProps) => setNewLightTheme(theme)}
+                  current={currentLightTheme}
+                  testId="light"
+                ></ThemeSelect>
+              </div>
+              <div>
+                <ThemeHeader>Dark</ThemeHeader>
+                <ThemeSelect
+                  items={themes.themes}
+                  onChange={(theme: IThemeProps) => setNewDarkTheme(theme)}
+                  current={currentDarkTheme}
+                  testId="dark"
+                ></ThemeSelect>
+              </div>
+              <div>
+                <Button
+                  data-testid="button-submit"
+                  onClick={() => {
+                    if (newLightTheme) setTheme("light", newLightTheme);
+                    if (newDarkTheme) setTheme("dark", newDarkTheme);
+                  }}
+                >
+                  Apply
+                </Button>
+              </div>
+              <div>
+                <Button
+                  data-testid="button-refresh"
+                  onClick={() => window.location.reload()}
+                >
+                  Refresh
+                </Button>
+              </div>
+            </FormContainer>
+          </Section>
+        )}
+        {search !== undefined && (
+          <Section>
+            <SectionHeadline>Search Providers</SectionHeadline>
+            <>
+              <Text>Default Search Provider</Text>
+              <Code>{search.defaultProvider}</Code>
+            </>
+            <>
+              {search.providers && (
+                <Table>
+                  <tbody>
+                    <TableRow>
+                      <HeadCell>Search Provider</HeadCell>
+                      <HeadCell>Prefix</HeadCell>
+                    </TableRow>
+                    {search.providers.map(({ name, prefix }, index) => (
+                      <TableRow key={name + index}>
+                        <TableCell>{name}</TableCell>
+                        <TableCell>{prefix}</TableCell>
                       </TableRow>
-                      {search.providers.map(({ name, prefix }, index) => (
-                        <TableRow key={name + index}>
-                          <TableCell>{name}</TableCell>
-                          <TableCell>{prefix}</TableCell>
-                        </TableRow>
-                      ))}
-                    </tbody>
-                  </Table>
-                )}
-              </>
-            </Section>
-          )}
-        </ContentContainer>
-      </Modal>
-    );
-  } else {
-    return <></>;
-  }
+                    ))}
+                  </tbody>
+                </Table>
+              )}
+            </>
+          </Section>
+        )}
+      </ContentContainer>
+    </Modal>
+  );
 };
 
 export default Settings;