feat(core): process completion as a state enhancer (#29)

francoischalifour · Feb 24, 2020 · 53c2ef7 · 53c2ef7
1 parent 8bed5ce
commit 53c2ef7
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 25 deletions.
diff --git a/packages/autocomplete-core/src/autocomplete.ts b/packages/autocomplete-core/src/autocomplete.ts
@@ -1,16 +1,16 @@
+import { stateReducer } from './stateReducer';
 import { getDefaultProps } from './defaultProps';
 import { createStore } from './store';
 import { getPropGetters } from './propGetters';
 import { getAutocompleteSetters } from './setters';
-import { getCompletion } from './completion';
 
 import { PublicAutocompleteOptions, AutocompleteApi } from './types';
 
 function createAutocomplete<TItem extends {}>(
   options: PublicAutocompleteOptions<TItem>
 ): AutocompleteApi<TItem> {
   const props = getDefaultProps(options);
-  const store = createStore(props);
+  const store = createStore(stateReducer, props);
 
   const {
     setHighlightedIndex,
@@ -53,7 +53,6 @@ function createAutocomplete<TItem extends {}>(
     getItemProps,
     getLabelProps,
     getMenuProps,
-    getCompletion: () => getCompletion({ state: store.getState(), props }),
   };
 }
 

diff --git a/packages/autocomplete-core/src/defaultProps.ts b/packages/autocomplete-core/src/defaultProps.ts
@@ -33,6 +33,7 @@ export function getDefaultProps<TItem>(
     initialState: {
       highlightedIndex: null,
       query: '',
+      completion: null,
       suggestions: [],
       isOpen: false,
       status: 'idle',

diff --git a/packages/autocomplete-core/src/stateReducer.ts b/packages/autocomplete-core/src/stateReducer.ts
@@ -1,17 +1,8 @@
 import { getItemsCount, getNextHighlightedIndex } from './utils';
 
-import { AutocompleteState, AutocompleteOptions, ActionType } from './types';
-
-interface Action {
-  type: ActionType;
-  value: any;
-}
-
-export const stateReducer = <TItem>(
-  action: Action,
-  state: AutocompleteState<TItem>,
-  props: AutocompleteOptions<TItem>
-): AutocompleteState<TItem> => {
+import { Reducer } from './types';
+
+export const stateReducer: Reducer = (action, state, props) => {
   switch (action.type) {
     case 'setHighlightedIndex': {
       return {

diff --git a/packages/autocomplete-core/src/store.ts b/packages/autocomplete-core/src/store.ts
@@ -1,8 +1,14 @@
-import { stateReducer } from './stateReducer';
+import { getCompletion } from './completion';
 
-import { AutocompleteOptions, AutocompleteStore } from './types';
+import {
+  AutocompleteOptions,
+  AutocompleteStore,
+  Reducer,
+  AutocompleteState,
+} from './types';
 
 export function createStore<TItem>(
+  reducer: Reducer,
   props: AutocompleteOptions<TItem>
 ): AutocompleteStore<TItem> {
   return {
@@ -11,13 +17,22 @@ export function createStore<TItem>(
       return this.state;
     },
     send(action, payload) {
-      this.state = stateReducer(
-        { type: action, value: payload },
-        this.state,
+      this.state = withCompletion(
+        reducer({ type: action, value: payload }, this.state, props),
         props
       );
 
       props.onStateChange({ state: this.state });
     },
   };
 }
+
+function withCompletion<TItem>(
+  state: AutocompleteState<TItem>,
+  props: AutocompleteOptions<TItem>
+) {
+  return {
+    ...state,
+    completion: getCompletion({ state, props }),
+  };
+}
diff --git a/packages/autocomplete-core/src/types/api.ts b/packages/autocomplete-core/src/types/api.ts
@@ -4,9 +4,7 @@ import { AutocompleteState } from './state';
 
 export interface AutocompleteApi<TItem>
   extends AutocompleteSetters<TItem>,
-    AutocompleteAccessibilityGetters<TItem> {
-  getCompletion(): string | null;
-}
+    AutocompleteAccessibilityGetters<TItem> {}
 
 export interface AutocompleteSuggestion<TItem> {
   source: AutocompleteSource<TItem>;

diff --git a/packages/autocomplete-core/src/types/state.ts b/packages/autocomplete-core/src/types/state.ts
@@ -3,6 +3,7 @@ import { AutocompleteSuggestion } from './api';
 export interface AutocompleteState<TItem> {
   highlightedIndex: number | null;
   query: string;
+  completion: string | null;
   suggestions: Array<AutocompleteSuggestion<TItem>>;
   isOpen: boolean;
   status: 'idle' | 'loading' | 'stalled' | 'error';

diff --git a/packages/autocomplete-core/src/types/store.ts b/packages/autocomplete-core/src/types/store.ts
@@ -1,3 +1,4 @@
+import { AutocompleteOptions } from './api';
 import { AutocompleteState } from './state';
 
 export interface AutocompleteStore<TItem> {
@@ -6,7 +7,18 @@ export interface AutocompleteStore<TItem> {
   send(action: ActionType, payload: any): void;
 }
 
-export type ActionType =
+export type Reducer = <TItem>(
+  action: Action,
+  state: AutocompleteState<TItem>,
+  props: AutocompleteOptions<TItem>
+) => AutocompleteState<TItem>;
+
+type Action = {
+  type: ActionType;
+  value: any;
+};
+
+type ActionType =
   | 'setHighlightedIndex'
   | 'setQuery'
   | 'setSuggestions'

diff --git a/packages/autocomplete-react/src/Autocomplete.tsx b/packages/autocomplete-react/src/Autocomplete.tsx
@@ -110,9 +110,9 @@ export function Autocomplete<TItem extends {}>(
         query={state.query}
         isOpen={state.isOpen}
         status={state.status}
+        completion={state.completion}
         getLabelProps={autocomplete.getLabelProps}
         getInputProps={autocomplete.getInputProps}
-        completion={autocomplete.getCompletion()}
         {...autocomplete.getFormProps({
           inputElement: inputRef.current,
         })}