Move customStyles and splitChar to global state

src/lib/components/container.jsx

@@ -56,11 +56,8 @@ export default function Container(props) {
   } = props
 
   // Global state from context
-  const {
-    state,
-    dispatch,
-    customStyles
-  } = useContext(StateContext)
+  const { state, dispatch } = useContext(StateContext)
+  const { customStyles } = state
 
   // Component state
   const [debouncedQuery] = useDebounce(state.query, debounceWait)

src/lib/components/item.jsx

@@ -11,20 +11,20 @@ export default function Item(props) {
 
   const {
     state,
-    dispatch,
-    customStyles,
-    splitCharState
+    dispatch
   } = useContext(StateContext)
 
+  const { customStyles, highlighted, splitChar } = state
+
   const splitText = useMemo(() => {
-    if (isUndefined(splitCharState)) return [item.text]
-    const regex = new RegExp(escapeStringRegExp(splitCharState) + '(.+)')
+    if (isUndefined(splitChar)) return [item.text]
+    const regex = new RegExp(escapeStringRegExp(splitChar) + '(.+)')
     return item.text.split(regex)
-  }, [splitCharState, item])
+  }, [splitChar, item])
 
   const divClassName = useMemo(() => {
     let itemStyle = customStyles[
-      (state.highlighted && index === state.highlighted.index)
+      (highlighted && index === highlighted.index)
         ? 'highlightedItem'
         : 'item'
     ]
@@ -32,7 +32,7 @@ export default function Item(props) {
     return (index === 0 && customStyles.topItem)
       ? `${itemStyle} ${customStyles.topItem}`
       : itemStyle
-  }, [customStyles, state.highlighted, index])
+  }, [customStyles, highlighted, index])
 
   const handleMouseEnter = () => {
     dispatch(setHighlighted(index))
@@ -43,8 +43,8 @@ export default function Item(props) {
   }
 
   const itemElement = () => {
-    return isUndefined(splitCharState) ||
-      !item.text.includes(splitCharState) ? (
+    return isUndefined(splitChar) ||
+      !item.text.includes(splitChar) ? (
       <MatchingText text={splitText[0]} />
     ) : (
       splitItemElement()
@@ -55,7 +55,7 @@ export default function Item(props) {
     return (
       <React.Fragment>
         <MatchingText text={splitText[0]} />
-        <span className={customStyles.splitChar}>{splitCharState}</span>
+        <span className={customStyles.splitChar}>{splitChar}</span>
         <span className={customStyles.split}>{splitText[1]}</span>
       </React.Fragment>
     )

src/lib/components/itemFirst.jsx

@@ -4,7 +4,8 @@ import Item from './item'
 
 export default function ItemFirst(props) {
   const { groupName, index, item } = props
-  const { customStyles } = useContext(StateContext)
+  const { state } = useContext(StateContext)
+  const { customStyles } = state
 
   return (
     <React.Fragment>

src/lib/components/items.jsx

@@ -7,7 +7,8 @@ import isUndefined from '../utils/isUndefined'
 
 export default function Items(props) {
   const { isLoading, items, loadingMessage, noItemsMessage } = props
-  const { customStyles } = useContext(StateContext)
+  const { state } = useContext(StateContext)
+  const { customStyles } = state
 
   const itemElements = () => {
     return (

src/lib/components/matchingText.jsx

@@ -4,7 +4,8 @@ import escapeStringRegExp from 'escape-string-regexp'
 
 export default function MatchingText(props) {
   const { text } = props
-  const { customStyles, state } = useContext(StateContext)
+  const { state } = useContext(StateContext)
+  const { customStyles } = state
   const regex = new RegExp('(' + escapeStringRegExp(state.query) + ')', 'i')
   const parts = (state.query) ? text.split(regex) : [text]
   const matchingText = parts.map((part, index) => {

src/lib/context/state.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, useState, useEffect } from 'react'
+import React, { createContext, useReducer, useEffect } from 'react'
 import reducer from '../reducers/reducer'
 import {setQuery} from '../actions/actions'
 import undef from '../utils/undef'
@@ -15,19 +15,12 @@ const StateContextProvider = (props) => {
     customStyles: styles,
     splitChar
   })
-  const [customStyles] = useState(styles)
-  const [splitCharState] = useState(splitChar)
 
   useEffect(() => dispatch(setQuery(text)), [text]) // TODO: Is this needed?
 
   return (
     <StateContext.Provider
-      value={{
-        state,
-        dispatch,
-        customStyles,
-        splitCharState
-      }}>
+      value={{state, dispatch}}>
       {children}
     </StateContext.Provider>
   )