add events download (#346)

* add events download * add events and props * some fix * add some corects
cesko-digital · Aug 17, 2023 · 2d6c998 · 2d6c998
1 parent 93433e6
commit 2d6c998
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 7 deletions.
diff --git a/components/basecomponents/StoryReader.tsx b/components/basecomponents/StoryReader.tsx
@@ -9,9 +9,10 @@ import StoryText from './StoryText';
 import { useStoryReader } from 'components/hooks/useStoryReader';
 import { Trans } from 'next-i18next';
 import { StoryPhrase } from './Story/storyStore';
-
+import { usePlausible } from 'next-plausible';
 import { Platform } from '@types';
 import { usePlatform } from 'utils/usePlatform';
+import { handleDownloadPdfs } from 'utils/handleDownloadPdfs';
 
 interface StoryReaderProps {
   titleCurrent: string;
@@ -56,6 +57,8 @@ const StoryReader = ({ titleCurrent, titleOther, id, phrases }: StoryReaderProps
     });
     setLanguagePlay(language);
   };
+  const plausible = usePlausible();
+  const filePathStory = `/pdf/${id}-${currentLanguage}.pdf`;
 
   const locales = ['uk' as Language, getCountryVariant()];
 
@@ -121,9 +124,12 @@ const StoryReader = ({ titleCurrent, titleOther, id, phrases }: StoryReaderProps
               <a
                 key="download PDF"
                 className="underline text-primary-blue"
-                href={`/pdf/${id}-${currentLanguage}.pdf`}
+                href={filePathStory}
                 rel="noreferrer"
                 target="_blank"
+                onClick={() => {
+                  handleDownloadPdfs(plausible, currentLanguage, filePathStory, 'story');
+                }}
               />,
             ]}
           />

diff --git a/pages/alphabet/index.tsx b/pages/alphabet/index.tsx
@@ -8,6 +8,8 @@ import { getCountryVariant, Language } from 'utils/locales';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import { AlphabetDataObject, fetchAlphabetMain, fetchAlphabetUk } from '../../utils/getDataUtils';
 import { getServerSideTranslations } from '../../utils/localization';
+import { handleDownloadPdfs } from 'utils/handleDownloadPdfs';
+import { usePlausible } from 'next-plausible';
 
 const countryVariant = getCountryVariant();
 
@@ -18,6 +20,11 @@ const AlphabetPage = ({ alphabetMain, alphabetUk }: InferGetStaticPropsType<type
 
   const alphabet = selectedAlphabet === 'uk' ? alphabetUk : alphabetMain;
 
+  const { currentLanguage } = useLanguage();
+
+  const plausible = usePlausible();
+  const filePathAlfabet = `/pdf/${selectedAlphabet}Alphabet.pdf`;
+
   return (
     <>
       <SEO title={t('seo.alphabet_page_title')} description={t('seo.alphabet_page_description')} />
@@ -32,9 +39,12 @@ const AlphabetPage = ({ alphabetMain, alphabetUk }: InferGetStaticPropsType<type
                 <a
                   key="download PDF"
                   className="underline text-primary-blue"
-                  href={`/pdf/${selectedAlphabet}Alphabet.pdf`}
+                  href={filePathAlfabet}
                   rel="noreferrer"
                   target="_blank"
+                  onClick={() => {
+                    handleDownloadPdfs(plausible, currentLanguage, filePathAlfabet, 'alphabet');
+                  }}
                 />,
               ]}
             />

diff --git a/pages/dictionary/index.tsx b/pages/dictionary/index.tsx
@@ -18,7 +18,8 @@ import { AiOutlineFilePdf } from 'react-icons/ai';
 import { BiExtension } from 'react-icons/bi';
 import { getCategoryName, getCategoryId, getCategoryUkId } from '../../components/sections/Dictionary/dictionaryUtils';
 import { useLanguage } from 'utils/useLanguageHook';
-
+import { usePlausible } from 'next-plausible';
+import { handleDownloadPdfs } from 'utils/handleDownloadPdfs';
 // Disable ssr for this component to avoid Reference Error: Blob is not defined
 const ExportTranslations = dynamic(() => import('../../components/sections/ExportTranslations'), {
   ssr: false,
@@ -79,6 +80,8 @@ const Dictionary = ({ dictionary }: InferGetStaticPropsType<typeof getStaticProp
     return uniqueMathces;
   }, [search, allTranslations]);
 
+  const plausible = usePlausible();
+
   return (
     <>
       <SEO
@@ -124,6 +127,8 @@ const Dictionary = ({ dictionary }: InferGetStaticPropsType<typeof getStaticProp
             categories.map((category, index) => {
               const categoryName = getCategoryName(category, currentLanguage);
               const categoryPdfName = currentLanguage === 'uk' ? category.nameUk : category.nameMain;
+              const filePathDictionary = `/pdf/${categoryPdfName}.pdf`;
+
               return (
                 <div key={category.nameMain} id={getCategoryId(category, currentLanguage)}>
                   <Collapse
@@ -133,10 +138,15 @@ const Dictionary = ({ dictionary }: InferGetStaticPropsType<typeof getStaticProp
                     ariaId={category.nameMain}
                     category={category}
                   >
-                    <div className="mb-4 mx-4">
+                    <div
+                      className="mb-4 mx-4"
+                      onClick={() => {
+                        handleDownloadPdfs(plausible, currentLanguage, filePathDictionary, 'dictionary');
+                      }}
+                    >
                       <ExportTranslations category={category} />
                       <TextLink
-                        href={`/pdf/${categoryPdfName}.pdf`}
+                        href={filePathDictionary}
                         target="_blank"
                         className="ml-3 inline-flex gap-x-1 items-center"
                         locale={getCountryVariant()}

diff --git a/pages/kids/index.tsx b/pages/kids/index.tsx
@@ -8,8 +8,11 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import { DictionaryDataObject, fetchDictionary, getKidsCategory } from '../../utils/getDataUtils';
 import { getServerSideTranslations } from '../../utils/localization';
 import { useLanguage } from '../../utils/useLanguageHook';
+import { usePlausible } from 'next-plausible';
 
 import KidsDictionaryList from 'components/basecomponents/KidsDictionaryList';
+import { handleDownloadPdfs } from 'utils/handleDownloadPdfs';
+
 export type KidsTranslation = TranslationJSON & { image: string };
 
 const KidsSection = ({ dictionary }: InferGetStaticPropsType<typeof getStaticProps>) => {
@@ -19,6 +22,8 @@ const KidsSection = ({ dictionary }: InferGetStaticPropsType<typeof getStaticPro
   const isUk = currentLanguage === 'uk';
   const pdfUrl = isUk ? `/pdf/${getCountryVariant()}-omalovanky.pdf` : 'pdf/omalovanky.pdf';
 
+  const plausible = usePlausible();
+
   return (
     <div className="bg-gradient-to-r from-[#fdf6d2] to-[#99bde4] -mb-8 -m-2">
       <SEO
@@ -27,7 +32,15 @@ const KidsSection = ({ dictionary }: InferGetStaticPropsType<typeof getStaticPro
         image="https://www.movapp.cz/icons/movapp-cover-kids.jpg"
       />
       <div className="text-center sm:text-right pt-8 mr-0 sm:mr-16">
-        <a href={pdfUrl} target="_blank" rel="noopener noreferrer" download>
+        <a
+          href={pdfUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => {
+            handleDownloadPdfs(plausible, currentLanguage, pdfUrl, 'picture');
+          }}
+          download
+        >
           <Button buttonStyle="primary">{t('kids_page.downloadPDF')}</Button>
         </a>
       </div>

diff --git a/utils/handleDownloadPdfs.ts b/utils/handleDownloadPdfs.ts
@@ -0,0 +1,4 @@
+export const handleDownloadPdfs = (plausible: any, language: string, url: string, category: string): void => {
+  console.log(`${category} - Download PDF`);
+  plausible('Download', { props: { language, url, category } });
+};