components#Button TypeScript Examples

function WebShare() {
  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <Button leftIcon={<FaShareAlt />} onClick={run}>
      Share
    </Button>
  );
}

BluetoothDisabledView = () => {
  const [i18n] = useI18n();
  const toSettings = useCallback(() => {
    Linking.openSettings();
  }, []);

  return (
    <BaseHomeView>
      <Box marginBottom="l">
        <Icon name="icon-bluetooth-disabled" size={44} />
      </Box>
      <Text textAlign="center" variant="bodyTitle" color="bodyText" marginBottom="l" accessibilityRole="header">
        {i18n.translate('Home.BluetoothDisabled')}
      </Text>
      <Text variant="bodyText" color="bodyText" textAlign="center">
        {i18n.translate('Home.EnableBluetoothCTA')}
      </Text>
      <LastCheckedDisplay />
      <Box alignSelf="stretch" marginTop="l">
        <Button text={i18n.translate('Home.TurnOnBluetooth')} variant="bigFlat" onPress={toSettings} />
      </Box>
    </BaseHomeView>
  );
}

DiagnosedShareView = () => {
  const [i18n] = useI18n();
  const navigation = useNavigation();
  const toSymptomTracker = useCallback(() => {
    Linking.openURL(i18n.translate('Home.SymptomTrackerUrl')).catch(error => captureException('OpenUrl', error));
  }, [i18n]);
  const toDataShare = useCallback(() => navigation.navigate('DataSharing'), [navigation]);

  return (
    <BaseHomeView>
      <Text textAlign="center" variant="bodyTitle" color="bodyText" marginBottom="l" accessibilityRole="header">
        {i18n.translate('Home.DailyShare')}
      </Text>
      <Text variant="bodyText" color="bodyText" textAlign="center" marginBottom="l">
        {i18n.translate('Home.DailyShareDetailed')}
      </Text>
      <Box alignSelf="stretch" marginBottom="s">
        <Button text={i18n.translate('Home.ShareRandomIDsCTA')} variant="bigFlat" onPress={toDataShare} />
      </Box>
      <Box alignSelf="stretch">
        <Button
          text={i18n.translate('Home.SignalDataSharedCTA')}
          variant="bigHollow"
          color="bodyText"
          externalLink
          onPress={toSymptomTracker}
        />
      </Box>
    </BaseHomeView>
  );
}

DiagnosedView = () => {
  const [i18n] = useI18n();
  const [exposureStatus] = useExposureStatus();
  const onAction = useCallback(() => {
    Linking.openURL(i18n.translate('Home.SymptomTrackerUrl')).catch(error => captureException('OpenUrl', error));
  }, [i18n]);

  if (exposureStatus.type !== 'diagnosed') return null;

  const daysDiff = daysBetween(new Date(), new Date(exposureStatus.cycleEndsAt));

  return (
    <BaseHomeView>
      <Text textAlign="center" variant="bodyTitle" color="bodyText" marginBottom="l" accessibilityRole="header">
        {i18n.translate('Home.SignalDataShared')}
        {/* No exposure detected */}
      </Text>
      <Text variant="bodyText" color="bodyText" textAlign="center" marginBottom="l">
        {i18n.translate(pluralizeKey('Home.SignalDataSharedDetailed', daysDiff), {number: daysDiff})}
      </Text>
      <Box alignSelf="stretch">
        <Button text={i18n.translate('Home.SignalDataSharedCTA')} variant="bigFlat" externalLink onPress={onAction} />
      </Box>
    </BaseHomeView>
  );
}

ExposureNotificationsDisabledView = () => {
  const [i18n] = useI18n();
  const startExposureNotificationService = useStartExposureNotificationService();

  const enableExposureNotifications = useCallback(() => {
    startExposureNotificationService();
  }, [startExposureNotificationService]);

  return (
    <BaseHomeView>
      <Box marginBottom="l">
        <Icon name="icon-exposure-notifications-disabled" size={44} />
      </Box>
      <Text textAlign="center" variant="bodyTitle" color="bodyText" marginBottom="l" accessibilityRole="header">
        {i18n.translate('Home.ExposureNotificationsDisabled')}
      </Text>
      <Text variant="bodyText" color="bodyText" textAlign="center">
        {i18n.translate('Home.ExposureNotificationsDisabledDetailed')}
      </Text>
      <LastCheckedDisplay />
      <Box alignSelf="stretch" marginTop="l">
        <Button
          text={i18n.translate('Home.EnableExposureNotificationsCTA')}
          variant="bigFlat"
          onPress={enableExposureNotifications}
        />
      </Box>
    </BaseHomeView>
  );
}

ExposureView = () => {
  const [i18n] = useI18n();
  const onAction = useCallback(() => {
    Linking.openURL(i18n.translate('Home.GuidanceUrl')).catch(error => captureException('OpenUrl', error));
  }, [i18n]);
  return (
    <BaseHomeView>
      <Text textAlign="center" variant="bodyTitle" color="bodyText" marginBottom="l" accessibilityRole="header">
        {i18n.translate('Home.ExposureDetected')}
        {/* No exposure detected */}
      </Text>
      <Text variant="bodyText" color="bodyText" textAlign="center">
        {i18n.translate('Home.ExposureDetectedDetailed')}
      </Text>
      <LastCheckedDisplay />
      <Box alignSelf="stretch" marginTop="l">
        <Button text={i18n.translate('Home.SeeGuidance')} variant="bigFlat" externalLink onPress={onAction} />
      </Box>
    </BaseHomeView>
  );
}

function Vibration() {
  const [status, setStatus] = React.useState<'start' | 'stop'>('stop');

  let toggle = () => setStatus(prev => (prev === 'stop' ? 'start' : 'stop'));

  React.useEffect(() => {
    run(status);
  }, [status]);

  let isVibrating = status === 'start';

  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <Button
      leftIcon={isVibrating ? <MdVibration /> : <MdStayPrimaryPortrait />}
      onClick={toggle}
    >
      {`${isVibrating ? 'Stop' : 'Start'} vibration`}
    </Button>
  );
}

function FullScreen() {
  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <div
      className="
        tw-flex
        tw-flex-col
        tw-items-center
      "
    >
      <Button id="js-picture--button" onClick={run}>
        Enter Picture-in-Picture mode
      </Button>

      <video
        id="js-picture--video"
        className="tw-w-full tw-mt-4 tw-rounded-lg"
        src="https://res.cloudinary.com/atapas/video/upload/v1620052733/demos/earth_rotating_g1xv0f.mp4"
        muted
        autoPlay
        loop
      />
    </div>
  );
}

ModalWrapper = ({labelDict, children, selectedDate, buttonText}: ModalWrapperProps) => {
  const {data, toggleModal} = useContext(FormContext);
  return (
    <>
      <Modal animationType="slide" transparent visible={data.modalVisible}>
        <Box style={styles.centeredView}>
          <Box style={styles.iosPicker}>
            {children}
            <Button
              variant="text"
              onPress={() => {
                toggleModal(false);
              }}
              text={buttonText}
            />
          </Box>
        </Box>
      </Modal>
      <ButtonSelect
        variant="buttonSelect"
        iconName="icon-down-arrow"
        onPress={() => {
          toggleModal(true);
        }}
        text={`${labelDict[selectedDate]}`}
      />
    </>
  );
}

Page: NextPage = () => {
    const { data } = useFetch<Country[]>(API_BASEURL + 'confirmed')()

    return (
        <>
            <Summary />
            
            <div className="btn-link mb-24">
                <Link href="/region">
                    <Button block color="primary" text="See Country and Region Cases" />
                </Link>
                <Link href="/indonesia">
                    <Button className="mt-8" block color="danger" text="See Indonesia Cases" />
                </Link>
            </div>

            <h2 className="text-center mt-32 mb-12">World Visualization</h2>
            <Visualization
                id="world-visualization"
                data={data}
                visualize={visualize.world}
                legends={worldLegends.map(({ color, value }) => (
                    <div key={color} className="legends-item font is-size-small">
                        <div className="legends-detail">{value === 0 ? `No case infected` : `${value} or more cases infected`}</div>
                        <div className="legends-color mx-4" style={{ backgroundColor: color }} />
                    </div>
                ))}
            />
            
            <Daily />
        </>
    )
}

function FullScreen() {
  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <div
      className="
        tw-flex
        tw-flex-col
        tw-items-center md:tw-items-start
      "
    >
      <div id="js-api--fullscreen" className=" tw-mb-4">
        <img
          src="https://res.cloudinary.com/atapas/image/upload/v1602226996/artists/Rock_oz3kq1.png"
          alt="The Rock"
          width="200px"
          height="200px"
        />
      </div>

      <Button leftIcon={<FaExpand />} onClick={run}>
        Go Fullscreen
      </Button>
    </div>
  );
}

FormDiagnosedView = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const onNext = useCallback(() => navigation.navigate('Step2'), [navigation]);
  return (
    <BaseDataSharingView>
      <Box marginHorizontal="m">
        <StepXofY currentStep={1} />
        <Text
          variant="bodyTitle"
          marginBottom="l"
          color="overlayBodyText"
          accessibilityRole="header"
          accessibilityAutoFocus
        >
          {i18n.translate('DataUpload.OtkDiagnosedView.Title')}
        </Text>
        <Text color="overlayBodyText" marginBottom="l">
          {i18n.translate('DataUpload.OtkDiagnosedView.Body')}
        </Text>
        <Box flex={1} marginVertical="m">
          <Button variant="thinFlat" text={i18n.translate('DataUpload.OtkDiagnosedView.CTA')} onPress={onNext} />
        </Box>
      </Box>
    </BaseDataSharingView>
  );
}

Toolbar = ({navText, onIconClicked, showBackButton}: ToolbarProps) => {
  const navigation = useNavigation();
  const i18n = useI18n();
  const onBack = useCallback(() => navigation.goBack(), [navigation]);
  return (
    <Box flexDirection="row" alignItems="center" minHeight={56}>
      {showBackButton ? (
        <Box>
          <Button backButton text={i18n.translate('DataUpload.Back')} variant="text" onPress={onBack} />
        </Box>
      ) : null}
      <Box style={styles.right}>
        <Button testID="toolbarCloseButton" text={navText} variant="text" onPress={onIconClicked} />
      </Box>
    </Box>
  );
}

Page: NextPage = () => {
    const { data, loading } = useFetch<IDFormat<IDCases[]>>(API_INDONESIA + 'kasus/old')()

    return (
        <>
            <Head>
                <title>Indonesia Case Details | COVID-19 Visualized</title>
                {meta}
            </Head>

            <div className="text-center my-12">
                <h1 className="my-2">Indonesia Detail Cases</h1>
                <h6 className="color is-txt-warning">{data?.warning}</h6>
            </div>

            <div className="divider-line" />

            <div className="btn-link my-24">
                <Link href="/indonesia">
                    <Button block color="secondary" text="< Back to Indonesia Cases" />
                </Link>
            </div>
            
            <ScrollableList<IDCases> title="Data Cases" data={data?.data} loading={loading}>
                {data => (
                    <Card
                        className="text-center"
                        header={<h5 className="text-center">(#{data.no}) {data.kota ? `${data.kota}, ${data.provinsi}` : data.provinsi}</h5>}
                        footer={
                            <span className="font is-size-small">
                                {data.keterangan || 'Tidak ada keterangan'}; {data.dirawatdi ? `(Sedang dirawat di ${data.dirawatdi}); ` : ''}{data.kondisiKesehatan ? `Kodisi: ${data.kondisiKesehatan};` : ''}
                            </span>
                        }
                    >
                        <p>Usia: <span className="font is-weight-bold">{data.usia ? `${data.usia} tahun` : 'Tidak diketahui'}</span></p>
                        <p>Jenis Kelamin: <span className="font is-weight-bold">{data.jk === 'P'
                            ? 'Wanita'
                            : data.jk === 'L'
                                ? 'Pria'
                                : 'Tidak diketahui'
                        }</span></p>
                        <p>Status: <span className={`font color is-weight-bold is-txt-${data.status === 'Aktif' ? 'warning' : data.status === 'Sembuh' ? 'success' : data.status === 'Meninggal' ? 'danger' : ''}`}>{data.status || 'Tidak diketahui'}</span></p>
                        <p>Kluster: <span className="font is-weight-bold ">{data.kluster || 'Tidak diketahui'}</span></p>
                        <p className="mt-8">Positif: <span className="font is-weight-bold">{data.positif ? dateFormat(+data.positif, false, 'id-ID') : 'Tidak diketahui'}</span></p>
                        <p>Mulai Gejala: <span className="font is-weight-bold">{data.mulaiGejala ? dateFormat(+data.mulaiGejala, false, 'id-ID') : 'Tidak diketahui'}</span></p>
                        <p>Mulai Di Isolasi: <span className="font is-weight-bold">{data.mulaiDiisolasi ? dateFormat(+data.mulaiDiisolasi, false, 'id-ID') : 'Tidak diketahui'}</span></p>
                    </Card>
                )}
            </ScrollableList>
        </>
    )
}

function WebSpeech() {
  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <div
      className="
        tw-flex
        tw-flex-col
        tw-items-start
      "
    >
      <div className="tw-space-x-4">
        <Button leftIcon={<FaVoicemail />} onClick={run()?.onStartListen}>
          Start listening
        </Button>
        <Button leftIcon={<FaStopCircle />} onClick={run()?.onStopListen}>
          Stop
        </Button>
      </div>

      <div
        className="
          tw-flex
          tw-flex-col
          tw-w-full
          tw-mt-6
          tw-overflow-hidden
          tw-border
        tw-border-gray-200
          tw-rounded-lg
        "
      >
        <div
          className="
            tw-p-4
            tw-prose
            tw-text-gray-600
          "
        >
          <span id="js-speech--interim" className="tw-font-bold" />
          <span id="js-speech--final" />
        </div>

        <span
          className="
            tw-p-4
            tw-border-t
            tw-border-gray-200
            tw-font-semibold
            tw-text-gray-600
          "
        >
          Transcript
        </span>
      </div>
    </div>
  );
}

Step0Screen = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const onNext = useCallback(() => navigation.navigate('FormView'), [navigation]);

  return (
    <BaseDataSharingView showBackButton={false}>
      <ScrollView style={styles.flex}>
        <Box paddingHorizontal="m">
          <Text
            color="lightBlack"
            variant="bodyTitle2"
            marginBottom="l"
            accessibilityRole="header"
            accessibilityAutoFocus
          >
            {i18n.translate('DataUpload.Step0.Title')}
          </Text>

          <Text marginBottom="l">
            <Text fontWeight="normal" color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.1a')}
            </Text>
            <Text color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.1b')}
            </Text>
          </Text>
          <Text marginBottom="l">
            <Text fontWeight="normal" color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.2a')}
            </Text>
            <Text color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.2b')}
            </Text>
          </Text>
          <Text marginBottom="l">
            <Text fontWeight="normal" color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.3a')}
            </Text>
            <Text color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.3b')}
            </Text>
          </Text>
          <Text marginBottom="l">
            <Text fontWeight="normal" color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.Body1')}
            </Text>
            <Text color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.Body2')}
            </Text>
          </Text>

          <Box marginTop="m">
            <Button variant="thinFlat" text={i18n.translate('DataUpload.Step0.CTA')} onPress={onNext} />
          </Box>

          <Box marginTop="m" marginBottom="m">
            <ButtonSingleLine
              text={i18n.translate('DataUpload.Step0.NoCode')}
              variant="bigFlatDarkGrey"
              // color="textColorDark"
              internalLink
              onPress={onNext}
            />
          </Box>
        </Box>
      </ScrollView>
    </BaseDataSharingView>
  );
}

LandingScreen = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const {setLocale} = useStorage();
  const toggle = useCallback(
    (newLocale: 'en' | 'mn') => () => {
      setLocale(newLocale);
      navigation.reset({
        index: -1,
        routes: [{name: 'OnboardingNavigator'}],
      });
    },
    [navigation, setLocale],
  );
  return (
    <SafeAreaView style={styles.flex}>
      <Box flex={1} marginBottom="s" style={{...styles.imageBackround}}>
        <Box flex={1} justifyContent="flex-start" alignItems="center" paddingTop="s">
          <Image
            resizeMethod="scale"
            style={{...styles.imagePad}}
            accessible
            accessibilityLabel={i18n.translate('Landing.AltText')}
            source={require('assets/landing-screen.png')}
          />
        </Box>
        <Box style={styles.overlay} paddingVertical="m">
          <Box paddingHorizontal="m">
            <Button
              testID="frButton"
              onPress={toggle('mn')}
              text="Монгол"
              variant="bigFlatNeutralGrey"
              flagIcon="mongolia-flag"
            />
          </Box>

          <Box paddingHorizontal="m" marginTop="s" marginBottom="s">
            <Button
              testID="enButton"
              onPress={toggle('en')}
              text="English"
              variant="bigFlatNeutralGrey"
              flagIcon="america-flag"
            />
          </Box>
        </Box>
      </Box>
    </SafeAreaView>
  );
}

FormView = ({value, onChange, onSuccess, onError}: FormViewProps) => {
  const [i18n] = useI18n();
  const [loading, setLoading] = useState(false);
  const {startSubmission} = useReportDiagnosis();
  const handleVerify = useCallback(async () => {
    setLoading(true);
    try {
      await startSubmission(value);
      setLoading(false);
      onSuccess();
    } catch {
      setLoading(false);
      onError();
    }
  }, [startSubmission, value, onSuccess, onError]);

  return (
    <>
      <Box margin="xxl">
        <Text variant="bodyText" textAlign="center" color="overlayBodyText" accessibilityRole="header">
          {i18n.translate('DataUpload.FormIntro')}
        </Text>
      </Box>
      <Box paddingHorizontal="m" marginBottom="m">
        <CodeInput value={value} onChange={onChange} accessibilityLabel={i18n.translate('DataUpload.InputLabel')} />
      </Box>
      <Box flex={1} paddingHorizontal="m" marginBottom="m">
        <Button
          loading={loading}
          disabled={value.length !== 8}
          variant="bigFlat"
          text={i18n.translate('DataUpload.Action')}
          onPress={handleVerify}
        />
        <Text variant="smallText" color="bodyTextSubdued" textAlign="center" marginTop="s">
          {i18n.translate('DataUpload.InfoSmall')}
        </Text>
      </Box>
    </>
  );
}

Page: NextPage = () => {
    const { data } = useFetch<IDFormat<IDProvince[]>>(API_INDONESIA + 'provinsi')(
        data => {
            data.data = data.data.filter(({ kodeProvi }) => kodeProvi)
            return data
        }
    )

    return (
        <>
            <Head>
                <title>Indonesia Daily Update | COVID-19 Visualized</title>
                {meta}
            </Head>

            <div className="text-center my-12">
                <h1 className="my-2">Indonesia Update</h1>
            </div>

            <div className="divider-line" />

            <Summary />

            <div className="btn-link my-24">
                <Link href="/indonesia/province">
                    <Button className="my-4" block color="primary" text="See Province Cases" />
                </Link>
                <Link href="/indonesia/cases">
                    <Button className="my-4" block color="success" text="See Case details" />
                </Link>
                <Link href="/">
                    <Button className="my-4" block color="secondary" text="< Back to Home" />
                </Link>
            </div>

            <h2 className="text-center mt-32 mb-12">Indonesia Visualization</h2>
            <Visualization
                id="indonesia-visualization"
                data={data?.data}
                visualize={visualize.indonesia}
                legends={indonesiaLegends.map(({ color, value }) => (
                    <div key={color} className="legends-item font is-size-small">
                        <div className="legends-detail">{value === 0 ? `Tidak ada kasus positif` : `${value} atau lebih kasus positif`}</div>
                        <div className="legends-color mx-4" style={{ backgroundColor: color }} />
                    </div>
                ))}
            />

            <Daily />
        </>
    )
}

Page: NextPage = () => {    
    const { data, loading } = useFetch<IDFormat<IDProvince[]>>(API_INDONESIA + 'provinsi')(
        data => {
            data.data = data.data.filter(({ kodeProvi }) => kodeProvi)
            return data
        }
    )

    return (
        <>
            <Head>
                <title>Indonesia Province | COVID-19 Visualized</title>
                {meta}
            </Head>

            <div className="text-center my-12">
                <h1 className="my-2">Indonesia Province</h1>
            </div>

            <div className="divider-line mb-32" />
            
            <div className="btn-link mb-24">
                <Link href="/indonesia">
                    <Button block color="secondary" text="< Back to Indonesia Cases" />
                </Link>
            </div>

            <DataSearch<IDProvince>
                data={data?.data}
                loading={loading}
                searchPlaceholder="Search province... (eg: jakarta)"
                searchFilter={(keyword, item) => item.provinsi.toLowerCase().includes(keyword)}
            >
                {(data, keyword) => data.length
                    ? (
                        <FlexList<IDProvince> data={data} wrapperClass="my-12" itemClass="my-12">
                            {province => (
                                <Region
                                    chart={{
                                        confirmed: province.kasusPosi,
                                        recovered: province.kasusSemb,
                                        deaths: province.kasusMeni
                                    }}
                                    header={`(#${province.kodeProvi}) ${province.provinsi}`}
                                >
                                    <p>Total Positif: <span className="font is-weight-bold color is-txt-warning">{province.kasusPosi}</span></p>
                                    <p className="mt-8">Aktif: <span className="font is-weight-bold color is-txt-warning">{getActiveCaseID(province)}</span></p>
                                    <p>Sembuh: <span className="font is-weight-bold color is-txt-success">{province.kasusSemb}</span></p>
                                    <p>Meninggal: <span className="font is-weight-bold color is-txt-danger">{province.kasusMeni}</span></p>
                                </Region>
                            )}
                        </FlexList>
                    ) : (
                        <h3 className="text-center my-24">{
                            keyword.length
                                ? `No matching province "${keyword}" found.`
                                : 'Please type the name of province that you want to search.'
                        }</h3>
                    )
                }
            </DataSearch>
        </>
    )
}

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>
        </>
    )
}

describe('ButtonIcon', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Button icon={<Icon />}>action</Button>)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work with right', () => {
    const wrapper = mount(<Button iconRight={<Icon />}>action</Button>)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work without text', () => {
    const wrapper = mount(<Button iconRight={<Icon />} />)
    const text = wrapper.find('.text')
    expect(wrapper.html()).toMatchSnapshot()
    expect(text.length).toBe(0)
  })

  it('the width of the text should be filled', () => {
    const autoWrapper = mount(
      <Button auto icon={<Icon />}>
        action
      </Button>,
    )
    const wrapper = mount(<Button icon={<Icon />}>action</Button>)

    const autoHtml = autoWrapper.find('.text').html()
    const html = wrapper.find('.text').html()
    expect(html).not.toEqual(autoHtml)

    const mini = mount(<Button>action</Button>)
    const miniIcon = mount(
      <Button scale={2} icon={<Icon />}>
        action
      </Button>,
    )
    const miniHtml = mini.find('.text').html()
    const miniIconHtml = miniIcon.find('.text').html()
    expect(miniHtml).not.toEqual(miniIconHtml)
  })
})

describe('ButtonGroup', () => {
  it('should render correctly', () => {
    const wrapper = mount(
      <ButtonGroup>
        <Button>action</Button>
      </ButtonGroup>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('props should be passed to each button', () => {
    const wrapper = mount(
      <ButtonGroup type="success">
        <Button>action</Button>
      </ButtonGroup>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    wrapper.setProps({ ghost: true })
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should ignore events when group disabled', () => {
    const handler = jest.fn()
    const wrapper = mount(
      <ButtonGroup>
        <Button onClick={handler}>action</Button>
      </ButtonGroup>,
    )
    wrapper.find('button').simulate('click', nativeEvent)
    expect(handler).toHaveBeenCalledTimes(1)
    wrapper.setProps({ disabled: true })
    wrapper.find('button').simulate('click', nativeEvent)
    expect(handler).toHaveBeenCalledTimes(1)
  })

  it('buttons should be displayed vertically', () => {
    const wrapper = mount(
      <ButtonGroup vertical>
        <Button>action1</Button>
        <Button>action2</Button>
      </ButtonGroup>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })
})

function Broadcast() {
  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <div className="tw-flex tw-flex-col">
      <span
        className="
          tw-text-base
          tw-italic
          tw-mb-8
        "
      >
        Open this page in a new tab. Then hit the <b>Send Message</b> button
        from one tab to recieve the message in another tab. Try it out, gonna be
        fun!
      </span>

      <div className="tw-flex tw-flex-col">
        <div>
          <Button leftIcon={<IoMdSend />} onClick={run}>
            Send Message
          </Button>
        </div>

        <div
          className="
            tw-flex
            tw-flex-col
            tw-mt-4
            tw-overflow-hidden
            tw-border
          tw-border-gray-200
            tw-rounded-lg
          "
        >
          <span
            className="
              tw-p-4
              tw-border-b
              tw-border-gray-200
              tw-font-semibold
              tw-text-gray-600
            "
          >
            Message received:
          </span>

          <span
            id="js-broadcast--receiver"
            className="
              tw-p-4
              tw-prose
              tw-text-gray-600
            "
          ></span>
        </div>
      </div>
    </div>
  );
}

Start = () => {
  const [i18n] = useI18n();
  const navigation = useNavigation();
  return (
    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
      <Box paddingHorizontal="xl">
        <Box paddingHorizontal="l" marginTop="m">
          <Text
            variant="bodyTitle"
            color="overlayBodyText"
            marginHorizontal="l"
            marginBottom="l"
            textAlign="center"
            accessibilityRole="header"
          >
            {i18n.translate('OnboardingStart.Title')}
          </Text>
        </Box>
        <Box flexDirection="row" alignItems="center" marginBottom="l">
          <Icon size={30} name="icon-notifications" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="m">
            {i18n.translate('OnboardingStart.Body1')}
          </Text>
        </Box>
        <Box flexDirection="row" alignItems="center" marginBottom="l">
          <Icon size={30} name="icon-notify" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="m">
            {i18n.translate('OnboardingStart.Body2')}
          </Text>
        </Box>
        <Box flexDirection="row" justifyContent="space-around" alignItems="center" marginBottom="l">
          <Button
            text={i18n.translate('OnboardingStart.TutorialAction')}
            variant="bigFlatWhite"
            onPress={() => navigation.navigate('Tutorial')}
          />
        </Box>
      </Box>
    </ScrollView>
  );
}

RegionPickerScreen = () => {
  const [i18n] = useI18n();
  const {setRegion: persistRegion} = useStorage();
  const [selectedRegion, setSelectedRegion] = useState<Region>('None');
  const {navigate} = useNavigation();

  return (
    <Box flex={1} backgroundColor="overlayBackground">
      <SafeAreaView style={styles.flex}>
        <ScrollView style={styles.flex}>
          <Box flex={1} paddingHorizontal="m" paddingTop="m" paddingBottom="m">
            <Text variant="bodySubTitle" color="overlayBodyText" textAlign="center" accessibilityRole="header">
              {i18n.translate('RegionPicker.Title')}
            </Text>
            <Text marginVertical="m" variant="bodyText" color="overlayBodyText" textAlign="center">
              {i18n.translate('RegionPicker.Body')}
            </Text>
            <Box
              paddingHorizontal="m"
              borderRadius={10}
              backgroundColor="infoBlockNeutralBackground"
              accessibilityRole="radiogroup"
            >
              {items.map(item => {
                return (
                  <RegionItem
                    key={item.code}
                    selected={selectedRegion === item.code}
                    onPress={setSelectedRegion}
                    name={i18n.translate(`RegionPicker.${item.code}`)}
                    {...item}
                  />
                );
              })}
            </Box>
          </Box>
        </ScrollView>
        <Box
          backgroundColor="overlayBackground"
          padding="m"
          shadowColor="infoBlockNeutralBackground"
          shadowOffset={{width: 0, height: 2}}
          shadowOpacity={0.5}
          shadowRadius={2}
          elevation={10}
        >
          <Button
            text={i18n.translate(`RegionPicker.${selectedRegion === 'None' ? 'Skip' : 'GetStarted'}`)}
            variant={selectedRegion === 'None' ? 'bigHollow' : 'bigFlat'}
            onPress={async () => {
              await persistRegion(selectedRegion);
              navigate('OnboardingTutorial');
            }}
          />
        </Box>
      </SafeAreaView>
    </Box>
  );
}

TutorialScreen = () => {
  const navigation = useNavigation();
  const {width: viewportWidth} = useWindowDimensions();
  const carouselRef = useRef(null);
  const [currentStep, setCurrentStep] = useState(0);
  const [i18n] = useI18n();
  const close = useCallback(() => navigation.goBack(), [navigation]);

  const isStart = currentStep === 0;
  const isEnd = currentStep === tutorialData.length - 1;

  const renderItem = useCallback<CarouselProps<TutorialKey>['renderItem']>(
    ({item, index}) => {
      return (
        <View style={styles.flex} accessibilityElementsHidden={index !== currentStep}>
          <TutorialContent item={item} isActive={tutorialData[currentStep] === item} />
        </View>
      );
    },
    [currentStep],
  );

  const nextItem = useCallback(() => {
    if (carouselRef.current) {
      if (isEnd) {
        close();
        return;
      }
      (carouselRef.current! as CarouselStatic<TutorialKey>).snapToNext();
    }
  }, [close, isEnd]);

  const prevItem = useCallback(() => {
    if (carouselRef.current) {
      (carouselRef.current! as CarouselStatic<TutorialKey>).snapToPrev();
    }
  }, []);

  return (
    <Box backgroundColor="overlayBackground" flex={1}>
      <SafeAreaView style={styles.flex}>
        <Toolbar
          title=""
          navIcon="icon-back-arrow"
          navText={i18n.translate('Tutorial.Close')}
          navLabel={i18n.translate('Tutorial.Close')}
          onIconClicked={close}
        />
        <Carousel
          ref={carouselRef}
          data={tutorialData}
          renderItem={renderItem}
          sliderWidth={viewportWidth}
          itemWidth={viewportWidth}
          onSnapToItem={newIndex => setCurrentStep(newIndex)}
          importantForAccessibility="no"
          accessible={false}
        />
        <Box flexDirection="row" padding="l">
          <Box flex={1}>
            {!isStart && (
              <Button text={i18n.translate(`Tutorial.ActionBack`)} variant="subduedText" onPress={prevItem} />
            )}
          </Box>
          <Box flex={1} justifyContent="center">
            <ProgressCircles numberOfSteps={tutorialData.length} activeStep={currentStep + 1} marginBottom="none" />
          </Box>
          <Box flex={1}>
            <Button
              text={i18n.translate(`Tutorial.Action${isEnd ? 'End' : 'Next'}`)}
              variant="text"
              onPress={nextItem}
            />
          </Box>
        </Box>
      </SafeAreaView>
    </Box>
  );
}

function Card({ data }: CardProps) {
  return (
    <article
      className="
        tw-flex
        tw-flex-col
        tw-items-center
        tw-py-6
        tw-px-6
        tw-text-center
        tw-border
        tw-border-solid
        tw-border-gray-200
        tw-rounded-lg
        tw-bg-white
      "
    >
      <div
        className="
          tw-text-4xl
          tw-mb-4
        "
      >
        {data.emoji}
      </div>

      <h1
        className="
          tw-mb-2
          tw-text-xl
          tw-font-bold
        "
      >
        {data.title}
      </h1>

      <p
        className="
          tw-mb-8
          tw-text-sm
          tw-text-gray-600
          tw-line-clamp-3
        "
      >
        {data.description}
      </p>

      <Link href={`/demo/${data.id}`} passHref>
        <Button as="a" leftIcon={<FaBolt />}>
          Try it
        </Button>
      </Link>
    </article>
  );
}

ConsentView = ({onSuccess, onError}: Props) => {
  const [i18n] = useI18n();
  const navigation = useNavigation();
  const [loading, setLoading] = useState(false);
  const {fetchAndSubmitKeys} = useReportDiagnosis();

  const toPrivacyPolicy = useCallback(() => navigation.navigate('Privacy'), [navigation]);

  const handleUpload = useCallback(async () => {
    setLoading(true);
    try {
      await fetchAndSubmitKeys();
      setLoading(false);
      onSuccess();
    } catch {
      setLoading(false);
      onError();
    }
  }, [fetchAndSubmitKeys, onError, onSuccess]);

  if (loading) {
    return (
      <Box margin="xxl" flex={1} justifyContent="center" alignItems="center">
        <ActivityIndicator size="large" color="#0278A4" />
      </Box>
    );
  }
  return (
    <>
      <ScrollView style={styles.flex}>
        <Box paddingHorizontal="l" marginBottom="m" marginTop="s" flexDirection="row">
          <Icon name="icon-enter-code" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="l">
            {i18n.translate('DataUpload.ConsentBody')}
          </Text>
        </Box>
        <Box paddingHorizontal="l" marginBottom="m" flexDirection="row">
          <Icon name="icon-notify" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="l">
            {i18n.translate('DataUpload.ConsentBody2')}
          </Text>
        </Box>
        <Box paddingHorizontal="l" marginBottom="m" flexDirection="row">
          <Icon name="icon-notifications" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="l">
            {i18n.translate('DataUpload.ConsentBody3')}
          </Text>
        </Box>
        <Box paddingHorizontal="l" marginBottom="m">
          <Button variant="text" text={i18n.translate('DataUpload.PrivacyPolicyLink')} onPress={toPrivacyPolicy} />
        </Box>
      </ScrollView>
      <Box paddingHorizontal="m" marginBottom="m">
        <Button variant="bigFlat" text={i18n.translate('DataUpload.ConsentAction')} onPress={handleUpload} />
      </Box>
    </>
  );
}