1782f23b84
* [learn-example][m] - code section for the tutorial part 3 * [learn-example][sm] - dont panic when no markdown.db file found * [docs][m] - creating an inedx page
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { Index } from 'flexsearch';
|
|
import { useState } from 'react';
|
|
import DebouncedInput from './DebouncedInput';
|
|
|
|
export default function Catalog({ datasets }: { datasets: any[] }) {
|
|
const [indexFilter, setIndexFilter] = useState('');
|
|
const index = new Index({ tokenize: "full"});
|
|
datasets.forEach((dataset) =>
|
|
index.add(
|
|
dataset._id,
|
|
Object.entries(dataset.metadata).reduce(
|
|
(acc, curr) => acc + ' ' + curr.toString(),
|
|
''
|
|
) + ' ' + dataset.url_path
|
|
)
|
|
);
|
|
return (
|
|
<>
|
|
<DebouncedInput
|
|
value={indexFilter ?? ''}
|
|
onChange={(value) => setIndexFilter(String(value))}
|
|
className="p-2 text-sm shadow border border-block"
|
|
placeholder="Search all datasets..."
|
|
/>
|
|
<ul>
|
|
{datasets
|
|
.filter((dataset) =>
|
|
indexFilter !== ''
|
|
? index.search(indexFilter).includes(dataset._id)
|
|
: true
|
|
)
|
|
.map((dataset) => (
|
|
<li key={dataset.id}>
|
|
<a href={dataset.url_path}>{dataset.metadata.title ? dataset.metadata.title : dataset.url_path}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|