Merge pull request #356 from gladly-team/kevin/new-search-type

Use new search URL for Search for a Cause
gladly-team · Jun 7, 2022 · 02fea76 · 02fea76 · vercel · Jun 7, 2022
2 parents da5798f + 768b885
commit 02fea76
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 94 deletions.
diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
@@ -14,6 +14,7 @@ import { Typography } from '@material-ui/core'
 import awaitTimeLimit from 'src/utils/awaitTimeLimit'
 import { AwaitedPromiseTimeout } from 'src/utils/errors'
 import logger from 'src/utils/logger'
+import SetUserSearchEngineMutation from 'src/utils/mutations/SetUserSearchEngineMutation'
 import SearchSelect from './SearchSelect'
 
 const searchBoxBorderColor = '#ced4da'
@@ -74,32 +75,21 @@ const SearchInput = (props) => {
     onSearchSelectMoreInfoClick,
     onSearchInputClick,
   } = props
-  const { searchEngine, yahooPaidSearchRewardOptIn } = user
+  const { searchEngine: currentSearchEngine, yahooPaidSearchRewardOptIn } = user
   const { searchEngines } = app
   const [searchSelectOpen, setSearchSelectOpen] = useState(false)
   const classes = useStyles()
   const searchInputRef = React.createRef()
   const fullInputRef = React.createRef()
   const [anchorEl, setAnchorEl] = React.useState(null)
-  const [currentSearchEngine, setCurrentSearchEngine] = useState(searchEngine)
   const [tooltipOpen, setTooltipOpen] = useState(!!tooltip)
-
-  const getSearchEngine = useCallback(
-    (searchEngineId) =>
-      searchEngines.edges.find(
-        (engine) => engine.node.engineId === searchEngineId
-      ).node,
-    [searchEngines]
-  )
-
   useEffect(() => {
-    setCurrentSearchEngine(searchEngine)
     setTooltipOpen(!!tooltip)
-  }, [searchEngine, getSearchEngine, yahooPaidSearchRewardOptIn, tooltip])
+  }, [tooltip])
 
   const onSearch = useCallback(async () => {
     const query = searchInputRef.current.value
-    const searchURL = currentSearchEngine.searchUrl.replace(
+    const searchURL = currentSearchEngine.searchUrlPersonalized.replace(
       /{\w+}/,
       encodeURIComponent(query)
     )
@@ -121,10 +111,10 @@ const SearchInput = (props) => {
       }
     }
     windowOpenTop(searchURL)
-  }, [userId, currentSearchEngine.searchUrl, searchInputRef])
+  }, [userId, currentSearchEngine.searchUrlPersonalized, searchInputRef])
 
   const onSwitchSearchEngine = (newSearchEngineId) => {
-    setCurrentSearchEngine(getSearchEngine(newSearchEngineId))
+    SetUserSearchEngineMutation(userId, newSearchEngineId)
   }
 
   const onSearchSelectOpen = () => {
@@ -197,9 +187,8 @@ const SearchInput = (props) => {
         }
       />
       <SearchSelect
-        userSearchEngine={searchEngine}
+        userSearchEngine={currentSearchEngine}
         anchorEl={anchorEl}
-        userId={userId}
         searchEngines={searchEngines}
         open={searchSelectOpen}
         onClose={onSearchSelectClose}
@@ -223,7 +212,6 @@ SearchInput.propTypes = {
           node: PropTypes.shape({
             engineId: PropTypes.string,
             name: PropTypes.string,
-            searchUrl: PropTypes.string,
             rank: PropTypes.number,
             isCharitable: PropTypes.bool,
             inputPrompt: PropTypes.string,
@@ -236,7 +224,7 @@ SearchInput.propTypes = {
     searchEngine: PropTypes.shape({
       engineId: PropTypes.string,
       inputPrompt: PropTypes.string,
-      searchUrl: PropTypes.string,
+      searchUrlPersonalized: PropTypes.string,
     }),
     yahooPaidSearchRewardOptIn: PropTypes.bool,
   }).isRequired,

diff --git a/src/components/SearchInput.stories.jsx b/src/components/SearchInput.stories.jsx
@@ -14,7 +14,6 @@ const Template = (args) => (
 )
 export const standard = Template.bind({})
 standard.args = {
-  userId: 'abcdefghijklmno',
   tooltip: 'Great! You can always switch your search engine here later on.',
   app: {
     searchEngines: {
@@ -23,7 +22,6 @@ standard.args = {
           node: {
             name: 'DuckDuckGo',
             engineId: 'DuckDuckGo',
-            searchUrl: 'https://duckduckgo.com/?q={searchTerms}',
             rank: 3,
             isCharitable: false,
             inputPrompt: 'Search DuckDuckGo',
@@ -33,7 +31,6 @@ standard.args = {
           node: {
             name: 'Google',
             engineId: 'Google',
-            searchUrl: 'https://www.google.com/search?q={searchTerms}',
             rank: 1,
             isCharitable: false,
             inputPrompt: 'Search Google',
@@ -43,7 +40,6 @@ standard.args = {
           node: {
             name: 'Ecosia',
             engineId: 'Ecosia',
-            searchUrl: 'https://www.ecosia.org/search?q={searchTerms}',
             rank: 2,
             isCharitable: false,
             inputPrompt: 'Search Ecosia',
@@ -56,7 +52,6 @@ standard.args = {
     searchEngine: {
       name: 'Google',
       engineId: 'Google',
-      searchUrl: 'https://www.google.com/search?q={searchTerms}',
       inputPrompt: 'Search Google',
     },
     yahooPaidSearchRewardOptIn: false,

diff --git a/src/components/SearchInputContainer.js b/src/components/SearchInputContainer.js
@@ -9,7 +9,6 @@ export default createFragmentContainer(SearchInput, {
           node {
             engineId
             name
-            searchUrl
             rank
             isCharitable
             inputPrompt
@@ -23,7 +22,7 @@ export default createFragmentContainer(SearchInput, {
       searchEngine {
         engineId
         inputPrompt
-        searchUrl
+        searchUrlPersonalized
       }
       yahooPaidSearchRewardOptIn
     }

diff --git a/src/components/SearchSelect.js b/src/components/SearchSelect.js
@@ -4,7 +4,6 @@ import { makeStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
 import ToggleButton from '@material-ui/lab/ToggleButton'
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
-import SetUserSearchEngineMutation from 'src/utils/mutations/SetUserSearchEngineMutation'
 import InfoIcon from '@material-ui/icons/InfoOutlined'
 import CheckIcon from '@material-ui/icons/Check'
 import DashboardPopover from './DashboardPopover'
@@ -122,7 +121,6 @@ const useStyles = makeStyles((theme) => ({
 const SearchSelect = ({
   anchorEl,
   onClose,
-  userId,
   onMoreInfoClick,
   onSearchEngineSwitch,
   userSearchEngine,
@@ -135,11 +133,10 @@ const SearchSelect = ({
   const setCurrentSearchEngineHandler = useCallback(
     async (_event, newSearchEngine) => {
       if (newSearchEngine !== null) {
-        SetUserSearchEngineMutation(userId, newSearchEngine)
         onSearchEngineSwitch(newSearchEngine)
       }
     },
-    [onSearchEngineSwitch, userId]
+    [onSearchEngineSwitch]
   )
   const onCloseHandler = useCallback(async () => {
     onClose()
@@ -253,10 +250,8 @@ SearchSelect.propTypes = {
     PropTypes.shape({ current: PropTypes.elementType }),
   ]),
   onClose: PropTypes.func,
-  userId: PropTypes.string.isRequired,
   userSearchEngine: PropTypes.shape({
     engineId: PropTypes.string,
-    searchUrl: PropTypes.string,
     inputPrompt: PropTypes.string,
   }).isRequired,
   onMoreInfoClick: PropTypes.func,
@@ -267,7 +262,6 @@ SearchSelect.propTypes = {
         node: PropTypes.shape({
           engineId: PropTypes.string,
           name: PropTypes.string,
-          searchUrl: PropTypes.string,
           rank: PropTypes.number,
           isCharitable: PropTypes.bool,
           inputPrompt: PropTypes.string,

diff --git a/src/components/SearchSelect.stories.jsx b/src/components/SearchSelect.stories.jsx
@@ -19,7 +19,7 @@ withoutCharitableEngine.args = {
   userSearchEngine: {
     name: 'Google',
     engineId: 'Google',
-    searchUrl: 'https://www.google.com/search?q={searchTerms}',
+    searchUrlPersonalized: 'https://www.google.com/search?q={searchTerms}',
     inputPrompt: 'Search Google',
   },
   onMoreInfoClick: () => {},
@@ -30,7 +30,6 @@ withoutCharitableEngine.args = {
         node: {
           name: 'DuckDuckGo',
           engineId: 'DuckDuckGo',
-          searchUrl: 'https://duckduckgo.com/?q={searchTerms}',
           rank: 3,
           isCharitable: false,
           inputPrompt: 'Search DuckDuckGo',
@@ -40,7 +39,6 @@ withoutCharitableEngine.args = {
         node: {
           name: 'Google',
           engineId: 'Google',
-          searchUrl: 'https://www.google.com/search?q={searchTerms}',
           rank: 1,
           isCharitable: false,
           inputPrompt: 'Search Google',
@@ -50,7 +48,6 @@ withoutCharitableEngine.args = {
         node: {
           name: 'Ecosia',
           engineId: 'Ecosia',
-          searchUrl: 'https://www.ecosia.org/search?q={searchTerms}',
           rank: 2,
           isCharitable: false,
           inputPrompt: 'Search Ecosia',
@@ -69,7 +66,7 @@ withCharitableEngine.args = {
   userSearchEngine: {
     name: 'Google',
     engineId: 'Google',
-    searchUrl: 'https://www.google.com/search?q={searchTerms}',
+    searchUrlPersonalized: 'https://www.google.com/search?q={searchTerms}',
     inputPrompt: 'Search Google',
   },
   onMoreInfoClick: () => {},
@@ -80,7 +77,6 @@ withCharitableEngine.args = {
         node: {
           name: 'DuckDuckGo',
           engineId: 'DuckDuckGo',
-          searchUrl: 'https://duckduckgo.com/?q={searchTerms}',
           rank: 3,
           isCharitable: false,
           inputPrompt: 'Search DuckDuckGo',
@@ -90,7 +86,6 @@ withCharitableEngine.args = {
         node: {
           name: 'Google',
           engineId: 'Google',
-          searchUrl: 'https://www.google.com/search?q={searchTerms}',
           rank: 1,
           isCharitable: false,
           inputPrompt: 'Search Google',
@@ -100,7 +95,6 @@ withCharitableEngine.args = {
         node: {
           name: 'Ecosia',
           engineId: 'Ecosia',
-          searchUrl: 'https://www.ecosia.org/search?q={searchTerms}',
           rank: 2,
           isCharitable: false,
           inputPrompt: 'Search Ecosia',
@@ -110,7 +104,6 @@ withCharitableEngine.args = {
         node: {
           name: 'Search for a Cause',
           engineId: 'SearchForACause',
-          searchUrl: 'http://tab.gladly.io/search/v2?q={searchTerms}',
           rank: 0,
           isCharitable: true,
           inputPrompt: 'Search for a Cause',
@@ -129,7 +122,7 @@ withCharitableEngineAndOptedIn.args = {
   userSearchEngine: {
     name: 'Google',
     engineId: 'Google',
-    searchUrl: 'https://www.google.com/search?q={searchTerms}',
+    searchUrlPersonalized: 'https://www.google.com/search?q={searchTerms}',
     inputPrompt: 'Search Google',
   },
   onMoreInfoClick: () => {},
@@ -140,7 +133,6 @@ withCharitableEngineAndOptedIn.args = {
         node: {
           name: 'DuckDuckGo',
           engineId: 'DuckDuckGo',
-          searchUrl: 'https://duckduckgo.com/?q={searchTerms}',
           rank: 3,
           isCharitable: false,
           inputPrompt: 'Search DuckDuckGo',
@@ -150,7 +142,6 @@ withCharitableEngineAndOptedIn.args = {
         node: {
           name: 'Google',
           engineId: 'Google',
-          searchUrl: 'https://www.google.com/search?q={searchTerms}',
           rank: 1,
           isCharitable: false,
           inputPrompt: 'Search Google',
@@ -160,7 +151,6 @@ withCharitableEngineAndOptedIn.args = {
         node: {
           name: 'Ecosia',
           engineId: 'Ecosia',
-          searchUrl: 'https://www.ecosia.org/search?q={searchTerms}',
           rank: 2,
           isCharitable: false,
           inputPrompt: 'Search Ecosia',
@@ -170,7 +160,6 @@ withCharitableEngineAndOptedIn.args = {
         node: {
           name: 'Search for a Cause',
           engineId: 'SearchForACause',
-          searchUrl: 'http://tab.gladly.io/search/v2?q={searchTerms}',
           rank: 0,
           isCharitable: true,
           inputPrompt: 'Search for a Cause',