From fa28f685510d04eee3016096952f3ebbe5d350ad Mon Sep 17 00:00:00 2001 From: Bastian Meissner Date: Fri, 16 Jul 2021 11:00:15 +0200 Subject: [PATCH] Revert "Refactor" This reverts commit eaad2d56f04ab9adb80dc4c75bcad9e57d08dcde. --- package.json | 10 +- src/app.tsx | 33 ++- src/components/app.tsx | 77 +++++ src/components/appCategory.tsx | 42 +++ src/components/appList.tsx | 42 +++ src/components/apps.tsx | 14 +- src/components/bookmarks.tsx | 31 +- src/components/greeter.tsx | 23 +- src/components/imprint.tsx | 88 +++--- src/components/searchBar.tsx | 10 +- src/components/settings.tsx | 54 ++-- src/lib/{useFetch.d.ts => fetch.d.ts} | 2 +- src/lib/fetch.tsx | 91 ++++++ src/lib/fetcher.d.ts | 32 ++ src/lib/fetcher.tsx | 278 ++++++++++++++++++ src/lib/useFetch.tsx | 119 -------- .../__snapshots__/app.spec.tsx.snap | 7 + .../__snapshots__/appCategory.spec.tsx.snap | 3 + .../__snapshots__/appList.spec.tsx.snap | 9 + .../__snapshots__/apps.spec.tsx.snap | 2 - .../__snapshots__/bookmarks.spec.tsx.snap | 6 +- .../__snapshots__/greeter.spec.tsx.snap | 4 +- .../__snapshots__/imprint.spec.tsx.snap | 4 +- .../__snapshots__/searchBar.spec.tsx.snap | 4 +- src/test/components/app.spec.tsx | 52 ++++ src/test/components/appCategory.spec.tsx | 30 ++ src/test/components/appList.spec.tsx | 60 ++++ src/test/components/apps.spec.tsx | 5 - src/test/components/bookmarks.spec.tsx | 39 +-- src/test/components/greeter.spec.tsx | 47 ++- src/test/components/imprint.spec.tsx | 39 +-- src/test/components/searchBar.spec.tsx | 7 +- src/test/lib/fetcher.spec.tsx | 46 +++ .../lib/{useTheme.spec.tsx => theme.spec.tsx} | 12 +- tsconfig.json | 3 +- yarn.lock | 5 - 36 files changed, 962 insertions(+), 368 deletions(-) create mode 100644 src/components/app.tsx create mode 100644 src/components/appCategory.tsx create mode 100644 src/components/appList.tsx rename src/lib/{useFetch.d.ts => fetch.d.ts} (95%) create mode 100644 src/lib/fetch.tsx create mode 100644 src/lib/fetcher.d.ts create mode 100644 src/lib/fetcher.tsx delete mode 100644 src/lib/useFetch.tsx create mode 100644 src/test/components/__snapshots__/app.spec.tsx.snap create mode 100644 src/test/components/__snapshots__/appCategory.spec.tsx.snap create mode 100644 src/test/components/__snapshots__/appList.spec.tsx.snap create mode 100644 src/test/components/app.spec.tsx create mode 100644 src/test/components/appCategory.spec.tsx create mode 100644 src/test/components/appList.spec.tsx create mode 100644 src/test/lib/fetcher.spec.tsx rename src/test/lib/{useTheme.spec.tsx => theme.spec.tsx} (81%) diff --git a/package.json b/package.json index 9a307dd..8423bcf 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,9 @@ "version": "1.0.0", "license": "MIT", "repository": "git@github.com:phntxx/dashboard", - "contributors": ["phntxx "], + "contributors": [ + "phntxx " + ], "private": false, "dependencies": { "@types/node": "^14.14.37", @@ -45,7 +47,11 @@ "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 aca5e6a..2c5bfe1 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/apps"; +import AppList from "./components/appList"; import BookmarkList from "./components/bookmarks"; import Settings from "./components/settings"; import Imprint from "./components/imprint"; import { IThemeProps, getTheme, setScheme } from "./lib/useTheme"; -import useFetch from "./lib/useFetch"; +import useFetcher from "./lib/fetcher"; import useMediaQuery from "./lib/useMediaQuery"; export const GlobalStyle = createGlobalStyle<{ theme: IThemeProps }>` @@ -33,26 +33,37 @@ const App = () => { const { appData, bookmarkData, - searchData, + searchProviderData, themeData, imprintData, greeterData, - } = useFetch(); + } = useFetcher(); const theme = getTheme(); let isDark = useMediaQuery("(prefers-color-scheme: dark)"); - setScheme(isDark ? "dark-theme" : "light-theme"); + if (isDark) { + setScheme("dark-theme"); + } else { + setScheme("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 new file mode 100644 index 0000000..ea013bc --- /dev/null +++ b/src/components/app.tsx @@ -0,0 +1,77 @@ +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 new file mode 100644 index 0000000..ea864ef --- /dev/null +++ b/src/components/appCategory.tsx @@ -0,0 +1,42 @@ +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 new file mode 100644 index 0000000..06c6889 --- /dev/null +++ b/src/components/appList.tsx @@ -0,0 +1,42 @@ +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 b13d1ac..75fa40e 100644 --- a/src/components/apps.tsx +++ b/src/components/apps.tsx @@ -69,10 +69,15 @@ export interface IAppCategoryProps { } export interface IAppListProps { - apps?: Array; categories?: Array; + apps?: Array; } +export const defaults: IAppListProps = { + categories: [], + apps: [], +}; + /** * Renders a single app shortcut * @param {IAppProps} props the props of the given app @@ -130,7 +135,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 @@ -150,8 +155,9 @@ export const AppList = ({ categories, apps }: IAppListProps) => { )} ); - - return <>; + } else { + return <>; + } }; export default AppList; diff --git a/src/components/bookmarks.tsx b/src/components/bookmarks.tsx index cc0f550..0c7cf66 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,24 +63,15 @@ 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) => { - if (groups) - return ( - - Bookmarks - - {groups.map(({ name, items }, index) => ( - - ))} - - - ); - - return <>; -}; +const BookmarkList = ({ groups }: IBookmarkListProps) => ( + + Bookmarks + + {groups.map(({ name, items }, index) => ( + + ))} + + +); export default BookmarkList; diff --git a/src/components/greeter.tsx b/src/components/greeter.tsx index 6d335ce..db30679 100644 --- a/src/components/greeter.tsx +++ b/src/components/greeter.tsx @@ -20,7 +20,7 @@ const DateText = styled.h3` `; export interface IGreeterComponentProps { - greeter?: IGreeterProps; + data: IGreeterProps; } export interface IGreeterProps { @@ -112,18 +112,13 @@ export const getDateString = ( * @param {IGreeterComponentProps} data required greeter data * @returns {React.ReactNode} the greeter */ -const Greeter = ({ greeter }: IGreeterComponentProps) => { - if (greeter) - return ( - - - {getDateString(greeter.days, greeter.months, greeter.dateformat)} - - {getGreeting(greeter.greetings)} - - ); - - return <>; -}; +const Greeter = ({ data }: IGreeterComponentProps) => ( + + + {getDateString(data.days, data.months, data.dateformat)} + + {getGreeting(data.greetings)} + +); export default Greeter; diff --git a/src/components/imprint.tsx b/src/components/imprint.tsx index f29daa4..0331646 100644 --- a/src/components/imprint.tsx +++ b/src/components/imprint.tsx @@ -31,12 +31,16 @@ const ItemContainer = styled.div` `; export interface IImprintProps { - fields: Array; + name: IImprintFieldProps; + address: IImprintFieldProps; + phone: IImprintFieldProps; + email: IImprintFieldProps; + url: IImprintFieldProps; text: string; } export interface IImprintComponentProps { - imprint?: IImprintProps; + imprint: IImprintProps; } interface IImprintFieldComponentProps { @@ -68,49 +72,41 @@ export const onClose = () => { * @param {IImprintProps} props contents of the imprint * @returns {React.ReactNode} the imprint node */ -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 <>; -}; +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}} +
+ + + + + +); export default Imprint; diff --git a/src/components/searchBar.tsx b/src/components/searchBar.tsx index f814426..a38479e 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,13 +79,7 @@ export const handleQueryWithProvider = ( * Renders a search bar * @param {ISearchBarProps} search - The search providers for the search bar to use */ -const SearchBar = ({ - search = { - placeholder: "", - defaultProvider: "", - providers: [], - }, -}: ISearchBarProps) => { +const SearchBar = ({ search }: ISearchBarProps) => { let [input, setInput] = useState(""); let [buttonsHidden, setButtonsHidden] = useState(true); diff --git a/src/components/settings.tsx b/src/components/settings.tsx index e10ac79..8d655db 100644 --- a/src/components/settings.tsx +++ b/src/components/settings.tsx @@ -54,6 +54,11 @@ 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; @@ -61,7 +66,6 @@ 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; @@ -72,8 +76,8 @@ const ThemeSelect = styled(Select)` `; interface ISettingsProps { - themes?: Array; - search?: ISearchProps; + themes: Array | undefined; + search: ISearchProps | undefined; } /** @@ -95,36 +99,20 @@ const Settings = ({ themes, search }: ISettingsProps) => {
Theme: - - - - Light - Dark - - - - - setNewLightTheme(theme) - } - current={currentLightTheme} - testId="light" - > - - - - setNewDarkTheme(theme) - } - current={currentDarkTheme} - testId="dark" - > - - - -
+ Light + setNewLightTheme(theme)} + current={currentLightTheme} + testId="light" + > + Dark + setNewDarkTheme(theme)} + current={currentDarkTheme} + testId="dark" + >