Create custom hook to get pass count

This commit is contained in:
Evert Timberg 2021-09-26 20:06:24 -04:00
parent f4010d8918
commit 8a33d2097e
3 changed files with 44 additions and 30 deletions

View File

@ -1,9 +1,13 @@
import {useTranslation} from 'next-i18next'; import {useTranslation} from 'next-i18next';
import usePassCount from '../src/hooks/use_pass_count';
import Link from 'next/link' import Link from 'next/link'
function Logo(): JSX.Element { function Logo(): JSX.Element {
const { t } = useTranslation('common'); const { t } = useTranslation('common');
const passCount = usePassCount();
const displayPassCount = (passCount? ` - ${passCount.toLocaleString()} receipts processed to date!` : '');
return ( return (
<Link href="/"> <Link href="/">
@ -21,6 +25,7 @@ function Logo(): JSX.Element {
</svg> </svg>
<h1 className="text-3xl font-bold"> <h1 className="text-3xl font-bold">
{t('common:title')} {t('common:title')}
{displayPassCount}
</h1> </h1>
</a> </a>
</Link> </Link>

View File

@ -1,6 +1,8 @@
import React, {useEffect, useState} from "react"; import React from "react";
import {useTranslation} from 'next-i18next'; import {useTranslation} from 'next-i18next';
import usePassCount from "../src/hooks/use_pass_count";
import Head from 'next/head' import Head from 'next/head'
import Logo from './Logo' import Logo from './Logo'
import Link from 'next/link' import Link from 'next/link'
@ -11,36 +13,8 @@ interface PageProps {
function Page(props: PageProps): JSX.Element { function Page(props: PageProps): JSX.Element {
const { t } = useTranslation('common'); const { t } = useTranslation('common');
const [passCount, setPassCount] = useState<string>('');
const hitcountHost = 'https://stats.vaccine-ontario.ca';
useEffect(() => {
if (passCount.length == 0) {
getPassCount();
}
}, []);
const getPassCount = async () => {
const hitCount = await getHitCount();
setPassCount(hitCount);
};
async function getHitCount() {
try {
const request = `${hitcountHost}/nocount?url=pass.vaccine-ontario.ca`;
let response = await fetch(request);
const counter = await response.text();
return Promise.resolve(counter);
} catch (e) {
console.error(e);
return Promise.reject(e);
}
}
const passCount = usePassCount();
const displayPassCount = (passCount? ` - ${passCount.toLocaleString()} receipts processed to date!` : ''); const displayPassCount = (passCount? ` - ${passCount.toLocaleString()} receipts processed to date!` : '');
return ( return (

View File

@ -0,0 +1,35 @@
import React, { useEffect, useState } from 'react';
export default function usePassCount() {
const [passCount, setPassCount] = useState<string>('');
const hitcountHost = 'https://stats.vaccine-ontario.ca';
useEffect(() => {
if (passCount.length == 0) {
getPassCount();
}
}, []);
const getPassCount = async () => {
const hitCount = await getHitCount();
setPassCount(hitCount);
};
async function getHitCount() {
try {
const request = `${hitcountHost}/nocount?url=pass.vaccine-ontario.ca`;
let response = await fetch(request);
const counter = await response.text();
return Promise.resolve(counter);
} catch (e) {
console.error(e);
return Promise.reject(e);
}
}
return passCount;
};