Updated thememanager

src/App.js

@@ -1,14 +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 getTheme from './components/themeManager';
-const selectedTheme = getTheme();
+import selectedTheme from "./components/themeManager";
 
 const GlobalStyle = createGlobalStyle`
   body {

src/components/appList.js

@@ -1,14 +1,12 @@
-import React from 'react';
-import MaterialIcon from 'material-icons-react';
-import styled from 'styled-components';
+import React from "react";
+import MaterialIcon from "material-icons-react";
+import styled from "styled-components";
 
-import appData from './data/apps.json';
+import appData from "./data/apps.json";
 
-import getTheme from './themeManager';
+import selectedTheme from "./themeManager";
 
-import { Headline, ListContainer, ItemList, Item } from './elements'
-
-const selectedTheme = getTheme();
+import { Headline, ListContainer, ItemList, Item } from "./elements";
 
 const IconContainer = styled.div`
   margin-right: 0.5vh;
@@ -49,8 +47,7 @@ const appList = () => (
   <ListContainer>
     <Headline>Applications</Headline>
     <ItemList>
-        {
-            appData.apps.map((app, index) => (
+      {appData.apps.map((app, index) => (
         <Item key={app.name + index}>
           <App>
             <IconContainer>
@@ -62,11 +59,9 @@ const appList = () => (
             </DetailsContainer>
           </App>
         </Item>
-            ))
-        }
+      ))}
     </ItemList>
   </ListContainer>
 );
 
 export default appList;
-

src/components/bookmarkList.js

@@ -1,12 +1,10 @@
-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 getTheme from './themeManager';
-import { Headline, ListContainer, ItemList, Item } from './elements'
-
-const selectedTheme = getTheme();
+import selectedTheme from "./themeManager";
+import { Headline, ListContainer, ItemList, Item } from "./elements";
 
 const Group = styled.h4`
   font-family: Roboto, sans-serif;
@@ -36,20 +34,18 @@ const bookmarkList = () => (
   <ListContainer>
     <Headline>Bookmarks</Headline>
     <ItemList>
-        {
-            bookmarkData.groups.map((group, index) => (
+      {bookmarkData.groups.map((group, index) => (
         <Item key={group.name + index}>
           <BookmarkGroup>
             <Group>{group.name}</Group>
-                        { 
-                            group.items.map((link) => (
-                                <Bookmark key={link.name} href={link.url}>{link.name}</Bookmark>
-                            ))
-                        }
+            {group.items.map(link => (
+              <Bookmark key={link.name} href={link.url}>
+                {link.name}
+              </Bookmark>
+            ))}
           </BookmarkGroup>
         </Item>
-            ))
-        }
+      ))}
     </ItemList>
   </ListContainer>
 );

src/components/elements.js

@@ -1,7 +1,5 @@
-import styled from 'styled-components';
-import getTheme from './themeManager';
-
-const selectedTheme = getTheme();
+import styled from "styled-components";
+import selectedTheme from "./themeManager";
 
 const ListContainer = styled.div`
   padding: 2rem 0 2rem 0;
@@ -31,4 +29,4 @@ const Item = styled.li`
   list-style: none;
 `;
 
-export { Headline, ListContainer, ItemList, Item }
+export { Headline, ListContainer, ItemList, Item };

src/components/greeter.js

@@ -1,8 +1,7 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
-import getTheme from './themeManager';
-const selectedTheme = getTheme();
+import selectedTheme from "./themeManager";
 
 const GreeterContainer = styled.div`
   padding: 2rem 0 2rem 0;
@@ -27,44 +26,72 @@ const DateText = styled.h3`
 
 const getGreeting = () => {
   // Maybe add some expandability for different greetings?
-    return "Hello World!"
-}
+  return "Hello World!";
+};
 
-const getExtension = (day) => {
-    let extension = ""
+const getExtension = day => {
+  let extension = "";
 
   if ((day > 4 && day <= 20) || (day > 20 && day % 10 >= 4)) {
-        extension = "th"
+    extension = "th";
   } else if (day % 10 === 1) {
-        extension = "st"
+    extension = "st";
   } else if (day % 10 === 2) {
-        extension = "nd"
+    extension = "nd";
   } else if (day % 10 === 3) {
-        extension = "rd"
+    extension = "rd";
   }
 
-    return extension
-}
+  return extension;
+};
 
 const getDateString = () => {
   let currentDate = new Date();
-    const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
-    const weekDayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
-    return weekDayNames[currentDate.getUTCDay()] + ", " + monthNames[currentDate.getUTCMonth()] + " " + currentDate.getDate() + getExtension(currentDate.getDate()) + " " + currentDate.getFullYear();
-}
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  const weekDayNames = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ];
+  return (
+    weekDayNames[currentDate.getUTCDay()] +
+    ", " +
+    monthNames[currentDate.getUTCMonth()] +
+    " " +
+    currentDate.getDate() +
+    getExtension(currentDate.getDate()) +
+    " " +
+    currentDate.getFullYear()
+  );
+};
 
 const greeter = () => {
-
   let date = getDateString();
   let greeting = getGreeting();
 
   return (
     <GreeterContainer>
-            <DateText>{ date }</DateText>
-            <GreetText>{ greeting }</GreetText>
+      <DateText>{date}</DateText>
+      <GreetText>{greeting}</GreetText>
     </GreeterContainer>
   );
-}
-
+};
 
 export default greeter;

src/components/searchBar.js

@@ -1,10 +1,9 @@
-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 getTheme from './themeManager';
-const selectedTheme = getTheme();
+import selectedTheme from "./themeManager";
 
 const SearchInput = styled.input`
   width: 100%;
@@ -16,8 +15,7 @@ const SearchInput = styled.input`
   color: ${selectedTheme.mainColor};
 `;
 
-const handleQueryWithProvider = (query) => {
-
+const handleQueryWithProvider = query => {
   let queryArray = query.split(" ");
 
   let prefix = queryArray[0];
@@ -27,41 +25,42 @@ const handleQueryWithProvider = (query) => {
   let searchQuery = queryArray.join(" ");
 
   var foundProvider = false;
-    searchData.providers.forEach((provider) => {
+  searchData.providers.forEach(provider => {
     if (provider.prefix === prefix) {
       foundProvider = true;
-            window.location = provider.url + searchQuery
+      window.location = provider.url + searchQuery;
     }
-    })
+  });
 
   if (!foundProvider) {
     window.location = "https://google.com/search?q=" + query;
   }
-}
+};
 
 const SearchBar = () => {
-
   let [input, setInput] = useState();
 
-    const handleSearchQuery = (e) => {
-
+  const handleSearchQuery = e => {
     var query = input;
 
     if (query.split(" ")[0].includes("/")) {
-            handleQueryWithProvider(query)
+      handleQueryWithProvider(query);
     } else {
       window.location = "https://google.com/search?q=" + query;
     }
 
     e.preventDefault();
-    }
+  };
 
   return (
-        <form onSubmit={(e) => handleSearchQuery(e)}>
-            <SearchInput type="text" onChange={(e) => setInput(e.target.value)}></SearchInput>
+    <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,14 +1,13 @@
-import React, { useState } from 'react';
-import MaterialIcon from 'material-icons-react';
-import styled from 'styled-components';
+import React, { useState } from "react";
+import MaterialIcon from "material-icons-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 searchData from "./data/search.json";
+import themeData from "./data/themes.json";
 
-import getTheme, { setTheme } from './themeManager'
-const selectedTheme = getTheme();
+import selectedTheme, { setTheme } from "./themeManager";
 
 const ModalButton = styled.button`
   float: right;
@@ -83,7 +82,7 @@ const HeadCell = styled.th`
 `;
 
 const SelectorStyle = {
-    control: (provided) => ({
+  control: provided => ({
     ...provided,
     fontFamily: "Roboto, sans-serif",
     fontWeight: "500",
@@ -94,18 +93,18 @@ const SelectorStyle = {
     borderRadius: "0px",
     border: "1px solid " + selectedTheme.mainColor,
     boxShadow: 0,
-        '&:hover': {
-            border: "1px solid " + selectedTheme.mainColor,
+    "&:hover": {
+      border: "1px solid " + selectedTheme.mainColor
     }
   }),
-    menu: (provided) => ({
+  menu: provided => ({
     ...provided,
     backgroundColor: selectedTheme.backgroundColor,
     border: "1px solid " + selectedTheme.mainColor,
     borderRadius: "0px",
-        boxShadow: 0,
+    boxShadow: 0
   }),
-    option: (provided) => ({
+  option: provided => ({
     ...provided,
     fontFamily: "Roboto, sans-serif",
     fontWeight: "500",
@@ -114,21 +113,20 @@ const SelectorStyle = {
     borderRadius: "0px",
     boxShadow: 0,
     backgroundColor: selectedTheme.backgroundColor,
-        '&:hover': {
+    "&:hover": {
       backgroundColor: selectedTheme.mainColor,
-            color: selectedTheme.backgroundColor,
+      color: selectedTheme.backgroundColor
     }
   }),
-    singleValue: (provided) => {
+  singleValue: provided => {
     return {
       ...provided,
-            color: selectedTheme.mainColor,
+      color: selectedTheme.mainColor
+    };
   }
-    }
-}
+};
 
 const SettingsModal = () => {
-
   const [modalHidden, setModalHidden] = useState(true);
   const [newTheme, setNewTheme] = useState();
 
@@ -144,8 +142,17 @@ const SettingsModal = () => {
         <SelectContainer>
           <Headline>Theme:</Headline>
           <FormContainer>
-                        <Select options={themeData.themes} defaultValue={selectedTheme} onChange={(e) => {setNewTheme(e)}} styles={SelectorStyle} />
-                        <ApplyButton onClick={() => setTheme(JSON.stringify(newTheme))}>Apply</ApplyButton>
+            <Select
+              options={themeData.themes}
+              defaultValue={selectedTheme}
+              onChange={e => {
+                setNewTheme(e);
+              }}
+              styles={SelectorStyle}
+            />
+            <ApplyButton onClick={() => setTheme(JSON.stringify(newTheme))}>
+              Apply
+            </ApplyButton>
           </FormContainer>
         </SelectContainer>
         <Table>
@@ -154,20 +161,17 @@ const SettingsModal = () => {
               <HeadCell>Search Provider</HeadCell>
               <HeadCell>Prefix</HeadCell>
             </TableRow>
-                        {
-                            searchData.providers.map((provider, index) => (
+            {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,29 @@
-import themeData from './data/themes.json';
+import themeData from "./data/themes.json";
 
-const setTheme = (theme) => {
+const setTheme = theme => {
   localStorage.setItem("theme", theme);
   window.location.reload();
-}
+};
 
 const resetTheme = () => {
   localStorage.removeItem("theme");
-}
+};
 
 const getTheme = () => {
-
   let selectedTheme = themeData.themes[0];
 
-    if (localStorage.getItem("theme") && localStorage.getItem("theme") !== undefined) {
+  if (
+    localStorage.getItem("theme") &&
+    localStorage.getItem("theme") !== undefined
+  ) {
     selectedTheme = JSON.parse(localStorage.getItem("theme"));
   }
 
   return selectedTheme;
-}
+};
 
-export { setTheme, resetTheme }
+const selectedTheme = getTheme();
 
-export default getTheme;
+export { setTheme, resetTheme };
+
+export default selectedTheme;