Zoek door je Lumen website met ReactJs
Het Lumen platform biedt de mogelijkheid om te zoeken in website.
Om de simplesearch te vinden ga je naar jou Lumen website `/simplesearch/:trefwoord`.
We nemen de [about] pagina van [FloraXchange] als voorbeeld.
Om de simplesearch van FX te vinden gaan we naar `http://about.floraxchange.nl/simplesearch/flora`, nu krijgen we json data terug op basis van een trefwoord.
Dit is natuurlijk niet echt mooi en ook niet praktisch voor de gebruikers van jouw website.
We kunnen gewoon Ajax hier voor gebruiken maar kom op het is bijna 2017, iedereen gebruikt Angular/React of Vuejs tegenwoordig.
Voor de LumenSearch heb gaan we Reactjs gebruiken omdat ik de LumenSearch Component modular wil opzetten, ik wil dit namelijk in veel website's gaan hergebruiken. En doormiddel van Reactjs kunnen we dit heel makkelijk doen.
Setting up Reactjs
Naast React gaan we ook andere modules gebruiken.
- Redux (voor de state van de app)
- React-Redux
- Redux-thunk
- Webpack
- Flow (static typec checker)
Ik neem aan dat je verstand hebt van Nodejs en Reactjs, dit is geen beginner guide hoe je React moet gebruiken.
Lets see some code c'mon!
We hebben een input nodig zodat de gebruiker kan zoeken op trefwoorden.
SearchInput component heeft als taak om input van de gebruiker te krijgen. Deze wordt opgeslagen in de state van de hogere container.
We zien dat de er een aantal parameter door geven worden de `handelSubmit` for wanneer een gebruker een enter of op de knop drukt.
We hebben ook een `handleChange` deze functie zorgt ervoor dat wanneer de gebruiker begint met typen in de input dat de waarde hiervan wordt opgeslagen in de state. De `searchValue` is er om te zorgen dat we een beginwaarde krijgen van de container.
const SearchInput = ({ handleSubmit, handleChange, searchValue}): React$Element =>
<div className="cnr-lumen-search input">
<form onSubmit={handleSubmit}>
<input
className="form-control"
type="text"
name="searchValue"
placeholder={`Zoek binnen ${window.location.hostname}`}
value={searchValue}
onChange={handleChange} />
<button onClick={handleSubmit}>Zoeken</button>
</form>
</div>
Om de zoekresultaten te tonen gebruiken we de SearchList en het SearchItem, dit zijn een goede voorbeelden van een UI Components.
De SearchList laat alleen een lijst zien van SearchItems en een SearchItem laat de informatie zien van elke resulaat.
const SearchList = ({results}): React$Element =>
<ul class="cnr-lumen-search list">
{
results.map( (result): React$Element => {
return <SearchItem key={result.Title} result={result}/>
})
}
</ul>
const SearchItem = ({result}): React$Element =>
<li>
<span>{result.Title}</span>
<p>{result.Description}</p>
<a href={result.Url}>Lees meer</a>
</li>
Dit zijn allemaal domme components. Met dom bedoel ik dat er geen logica inzit, deze component zijn ook niet bewust van de state van de applicatie.
Deze domme component zitten in één slimme component de container, hier komt de data in de applicatie en geven wij data/functies door aan de domme/UI components.
@connect( (state): SearchState => {
return {
results: state.Search.data,
error: state.Search.error,
loading: state.Search.loading,
status: state.Search.status
}
})
class SearchContainer extends Component<SearchProps, SearchState> {
// [...constructor en functies zoals handleChange en handleSubmit]
render(): React$Element<any> {
let { results, loading, error } = this.props;
return (
<div className="wpr-lumen-search">
<SearchInput
{...this.props}
searchValue={this.state.searchValue}
handleSubmit={this.handleSubmit}
handleChange={this.handleChange}
/>
{
loading ?
<span className="text-center">
<i className="fa fa-refresh fa-6 fa-spin" aria-hidden="true"></i>
</span>
:
}
{
(results.length == 0 && !loading && status != 'idle') ?
<SearchMessage
code="Info"
level="info"
message="Geen zoek resultaten gevonden!"
/>
}
{
results ?
<SearchList results={results} />
:
<SearchMessage
code={error.status}
message={error.statusText}
level={(error.level != '') ? 'danger' : ''}
/>
}
</div>
)
}
}
Dit zijn de grote onderdelen die nodig zijn om te kunnen zoeken in Lumen met Reactjs, natuurlijk mis je hier de actions en de reducer die onderdeel uitmaken van Redux.
Dit laat ik aan jou over, probeer zelf de actions uit te zoeken die hier voornodig zijn.
ProTip: Er zijn veel starter en seed projects op github voor Reactjs met webpack. [kijk maar]
