Merge pull request #25 from billylo1/counter-in-title
Moved pass count from bottom of page to title for more visibility
This commit is contained in:
commit
5ca9bf831d
|
@ -39,7 +39,6 @@ function Form(): JSX.Element {
|
||||||
|
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
const [passCount, setPassCount] = useState<string>('');
|
|
||||||
const [generated, setGenerated] = useState<boolean>(false); // this flag represents the file has been used to generate a pass
|
const [generated, setGenerated] = useState<boolean>(false); // this flag represents the file has been used to generate a pass
|
||||||
|
|
||||||
const [isDisabledAppleWallet, setIsDisabledAppleWallet] = useState<boolean>(false);
|
const [isDisabledAppleWallet, setIsDisabledAppleWallet] = useState<boolean>(false);
|
||||||
|
@ -48,34 +47,6 @@ function Form(): JSX.Element {
|
||||||
const hitcountHost = 'https://stats.vaccine-ontario.ca';
|
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there is a translation and replace message accordingly
|
// Check if there is a translation and replace message accordingly
|
||||||
const setErrorMessage = (message: string) => {
|
const setErrorMessage = (message: string) => {
|
||||||
if (!message) {
|
if (!message) {
|
||||||
|
@ -193,31 +164,22 @@ function Form(): JSX.Element {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function incrementCount() {
|
async function incrementCount() {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (typeof generated == undefined || !generated) {
|
if (typeof generated == undefined || !generated) {
|
||||||
|
|
||||||
const request = `${hitcountHost}/count?url=pass.vaccine-ontario.ca`;
|
const request = `${hitcountHost}/count?url=pass.vaccine-ontario.ca`;
|
||||||
console.log(request);
|
//console.log(request);
|
||||||
|
|
||||||
let response = await fetch(request);
|
let response = await fetch(request);
|
||||||
console.log(request);
|
//console.log(response);
|
||||||
|
|
||||||
const counter = await response.text(); // response count is not used intentionally so it always goes up by 1 only even if the server has changed
|
|
||||||
|
|
||||||
let newPasscount = Number(passCount) + 1;
|
|
||||||
console.log(counter);
|
|
||||||
setPassCount(counter);
|
|
||||||
setGenerated(true);
|
setGenerated(true);
|
||||||
console.log(`new PassCount = ${newPasscount}`);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
return Promise.reject(e);
|
return Promise.reject(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add Pass to wallet
|
// Add Pass to wallet
|
||||||
|
@ -434,9 +396,6 @@ function Form(): JSX.Element {
|
||||||
<Check text={t('piiNotSent')}/>
|
<Check text={t('piiNotSent')}/>
|
||||||
<Check text={t('openSourceTransparent')}/>
|
<Check text={t('openSourceTransparent')}/>
|
||||||
{verifierLink()}
|
{verifierLink()}
|
||||||
{passCount && <Check text={passCount + ' ' + t('numPasses')}/>}
|
|
||||||
|
|
||||||
{/* <Check text={t('hostedInEU')}/> */}
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
|
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,10 +14,13 @@ interface PageProps {
|
||||||
function Page(props: PageProps): JSX.Element {
|
function Page(props: PageProps): JSX.Element {
|
||||||
const { t } = useTranslation('common');
|
const { t } = useTranslation('common');
|
||||||
|
|
||||||
|
const passCount = usePassCount();
|
||||||
|
const displayPassCount = (passCount? ` - ${passCount.toLocaleString()} receipts processed to date!` : '');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="md:w-2/3 xl:w-2/5 md:mx-auto flex flex-col min-h-screen justify-center px-5 py-12">
|
<div className="md:w-2/3 xl:w-2/5 md:mx-auto flex flex-col min-h-screen justify-center px-5 py-12">
|
||||||
<Head>
|
<Head>
|
||||||
<title>{t('common:title')}</title>
|
<title>{t('common:title')}{displayPassCount}</title>
|
||||||
<link rel="icon" href="/favicon.ico"/>
|
<link rel="icon" href="/favicon.ico"/>
|
||||||
<script src='patch-arrayBuffer.js' />
|
<script src='patch-arrayBuffer.js' />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
|
@ -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;
|
||||||
|
};
|
Loading…
Reference in New Issue