From 3138c180219d7752981ae47571ca6cbc19a9e4fd Mon Sep 17 00:00:00 2001 From: phntxx Date: Thu, 22 Apr 2021 11:15:41 +0200 Subject: [PATCH] First Commit --- data/search.json | 127 ++++++++++++++++++----------------- src/app.tsx | 4 +- src/components/searchBar.tsx | 19 ++++-- src/components/settings.tsx | 64 ++++++++++++------ src/data/search.json | 127 ++++++++++++++++++----------------- src/lib/fetcher.tsx | 15 +++-- 6 files changed, 195 insertions(+), 161 deletions(-) diff --git a/data/search.json b/data/search.json index 38e306a..4137634 100644 --- a/data/search.json +++ b/data/search.json @@ -1,64 +1,67 @@ { - "providers": [ - { - "name": "Allmusic", - "url": "https://www.allmusic.com/search/all/", - "prefix": "/a" - }, - { - "name": "Discogs", - "url": "https://www.discogs.com/search/?q=", - "prefix": "/di" - }, - { - "name": "Duck Duck Go", - "url": "https://duckduckgo.com/?q=", - "prefix": "/d" - }, - { - "name": "iMDB", - "url": "https://www.imdb.com/find?q=", - "prefix": "/i" - }, - { - "name": "TheMovieDB", - "url": "https://www.themoviedb.org/search?query=", - "prefix": "/m" - }, - { - "name": "Reddit", - "url": "https://www.reddit.com/search?q=", - "prefix": "/r" - }, - { - "name": "Qwant", - "url": "https://www.qwant.com/?q=", - "prefix": "/q" - }, - { - "name": "Soundcloud", - "url": "https://soundcloud.com/search?q=", - "prefix": "/so" - }, - { - "name": "Spotify", - "url": "https://open.spotify.com/search/results/", - "prefix": "/s" - }, - { - "name": "TheTVDB", - "url": "https://www.thetvdb.com/search?q=", - "prefix": "/tv" - }, - { - "name": "Trakt", - "url": "https://trakt.tv/search?query=", - "prefix": "/t" - }, - { - "name": "YouTube", - "url": "https://youtube.com/results?search_query=", - "prefix": "/yt" - } - ] + "search": { + "defaultProvider": "https://google.com/search?q=", + "providers": [ + { + "name": "Allmusic", + "url": "https://www.allmusic.com/search/all/", + "prefix": "/a" + }, + { + "name": "Discogs", + "url": "https://www.discogs.com/search/?q=", + "prefix": "/di" + }, + { + "name": "Duck Duck Go", + "url": "https://duckduckgo.com/?q=", + "prefix": "/d" + }, + { + "name": "iMDB", + "url": "https://www.imdb.com/find?q=", + "prefix": "/i" + }, + { + "name": "TheMovieDB", + "url": "https://www.themoviedb.org/search?query=", + "prefix": "/m" + }, + { + "name": "Reddit", + "url": "https://www.reddit.com/search?q=", + "prefix": "/r" + }, + { + "name": "Qwant", + "url": "https://www.qwant.com/?q=", + "prefix": "/q" + }, + { + "name": "Soundcloud", + "url": "https://soundcloud.com/search?q=", + "prefix": "/so" + }, + { + "name": "Spotify", + "url": "https://open.spotify.com/search/results/", + "prefix": "/s" + }, + { + "name": "TheTVDB", + "url": "https://www.thetvdb.com/search?q=", + "prefix": "/tv" + }, + { + "name": "Trakt", + "url": "https://trakt.tv/search?query=", + "prefix": "/t" + }, + { + "name": "YouTube", + "url": "https://youtube.com/results?search_query=", + "prefix": "/yt" + } + ] + } } diff --git a/src/app.tsx b/src/app.tsx index 0245f9e..0a5293b 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -36,11 +36,11 @@ const App = () => { <>
- + {!themeData.error && !searchProviderData.error && ( )} diff --git a/src/components/searchBar.tsx b/src/components/searchBar.tsx index 0e27036..2df0162 100644 --- a/src/components/searchBar.tsx +++ b/src/components/searchBar.tsx @@ -44,15 +44,20 @@ export interface ISearchProviderProps { prefix: string; } -interface ISearchBarProps { +export interface ISearchProps { + defaultProvider: string; providers: Array | undefined; } +interface ISearchBarProps { + search: ISearchProps; +} + /** * Renders a search bar - * @param {ISearchBarProps} props - The search providers for the search bar to use + * @param {ISearchBarProps} search - The search providers for the search bar to use */ -const SearchBar = ({ providers }: ISearchBarProps) => { +const SearchBar = ({ search }: ISearchBarProps) => { let [input, setInput] = useState(""); let [buttonsHidden, setButtonsHidden] = useState(true); @@ -64,7 +69,7 @@ const SearchBar = ({ providers }: ISearchBarProps) => { if (query.split(" ")[0].includes("/")) { handleQueryWithProvider(query); } else { - window.location.href = "https://google.com/search?q=" + query; + window.location.href = search.defaultProvider + query; } e.preventDefault(); @@ -79,8 +84,8 @@ const SearchBar = ({ providers }: ISearchBarProps) => { let searchQuery: string = queryArray.join(" "); let providerFound: boolean = false; - if (providers) { - providers.forEach((provider: ISearchProviderProps) => { + if (search.providers) { + search.providers.forEach((provider: ISearchProviderProps) => { if (provider.prefix === prefix) { providerFound = true; window.location.href = provider.url + searchQuery; @@ -89,7 +94,7 @@ const SearchBar = ({ providers }: ISearchBarProps) => { } if (!providerFound) - window.location.href = "https://google.com/search?q=" + query; + window.location.href = search.defaultProvider + query; }; return ( diff --git a/src/components/settings.tsx b/src/components/settings.tsx index 3e69737..3c4d84b 100644 --- a/src/components/settings.tsx +++ b/src/components/settings.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; import Select, { ValueType } from "react-select"; -import { ISearchProviderProps } from "./searchBar"; +import { ISearchProps } from "./searchBar"; import selectedTheme, { setTheme, IThemeProps } from "../lib/theme"; import { Button, SubHeadline } from "./elements"; @@ -17,6 +17,7 @@ const FormContainer = styled.div` const Table = styled.table` font-weight: 400; background: none; + width: 100%; color: ${selectedTheme.mainColor}; `; @@ -25,13 +26,12 @@ const TableRow = styled.tr` `; const TableCell = styled.td` - background: none; padding-top: 0.5rem; `; const HeadCell = styled.th` font-weight: 700; - background: none; + text-align: left; `; const Section = styled.div` @@ -44,6 +44,16 @@ const SectionHeadline = styled(SubHeadline)` margin-bottom: 0.5rem; `; +const Text = styled.p` + font-weight: 700; + color: ${selectedTheme.accentColor}; +`; + +const Code = styled.p` + font-family: monospace; + color: ${selectedTheme.accentColor}; +`; + const SelectorStyle: any = { container: (base: any): any => ({ ...base, @@ -104,18 +114,18 @@ const SelectorStyle: any = { interface ISettingsProps { themes: Array | undefined; - providers: Array | undefined; + search: ISearchProps | undefined; } /** * Handles the settings-modal * @param {Array} themes - the list of themes a user can select between - * @param {Array} providers - the list of search providers + * @param {ISearchProps} search - the list of search providers */ -const Settings = ({ themes, providers }: ISettingsProps) => { +const Settings = ({ themes, search }: ISettingsProps) => { const [newTheme, setNewTheme] = useState(); - if (themes && providers) { + if (themes && search) { return ( {themes && ( @@ -137,23 +147,33 @@ const Settings = ({ themes, providers }: ISettingsProps) => { )} - {providers && ( + {search && (
Search Providers - - - - Search Provider - Prefix - - {providers.map((provider, index) => ( - - {provider.name} - {provider.prefix} - - ))} - -
+ <> + Default Search Provider + {search.defaultProvider} + + <> + { + search.providers && ( + + + + Search Provider + Prefix + + {search.providers.map((provider, index) => ( + + {provider.name} + {provider.prefix} + + ))} + +
+ ) + } +
)} diff --git a/src/data/search.json b/src/data/search.json index 38e306a..4137634 100644 --- a/src/data/search.json +++ b/src/data/search.json @@ -1,64 +1,67 @@ { - "providers": [ - { - "name": "Allmusic", - "url": "https://www.allmusic.com/search/all/", - "prefix": "/a" - }, - { - "name": "Discogs", - "url": "https://www.discogs.com/search/?q=", - "prefix": "/di" - }, - { - "name": "Duck Duck Go", - "url": "https://duckduckgo.com/?q=", - "prefix": "/d" - }, - { - "name": "iMDB", - "url": "https://www.imdb.com/find?q=", - "prefix": "/i" - }, - { - "name": "TheMovieDB", - "url": "https://www.themoviedb.org/search?query=", - "prefix": "/m" - }, - { - "name": "Reddit", - "url": "https://www.reddit.com/search?q=", - "prefix": "/r" - }, - { - "name": "Qwant", - "url": "https://www.qwant.com/?q=", - "prefix": "/q" - }, - { - "name": "Soundcloud", - "url": "https://soundcloud.com/search?q=", - "prefix": "/so" - }, - { - "name": "Spotify", - "url": "https://open.spotify.com/search/results/", - "prefix": "/s" - }, - { - "name": "TheTVDB", - "url": "https://www.thetvdb.com/search?q=", - "prefix": "/tv" - }, - { - "name": "Trakt", - "url": "https://trakt.tv/search?query=", - "prefix": "/t" - }, - { - "name": "YouTube", - "url": "https://youtube.com/results?search_query=", - "prefix": "/yt" - } - ] + "search": { + "defaultProvider": "https://google.com/search?q=", + "providers": [ + { + "name": "Allmusic", + "url": "https://www.allmusic.com/search/all/", + "prefix": "/a" + }, + { + "name": "Discogs", + "url": "https://www.discogs.com/search/?q=", + "prefix": "/di" + }, + { + "name": "Duck Duck Go", + "url": "https://duckduckgo.com/?q=", + "prefix": "/d" + }, + { + "name": "iMDB", + "url": "https://www.imdb.com/find?q=", + "prefix": "/i" + }, + { + "name": "TheMovieDB", + "url": "https://www.themoviedb.org/search?query=", + "prefix": "/m" + }, + { + "name": "Reddit", + "url": "https://www.reddit.com/search?q=", + "prefix": "/r" + }, + { + "name": "Qwant", + "url": "https://www.qwant.com/?q=", + "prefix": "/q" + }, + { + "name": "Soundcloud", + "url": "https://soundcloud.com/search?q=", + "prefix": "/so" + }, + { + "name": "Spotify", + "url": "https://open.spotify.com/search/results/", + "prefix": "/s" + }, + { + "name": "TheTVDB", + "url": "https://www.thetvdb.com/search?q=", + "prefix": "/tv" + }, + { + "name": "Trakt", + "url": "https://trakt.tv/search?query=", + "prefix": "/t" + }, + { + "name": "YouTube", + "url": "https://youtube.com/results?search_query=", + "prefix": "/yt" + } + ] + } } diff --git a/src/lib/fetcher.tsx b/src/lib/fetcher.tsx index 2aa6aaa..c4bbcdb 100644 --- a/src/lib/fetcher.tsx +++ b/src/lib/fetcher.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useState } from "react"; -import { ISearchProviderProps } from "../components/searchBar"; +import { ISearchProps } from "../components/searchBar"; import { IBookmarkGroupProps } from "../components/bookmarkGroup"; import { IAppCategoryProps } from "../components/appCategory"; import { IAppProps } from "../components/app"; @@ -22,8 +22,8 @@ const handleResponse = (response: Response) => { throw new Error(errorMessage); }; -export interface ISearchProviderDataProps { - providers: Array; +export interface ISearchDataProps { + search: ISearchProps; error: string | boolean; } @@ -67,7 +67,10 @@ const defaults = { error: false, }, search: { - providers: [], + search: { + defaultProvider: "https://google.com/search?q=", + providers: [], + }, error: false, }, theme: { @@ -199,7 +202,7 @@ export const useFetcher = () => { const [ searchProviderData, setSearchProviderData, - ] = useState(defaults.search); + ] = useState(defaults.search); const [themeData, setThemeData] = useState(defaults.theme); @@ -211,7 +214,7 @@ export const useFetcher = () => { const callback = useCallback(() => { (inProduction ? fetchProduction : fetchDevelopment).then( - ([appData, bookmarkData, searchData, themeData, imprintData, greeterData]: [IAppDataProps, IBookmarkDataProps, ISearchProviderDataProps, IThemeDataProps, IImprintDataProps, IGreeterDataProps]) => { + ([appData, bookmarkData, searchData, themeData, imprintData, greeterData]: [IAppDataProps, IBookmarkDataProps, ISearchDataProps, IThemeDataProps, IImprintDataProps, IGreeterDataProps]) => { setAppData((appData.error) ? appData : { ...appData, error: false }); setBookmarkData((bookmarkData.error) ? bookmarkData : { ...bookmarkData, error: false }); setSearchProviderData((searchData.error) ? searchData : { ...searchData, error: false });