diff --git a/package.json b/package.json index 8423bcf..9a307dd 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,7 @@ "version": "1.0.0", "license": "MIT", "repository": "git@github.com:phntxx/dashboard", - "contributors": [ - "phntxx " - ], + "contributors": ["phntxx "], "private": false, "dependencies": { "@types/node": "^14.14.37", @@ -47,11 +45,7 @@ "extends": "react-app" }, "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], + "production": [">0.2%", "not dead", "not op_mini all"], "development": [ "last 1 chrome version", "last 1 firefox version", diff --git a/src/app.tsx b/src/app.tsx index 2c5bfe1..aca5e6a 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -2,13 +2,13 @@ import { createGlobalStyle, ThemeProvider } from "styled-components"; import SearchBar from "./components/searchBar"; import Greeter from "./components/greeter"; -import AppList from "./components/appList"; +import { AppList } from "./components/apps"; import BookmarkList from "./components/bookmarks"; import Settings from "./components/settings"; import Imprint from "./components/imprint"; import { IThemeProps, getTheme, setScheme } from "./lib/useTheme"; -import useFetcher from "./lib/fetcher"; +import useFetch from "./lib/useFetch"; import useMediaQuery from "./lib/useMediaQuery"; export const GlobalStyle = createGlobalStyle<{ theme: IThemeProps }>` @@ -33,37 +33,26 @@ const App = () => { const { appData, bookmarkData, - searchProviderData, + searchData, themeData, imprintData, greeterData, - } = useFetcher(); + } = useFetch(); const theme = getTheme(); let isDark = useMediaQuery("(prefers-color-scheme: dark)"); - if (isDark) { - setScheme("dark-theme"); - } else { - setScheme("light-theme"); - } + setScheme(isDark ? "dark-theme" : "light-theme"); return (
- - {(!themeData.error || !searchProviderData.error) && ( - - )} - - {!appData.error && ( - - )} - {!bookmarkData.error && } - {!imprintData.error && } + + + + + +
); diff --git a/src/components/app.tsx b/src/components/app.tsx deleted file mode 100644 index ea013bc..0000000 --- a/src/components/app.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import Icon from "./icon"; -import styled from "styled-components"; - -const AppContainer = styled.a` - display: flex; - flex: 1 0 auto; - padding: 1rem; - color: ${(props) => props.theme.mainColor}; - font-weight: 500; - text-transform: uppercase; - margin: 0; - text-decoration: none; - font-size: 1rem; -`; - -const IconContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; - margin-right: 0.5rem; -`; - -const DetailsContainer = styled.div` - display: flex; - flex-direction: column; -`; - -const AppName = styled.div` - a:hover { - text-decoration: underline; - } -`; - -const AppDescription = styled.p` - text-transform: uppercase; - margin: 0; - font-size: 0.65rem; - font-weight: 400; - color: ${(props) => props.theme.accentColor}; -`; - -export interface IAppProps { - name: string; - icon: string; - url: string; - displayURL: string; - newTab?: boolean; -} - -/** - * Renders a single app shortcut - * @param {IAppProps} props the props of the given app - * @returns {React.ReactNode} the child node for the given app - */ -const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => { - const linkAttrs = - newTab !== undefined && newTab - ? { - target: "_blank", - rel: "noopener noreferrer", - } - : {}; - - return ( - - - - - - {name} - {displayURL} - - - ); -}; - -export default App; diff --git a/src/components/appCategory.tsx b/src/components/appCategory.tsx deleted file mode 100644 index ea864ef..0000000 --- a/src/components/appCategory.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import styled from "styled-components"; -import App, { IAppProps } from "./app"; -import { ItemList, Item, SubHeadline } from "./elements"; - -const CategoryHeadline = styled(SubHeadline)` - padding-top: 1rem; -`; - -const CategoryContainer = styled.div` - width: 100%; -`; - -export interface IAppCategoryProps { - name: string; - items: Array; -} - -/** - * Renders one app category - * @param {IAppCategoryProps} props props of the given category - * @returns {React.ReactNode} the app category node - */ -const AppCategory = ({ name, items }: IAppCategoryProps) => ( - - {name && {name}} - - {items.map(({ name, icon, displayURL, newTab, url }, index) => ( - - - - ))} - - -); - -export default AppCategory; diff --git a/src/components/appList.tsx b/src/components/appList.tsx deleted file mode 100644 index 06c6889..0000000 --- a/src/components/appList.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import AppCategory, { IAppCategoryProps } from "./appCategory"; -import { IAppProps } from "./app"; - -import { Headline, ListContainer } from "./elements"; - -export interface IAppListProps { - categories?: Array; - apps?: Array; -} - -/** - * Renders one list containing all app categories and uncategorized apps - * @param {IAppListProps} props props of the given list of apps - * @returns {React.ReactNode} the app list component - */ -const AppList = ({ categories, apps }: IAppListProps) => { - if (apps || categories) { - return ( - - Applications - {categories && - categories.map(({ name, items }, index) => ( - - ))} - {apps && ( - - )} - - ); - } else { - return <>; - } -}; - -export default AppList; diff --git a/src/components/apps.tsx b/src/components/apps.tsx index 75fa40e..b13d1ac 100644 --- a/src/components/apps.tsx +++ b/src/components/apps.tsx @@ -69,15 +69,10 @@ export interface IAppCategoryProps { } export interface IAppListProps { - categories?: Array; apps?: Array; + categories?: Array; } -export const defaults: IAppListProps = { - categories: [], - apps: [], -}; - /** * Renders a single app shortcut * @param {IAppProps} props the props of the given app @@ -135,7 +130,7 @@ export const AppCategory = ({ name, items }: IAppCategoryProps) => ( * @returns {React.ReactNode} the app list component */ export const AppList = ({ categories, apps }: IAppListProps) => { - if (apps || categories) { + if (apps || categories) return ( Applications @@ -155,9 +150,8 @@ export const AppList = ({ categories, apps }: IAppListProps) => { )} ); - } else { - return <>; - } + + return <>; }; export default AppList; diff --git a/src/components/bookmarks.tsx b/src/components/bookmarks.tsx index 0c7cf66..cc0f550 100644 --- a/src/components/bookmarks.tsx +++ b/src/components/bookmarks.tsx @@ -37,7 +37,7 @@ export interface IBookmarkGroupProps { } export interface IBookmarkListProps { - groups: Array; + groups?: Array; } /** @@ -63,15 +63,24 @@ 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) => ( - - Bookmarks - - {groups.map(({ name, items }, index) => ( - - ))} - - -); +const BookmarkList = ({ groups }: IBookmarkListProps) => { + if (groups) + return ( + + Bookmarks + + {groups.map(({ name, items }, index) => ( + + ))} + + + ); + + return <>; +}; export default BookmarkList; diff --git a/src/components/greeter.tsx b/src/components/greeter.tsx index db30679..6d335ce 100644 --- a/src/components/greeter.tsx +++ b/src/components/greeter.tsx @@ -20,7 +20,7 @@ const DateText = styled.h3` `; export interface IGreeterComponentProps { - data: IGreeterProps; + greeter?: IGreeterProps; } export interface IGreeterProps { @@ -112,13 +112,18 @@ export const getDateString = ( * @param {IGreeterComponentProps} data required greeter data * @returns {React.ReactNode} the greeter */ -const Greeter = ({ data }: IGreeterComponentProps) => ( - - - {getDateString(data.days, data.months, data.dateformat)} - - {getGreeting(data.greetings)} - -); +const Greeter = ({ greeter }: IGreeterComponentProps) => { + if (greeter) + return ( + + + {getDateString(greeter.days, greeter.months, greeter.dateformat)} + + {getGreeting(greeter.greetings)} + + ); + + return <>; +}; export default Greeter; diff --git a/src/components/imprint.tsx b/src/components/imprint.tsx index 0331646..f29daa4 100644 --- a/src/components/imprint.tsx +++ b/src/components/imprint.tsx @@ -31,16 +31,12 @@ const ItemContainer = styled.div` `; export interface IImprintProps { - name: IImprintFieldProps; - address: IImprintFieldProps; - phone: IImprintFieldProps; - email: IImprintFieldProps; - url: IImprintFieldProps; + fields: Array; text: string; } export interface IImprintComponentProps { - imprint: IImprintProps; + imprint?: IImprintProps; } interface IImprintFieldComponentProps { @@ -72,41 +68,49 @@ export const onClose = () => { * @param {IImprintProps} props contents of the imprint * @returns {React.ReactNode} the imprint node */ -const Imprint = ({ imprint }: IImprintComponentProps) => ( - <> - - About - - - Imprint - -
- - Information in accordance with section 5 TMG - - <> - {imprint.name && } - {imprint.address && } - {imprint.email && } - {imprint.phone && } - {imprint.url && } - -
-
- Imprint - {imprint.text && {imprint.text}} -
- - - - - -); +const Imprint = ({ imprint }: IImprintComponentProps) => { + if (imprint) + return ( + <> + + About + + + Imprint + + {imprint.fields && ( +
+ + Information in accordance with section 5 TMG + + <> + {imprint.fields.map((field, index) => ( + + ))} + +
+ )} +
+ Imprint + {imprint.text && {imprint.text}} +
+ + + + + + ); + + return <>; +}; export default Imprint; diff --git a/src/components/searchBar.tsx b/src/components/searchBar.tsx index a38479e..f814426 100644 --- a/src/components/searchBar.tsx +++ b/src/components/searchBar.tsx @@ -48,7 +48,7 @@ export interface ISearchProps { } interface ISearchBarProps { - search: ISearchProps; + search?: ISearchProps; } export const handleQueryWithProvider = ( @@ -79,7 +79,13 @@ export const handleQueryWithProvider = ( * Renders a search bar * @param {ISearchBarProps} search - The search providers for the search bar to use */ -const SearchBar = ({ search }: ISearchBarProps) => { +const SearchBar = ({ + search = { + placeholder: "", + defaultProvider: "", + providers: [], + }, +}: ISearchBarProps) => { let [input, setInput] = useState(""); let [buttonsHidden, setButtonsHidden] = useState(true); diff --git a/src/components/settings.tsx b/src/components/settings.tsx index 8d655db..e10ac79 100644 --- a/src/components/settings.tsx +++ b/src/components/settings.tsx @@ -54,11 +54,6 @@ const Code = styled.p` color: ${(props) => props.theme.accentColor}; `; -const ThemeHeader = styled.p` - grid-column: 1 / 4; - color: ${(props) => props.theme.accentColor}; -`; - const ThemeSelect = styled(Select)` -webkit-appearance: button; -moz-appearance: button; @@ -66,6 +61,7 @@ const ThemeSelect = styled(Select)` text-transform: uppercase; font-family: Roboto, sans-serif; font-weight: 400; + border-radius: 0; border: 1px solid ${(props) => props.theme.mainColor}; color: ${(props) => props.theme.mainColor}; background: none; @@ -76,8 +72,8 @@ const ThemeSelect = styled(Select)` `; interface ISettingsProps { - themes: Array | undefined; - search: ISearchProps | undefined; + themes?: Array; + search?: ISearchProps; } /** @@ -99,20 +95,36 @@ const Settings = ({ themes, search }: ISettingsProps) => {
Theme: - Light - setNewLightTheme(theme)} - current={currentLightTheme} - testId="light" - > - Dark - setNewDarkTheme(theme)} - current={currentDarkTheme} - testId="dark" - > + + + + Light + Dark + + + + + setNewLightTheme(theme) + } + current={currentLightTheme} + testId="light" + > + + + + setNewDarkTheme(theme) + } + current={currentDarkTheme} + testId="dark" + > + + + +