diff --git a/src/App.js b/src/App.js index 2cbca25..e48c6cb 100644 --- a/src/App.js +++ b/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 { diff --git a/src/components/appList.js b/src/components/appList.js index 1e66f24..236b788 100644 --- a/src/components/appList.js +++ b/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,35 +75,37 @@ function useAppData() { const AppList = () => { const { appData: { apps, error }, - fetchAppData, + fetchAppData } = useAppData(); return ( - - + + Applications - - + + {error && {error}} {apps.map((app, idx) => { const { name } = app; return ( - - - - - - {app.name} - {app.displayURL} - - + + + + + + + {app.name} + {app.displayURL} + + + ); })} - - + + ); }; -export default AppList; \ No newline at end of file +export default AppList; diff --git a/src/components/bookmarkList.js b/src/components/bookmarkList.js index 7a1f9c2..3544b74 100644 --- a/src/components/bookmarkList.js +++ b/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 = () => ( - - Bookmarks - - {bookmarkData.groups.map(({ name, items }) => ( - - - {name} - {group.items.map(({ url, name: linkName }) => ( - - {linkName} - + + Bookmarks + + {bookmarkData.groups.map(({ name, items }) => ( + + + {name} + {items.map(({ url, name: linkName }) => ( + + {linkName} + + ))} + + ))} - - - ))} - - + + ); -export default bookmarkList; \ No newline at end of file +export default bookmarkList; diff --git a/src/components/button.js b/src/components/button.js deleted file mode 100644 index 7a01bd5..0000000 --- a/src/components/button.js +++ /dev/null @@ -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; -`; diff --git a/src/components/elements.js b/src/components/elements.js index f2622a4..4b351e0 100644 --- a/src/components/elements.js +++ b/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 ( + + + + ); + } +}; diff --git a/src/components/greeter.js b/src/components/greeter.js index 65d9377..b72af40 100644 --- a/src/components/greeter.js +++ b/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 = () => { @@ -97,4 +97,4 @@ const Greeter = () => { ); }; -export default Greeter; \ No newline at end of file +export default Greeter; diff --git a/src/components/searchBar.js b/src/components/searchBar.js index 0a027ef..3db9561 100644 --- a/src/components/searchBar.js +++ b/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 ( -
handleSearchQuery(e)}> - setInput(e.target.value)} - > -
+ + + + + + Search Provider + Prefix + + {searchData.providers.map((provider, index) => ( + + {provider.name} + {provider.prefix} + + ))} + +
+ + + ); }; export default SettingsModal; diff --git a/src/components/themeManager.js b/src/components/themeManager.js index f96d0a2..0d58e30 100644 --- a/src/components/themeManager.js +++ b/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(); diff --git a/src/selectedTheme.js b/src/selectedTheme.js deleted file mode 100644 index 3655f75..0000000 --- a/src/selectedTheme.js +++ /dev/null @@ -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]; diff --git a/src/serviceWorker.js b/src/serviceWorker.js index 3aa8a6a..9746f41 100644 --- a/src/serviceWorker.js +++ b/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); }); }