Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

feat(search-client): Add support for Custom Search Clients #111

Merged
merged 16 commits into from
May 14, 2018
Merged

feat(search-client): Add support for Custom Search Clients #111

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6ad17d7
feat: Update Client, Helper and InstantSearch
francoischalifour May 2, 2018
160e13a
feat: Add support for `searchClient`
francoischalifour May 2, 2018
0e09be7
feat(dev-novel): Add `searchClient` support
francoischalifour May 3, 2018
2219d85
feat(dev-novel): Add search client stories
francoischalifour May 3, 2018
e716738
chore: Upgrade instantsearch beta
francoischalifour May 3, 2018
5821351
docs: Mention `searchClient` in the docs
francoischalifour May 3, 2018
e677531
style: Remove trailing comas
francoischalifour May 3, 2018
e250f84
feat: Change `algoliasearch` import for Rollup
francoischalifour May 3, 2018
90ffec0
style: Fix lint
francoischalifour May 3, 2018
b151eeb
feat: Add SearchClient type
francoischalifour May 3, 2018
f43fd4c
feat: Add function signature for SearchClient type
francoischalifour May 3, 2018
9b15a82
feat: Type SearchClient and SearchParameters
francoischalifour May 3, 2018
42b5480
feat: Use SearchParameters type for `searchParameters` option
francoischalifour May 3, 2018
1c34e6b
feat: Add `createSSRSearchClient` as a `createSSRAlgoliaClient` alter…
francoischalifour May 3, 2018
13ab84b
feat: Export `createSSRSearchClient`
francoischalifour May 3, 2018
512d6c7
fix: Lint
francoischalifour May 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...y-website/src/community-project-boilerplate-docgen/src/widgets/instantsearch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,14 @@ export class AppComponent {}
> A hook that will be called each time a search needs to be done, with the helper as a parameter. It’s your responsibility to call `helper.search()`. This option allows you to avoid doing searches at page load for example.

`createAlgoliaClient?: (algoliasearch: Function, appId: string, apiKey: string) => CustomClient`
> _Deprecated in favor of `searchClient`._
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not want to deprecate this yet, it is still used for the server side rendering strategy:

import {
  createSSRAlgoliaClient,
  parseServerRequest
} from "angular-instantsearch";

[...]

constructor(
  private httpClient: HttpClient,
  private transferState: TransferState,
  private injector: Injector,
  @Inject(PLATFORM_ID) private platformId: Object
) {
  const req = isPlatformServer(this.platformId)
    ? this.injector.get("request")
    : undefined;

  const searchParameters = parseServerRequest(req);

  this.instantSearchConfig = {
    searchParameters,
    appId: "latency",
    apiKey: "6be0576ff61c053d5f9a3225e2a90f76",
    indexName: "ikea",
    urlSync: true,
    createAlgoliaClient: createSSRAlgoliaClient({
      makeStateKey,
      HttpHeaders,
      transferState: this.transferState,
      httpClient: this.httpClient
    })
  };
}

If we want to get rid of createAlgoliaClient we have to support server side rendering as well with the new method.

I can help for this 👍

Copy link
Member Author

@francoischalifour francoischalifour May 3, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added createSSRSearchClient() and deprecated createSSRAlgoliaClient(). Hope this is how you envisioned it!

> Allows you to provide your own algolia client instead of the one instantiated internally.
> Useful in situations where you need to setup complex mechanism on the client or if you need to share it easily.
> We forward `algoliasearch` which is the original algoliasearch module imported inside angular-instantsearch.

`searchClient?: {}`
> The search client to plug to InstantSearch.js.

`searchParameters?: {}`
> Additional parameters to pass to the Algolia API.

Expand Down
56 changes: 56 additions & 0 deletions examples/dev-novel/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { enableProdMode } from "@angular/core";
import { start, storiesOf } from "dev-novel";
import * as algoliasearch from "algoliasearch";

import { wrapWithHits } from "./wrap-with-hits";
import { MenuSelect } from "./custom-widgets";
Expand Down Expand Up @@ -33,6 +34,61 @@ storiesOf("InstantSearch").add(
})
);

storiesOf("InstantSearch").add(
"with algoliasearch search client",
wrapWithHits({
template: "",
searchClient: algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76")
})
);

storiesOf("InstantSearch").add(
"with custom search client",
wrapWithHits({
template: "",
searchClient: {
search(requests) {
return Promise.resolve({
results: [
{
hits: [
{
objectID: "1",
image:
"https://cdn-demo.algolia.com/bestbuy-0118/5477500_sb.jpg",
price: "99.99",
rating: 4,
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nunc lacus, vestibulum non rutrum a, dapibus interdum magna. Quisque semper orci erat, id placerat nunc convallis at. Praesent commodo, elit non fermentum blandit, augue dolor cursus metus, eu auctor leo erat sit amet ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.",
_highlightResult: {
name: {
value: "Fake Result 1"
}
}
},
{
objectID: "2",
image:
"https://cdn-demo.algolia.com/bestbuy-0118/4397400_sb.jpg",
price: "39.99",
rating: 3,
description:
"Morbi pretium urna et massa maximus maximus. Nunc risus lectus, mattis non malesuada quis, pretium eget ligula. Sed vulputate mauris congue, tempor velit et, pretium felis. Ut ullamcorper et ligula et congue. Nunc consequat massa massa. Etiam eu purus lorem. Ut bibendum nisi nec sapien imperdiet, vel laoreet velit porttitor.",
_highlightResult: {
name: {
value: "Fake Result 2"
}
}
}
]
}
]
});
}
}
})
);

storiesOf("Breadcrumb").add(
"default",
wrapWithHits({
Expand Down
9 changes: 7 additions & 2 deletions examples/dev-novel/wrap-with-hits.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ export function wrapWithHits({
searchParameters = {},
methods = {},
searchFunction,
searchClient,
appDeclarations = []
}: {
template: string;
styles?: string;
searchParameters?: {};
methods?: {};
searchFunction?: (helper: Helper) => void;
searchClient?: {};
appDeclarations?: any[];
}) {
return (container: Element) => {
Expand Down Expand Up @@ -117,9 +119,12 @@ export function wrapWithHits({
})
class AppComponent {
config = {
...(!searchClient && {
appId: "latency",
apiKey: "6be0576ff61c053d5f9a3225e2a90f76"
}),
searchFunction,
apiKey: "6be0576ff61c053d5f9a3225e2a90f76",
appId: "latency",
searchClient,
indexName: "instant_search",
searchParameters: {
hitsPerPage: 3,
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@
"dependencies": {
"@angular/common": "^4.4.5",
"@angular/core": "^4.4.5",
"algoliasearch": "^3.24.7",
"algoliasearch-helper": "^2.23.0",
"algoliasearch": "^3.27.0",
"algoliasearch-helper": "^2.26.0",
"instantsearch.css": "^7.0.0",
"instantsearch.js": "^2.7.0",
"instantsearch.js": "^2.8.0-beta.1",
"lodash-es": "^4.17.4",
"nouislider": "^10.0.0",
"querystring-es3": "^0.2.1"
Expand Down
19 changes: 11 additions & 8 deletions src/instantsearch/instantsearch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ import {
} from "@angular/core";
import { isPlatformBrowser } from "@angular/common";

import * as algoliasearch from "algoliasearch";
import instantsearch from "instantsearch.js/es";

import { Widget } from "../base-widget";
import { VERSION } from "../version";

export type InstantSearchConfig = {
appId: string;
apiKey: string;
appId?: string;
apiKey?: string;
indexName: string;

numberLocale?: string;
Expand All @@ -28,6 +29,7 @@ export type InstantSearchConfig = {
appId: string,
apiKey: string
) => object;
searchClient?: object;
Copy link
Contributor

@samouss samouss May 3, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of rely on the object type we can create a new type that will better represent what we expect.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It wasn't done for searchParameters though, I was wondering if there was a reason, @iam4x?

Otherwise, I will add a more strict type for searchClient.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, for the SearchParameters it's a bit more tedious because the data structure is way more larger. But we should add the correct types at some point.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

searchParameters are what the Algolia API expect, it's hard to type since it can change at any time without our control.

Here you should create a type and use it 👍

Copy link
Member Author

@francoischalifour francoischalifour May 3, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. I'm working on the type according to the spec.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can import searchParameters from the typing of algoliasearch

searchParameters?: object | void;
urlSync?:
| boolean
Expand Down Expand Up @@ -106,12 +108,13 @@ export class NgAisInstantSearch implements AfterViewInit, OnInit, OnDestroy {
}

// custom algolia client agent
if (!config.createAlgoliaClient) {
config.createAlgoliaClient = (algoliasearch, appId, apiKey) => {
const client = algoliasearch(appId, apiKey);
client.addAlgoliaAgent(`angular-instantsearch ${VERSION}`);
return client;
};
if (!config.searchClient && !config.createAlgoliaClient) {
const client = algoliasearch(config.appId, config.apiKey);
client.addAlgoliaAgent(`angular-instantsearch ${VERSION}`);

config.searchClient = client;
config.appId = undefined;
config.apiKey = undefined;
}

this.instantSearchInstance = instantsearch(config);
Expand Down
56 changes: 20 additions & 36 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,38 +272,18 @@ ajv@^6.1.0:
json-schema-traverse "^0.3.0"
uri-js "^3.0.2"

algoliasearch-helper@2.24.0, algoliasearch-helper@^2.23.0:
version "2.24.0"
resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-2.24.0.tgz#6ebf91683a82799bc4019ee1ad92d0ad0f41167b"
algoliasearch-helper@2.26.0, algoliasearch-helper@^2.26.0:
version "2.26.0"
resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-2.26.0.tgz#cb784b692a5aacf17062493cb0b94f6d60d30d0f"
dependencies:
events "^1.1.0"
lodash "^4.13.1"
qs "^6.2.1"
events "^1.1.1"
lodash "^4.17.5"
qs "^6.5.1"
util "^0.10.3"

algoliasearch@3.25.1:
version "3.25.1"
resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.25.1.tgz#e543108b528e5c89338834473cb8fb082d13d11f"
dependencies:
agentkeepalive "^2.2.0"
debug "^2.6.8"
envify "^4.0.0"
es6-promise "^4.1.0"
events "^1.1.0"
foreach "^2.0.5"
global "^4.3.2"
inherits "^2.0.1"
isarray "^2.0.1"
load-script "^1.0.0"
object-keys "^1.0.11"
querystring-es3 "^0.2.1"
reduce "^1.0.1"
semver "^5.1.0"
tunnel-agent "^0.6.0"

algoliasearch@^3.24.7:
version "3.26.0"
resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.26.0.tgz#5059cfe4b049ae1a1b9b7c25f5dbd3e75db6126a"
algoliasearch@3.27.0, algoliasearch@^3.27.0:
version "3.27.0"
resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.27.0.tgz#675b7f2d186e5785a1553369b15d47b53d4efb31"
dependencies:
agentkeepalive "^2.2.0"
debug "^2.6.8"
Expand Down Expand Up @@ -3000,7 +2980,7 @@ events@1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/events/-/events-1.1.0.tgz#4b389fc200f910742ebff3abb2efe33690f45429"

events@^1.0.0, events@^1.1.0:
events@^1.0.0, events@^1.1.0, events@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"

Expand Down Expand Up @@ -3971,12 +3951,12 @@ instantsearch.css@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/instantsearch.css/-/instantsearch.css-7.0.0.tgz#74fb9aa25ce64c80effc663fe92bc9ec785cc5e3"

instantsearch.js@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-2.7.0.tgz#7b94980f96e48dab67316ace8d4bdd29aee2ec7c"
instantsearch.js@^2.8.0-beta.1:
version "2.8.0-beta.1"
resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-2.8.0-beta.1.tgz#f51cd7a506500cfaef119c7b8dcb1b69b2148c5d"
dependencies:
algoliasearch "3.25.1"
algoliasearch-helper "2.24.0"
algoliasearch "3.27.0"
algoliasearch-helper "2.26.0"
classnames "2.2.5"
events "1.1.0"
hogan.js "3.0.2"
Expand Down Expand Up @@ -4948,6 +4928,10 @@ lodash@4.17.5, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, l
version "4.17.5"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"

lodash@^4.17.5:
version "4.17.10"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"

loglevel@^1.4.1:
version "1.6.1"
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
Expand Down Expand Up @@ -6187,7 +6171,7 @@ q@^1.1.2, q@^1.4.1, q@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"

qs@6.5.1, qs@^6.2.1, qs@^6.4.0, qs@~6.5.1:
qs@6.5.1, qs@^6.4.0, qs@^6.5.1, qs@~6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"

Expand Down