diff --git a/package-lock.json b/package-lock.json index b42d552..fd691c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10219,6 +10219,11 @@ "xtend": "^4.0.0" } }, + "string-similarity": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/string-similarity/-/string-similarity-3.0.0.tgz", + "integrity": "sha512-7kS7LyTp56OqOI2BDWQNVnLX/rCxIQn+/5M0op1WV6P8Xx6TZNdajpuqQdiJ7Xx+p1C5CsWMvdiBp9ApMhxzEQ==" + }, "string-width": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", diff --git a/package.json b/package.json index f0458e9..b3d4a13 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "react-dom": "^16.10.2", "react-helmet": "^5.2.1", "rebass": "^4.0.6", + "string-similarity": "^3.0.0", "theme-ui": "^0.2.44" } } diff --git a/src/components/LocalidadeList.jsx b/src/components/LocalidadeList.jsx index d882042..7a9a024 100644 --- a/src/components/LocalidadeList.jsx +++ b/src/components/LocalidadeList.jsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' import { Box, Heading, Flex, Link, Text } from 'rebass' -import { Label, Select } from '@rebass/forms' +import { Label, Select, Input } from '@rebass/forms' +import stringSimilarity from 'string-similarity'; import localidadesUnfiltered from '../data/localidades.json' import Localidade from './LocalidadeListItem' @@ -25,14 +26,27 @@ const estados = [...new Set(localidades.map(l => l.estado))] const LocalidadeList = () => { const [estado, setEstado] = useState('Todos') + const [busca, setBusca] = useState('') - const handleChange = event => { + const handleStateChange = event => { setEstado(event.target.value) } - const locFiltrado = localidades.filter( - l => estado === 'Todos' || l.estado === estado, - ) + const handleSearchChange = event => { + setBusca(event.target.value) + } + + const locFiltrado = localidades.filter(l => { + return ( + (estado === 'Todos' || l.estado === estado) && + (busca + ? stringSimilarity.compareTwoStrings( + busca.toLocaleLowerCase(), + l.nome.toLocaleLowerCase(), + ) > 0.4 + : true) + ) + }) return ( <> @@ -47,13 +61,13 @@ const LocalidadeList = () => { - + + + + + + {locFiltrado.map(l => (