- {entries.map((entry) => (
-
-
) : null}
-
-
- {entry.illustration ? (
-
-
- 
+}: Props) => {
+ const [search, setSearch] = useState('');
+ const [searchIndex, setSearchIndex] = useState();
+ const [searchResults, setSearchResults] = useState<
+ { id: string; title: string; description: string }[]
+ >([]);
+ const { data, error, isLoading } = useSWR(
+ // Only load the search data when searching 🤷
+ search ? '/conferencesSearchIndex.json' : null,
+ fetcher
+ );
+
+ useEffect(() => {
+ if (data) {
+ setSearchIndex(lunr.Index.load(data.index));
+ } else {
+ setSearchIndex(undefined);
+ }
+ }, [data]);
+
+ useEffect(() => {
+ if (searchIndex && search) {
+ setSearchResults(
+ (
+ searchIndex.search(search) as {
+ ref: string;
+ score: number;
+ metadata: Record;
+ }[]
+ ).map((result) => ({
+ result,
+ id: result.ref,
+ ...data.metadata[result.ref],
+ }))
+ );
+ } else {
+ setSearchResults([]);
+ }
+ }, [data, searchIndex, search]);
+
+ return (
+
+
+ Résumés des rencontres
+
+ Découvrez le résumé de chacune de nos rencontres ChtiJS.
+
+ {page === 1 ? (
+
+
+
+ ) : null}
+ {search ? (
+ error ? (
+ Impossible de charger l’index de recherche.
+ ) : isLoading ? (
+ Chargement de l’index de recherche...
+ ) : searchResults.length ? (
+
+ {searchResults.length} résultat
+ {searchResults.length > 1 ? 's' : ''} pour la recherche “{search}
+ ”.
+
+ ) : (
+ Aucun résultat pour la recherche “{search}”.
+ )
+ ) : null}
+
- ))}
-
+ {(
+ (search ? searchResults : entries) as Pick<
+ Entry,
+ 'id' | 'title' | 'description' | 'illustration'
+ >[]
+ ).map((entry) => (
+
+ {!search ? (
+
+ {entry.illustration ? (
+
+
+
+
+
+ ) : null}
+
+
+ {entry.title}
+
+
+ {entry.description}
- ) : null}
-
+ Lire la suite
+
+
+ ))}
+