Moved pass count from bottom of page to title for more visibility

This commit is contained in:
Ryan Slobojan 2021-09-26 19:05:02 -04:00
parent 884ba7bbec
commit 7fc971ab79
2 changed files with 33 additions and 44 deletions

View File

@ -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>

View File

@ -10,11 +10,41 @@ 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>('');
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 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>