import Head from 'next/head' import { NextPage } from 'next' import Link from 'next/link' import { DataSearch, Button, Region, FlexList, PageLayout } from 'components' import { Country } from 'typings/api' import { useFetch, dateFormat, getActiveCase, metaGenerator, API_BASEURL } from 'utils' const meta = metaGenerator({ title: 'Country and Region | COVID-19 Visualized', description: 'COVID-19 cases in world country and region', keywords: 'covid19, corona virus, website, china, covid19 world, covid-19, corona, corona region, corona spread' }) const Page: NextPage = () => { const countries = useFetch<Country[]>(API_BASEURL + 'confirmed')( data => ( data.sort(({ countryRegion: prev }, { countryRegion: next }) => (next > prev) ? -1 : 1) ) ) return ( <> <Head> <title>Country and Region | COVID-19 Visualized</title> {meta} </Head> <div className="text-center my-12"> <h1 className="my-2">Country and Region</h1> </div> <div className="divider-line mb-32" /> <div className="btn-link mb-24"> <Link href="/"> <Button block color="secondary" text="< Back to Home" /> </Link> </div> <DataSearch<Country> data={countries.data} loading={countries.loading} searchPlaceholder="Search country state or province... (eg: indonesia)" searchFilter={(keyword, item) => { const region = item.countryRegion.toLowerCase() const province = item.provinceState?.toLowerCase() return region.includes(keyword) || (province ? province.includes(keyword) : false) }} > {(data, keyword) => data.length ? ( <FlexList<Country> data={data} wrapperClass="my-12" itemClass="my-12"> {country => ( <Region chart={{ confirmed: country.confirmed, recovered: country.recovered, deaths: country.deaths }} header={ country.provinceState ? `${country.provinceState}, ${country.countryRegion}` : country.countryRegion } footer={`Last updated at: ${dateFormat(country.lastUpdate, true)}`} > <p>Total Confirmed: <span className="font is-weight-bold color is-txt-warning">{country.confirmed}</span></p> <p className="mt-8">Active: <span className="font is-weight-bold color is-txt-warning">{getActiveCase(country)}</span></p> <p>Recovered: <span className="font is-weight-bold color is-txt-success">{country.recovered}</span></p> <p>Deaths: <span className="font is-weight-bold color is-txt-danger">{country.deaths}</span></p> </Region> )} </FlexList> ) : ( <h3 className="text-center my-24">{ keyword.length ? `No matching country or province "${keyword}" found.` : 'Please type the name of the country that you want to search.' }</h3> ) } </DataSearch> </> ) } export default PageLayout(Page)