nilsnh/kommunelogo
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

is now able to filter municipalities by text

Browse source
This commit is contained in:
Nils Norman Haukås 2017-07-12 18:35:48 +02:00
parent 1b39668abb
commit 5d82c21877
6 changed files with 76 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -19,7 +19,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Kommunelogoer</title>
</head>
<body>
<noscript>

4
public/manifest.json
View file

@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "Kommunelogoer",
"name": "Kommunelogoer",
"icons": [
{
"src": "favicon.ico",

12
src/App.tsx
View file

@ -6,7 +6,17 @@ import Municipality from './Municipality'
export default () =>
<div>
<Route exact={true} path="/" component={MunicipalityList} />
<Route exact={true} path="/">
<div>
<h1>kommunelogo.nilsnh.no</h1>
<p>
Det er framleis for vanskeleg å finne frem til kommunelogoar. Denne
sida freister å bøte på denne mangelen.
</p>
<p>Ynskjer du å bidra? Les meir her.</p>
<MunicipalityList />
</div>
</Route>
<div>
<Route path="/kommune/:code" component={Municipality} />
</div>

1
src/Municipality.tsx
View file

@ -2,7 +2,6 @@ import * as React from 'react'
import { Link } from 'react-router-dom'
import ssbMunicipalities from './ssb-2017-municipality-data'
// eslint-disable-next-line
export default ({ match }: any) => {
const matchingMunicipality = ssbMunicipalities.filter(
elem => elem.code === Number.parseInt(match.params.code)

71
src/MunicipalityList.tsx
View file

@ -3,13 +3,64 @@ import { Link } from 'react-router-dom'
import ssbMunicipalities from './ssb-2017-municipality-data'
import { SSBMunicipality } from './ssb-2017-municipality-data'
export default () =>
<ul>
{ssbMunicipalities.map((elem: SSBMunicipality) =>
<li key={elem.code}>
<Link to={`/kommune/${elem.code}`}>
{elem.name}
</Link>
</li>
)}
</ul>
const MunicipalityCard: React.SFC<any> = ({ muni }: any) => {
return (
<div>
<Link to={`/kommune/${muni.code}`}>
{muni.name}
</Link>
</div>
)
}
export default class MunicipalityList extends React.Component<any, any> {
constructor() {
super()
this.state = {
filterText: ''
}
}
render() {
// copy array and sort by name
let municipalities = ssbMunicipalities.slice().sort((a, b) => {
if (a.name < b.name) {
return -1
}
if (a.name > b.name) {
return 1
}
return 0
})
if (this.state.filterText) {
municipalities = municipalities.filter(
elem =>
JSON.stringify(elem.name)
.toLowerCase()
.indexOf(this.state.filterText.toLowerCase()) !== -1
)
}
return (
<div>
<label>
Filtrer kommunar:
<input
onChange={e => this.onChangeHandler(e)}
placeholder="Namn, kommunenr e.l."
/>
</label>
<br />
{municipalities.map((elem: SSBMunicipality) =>
<MunicipalityCard key={elem.code} muni={elem} />
)}
</div>
)
}
onChangeHandler(e: React.FormEvent<HTMLInputElement>) {
const input = e.target as HTMLInputElement
this.setState(prevState => ({
filterText: input.value
}))
}
}

2
src/index.css
View file

@ -1,5 +1,5 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-family: serif;
}