First Commit

data/search.json

@@ -1,4 +1,6 @@
 {
+  "search": {
+    "defaultProvider": "https://google.com/search?q=",
     "providers": [
       {
         "name": "Allmusic",
@@ -61,4 +63,5 @@
         "prefix": "/yt"
       }
     ]
+  }
 }

src/app.tsx

@@ -36,11 +36,11 @@ const App = () => {
     <>
       <GlobalStyle />
       <div>
-        <SearchBar providers={searchProviderData?.providers} />
+        <SearchBar search={searchProviderData?.search} />
         {!themeData.error && !searchProviderData.error && (
           <Settings
             themes={themeData?.themes}
-            providers={searchProviderData?.providers}
+            search={searchProviderData?.search}
           />
         )}
         <Greeter data={greeterData.greeter} />

src/components/searchBar.tsx

@@ -44,15 +44,20 @@ export interface ISearchProviderProps {
   prefix: string;
 }
 
-interface ISearchBarProps {
+export interface ISearchProps {
+  defaultProvider: string;
   providers: Array<ISearchProviderProps> | 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<string>("");
   let [buttonsHidden, setButtonsHidden] = useState<boolean>(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) {
+    if (search.providers) {
-      providers.forEach((provider: ISearchProviderProps) => {
+      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 (

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<IThemeProps> | undefined;
-  providers: Array<ISearchProviderProps> | undefined;
+  search: ISearchProps | undefined;
 }
 
 /**
  * Handles the settings-modal
  * @param {Array<IThemeProps>} themes - the list of themes a user can select between
- * @param {Array<ISearchProviderProps>} 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<IThemeProps>();
 
-  if (themes && providers) {
+  if (themes && search) {
     return (
       <Modal element="icon" icon="settings" title="Settings">
         {themes && (
@@ -137,16 +147,23 @@ const Settings = ({ themes, providers }: ISettingsProps) => {
             </FormContainer>
           </Section>
         )}
-        {providers && (
+        {search && (
           <Section>
             <SectionHeadline>Search Providers</SectionHeadline>
+            <>
+              <Text>Default Search Provider</Text>
+              <Code>{search.defaultProvider}</Code>
+            </>
+            <>
+              {
+                search.providers && (
                   <Table>
                     <tbody>
                       <TableRow>
                         <HeadCell>Search Provider</HeadCell>
                         <HeadCell>Prefix</HeadCell>
                       </TableRow>
-                {providers.map((provider, index) => (
+                      {search.providers.map((provider, index) => (
                         <TableRow key={provider.name + index}>
                           <TableCell>{provider.name}</TableCell>
                           <TableCell>{provider.prefix}</TableCell>
@@ -154,6 +171,9 @@ const Settings = ({ themes, providers }: ISettingsProps) => {
                       ))}
                     </tbody>
                   </Table>
+                )
+              }
+            </>
           </Section>
         )}
       </Modal>

src/data/search.json

@@ -1,4 +1,6 @@
 {
+  "search": {
+    "defaultProvider": "https://google.com/search?q=",
     "providers": [
       {
         "name": "Allmusic",
@@ -61,4 +63,5 @@
         "prefix": "/yt"
       }
     ]
+  }
 }

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 {
+export interface ISearchDataProps {
-  providers: Array<ISearchProviderProps>;
+  search: ISearchProps;
   error: string | boolean;
 }
 
@@ -67,7 +67,10 @@ const defaults = {
     error: false,
   },
   search: {
+    search: {
+      defaultProvider: "https://google.com/search?q=",
       providers: [],
+    },
     error: false,
   },
   theme: {
@@ -199,7 +202,7 @@ export const useFetcher = () => {
   const [
     searchProviderData,
     setSearchProviderData,
-  ] = useState<ISearchProviderDataProps>(defaults.search);
+  ] = useState<ISearchDataProps>(defaults.search);
 
   const [themeData, setThemeData] = useState<IThemeDataProps>(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 });