refactor(ts): migrate connectors to new Widget type (#4735)

* refactor(ts): migrate connectors to new Widget type

* refactor(ts): undo wrong change

* update

* update tests

Author: Haroenv

src/connectors/answers/connectAnswers.ts

@@ -14,6 +14,7 @@ import {
   Hit,
   FindAnswersOptions,
   FindAnswersResponse,
+  WidgetRenderState,
 } from '../../types';
 
 type IndexWithAnswers = {
@@ -31,7 +32,7 @@ const withUsage = createDocumentationMessageGenerator({
   connector: true,
 });
 
-export type AnswersRendererOptions = {
+export type AnswersRenderState = {
   /**
    * The matched hits from Algolia API.
    */
@@ -89,8 +90,16 @@ export type AnswersConnectorParams = {
   extraParameters?: FindAnswersOptions;
 };
 
+export type AnswersWidgetDescription = {
+  $$type: 'ais.answers';
+  renderState: AnswersRenderState;
+  indexRenderState: {
+    answers: WidgetRenderState<AnswersRenderState, AnswersConnectorParams>;
+  };
+};
+
 export type AnswersConnector = Connector<
-  AnswersRendererOptions,
+  AnswersWidgetDescription,
   AnswersConnectorParams
 >;
 

src/connectors/autocomplete/__tests__/connectAutocomplete-test.ts

@@ -10,14 +10,14 @@ import {
 import { createSearchClient } from '../../../../test/mock/createSearchClient';
 import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';
 import connectAutocomplete, {
-  AutocompleteRendererOptions,
+  AutocompleteRenderState,
 } from '../connectAutocomplete';
 import { TAG_PLACEHOLDER } from '../../../lib/utils';
 import { SearchClient } from '../../../types';
 
 describe('connectAutocomplete', () => {
   const getInitializedWidget = (config = {}) => {
-    const renderFn = jest.fn<any, [AutocompleteRendererOptions, boolean]>();
+    const renderFn = jest.fn<any, [AutocompleteRenderState, boolean]>();
     const makeWidget = connectAutocomplete(renderFn);
     const widget = makeWidget({
       ...config,

src/connectors/autocomplete/connectAutocomplete.ts

@@ -9,7 +9,7 @@ import {
   noop,
   warning,
 } from '../../lib/utils';
-import { Hits, Connector } from '../../types';
+import { Hits, Connector, WidgetRenderState } from '../../types';
 
 const withUsage = createDocumentationMessageGenerator({
   name: 'autocomplete',
@@ -25,7 +25,7 @@ export type AutocompleteConnectorParams = {
   escapeHTML?: boolean;
 };
 
-export type AutocompleteRendererOptions = {
+export type AutocompleteRenderState = {
   /**
    * The current value of the query.
    */
@@ -62,8 +62,20 @@ export type AutocompleteRendererOptions = {
   refine: (query: string) => void;
 };
 
+export type AutocompleteWidgetDescription = {
+  $$type: 'ais.autocomplete';
+  renderState: AutocompleteRenderState;
+  indexRenderState: {
+    autocomplete: WidgetRenderState<
+      AutocompleteRenderState,
+      AutocompleteConnectorParams
+    >;
+  };
+  indexUiState: { query: string };
+};
+
 export type AutocompleteConnector = Connector<
-  AutocompleteRendererOptions,
+  AutocompleteWidgetDescription,
   AutocompleteConnectorParams
 >;
 

src/connectors/breadcrumb/connectBreadcrumb.ts

@@ -6,7 +6,12 @@ import {
   noop,
 } from '../../lib/utils';
 import { SearchParameters, SearchResults } from 'algoliasearch-helper';
-import { Connector, TransformItems, CreateURL } from '../../types';
+import {
+  Connector,
+  TransformItems,
+  CreateURL,
+  WidgetRenderState,
+} from '../../types';
 
 const withUsage = createDocumentationMessageGenerator({
   name: 'breadcrumb',
@@ -49,7 +54,7 @@ export type BreadcrumbConnectorParams = {
   separator?: string;
 };
 
-export type BreadcrumbRendererOptions = {
+export type BreadcrumbRenderState = {
   /**
    * Creates the URL for a single item name in the list.
    */
@@ -71,8 +76,21 @@ export type BreadcrumbRendererOptions = {
   canRefine: boolean;
 };
 
+export type BreadcrumbWidgetDescription = {
+  $$type: 'ais.breadcrumb';
+  renderState: BreadcrumbRenderState;
+  indexRenderState: {
+    breadcrumb: {
+      [rootAttribute: string]: WidgetRenderState<
+        BreadcrumbRenderState,
+        BreadcrumbConnectorParams
+      >;
+    };
+  };
+};
+
 export type BreadcrumbConnector = Connector<
-  BreadcrumbRendererOptions,
+  BreadcrumbWidgetDescription,
   BreadcrumbConnectorParams
 >;
 
@@ -83,8 +101,8 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
   checkRendering(renderFn, withUsage());
 
   type ConnectorState = {
-    refine?: BreadcrumbRendererOptions['refine'];
-    createURL?: BreadcrumbRendererOptions['createURL'];
+    refine?: BreadcrumbRenderState['refine'];
+    createURL?: BreadcrumbRenderState['createURL'];
   };
 
   const connectorState: ConnectorState = {};

src/connectors/clear-refinements/connectClearRefinements.ts

@@ -8,7 +8,12 @@ import {
   uniq,
   mergeSearchParameters,
 } from '../../lib/utils';
-import { TransformItems, CreateURL, Connector } from '../../types';
+import {
+  TransformItems,
+  CreateURL,
+  Connector,
+  WidgetRenderState,
+} from '../../types';
 
 const withUsage = createDocumentationMessageGenerator({
   name: 'clear-refinements',
@@ -32,7 +37,7 @@ export type ClearRefinementsConnectorParams = {
   transformItems?: TransformItems<string>;
 };
 
-export type ClearRefinementsRendererOptions = {
+export type ClearRefinementsRenderState = {
   /**
    * Triggers the clear of all the currently refined values.
    */
@@ -55,8 +60,19 @@ export type ClearRefinementsRendererOptions = {
   createURL: CreateURL<void>;
 };
 
+export type ClearRefinementsWidgetDescription = {
+  $$type: 'ais.clearRefinements';
+  renderState: ClearRefinementsRenderState;
+  indexRenderState: {
+    clearRefinements: WidgetRenderState<
+      ClearRefinementsRenderState,
+      ClearRefinementsConnectorParams
+    >;
+  };
+};
+
 export type ClearRefinementsConnector = Connector<
-  ClearRefinementsRendererOptions,
+  ClearRefinementsWidgetDescription,
   ClearRefinementsConnectorParams
 >;
 

src/connectors/configure-related-items/connectConfigureRelatedItems.ts

@@ -10,7 +10,7 @@ import {
   getPropertyByPath,
 } from '../../lib/utils';
 import connectConfigure, {
-  ConfigureRendererOptions,
+  ConfigureWidgetDescription,
 } from '../configure/connectConfigure';
 
 export type MatchingPatterns = {
@@ -57,8 +57,12 @@ function createOptionalFilter({
   return `${attributeName}:${attributeValue}<score=${attributeScore || 1}>`;
 }
 
+export type ConfigureRelatedItemsWidgetDescription = {
+  $$type: 'ais.configureRelatedItems';
+} & Omit<ConfigureWidgetDescription, '$$type'>;
+
 export type ConfigureRelatedItemsConnector = Connector<
-  ConfigureRendererOptions,
+  ConfigureRelatedItemsWidgetDescription,
   ConfigureRelatedItemsConnectorParams
 >;
 

src/connectors/configure/connectConfigure.ts

@@ -3,7 +3,7 @@ import algoliasearchHelper, {
   PlainSearchParameters,
   AlgoliaSearchHelper,
 } from 'algoliasearch-helper';
-import { Connector } from '../../types';
+import { Connector, WidgetRenderState } from '../../types';
 import {
   createDocumentationMessageGenerator,
   isPlainObject,
@@ -24,7 +24,7 @@ export type ConfigureConnectorParams = {
   searchParameters: PlainSearchParameters;
 };
 
-export type ConfigureRendererOptions = {
+export type ConfigureRenderState = {
   /**
    * Refine the given search parameters.
    */
@@ -54,8 +54,22 @@ function getInitialSearchParameters(
   );
 }
 
+export type ConfigureWidgetDescription = {
+  $$type: 'ais.configure';
+  renderState: ConfigureRenderState;
+  indexRenderState: {
+    configure: WidgetRenderState<
+      ConfigureRenderState,
+      ConfigureConnectorParams
+    >;
+  };
+  indexUiState: {
+    configure: PlainSearchParameters;
+  };
+};
+
 export type ConfigureConnector = Connector<
-  ConfigureRendererOptions,
+  ConfigureWidgetDescription,
   ConfigureConnectorParams
 >;
 

src/connectors/current-refinements/connectCurrentRefinements.ts

@@ -15,7 +15,12 @@ import {
   FacetRefinement,
   NumericRefinement,
 } from '../../lib/utils/getRefinements';
-import { Connector, TransformItems, CreateURL } from '../../types';
+import {
+  Connector,
+  TransformItems,
+  CreateURL,
+  WidgetRenderState,
+} from '../../types';
 
 export type CurrentRefinementsConnectorParamsRefinement = {
   /**
@@ -106,7 +111,7 @@ export type CurrentRefinementsConnectorParams = {
   transformItems?: TransformItems<CurrentRefinementsConnectorParamsItem>;
 };
 
-export type CurrentRefinementsRendererOptions = {
+export type CurrentRefinementsRenderState = {
   /**
    * All the currently refined items, grouped by attribute.
    */
@@ -133,8 +138,19 @@ const withUsage = createDocumentationMessageGenerator({
   connector: true,
 });
 
+export type CurrentRefinementsWidgetDescription = {
+  $$type: 'ais.currentRefinements';
+  renderState: CurrentRefinementsRenderState;
+  indexRenderState: {
+    currentRefinements: WidgetRenderState<
+      CurrentRefinementsRenderState,
+      CurrentRefinementsConnectorParams
+    >;
+  };
+};
+
 export type CurrentRefinementsConnector = Connector<
-  CurrentRefinementsRendererOptions,
+  CurrentRefinementsWidgetDescription,
   CurrentRefinementsConnectorParams
 >;
 

src/connectors/geo-search/types.ts

@@ -0,0 +1,61 @@
+import { SendEventForHits } from '../../lib/utils';
+import {
+  Connector,
+  GeoLoc,
+  Hit,
+  TransformItems,
+  WidgetRenderState,
+} from '../../types';
+
+export type GeoHit = Hit & Required<Pick<Hit, '_geoLoc'>>;
+
+type Bounds = {
+  northEast: GeoLoc;
+  southWest: GeoLoc;
+};
+
+export type GeoSearchRenderState = {
+  currentRefinement?: Bounds;
+  position?: GeoLoc;
+  items: GeoHit[];
+  refine(bounds: Bounds): void;
+  clearMapRefinement(): void;
+  hasMapMoveSinceLastRefine(): boolean;
+  isRefineOnMapMove(): boolean;
+  isRefinedWithMap(): boolean;
+  setMapMoveSinceLastRefine(): void;
+  toggleRefineOnMapMove(): void;
+  sendEvent: SendEventForHits;
+};
+
+export type GeoSearchConnectorParams = {
+  enableRefineOnMapMove: boolean;
+  transformItems: TransformItems<GeoHit>;
+};
+
+export type GeoSearchWidgetDescription = {
+  $$type: 'ais.geoSearch';
+  renderState: GeoSearchRenderState;
+  indexRenderState: {
+    geoSearch: WidgetRenderState<
+      GeoSearchRenderState,
+      GeoSearchConnectorParams
+    >;
+  };
+  indexUiState: {
+    geoSearch: {
+      /**
+       * The rectangular area in geo coordinates.
+       * The rectangle is defined by two diagonally opposite points, hence by 4 floats separated by commas.
+       *
+       * @example '47.3165,4.9665,47.3424,5.0201'
+       */
+      boundingBox: string;
+    };
+  };
+};
+
+export type GeoSearchConnector = Connector<
+  GeoSearchWidgetDescription,
+  GeoSearchConnectorParams
+>;