Default Search Provider support; Style updates

src/hooks/useAPI.tsx

@@ -133,6 +133,8 @@ export function useMutationAPI() {
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] });
 			endpoint === 'api/bookmarks' &&
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/themes'] });
+			endpoint === 'api/providers' &&
+				queryClient.refetchQueries({ queryKey: ['GET', 'api/providers/default'] });
 		},
 		onSuccess: (_, { endpoint }) => {
 			queryClient.refetchQueries({
@@ -146,6 +148,8 @@ export function useMutationAPI() {
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] });
 			endpoint === 'api/bookmarks' &&
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/themes'] });
+			endpoint === 'api/providers' &&
+				queryClient.refetchQueries({ queryKey: ['GET', 'api/providers/default'] });
 		},
 	});
 }

src/hooks/useCommonHooks.ts

@@ -1,7 +1,7 @@
 import { useLocalStorage } from '@mantine/hooks';
 import { appTheme } from 'contexts';
 import { useAtom } from 'jotai';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { Location, Theme, User } from 'types';
 import { useMutationAPI } from './useAPI';
 
@@ -53,11 +53,29 @@ export function useCommonHooks() {
 		key: 'themePlaylist',
 		defaultValue: 'All',
 	});
-
+	const [defaultProviderLabel, setDefaultProviderLabel] = useLocalStorage<string>({
+		key: 'providerLabel',
+		defaultValue: 'Google Search',
+	});
+	const [defaultProviderURL, setDefaultProviderURL] = useLocalStorage<string>({
+		key: 'providerURL',
+		defaultValue: 'https://www.google.com/search?q=',
+	});
+	const [defaultProviderPrefix, setDefaultProviderPrefix] = useLocalStorage<string>({
+		key: 'providerPrefix',
+		defaultValue: '/g',
+	});
 	const [searchValue, setSearchValue] = useState('');
-	const [providerLabel, setProviderLabel] = useState('Google Search');
-	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
-	const [providerPrefix, setProviderPrefix] = useState('/g');
+	const [providerLabel, setProviderLabel] = useState(defaultProviderLabel);
+	const [providerURL, setProviderURL] = useState(defaultProviderURL);
+	const [providerPrefix, setProviderPrefix] = useState(defaultProviderPrefix);
+
+	useEffect(() => {
+		setProviderLabel(defaultProviderLabel);
+		setProviderURL(defaultProviderURL);
+		setProviderPrefix(defaultProviderPrefix);
+	}, [defaultProviderLabel, defaultProviderURL, defaultProviderPrefix]);
+
 	const [currentUser, setCurrentUser] = useLocalStorage<User>({
 		key: 'user',
 		defaultValue: {
@@ -207,6 +225,12 @@ export function useCommonHooks() {
 		setProviderURL,
 		providerPrefix,
 		setProviderPrefix,
+		defaultProviderLabel,
+		setDefaultProviderLabel,
+		defaultProviderURL,
+		setDefaultProviderURL,
+		defaultProviderPrefix,
+		setDefaultProviderPrefix,
 		currentUser,
 		setCurrentUser,
 		currentLocation,