Merge pull request #25 from billylo1/counter-in-title

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

components/Form.tsx

@@ -39,7 +39,6 @@ function Form(): JSX.Element {
 
     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 [isDisabledAppleWallet, setIsDisabledAppleWallet] = useState<boolean>(false);
@@ -48,34 +47,6 @@ function Form(): JSX.Element {
     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
     const setErrorMessage = (message: string) => {
         if (!message) {
@@ -193,31 +164,22 @@ function Form(): JSX.Element {
     }
 
     async function incrementCount() {
-
         try {
             if (typeof generated == undefined || !generated) {
 
                 const request = `${hitcountHost}/count?url=pass.vaccine-ontario.ca`;
-                console.log(request);
+                //console.log(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);
-                console.log(`new PassCount  = ${newPasscount}`);
-
             }
 
         } catch (e) {
             console.error(e);
             return Promise.reject(e);
         }
-
     }
 
     // Add Pass to wallet
@@ -434,9 +396,6 @@ function Form(): JSX.Element {
                                 <Check text={t('piiNotSent')}/>
                                 <Check text={t('openSourceTransparent')}/>
                                 {verifierLink()}
-                                {passCount && <Check text={passCount + ' ' + t('numPasses')}/>}
-
-                                {/* <Check text={t('hostedInEU')}/> */}
                             </ul>
                         </div>
 

components/Logo.tsx

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

components/Page.tsx

@@ -1,5 +1,8 @@
+import React from "react";
 import {useTranslation} from 'next-i18next';
 
+import usePassCount from "../src/hooks/use_pass_count";
+
 import Head from 'next/head'
 import Logo from './Logo'
 import Link from 'next/link'
@@ -11,10 +14,13 @@ interface PageProps {
 function Page(props: PageProps): JSX.Element {
     const { t } = useTranslation('common');
 
+    const passCount = usePassCount();    
+    const displayPassCount = (passCount? ` - ${passCount.toLocaleString()} receipts processed to date!` : '');
+
     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">
             <Head>
-                <title>{t('common:title')}</title>
+                <title>{t('common:title')}{displayPassCount}</title>
                 <link rel="icon" href="/favicon.ico"/>
                 <script src='patch-arrayBuffer.js' />
             </Head>

src/hooks/use_pass_count.tsx

@@ -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;
+};