Refactoring code and updating Feat Plausible

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 = () => {
         </div>
       </div>
       <div className="flex flex-col items-center mb-12">
-        <ActionButton isPlausible exerciseLength={size} action="start" disabled={selectedMetaIds.length === 0} />
+        <ActionButton
+          onClick={() => {
+            plausible('Exercise-Started', { props: { language: currentLanguage, length: size } });
+          }}
+          action="start"
+          disabled={selectedMetaIds.length === 0}
+        />
       </div>
     </div>
   );

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
           <h4 className="mb-8 font-bold p-0">{t('exercise_page.congratulations')}</h4>
           <p className="text-justify">{t('exercise_page.you_have_finished')}</p>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 justify-stretch justify-items-stretch py-10">
-            <ActionButton onClickAsync={restart}>{t('exercise_page.restart') || ''}</ActionButton>
+            <ActionButton
+              onClickAsync={() => {
+                plausible('Exercise-Started', { props: { language: lang.currentLanguage, length: size } });
+                restart();
+              }}
+            >
+              {t('exercise_page.restart') || ''}
+            </ActionButton>
             <ActionButton action="home">{t('exercise_page.change_settings') || ''}</ActionButton>
           </div>
         </div>

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<typeof Button> {
   inactive?: boolean;
   action?: 'nextExercise' | 'home' | 'start';
   onClickAsync?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => Promise<void> | void;
   onClickFinished?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => Promise<void> | 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<HTMLButtonElement | null>
   ) => {
     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);

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<typeof getStaticProps>) => {
   const categories = useMemo(() => getCategories(dictionary), [dictionary]);
   const allTranslations = useMemo(() => getAllPhrases(dictionary), [dictionary]);
+  const plausible = usePlausible();
 
   const [search, setSearch] = useState('');
   const [isSticky, setIsSticky] = useState(false);
@@ -150,7 +152,13 @@ const Dictionary = ({ dictionary }: InferGetStaticPropsType<typeof getStaticProp
                         locale={getCountryVariant()}
                       >
                         <AiOutlineFilePdf className="w-5 h-5" />
-                        {t('header.exercises_link_name')}
+                        <p
+                          onClick={() => {
+                            plausible('Exercise-Started', { props: { language: currentLanguage, length: 10 } });
+                          }}
+                        >
+                          {t('header.exercises_link_name')}
+                        </p>
                       </TextLink>
                     </div>
                     <CategoryDictionary searchText={search} translations={category.translations} />