From 7fc971ab79d4caed4e0f56c55198c83b3ca1ff57 Mon Sep 17 00:00:00 2001
From: Ryan Slobojan <straxus@gmail.com>
Date: Sun, 26 Sep 2021 19:05:02 -0400
Subject: [PATCH 1/3] Moved pass count from bottom of page to title for more
 visibility

---
 components/Form.tsx | 45 ++-------------------------------------------
 components/Page.tsx | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 44 deletions(-)

diff --git a/components/Form.tsx b/components/Form.tsx
index 67bf46c..80f4461 100644
--- a/components/Form.tsx
+++ b/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>
 
diff --git a/components/Page.tsx b/components/Page.tsx
index 8b1dfbd..36689eb 100644
--- a/components/Page.tsx
+++ b/components/Page.tsx
@@ -10,11 +10,41 @@ interface PageProps {
 
 function Page(props: PageProps): JSX.Element {
     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 (
         <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>

From f4010d89182098756c871cb638e00e167cf58002 Mon Sep 17 00:00:00 2001
From: Ryan Slobojan <straxus@gmail.com>
Date: Sun, 26 Sep 2021 19:18:02 -0400
Subject: [PATCH 2/3] If you don't import things and define all your constants,
 you get build errors. Who knew. :|

---
 components/Page.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/Page.tsx b/components/Page.tsx
index 36689eb..1d9e6f2 100644
--- a/components/Page.tsx
+++ b/components/Page.tsx
@@ -1,3 +1,4 @@
+import React, {useEffect, useState} from "react";
 import {useTranslation} from 'next-i18next';
 
 import Head from 'next/head'
@@ -11,6 +12,7 @@ interface PageProps {
 function Page(props: PageProps): JSX.Element {
     const { t } = useTranslation('common');
     const [passCount, setPassCount] = useState<string>('');
+    const hitcountHost = 'https://stats.vaccine-ontario.ca';
 
     useEffect(() => {
         if (passCount.length == 0) {

From 8a33d2097e29aeaaa5197bb414d6455bbf5d527b Mon Sep 17 00:00:00 2001
From: Evert Timberg <evert.timberg@gmail.com>
Date: Sun, 26 Sep 2021 20:06:24 -0400
Subject: [PATCH 3/3] Create custom hook to get pass count

---
 components/Logo.tsx          |  5 +++++
 components/Page.tsx          | 34 ++++------------------------------
 src/hooks/use_pass_count.tsx | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 30 deletions(-)
 create mode 100644 src/hooks/use_pass_count.tsx

diff --git a/components/Logo.tsx b/components/Logo.tsx
index 7fee373..f98c07c 100644
--- a/components/Logo.tsx
+++ b/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>
diff --git a/components/Page.tsx b/components/Page.tsx
index 1d9e6f2..96b1e3e 100644
--- a/components/Page.tsx
+++ b/components/Page.tsx
@@ -1,6 +1,8 @@
-import React, {useEffect, useState} from "react";
+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,36 +13,8 @@ interface PageProps {
 
 function Page(props: PageProps): JSX.Element {
     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!` : '');
 
     return (
diff --git a/src/hooks/use_pass_count.tsx b/src/hooks/use_pass_count.tsx
new file mode 100644
index 0000000..34356a4
--- /dev/null
+++ b/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;
+};