From d90b935c59309981bc13e6785bc77b6d01f89102 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tat=C3=AD=C4=8Dek?= Date: Sun, 18 Jun 2023 21:09:10 +0200 Subject: [PATCH 1/6] Fixing the names of the variables and plausible events --- .../basecomponents/Exercise/components/ActionButton.tsx | 2 +- components/basecomponents/Exercise/exerciseStore.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/basecomponents/Exercise/components/ActionButton.tsx b/components/basecomponents/Exercise/components/ActionButton.tsx index 93da8f47..ff3ddbaf 100644 --- a/components/basecomponents/Exercise/components/ActionButton.tsx +++ b/components/basecomponents/Exercise/components/ActionButton.tsx @@ -54,7 +54,7 @@ export const ActionButton = forwardRef( ref={btnRef} buttonStyle="primary" onClick={async (e) => { - isPlausible && plausible('StartedExerciseEvent', { props: { length_of_exercise: exerciseLength } }); + isPlausible && plausible('Exercise-Started', { props: { length: exerciseLength } }); if (pending || inactive || globalPending) return; if (btnRef.current === null) return; setPending(true); diff --git a/components/basecomponents/Exercise/exerciseStore.ts b/components/basecomponents/Exercise/exerciseStore.ts index be80c9f3..84e98893 100644 --- a/components/basecomponents/Exercise/exerciseStore.ts +++ b/components/basecomponents/Exercise/exerciseStore.ts @@ -10,8 +10,8 @@ import { greatPhraseFilter } from './utils/phraseFilters'; /* eslint-disable no-console */ interface ExerciseLength { - length_of_exercise: number; - correct_answers: number; + length: number; + correct: number; language: Language; } @@ -130,8 +130,8 @@ export const useExerciseStore = create Date: Mon, 19 Jun 2023 06:29:09 +0200 Subject: [PATCH 2/6] changing the order of attributes in plausible, adding one attribute --- .../basecomponents/Exercise/components/ActionButton.tsx | 3 ++- components/basecomponents/Exercise/exerciseStore.ts | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/basecomponents/Exercise/components/ActionButton.tsx b/components/basecomponents/Exercise/components/ActionButton.tsx index ff3ddbaf..ee15b349 100644 --- a/components/basecomponents/Exercise/components/ActionButton.tsx +++ b/components/basecomponents/Exercise/components/ActionButton.tsx @@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'; import { usePendingStore } from '../pendingStore'; import { usePlausible } from 'next-plausible'; import React from 'react'; +import { getCountryVariant } from 'utils/locales'; interface ActionButtonProps extends React.ComponentProps { inactive?: boolean; @@ -54,7 +55,7 @@ export const ActionButton = forwardRef( ref={btnRef} buttonStyle="primary" onClick={async (e) => { - isPlausible && plausible('Exercise-Started', { props: { length: exerciseLength } }); + isPlausible && plausible('Exercise-Started', { props: { language: getCountryVariant(), length: exerciseLength } }); if (pending || inactive || globalPending) return; if (btnRef.current === null) return; setPending(true); diff --git a/components/basecomponents/Exercise/exerciseStore.ts b/components/basecomponents/Exercise/exerciseStore.ts index 84e98893..9525c979 100644 --- a/components/basecomponents/Exercise/exerciseStore.ts +++ b/components/basecomponents/Exercise/exerciseStore.ts @@ -10,9 +10,9 @@ import { greatPhraseFilter } from './utils/phraseFilters'; /* eslint-disable no-console */ interface ExerciseLength { + language: Language; length: number; correct: number; - language: Language; } type Plausible = (eventName: string, props: { props: ExerciseLength }) => void; @@ -131,7 +131,7 @@ export const useExerciseStore = create Date: Sun, 25 Jun 2023 09:21:22 +0200 Subject: [PATCH 3/6] Moving the plausible logic from the ActionButton component to ExerciseConfiguration, using the onClick attribute --- .../basecomponents/Exercise/ExerciseConfiguration.tsx | 10 +++++++++- .../Exercise/components/ActionButton.tsx | 6 +----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/components/basecomponents/Exercise/ExerciseConfiguration.tsx b/components/basecomponents/Exercise/ExerciseConfiguration.tsx index dcd92250..56af87df 100644 --- a/components/basecomponents/Exercise/ExerciseConfiguration.tsx +++ b/components/basecomponents/Exercise/ExerciseConfiguration.tsx @@ -6,6 +6,7 @@ import { ActionButton } from './components/ActionButton'; import { useTranslation } from 'react-i18next'; import { useLanguage } from '../../../utils/useLanguageHook'; import { CONFIG_BASE } from './exerciseStoreConfig'; +import { usePlausible } from 'next-plausible'; const removeDuplicates = (array: string[]) => { return [...new Set(array)]; @@ -20,6 +21,7 @@ const removeDuplicates = (array: string[]) => { */ const ExerciseConfiguration: FunctionComponent = () => { const { currentLanguage } = useLanguage(); + const plausible = usePlausible(); // Categories passed to Exercise store to be used for generating exercises const setCategories = useExerciseStore((state) => state.setCategories); @@ -82,7 +84,13 @@ const ExerciseConfiguration: FunctionComponent = () => {
- + { + plausible('Exercise-Started', { props: { language: currentLanguage, length: size } }); + }} + action="start" + disabled={selectedMetaIds.length === 0} + />
); diff --git a/components/basecomponents/Exercise/components/ActionButton.tsx b/components/basecomponents/Exercise/components/ActionButton.tsx index ee15b349..77c71168 100644 --- a/components/basecomponents/Exercise/components/ActionButton.tsx +++ b/components/basecomponents/Exercise/components/ActionButton.tsx @@ -6,20 +6,17 @@ import { useTranslation } from 'react-i18next'; import { usePendingStore } from '../pendingStore'; import { usePlausible } from 'next-plausible'; import React from 'react'; -import { getCountryVariant } from 'utils/locales'; interface ActionButtonProps extends React.ComponentProps { inactive?: boolean; action?: 'nextExercise' | 'home' | 'start'; onClickAsync?: (e: React.MouseEvent | undefined) => Promise | void; onClickFinished?: (e: React.MouseEvent | undefined) => Promise | void; - exerciseLength?: number; - isPlausible?: boolean; } export const ActionButton = forwardRef( ( - { children, inactive = false, onClick, onClickAsync, onClickFinished, action, exerciseLength, isPlausible, ...rest }: ActionButtonProps, + { children, inactive = false, onClick, onClickAsync, onClickFinished, action, ...rest }: ActionButtonProps, ref: React.Ref ) => { const plausible = usePlausible(); @@ -55,7 +52,6 @@ export const ActionButton = forwardRef( ref={btnRef} buttonStyle="primary" onClick={async (e) => { - isPlausible && plausible('Exercise-Started', { props: { language: getCountryVariant(), length: exerciseLength } }); if (pending || inactive || globalPending) return; if (btnRef.current === null) return; setPending(true); From cdf4c6c2b24ef8a1aacbfb4cbd79f705936c20a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tat=C3=AD=C4=8Dek?= Date: Sun, 25 Jun 2023 10:01:06 +0200 Subject: [PATCH 4/6] Adding the Plausible handler when the exercise is started from the dictionary as well as when it is restarted --- .../basecomponents/Exercise/ExerciseOrchestrator.tsx | 11 ++++++++++- pages/dictionary/index.tsx | 3 +++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/components/basecomponents/Exercise/ExerciseOrchestrator.tsx b/components/basecomponents/Exercise/ExerciseOrchestrator.tsx index 42500780..a60f0cf7 100644 --- a/components/basecomponents/Exercise/ExerciseOrchestrator.tsx +++ b/components/basecomponents/Exercise/ExerciseOrchestrator.tsx @@ -10,6 +10,7 @@ import { animation } from './utils/animation'; import ExerciseConfiguration from './ExerciseConfiguration'; import { ExerciseDebugInfo } from './components/ExerciseDebugInfo'; import { ExerciseComponentLoader } from './components/ExerciseComponentLoader'; +import { usePlausible } from 'next-plausible'; const Feedback = dynamic(() => import('./components/Feedback'), { ssr: false, @@ -31,6 +32,7 @@ interface ExerciseOrchestratorProps { // warning: language switching triggers categories props change, probably because staticpaths/props, quickstart isn't change triggered export const ExerciseOrchestrator = ({ categoryIds, quickStart = false }: ExerciseOrchestratorProps) => { const lang = useLanguage(); + const plausible = usePlausible(); const init = useExerciseStore((state) => state.init); const cleanUp = useExerciseStore((state) => state.cleanUp); const setLang = useExerciseStore((state) => state.setLang); @@ -110,7 +112,14 @@ export const ExerciseOrchestrator = ({ categoryIds, quickStart = false }: Exerci

{t('exercise_page.congratulations')}

{t('exercise_page.you_have_finished')}

- {t('exercise_page.restart') || ''} + { + plausible('Exercise-Started', { props: { language: lang, length: size } }); + restart; + }} + > + {t('exercise_page.restart') || ''} + {t('exercise_page.change_settings') || ''}
diff --git a/pages/dictionary/index.tsx b/pages/dictionary/index.tsx index 937b50a3..f04d1705 100644 --- a/pages/dictionary/index.tsx +++ b/pages/dictionary/index.tsx @@ -17,6 +17,7 @@ import { getServerSideTranslations } from '../../utils/localization'; import { TextLink } from '../../components/Typography'; import { AiOutlineFilePdf } from 'react-icons/ai'; import { getCategoryName, getCategoryId, getCategoryUkId } from '../../components/sections/Dictionary/dictionaryUtils'; +import { usePlausible } from 'next-plausible'; // Disable ssr for this component to avoid Reference Error: Blob is not defined const ExportTranslations = dynamic(() => import('../../components/sections/ExportTranslations'), { @@ -26,6 +27,7 @@ const ExportTranslations = dynamic(() => import('../../components/sections/Expor const Dictionary = ({ dictionary }: InferGetStaticPropsType) => { const categories = useMemo(() => getCategories(dictionary), [dictionary]); const allTranslations = useMemo(() => getAllPhrases(dictionary), [dictionary]); + const plausible = usePlausible(); const [search, setSearch] = useState(''); const [isSticky, setIsSticky] = useState(false); @@ -147,6 +149,7 @@ const Dictionary = ({ dictionary }: InferGetStaticPropsType plausible('Exercise-Started', { props: { language: currentLanguage, length: 10 } })} locale={getCountryVariant()} > From 1a445afec5508d0db21c1bb77c1fbf60eede520a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tat=C3=AD=C4=8Dek?= Date: Sun, 25 Jun 2023 11:57:20 +0200 Subject: [PATCH 5/6] Fixing buggs --- .../basecomponents/Exercise/ExerciseOrchestrator.tsx | 2 +- pages/dictionary/index.tsx | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/components/basecomponents/Exercise/ExerciseOrchestrator.tsx b/components/basecomponents/Exercise/ExerciseOrchestrator.tsx index a60f0cf7..9f5539ee 100644 --- a/components/basecomponents/Exercise/ExerciseOrchestrator.tsx +++ b/components/basecomponents/Exercise/ExerciseOrchestrator.tsx @@ -115,7 +115,7 @@ export const ExerciseOrchestrator = ({ categoryIds, quickStart = false }: Exerci { plausible('Exercise-Started', { props: { language: lang, length: size } }); - restart; + restart(); }} > {t('exercise_page.restart') || ''} diff --git a/pages/dictionary/index.tsx b/pages/dictionary/index.tsx index f04d1705..a177958f 100644 --- a/pages/dictionary/index.tsx +++ b/pages/dictionary/index.tsx @@ -149,11 +149,16 @@ const Dictionary = ({ dictionary }: InferGetStaticPropsType plausible('Exercise-Started', { props: { language: currentLanguage, length: 10 } })} locale={getCountryVariant()} > - {t('header.exercises_link_name')} +

{ + plausible('Exercise-Started', { props: { language: currentLanguage, length: 10 } }); + }} + > + {t('header.exercises_link_name')} +

From 3c87cb95677c5e1fc6e153a4eb874fd762eac20a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tat=C3=AD=C4=8Dek?= Date: Sun, 25 Jun 2023 21:25:21 +0200 Subject: [PATCH 6/6] Fixing language bug, removing unused import --- components/basecomponents/Exercise/ExerciseOrchestrator.tsx | 2 +- components/basecomponents/Exercise/components/ActionButton.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/components/basecomponents/Exercise/ExerciseOrchestrator.tsx b/components/basecomponents/Exercise/ExerciseOrchestrator.tsx index 9f5539ee..9f0ffa0c 100644 --- a/components/basecomponents/Exercise/ExerciseOrchestrator.tsx +++ b/components/basecomponents/Exercise/ExerciseOrchestrator.tsx @@ -114,7 +114,7 @@ export const ExerciseOrchestrator = ({ categoryIds, quickStart = false }: Exerci
{ - plausible('Exercise-Started', { props: { language: lang, length: size } }); + plausible('Exercise-Started', { props: { language: lang.currentLanguage, length: size } }); restart(); }} > diff --git a/components/basecomponents/Exercise/components/ActionButton.tsx b/components/basecomponents/Exercise/components/ActionButton.tsx index c20e443e..77c71168 100644 --- a/components/basecomponents/Exercise/components/ActionButton.tsx +++ b/components/basecomponents/Exercise/components/ActionButton.tsx @@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'; import { usePendingStore } from '../pendingStore'; import { usePlausible } from 'next-plausible'; import React from 'react'; -import { getCountryVariant } from 'utils/locales'; interface ActionButtonProps extends React.ComponentProps { inactive?: boolean;