-
+
{!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 });