-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(headless): add samples for automatic facet controllers (#3054)
- Loading branch information
aprudhomme-coveo
authored
Jul 28, 2023
1 parent
1958cc6
commit 6649e88
Showing
6 changed files
with
212 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
...s/headless-react/src/components/automatic-facet-builder/automatic-facet-builder.class.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { | ||
| buildAutomaticFacetBuilder, | ||
| AutomaticFacetBuilderProps, | ||
| AutomaticFacetBuilderState, | ||
| AutomaticFacetBuilder as HeadlessAutomaticFacetBuilder, | ||
| Unsubscribe, | ||
| } from '@coveo/headless'; | ||
| import {Component, ContextType} from 'react'; | ||
| import {AppContext} from '../../context/engine'; | ||
| import {AutomaticFacet} from '../automatic-facet/automatic-facet.class'; | ||
|
|
||
| export class AutomaticFacetBuilder extends Component< | ||
| AutomaticFacetBuilderProps, | ||
| AutomaticFacetBuilderState | ||
| > { | ||
| static contextType = AppContext; | ||
| context!: ContextType<typeof AppContext>; | ||
|
|
||
| private controller!: HeadlessAutomaticFacetBuilder; | ||
| private unsubscribe: Unsubscribe = () => {}; | ||
|
|
||
| componentDidMount() { | ||
| this.controller = buildAutomaticFacetBuilder( | ||
| this.context.engine!, | ||
| this.props | ||
| ); | ||
| this.updateState(); | ||
|
|
||
| this.unsubscribe = this.controller.subscribe(() => this.updateState()); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.unsubscribe(); | ||
| } | ||
|
|
||
| private updateState() { | ||
| this.setState(this.controller.state); | ||
| } | ||
|
|
||
| render() { | ||
| if (!this.state) { | ||
| return null; | ||
| } | ||
| const automaticFacets = this.state.automaticFacets.map((facet) => { | ||
| return ( | ||
| <AutomaticFacet | ||
| key={facet.state.field} | ||
| controller={facet} | ||
| ></AutomaticFacet> | ||
| ); | ||
| }); | ||
| return automaticFacets; | ||
| } | ||
| } |
37 changes: 37 additions & 0 deletions
37
...ples/headless-react/src/components/automatic-facet-builder/automatic-facet-builder.fn.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import {AutomaticFacetBuilder as HeadlessAutomaticFacetBuilder} from '@coveo/headless'; | ||
| import {FunctionComponent, useEffect, useState} from 'react'; | ||
| import {AutomaticFacet as AutomaticFacetFn} from '../automatic-facet/automatic-facet.fn'; | ||
|
|
||
| interface AutomaticFacetBuilderProps { | ||
| controller: HeadlessAutomaticFacetBuilder; | ||
| } | ||
|
|
||
| export const AutomaticFacetBuilder: FunctionComponent< | ||
| AutomaticFacetBuilderProps | ||
| > = (props) => { | ||
| const {controller} = props; | ||
| const [state, setState] = useState(controller.state); | ||
|
|
||
| useEffect(() => controller.subscribe(() => setState(controller.state)), []); | ||
|
|
||
| const automaticFacets = state.automaticFacets.map((facet) => { | ||
| return ( | ||
| <AutomaticFacetFn | ||
| key={facet.state.field} | ||
| controller={facet} | ||
| ></AutomaticFacetFn> | ||
| ); | ||
| }); | ||
| return <div>{automaticFacets}</div>; | ||
| }; | ||
|
|
||
| // usage | ||
|
|
||
| /** | ||
| * ```tsx | ||
| * const props: AutomaticFacetBuilderProps = {desiredCount: 5} | ||
| * const controller = buildAutomaticFacetBuilder(engine, props); | ||
| * | ||
| * <AutomaticFacetBuilder controller={controller} />; | ||
| * ``` | ||
| */ |
52 changes: 52 additions & 0 deletions
52
packages/samples/headless-react/src/components/automatic-facet/automatic-facet.class.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { | ||
| AutomaticFacetState, | ||
| AutomaticFacet as HeadlessAutomaticFacet, | ||
| Unsubscribe, | ||
| } from '@coveo/headless'; | ||
| import {Component} from 'react'; | ||
|
|
||
| interface AutomaticFacetProps { | ||
| controller: HeadlessAutomaticFacet; | ||
| } | ||
| export class AutomaticFacet extends Component< | ||
| AutomaticFacetProps, | ||
| AutomaticFacetState | ||
| > { | ||
| private controller!: HeadlessAutomaticFacet; | ||
| private unsubscribe: Unsubscribe = () => {}; | ||
|
|
||
| componentDidMount() { | ||
| this.controller = this.props.controller; | ||
| this.updateState(); | ||
|
|
||
| this.unsubscribe = this.controller.subscribe(() => this.updateState()); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.unsubscribe(); | ||
| } | ||
|
|
||
| private updateState() { | ||
| this.setState(this.controller.state); | ||
| } | ||
|
|
||
| render() { | ||
| if (!this.state) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <ul> | ||
| {this.state.values.map((value) => ( | ||
| <li key={value.value}> | ||
| <input | ||
| type="checkbox" | ||
| checked={value.state === 'selected'} | ||
| onChange={() => this.controller.toggleSelect(value)} | ||
| /> | ||
| {value.value} ({value.numberOfResults} results) | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| } | ||
| } |
30 changes: 30 additions & 0 deletions
30
packages/samples/headless-react/src/components/automatic-facet/automatic-facet.fn.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import {AutomaticFacet as HeadlessAutomaticFacet} from '@coveo/headless'; | ||
| import {FunctionComponent, useEffect, useState} from 'react'; | ||
|
|
||
| interface AutomaticFacetProps { | ||
| controller: HeadlessAutomaticFacet; | ||
| } | ||
|
|
||
| export const AutomaticFacet: FunctionComponent<AutomaticFacetProps> = ( | ||
| props | ||
| ) => { | ||
| const {controller} = props; | ||
| const [state, setState] = useState(controller.state); | ||
|
|
||
| useEffect(() => controller.subscribe(() => setState(controller.state)), []); | ||
|
|
||
| return ( | ||
| <ul> | ||
| {state.values.map((value) => ( | ||
| <li key={value.value}> | ||
| <input | ||
| type="checkbox" | ||
| checked={value.state === 'selected'} | ||
| onChange={() => controller.toggleSelect(value)} | ||
| /> | ||
| {value.value} ({value.numberOfResults} results) | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters