refactor(frontend/controller): move down the results list mapping to …

…result component
shabados · Oct 25, 2020 · 3156102 · 3156102
1 parent 38ba160
commit 3156102
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 47 deletions.
diff --git a/app/frontend/src/Controller/Search/Results.js b/app/frontend/src/Controller/Search/Results.js
@@ -1,21 +1,14 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import classNames from 'classnames'
-import { ListItem } from '@material-ui/core'
-import { string, oneOfType, number, instanceOf, shape, bool } from 'prop-types'
+import { ListItem, List } from '@material-ui/core'
+import { string, oneOfType, number, instanceOf, shape, bool, arrayOf, func } from 'prop-types'
 import { firstLetters, stripVishraams, stripAccents, toUnicode, toAscii } from 'gurmukhi-utils'
 
+
 import controller from '../../lib/controller'
-import {
-  SEARCH_TYPES,
-  LANGUAGE_NAMES,
-  SEARCH_ANCHORS,
-  SOURCE_ABBREVIATIONS,
-} from '../../lib/consts'
-import {
-  getTranslation,
-  getTransliteration,
-  customiseLine,
-} from '../../lib/utils'
+import { getTranslation, getTransliteration, customiseLine } from '../../lib/utils'
+import { WritersContext, RecommendedSourcesContext, SettingsContext } from '../../lib/contexts'
+import { SEARCH_TYPES, LANGUAGE_NAMES, SEARCH_ANCHORS, SOURCE_ABBREVIATIONS } from '../../lib/consts'
 
 const highlightFullWordMatches = ( line, query ) => {
   const sanitisedQuery = query.trim()
@@ -93,7 +86,7 @@ const highlightMatches = gurmukhi => ( value, input, mode ) => {
    * @param {bool} showResultCitations To show citations or not (SettingsContext).
    * @param {bool} lineEnding To strip line endings or not (SettingsContext).
    */
-const Result = ( {
+const ResultList = ( {
   gurmukhi,
   typeId,
   id: lineId,
@@ -203,7 +196,58 @@ const Result = ( {
   )
 }
 
+const Result = ( { results, searchedValue, anchor, register, focused } ) => {
+  const { local: {
+    sources,
+    search: {
+      showResultCitations,
+      resultTransliterationLanguage,
+      resultTranslationLanguage,
+      lineEnding,
+    },
+  } = {} } = useContext( SettingsContext )
+
+  const writers = useContext( WritersContext )
+  const recommendedSources = useContext( RecommendedSourcesContext )
+
+  return (
+    <List className="results">
+      {results
+        ? results.map( ( props, i ) => ResultList( {
+          ...props,
+          searchedValue,
+          anchor,
+          sources,
+          writers,
+          recommendedSources,
+          resultTransliterationLanguage,
+          resultTranslationLanguage,
+          showResultCitations,
+          lineEnding,
+          ref: c => register( i, c ),
+          focused: focused === i,
+        } ) )
+        : ''}
+    </List>
+  )
+}
+
 Result.propTypes = {
+  results: arrayOf( shape( {} ) ),
+  searchedValue: string,
+  anchor: string,
+  register: func.isRequired,
+  focused: oneOfType( [ string, number ] ),
+}
+
+Result.defaultProps = {
+  results: [],
+  searchedValue: '',
+  anchor: '',
+  focused: undefined,
+}
+
+ResultList.propTypes = {
   gurmukhi: string.isRequired,
   id: string.isRequired,
   typeId: string.isRequired,
@@ -226,7 +270,7 @@ Result.propTypes = {
   lineEnding: bool.isRequired,
 }
 
-Result.defaultProps = {
+ResultList.defaultProps = {
   focused: undefined,
 }
 

diff --git a/app/frontend/src/Controller/Search/index.js b/app/frontend/src/Controller/Search/index.js
@@ -5,15 +5,10 @@ import { useLocation, useHistory } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { stringify } from 'querystring'
-import {
-  Input,
-  InputAdornment,
-  List,
-  IconButton,
-} from '@material-ui/core'
+import { Input, InputAdornment, IconButton } from '@material-ui/core'
 
 import { getUrlState } from '../../lib/utils'
-import { WritersContext, RecommendedSourcesContext, SettingsContext } from '../../lib/contexts'
+import { SettingsContext } from '../../lib/contexts'
 import controller from '../../lib/controller'
 import { withNavigationHotkeys } from '../../shared/NavigationHotkeys'
 import {
@@ -52,18 +47,13 @@ const getSearchParams = searchQuery => {
  */
 const Search = ( { updateFocus, register, focused } ) => {
   const { local: {
-    sources,
     search: {
       showResultCitations,
       resultTransliterationLanguage,
       resultTranslationLanguage,
-      lineEnding,
     },
   } = {} } = useContext( SettingsContext )
 
-  const writers = useContext( WritersContext )
-  const recommendedSources = useContext( RecommendedSourcesContext )
-
   // Set the initial search query from URL
   const history = useHistory()
   const { search } = useLocation()
@@ -184,25 +174,13 @@ const Search = ( { updateFocus, register, focused } ) => {
           autoComplete: 'off',
         }}
       />
-      <List className="results">
-        {results
-          ? results
-            .map( ( props, i ) => Result( {
-              ...props,
-              searchedValue,
-              anchor,
-              sources,
-              writers,
-              recommendedSources,
-              resultTransliterationLanguage,
-              resultTranslationLanguage,
-              showResultCitations,
-              lineEnding,
-              ref: c => register( i, c ),
-              focused: focused === i,
-            } ) )
-          : ''}
-      </List>
+      <Result
+        results={results}
+        searchedValue={searchedValue}
+        anchor={anchor}
+        register={register}
+        focused={focused}
+      />
     </div>
   )
 }