Fix bugs caused by merge

Also formatted using Prettier

src/App.js

@@ -1,13 +1,13 @@
-import React from "react";
-import styled, { createGlobalStyle } from "styled-components";
+import React from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
 
-import SearchBar from "./components/searchBar";
-import Greeter from "./components/greeter";
-import AppList from "./components/appList";
-import BookmarkList from "./components/bookmarkList";
-import SettingsModal from "./components/settingsModal";
+import SearchBar from './components/searchBar';
+import Greeter from './components/greeter';
+import AppList from './components/appList';
+import BookmarkList from './components/bookmarkList';
+import SettingsModal from './components/settingsModal';
 
-import selectedTheme from "./components/themeManager";
+import selectedTheme from './components/themeManager';
 
 const GlobalStyle = createGlobalStyle`
   body {

src/components/appList.js

@@ -1,46 +1,44 @@
-import React from "react";
-import MaterialIcon from "material-icons-react";
-import styled from "styled-components";
+import React, { useCallback, useEffect, useState } from 'react';
+import MaterialIcon from 'material-icons-react';
+import styled from 'styled-components';
 
-import appData from "./data/apps.json";
+import selectedTheme from './themeManager';
 
-import selectedTheme from "./themeManager";
-
-import { Headline, ListContainer, ItemList, Item } from "./elements";
+import { Headline, ListContainer, ItemList, Item, Button } from './elements';
 
 const IconContainer = styled.div`
-  margin-right: 0.5vh;
+    margin-right: 0.5vh;
 `;
 
 const DetailsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 `;
 
 const Link = styled.a`
-  font-family: Roboto, sans-serif;
-  flex: 1 0 auto;
-  color: ${selectedTheme.mainColor};
-  font-weight: 500;
-  text-transform: uppercase;
-  margin: 0;
-  text-decoration: none;
-  font-size: 1rem;
+    font-family: Roboto, sans-serif;
+    flex: 1 0 auto;
+    color: ${selectedTheme.mainColor};
+    font-weight: 500;
+    text-transform: uppercase;
+    margin: 0;
+    text-decoration: none;
+    font-size: 1rem;
 `;
 
 const Description = styled.p`
-  font-family: Roboto, sans-serif;
-  text-transform: uppercase;
-  margin: 0;
-  font-size: 0.65rem;
-  font-weight: 400;
-  color: ${selectedTheme.accentColor};
+    font-family: Roboto, sans-serif;
+    text-transform: uppercase;
+    margin: 0;
+    font-size: 0.65rem;
+    font-weight: 400;
+    color: ${selectedTheme.accentColor};
 `;
 
 const App = styled.div`
-  display: flex;
-  flex-basis: 25%;
-  padding: 1rem;
+    display: flex;
+    flex-basis: 25%;
+    padding: 1rem;
 `;
 
 const ErrorMessage = styled.p`
@@ -61,10 +59,10 @@ function useAppData() {
             ? fetch('/apps.json').then(handleResponse)
             : import('./data/apps.json')
         )
-            .then((jsonResponse) => {
+            .then(jsonResponse => {
                 setAppData({ ...jsonResponse, error: false });
             })
-            .catch((error) => {
+            .catch(error => {
                 setAppData({ apps: [], error: error.message });
             });
     }, []);
@@ -77,34 +75,36 @@ function useAppData() {
 const AppList = () => {
     const {
         appData: { apps, error },
-        fetchAppData,
+        fetchAppData
     } = useAppData();
     return (
-        <AppListContainer>
-            <ApplicationsText>
+        <ListContainer>
+            <Headline>
                 Applications <Button onClick={fetchAppData}>refresh</Button>
-            </ApplicationsText>
-            <AppsContainer>
+            </Headline>
+            <ItemList>
                 {error && <ErrorMessage>{error}</ErrorMessage>}
                 {apps.map((app, idx) => {
                     const { name } = app;
                     return (
-                        <AppContainer key={[name, idx].join('')}>
-                            <IconContainer>
-                                <MaterialIcon
-                                    icon={app.icon}
-                                    color={selectedTheme.mainColor}
-                                />
-                            </IconContainer>
-                            <AppDetails>
-                                <Link href={app.URL}>{app.name}</Link>
-                                <Description>{app.displayURL}</Description>
-                            </AppDetails>
-                        </AppContainer>
+                        <Item key={[name, idx].join('')}>
+                            <App>
+                                <IconContainer>
+                                    <MaterialIcon
+                                        icon={app.icon}
+                                        color={selectedTheme.mainColor}
+                                    />
+                                </IconContainer>
+                                <DetailsContainer>
+                                    <Link href={app.URL}>{app.name}</Link>
+                                    <Description>{app.displayURL}</Description>
+                                </DetailsContainer>
+                            </App>
+                        </Item>
                     );
                 })}
-            </AppsContainer>
-        </AppListContainer>
+            </ItemList>
+        </ListContainer>
     );
 };
 

src/components/bookmarkList.js

@@ -1,53 +1,53 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 
-import bookmarkData from "./data/bookmarks.json";
+import bookmarkData from './data/bookmarks.json';
 
-import selectedTheme from "./themeManager";
-import { Headline, ListContainer, ItemList, Item } from "./elements";
+import selectedTheme from './themeManager';
+import { Headline, ListContainer, ItemList, Item } from './elements';
 
 const Group = styled.h4`
-  font-family: Roboto, sans-serif;
-  font-weight: 700;
-  margin: 0;
-  text-transform: uppercase;
-  color: ${selectedTheme.mainColor};
+    font-family: Roboto, sans-serif;
+    font-weight: 700;
+    margin: 0;
+    text-transform: uppercase;
+    color: ${selectedTheme.mainColor};
 `;
 
 const BookmarkGroup = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 2 1 auto;
-  padding: 1rem 0 1rem 0;
+    display: flex;
+    flex-direction: column;
+    flex: 2 1 auto;
+    padding: 1rem 0 1rem 0;
 `;
 
 const Bookmark = styled.a`
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  text-decoration: none;
-  color: ${selectedTheme.accentColor};
-  padding: 10px 0 0 0;
-  font-size: 14px;
+    font-family: Roboto, sans-serif;
+    font-weight: 400;
+    text-decoration: none;
+    color: ${selectedTheme.accentColor};
+    padding: 10px 0 0 0;
+    font-size: 14px;
 `;
 
 const bookmarkList = () => (
-  <ListContainer>
-    <Headline>Bookmarks</Headline>
-    <ItemList>
-      {bookmarkData.groups.map(({ name, items }) => (
-        <Item key={name}>
-          <BookmarkGroup>
-            <Group>{name}</Group>
-            {group.items.map(({ url, name: linkName }) => (
-              <Bookmark key={linkName} href={url}>
-                {linkName}
-              </Bookmark>
+    <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>
             ))}
-          </BookmarkGroup>
-        </Item>
-      ))}      
-    </ItemList>
-  </ListContainer>
+        </ItemList>
+    </ListContainer>
 );
 
 export default bookmarkList;

src/components/button.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-import { selectedTheme } from '../selectedTheme';
-
-export const Button = styled.button`
-    font-family: Roboto, sans-serif;
-    text-transform: uppercase;
-    font-weight: 400;
-    border: 1px solid ${selectedTheme.mainColor};
-    color: ${selectedTheme.mainColor};
-    background: none;
-    margin-left: 1rem;
-    min-height: 3em;
-`;

src/components/elements.js

@@ -1,32 +1,71 @@
-import styled from "styled-components";
-import selectedTheme from "./themeManager";
+import React from 'react';
+import styled from 'styled-components';
+import selectedTheme from './themeManager';
+import MaterialIcon from 'material-icons-react';
 
-const ListContainer = styled.div`
-  padding: 2rem 0 2rem 0;
+// File for elements that are/can be reused across the entire site.
+
+export const ListContainer = styled.div`
+    padding: 2rem 0 2rem 0;
 `;
 
-const Headline = styled.h3`
-  font-family: Roboto, sans-serif;
-  font-weight: 900;
-  text-transform: uppercase;
-  margin: 0px;
-  font-size: 1.5rem;
-  color: ${selectedTheme.mainColor};
+export const Headline = styled.h3`
+    font-family: Roboto, sans-serif;
+    font-weight: 900;
+    text-transform: uppercase;
+    margin: 0px;
+    font-size: 1.5rem;
+    color: ${selectedTheme.mainColor};
 `;
 
-const ItemList = styled.ul`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  grid-gap: 1rem;
-  padding: 0;
-  list-style: none;
+export const ItemList = styled.ul`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-gap: 1rem;
+    padding: 0;
+    list-style: none;
 `;
 
-const Item = styled.li`
-  max-height: 100px;
-  overflow: hidden;
-  position: relative;
-  list-style: none;
+export const Item = styled.li`
+    max-height: 100px;
+    overflow: hidden;
+    position: relative;
+    list-style: none;
 `;
 
-export { Headline, ListContainer, ItemList, Item };
+export const Button = styled.button`
+    font-family: Roboto, sans-serif;
+    text-transform: uppercase;
+    font-weight: 400;
+    border: 1px solid ${selectedTheme.mainColor};
+    color: ${selectedTheme.mainColor};
+    background: none;
+    margin-left: 1rem;
+    min-height: 3em;
+`;
+
+const StyledButton = styled.button`
+    float: right;
+    border: none;
+    background: none;
+`;
+
+export const IconButton = props => {
+    if (
+        props.icon &&
+        props.icon !== '' &&
+        props.icon !== undefined &&
+        props.onClick &&
+        props.onClick !== '' &&
+        props.onClick !== undefined
+    ) {
+        return (
+            <StyledButton onClick={props.onClick}>
+                <MaterialIcon
+                    icon={props.icon}
+                    color={selectedTheme.mainColor}
+                />
+            </StyledButton>
+        );
+    }
+};

src/components/greeter.js

@@ -1,27 +1,27 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 
-import selectedTheme from "./themeManager";
+import selectedTheme from './themeManager';
 
 const GreeterContainer = styled.div`
-  padding: 2rem 0 2rem 0;
+    padding: 2rem 0 2rem 0;
 `;
 
 const GreetText = styled.h1`
-  font-family: Roboto, sans-serif;
-  font-weight: 900;
-  font-size: 45px;
-  margin: 0.5rem 0 0.5rem 0;
-  color: ${selectedTheme.mainColor};
+    font-family: Roboto, sans-serif;
+    font-weight: 900;
+    font-size: 45px;
+    margin: 0.5rem 0 0.5rem 0;
+    color: ${selectedTheme.mainColor};
 `;
 
 const DateText = styled.h3`
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 15px;
-  text-transform: uppercase;
-  margin: 0;
-  color: ${selectedTheme.accentColor};
+    font-family: Roboto, sans-serif;
+    font-weight: 400;
+    font-size: 15px;
+    text-transform: uppercase;
+    margin: 0;
+    color: ${selectedTheme.accentColor};
 `;
 
 const getGreeting = () => {
@@ -29,7 +29,7 @@ const getGreeting = () => {
     return 'Hello World!';
 };
 
-const getExtension = (day) => {
+const getExtension = day => {
     let extension = '';
 
     if ((day > 4 && day <= 20) || (day > 20 && day % 10 >= 4)) {
@@ -57,7 +57,7 @@ const monthNames = [
     'September',
     'October',
     'November',
-    'December',
+    'December'
 ];
 
 const weekDayNames = [
@@ -67,7 +67,7 @@ const weekDayNames = [
     'Wednesday',
     'Thursday',
     'Friday',
-    'Saturday',
+    'Saturday'
 ];
 
 const getDateString = () => {

src/components/searchBar.js

@@ -1,66 +1,66 @@
-import React, { useState } from "react";
-import styled from "styled-components";
+import React, { useState } from 'react';
+import styled from 'styled-components';
 
-import searchData from "./data/search.json";
+import searchData from './data/search.json';
 
-import selectedTheme from "./themeManager";
+import selectedTheme from './themeManager';
 
 const SearchInput = styled.input`
-  width: 100%;
-  font-size: 16px;
-  border: none;
-  border-bottom: 1px solid ${selectedTheme.accentColor};
-  background: none;
-  border-radius: 0;
-  color: ${selectedTheme.mainColor};
+    width: 100%;
+    font-size: 16px;
+    border: none;
+    border-bottom: 1px solid ${selectedTheme.accentColor};
+    background: none;
+    border-radius: 0;
+    color: ${selectedTheme.mainColor};
 `;
 
 const handleQueryWithProvider = query => {
-  let queryArray = query.split(" ");
+    let queryArray = query.split(' ');
 
-  let prefix = queryArray[0];
+    let prefix = queryArray[0];
 
-  queryArray.shift();
+    queryArray.shift();
 
-  let searchQuery = queryArray.join(" ");
+    let searchQuery = queryArray.join(' ');
 
-  var foundProvider = false;
-  searchData.providers.forEach(provider => {
-    if (provider.prefix === prefix) {
-      foundProvider = true;
-      window.location = provider.url + searchQuery;
+    var foundProvider = false;
+    searchData.providers.forEach(provider => {
+        if (provider.prefix === prefix) {
+            foundProvider = true;
+            window.location = provider.url + searchQuery;
+        }
+    });
+
+    if (!foundProvider) {
+        window.location = 'https://google.com/search?q=' + query;
     }
-  });
-
-  if (!foundProvider) {
-    window.location = "https://google.com/search?q=" + query;
-  }
 };
 
 const SearchBar = () => {
-  let [input, setInput] = useState();
+    let [input, setInput] = useState();
 
-  const handleSearchQuery = e => {
-    var query = input;
+    const handleSearchQuery = e => {
+        var query = input;
 
-    if (query.split(" ")[0].includes("/")) {
-      handleQueryWithProvider(query);
-    } else {
-      window.location = "https://google.com/search?q=" + query;
-    }
+        if (query.split(' ')[0].includes('/')) {
+            handleQueryWithProvider(query);
+        } else {
+            window.location = 'https://google.com/search?q=' + query;
+        }
 
-    e.preventDefault();
-  };
+        e.preventDefault();
+    };
 
-  return (
-    <form onSubmit={e => handleSearchQuery(e)}>
-      <SearchInput
-        type="text"
-        onChange={e => setInput(e.target.value)}
-      ></SearchInput>
-      <button type="submit" hidden />
-    </form>
-  );
+    return (
+        <form onSubmit={e => handleSearchQuery(e)}>
+            <SearchInput
+                type="text"
+                onChange={e => setInput(e.target.value)}
+            ></SearchInput>
+            <button type="submit" hidden />
+        </form>
+    );
 };
 
 export default SearchBar;

src/components/settingsModal.js

@@ -1,168 +1,158 @@
-import React, { useState } from "react";
-import MaterialIcon from "material-icons-react";
-import styled from "styled-components";
+import React, { useState } from 'react';
+import styled from 'styled-components';
 
-import Select from "react-select";
+import Select from 'react-select';
 
 import searchData from './data/search.json';
 import themeData from './data/themes.json';
 
-import selectedTheme, { setTheme } from "./themeManager";
-import { Button } from './button';
-
-const ModalButton = styled.button`
-  float: right;
-  border: none;
-  background: none;
-  padding: 10px;
-`;
-
-const ExitButton = styled.button`
-  float: right;
-  border: none;
-  background: none;
-`;
+import selectedTheme, { setTheme } from './themeManager';
+import { Button, IconButton } from './elements';
 
 const Modal = styled.div`
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  padding: 1rem;
-  transform: translate(-50%, -50%);
-  z-index: 10;
-  border: 1px solid ${selectedTheme.mainColor};
-  background-color: ${selectedTheme.backgroundColor};
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    padding: 1rem;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    border: 1px solid ${selectedTheme.mainColor};
+    background-color: ${selectedTheme.backgroundColor};
 `;
 
 const SelectContainer = styled.div`
-  padding-bottom: 1rem;
+    padding-bottom: 1rem;
 `;
 
 const FormContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
 `;
 
 const Headline = styled.h3`
-  font-family: Roboto, sans-serif;
-  font-weight: 900;
-  color: ${selectedTheme.mainColor};
-  margin-top: 0;
+    font-family: Roboto, sans-serif;
+    font-weight: 900;
+    color: ${selectedTheme.mainColor};
+    margin-top: 0;
 `;
 
 const Table = styled.table`
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  background: none;
-  color: ${selectedTheme.mainColor};
+    font-family: Roboto, sans-serif;
+    font-weight: 400;
+    background: none;
+    color: ${selectedTheme.mainColor};
 `;
 
 const TableRow = styled.tr`
-  border-bottom: 1px solid ${selectedTheme.mainColor};
+    border-bottom: 1px solid ${selectedTheme.mainColor};
 `;
 
 const TableCell = styled.td`
-  background: none;
-  padding-top: 0.5rem;
+    background: none;
+    padding-top: 0.5rem;
 `;
 
 const HeadCell = styled.th`
-  font-weight: 700;
-  background: none;
+    font-weight: 700;
+    background: none;
 `;
 
 const SelectorStyle = {
-  control: provided => ({
-    ...provided,
-    fontFamily: "Roboto, sans-serif",
-    fontWeight: "500",
-    color: selectedTheme.mainColor,
-    textTransform: "uppercase",
-    width: "200px",
-    background: "none",
-    borderRadius: "0px",
-    border: "1px solid " + selectedTheme.mainColor,
-    boxShadow: 0,
-    "&:hover": {
-      border: "1px solid " + selectedTheme.mainColor
+    control: provided => ({
+        ...provided,
+        fontFamily: 'Roboto, sans-serif',
+        fontWeight: '500',
+        color: selectedTheme.mainColor,
+        textTransform: 'uppercase',
+        width: '200px',
+        background: 'none',
+        borderRadius: '0px',
+        border: '1px solid ' + selectedTheme.mainColor,
+        boxShadow: 0,
+        '&:hover': {
+            border: '1px solid ' + selectedTheme.mainColor
+        }
+    }),
+    menu: provided => ({
+        ...provided,
+        backgroundColor: selectedTheme.backgroundColor,
+        border: '1px solid ' + selectedTheme.mainColor,
+        borderRadius: '0px',
+        boxShadow: 0
+    }),
+    option: provided => ({
+        ...provided,
+        fontFamily: 'Roboto, sans-serif',
+        fontWeight: '500',
+        color: selectedTheme.mainColor,
+        textTransform: 'uppercase',
+        borderRadius: '0px',
+        boxShadow: 0,
+        backgroundColor: selectedTheme.backgroundColor,
+        '&:hover': {
+            backgroundColor: selectedTheme.mainColor,
+            color: selectedTheme.backgroundColor
+        }
+    }),
+    singleValue: provided => {
+        return {
+            ...provided,
+            color: selectedTheme.mainColor
+        };
     }
-  }),
-  menu: provided => ({
-    ...provided,
-    backgroundColor: selectedTheme.backgroundColor,
-    border: "1px solid " + selectedTheme.mainColor,
-    borderRadius: "0px",
-    boxShadow: 0
-  }),
-  option: provided => ({
-    ...provided,
-    fontFamily: "Roboto, sans-serif",
-    fontWeight: "500",
-    color: selectedTheme.mainColor,
-    textTransform: "uppercase",
-    borderRadius: "0px",
-    boxShadow: 0,
-    backgroundColor: selectedTheme.backgroundColor,
-    "&:hover": {
-      backgroundColor: selectedTheme.mainColor,
-      color: selectedTheme.backgroundColor
-    }
-  }),
-  singleValue: provided => {
-    return {
-      ...provided,
-      color: selectedTheme.mainColor
-    };
-  }
 };
 
 const SettingsModal = () => {
-  const [modalHidden, setModalHidden] = useState(true);
-  const [newTheme, setNewTheme] = useState();
+    const [modalHidden, setModalHidden] = useState(true);
+    const [newTheme, setNewTheme] = useState();
 
-  return (
-    <>
-      <ModalButton onClick={() => setModalHidden(!modalHidden)}>
-        <MaterialIcon icon="settings" color={selectedTheme.mainColor} />
-      </ModalButton>
-      <Modal hidden={modalHidden}>
-        <ExitButton onClick={() => setModalHidden(!modalHidden)}>
-          <MaterialIcon icon="close" color={selectedTheme.mainColor} />
-        </ExitButton>
-        <SelectContainer>
-          <Headline>Theme:</Headline>
-          <FormContainer>
-            <Select
-              options={themeData.themes}
-              defaultValue={selectedTheme}
-              onChange={e => {
-                setNewTheme(e);
-              }}
-              styles={SelectorStyle}
+    return (
+        <>
+            <IconButton
+                icon="settings"
+                onClick={() => setModalHidden(!modalHidden)}
             />
-            <Button onClick={() => setTheme(JSON.stringify(newTheme))}>
-              Apply
-            </Button>
-          </FormContainer>
-        </SelectContainer>
-        <Table>
-          <tbody>
-            <TableRow>
-              <HeadCell>Search Provider</HeadCell>
-              <HeadCell>Prefix</HeadCell>
-            </TableRow>
-            {searchData.providers.map((provider, index) => (
-              <TableRow key={provider.name + index}>
-                <TableCell>{provider.name}</TableCell>
-                <TableCell>{provider.prefix}</TableCell>
-              </TableRow>
-            ))}
-          </tbody>
-        </Table>
-      </Modal>
-    </>
-  );
+            <Modal hidden={modalHidden}>
+                <IconButton
+                    icon="close"
+                    onClick={() => setModalHidden(!modalHidden)}
+                />
+                <SelectContainer>
+                    <Headline>Theme:</Headline>
+                    <FormContainer>
+                        <Select
+                            options={themeData.themes}
+                            defaultValue={selectedTheme}
+                            onChange={e => {
+                                setNewTheme(e);
+                            }}
+                            styles={SelectorStyle}
+                        />
+                        <Button
+                            onClick={() => setTheme(JSON.stringify(newTheme))}
+                        >
+                            Apply
+                        </Button>
+                    </FormContainer>
+                </SelectContainer>
+                <Table>
+                    <tbody>
+                        <TableRow>
+                            <HeadCell>Search Provider</HeadCell>
+                            <HeadCell>Prefix</HeadCell>
+                        </TableRow>
+                        {searchData.providers.map((provider, index) => (
+                            <TableRow key={provider.name + index}>
+                                <TableCell>{provider.name}</TableCell>
+                                <TableCell>{provider.prefix}</TableCell>
+                            </TableRow>
+                        ))}
+                    </tbody>
+                </Table>
+            </Modal>
+        </>
+    );
 };
 
 export default SettingsModal;

src/components/themeManager.js

@@ -1,25 +1,25 @@
-import themeData from "./data/themes.json";
+import themeData from './data/themes.json';
 
 const setTheme = theme => {
-  localStorage.setItem("theme", theme);
-  window.location.reload();
+    localStorage.setItem('theme', theme);
+    window.location.reload();
 };
 
 const resetTheme = () => {
-  localStorage.removeItem("theme");
+    localStorage.removeItem('theme');
 };
 
 const getTheme = () => {
-  let selectedTheme = themeData.themes[0];
+    let selectedTheme = themeData.themes[0];
 
-  if (
-    localStorage.getItem("theme") &&
-    localStorage.getItem("theme") !== undefined
-  ) {
-    selectedTheme = JSON.parse(localStorage.getItem("theme"));
-  }
+    if (
+        localStorage.getItem('theme') &&
+        localStorage.getItem('theme') !== undefined
+    ) {
+        selectedTheme = JSON.parse(localStorage.getItem('theme'));
+    }
 
-  return selectedTheme;
+    return selectedTheme;
 };
 
 const selectedTheme = getTheme();

src/selectedTheme.js

@@ -1,5 +0,0 @@
-import themeData from './components/data/themes.json';
-
-export const selectedTheme = localStorage.getItem('theme')
-    ? JSON.parse(localStorage.getItem('theme'))
-    : themeData.themes[0];

src/serviceWorker.js

@@ -57,7 +57,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
     navigator.serviceWorker
         .register(swUrl)
-        .then((registration) => {
+        .then(registration => {
             registration.onupdatefound = () => {
                 const installingWorker = registration.installing;
                 if (installingWorker == null) {
@@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) {
                 };
             };
         })
-        .catch((error) => {
+        .catch(error => {
             console.error('Error during service worker registration:', error);
         });
 }
@@ -101,9 +101,9 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
     // Check if the service worker can be found. If it can't reload the page.
     fetch(swUrl, {
-        headers: { 'Service-Worker': 'script' },
+        headers: { 'Service-Worker': 'script' }
     })
-        .then((response) => {
+        .then(response => {
             // Ensure service worker exists, and that we really are getting a JS file.
             const contentType = response.headers.get('content-type');
             if (
@@ -112,7 +112,7 @@ function checkValidServiceWorker(swUrl, config) {
                     contentType.indexOf('javascript') === -1)
             ) {
                 // No service worker found. Probably a different app. Reload the page.
-                navigator.serviceWorker.ready.then((registration) => {
+                navigator.serviceWorker.ready.then(registration => {
                     registration.unregister().then(() => {
                         window.location.reload();
                     });
@@ -132,10 +132,10 @@ function checkValidServiceWorker(swUrl, config) {
 export function unregister() {
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.ready
-            .then((registration) => {
+            .then(registration => {
                 registration.unregister();
             })
-            .catch((error) => {
+            .catch(error => {
                 console.error(error.message);
             });
     }