Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Analytics now works even if blocked by tracker blockers

This commit is contained in:
DrMint 2022-08-28 20:57:40 +02:00
parent c73e6a0bb4
commit 0453a83d2f
11 changed files with 89 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/local-data/websiteInterfaces.json
View File

@ -172,9 +172,9 @@
"anchor_link_copied": "Copied! 👍", "anchor_link_copied": "Copied! 👍",
"folders": "Folders", "folders": "Folders",
"empty_folder_message": "This folder is empty", "empty_folder_message": "This folder is empty",
"switch_to_grid_view": null, "switch_to_grid_view": "Switch to grid view",
"switch_to_folder_view": null, "switch_to_folder_view": "Switch to folder view",
"content_is_not_available": null "content_is_not_available": "This content is not available"
} }
}, },
{ {

50
src/components/AppLayout.tsx
View File

@ -22,6 +22,7 @@ import { OpenGraph, TITLE_PREFIX, TITLE_SEPARATOR } from "helpers/openGraph";
import { useIs1ColumnLayout, useIsScreenAtLeast } from "hooks/useContainerQuery"; import { useIs1ColumnLayout, useIsScreenAtLeast } from "hooks/useContainerQuery";
import { useOnResize } from "hooks/useOnResize"; import { useOnResize } from "hooks/useOnResize";
import { Ids } from "types/ids"; import { Ids } from "types/ids";
import { sendAnalytics } from "helpers/analytics";
/* /*
* ╭─────────────╮ * ╭─────────────╮
@ -324,7 +325,7 @@ export const AppLayout = ({
className="mt-8" className="mt-8"
onClick={() => { onClick={() => {
disgardSafariWarning(); disgardSafariWarning();
umami("[Safari] Disgard warning"); sendAnalytics("Safari", "Disgard warning");
}} }}
/> />
</Popup> </Popup>
@ -333,7 +334,7 @@ export const AppLayout = ({
state={configPanelOpen} state={configPanelOpen}
onClose={() => { onClose={() => {
setConfigPanelOpen(false); setConfigPanelOpen(false);
umami("[Settings] Close settings"); sendAnalytics("Settings", "Close settings");
}}> }}>
<h2 className="text-2xl">{langui.settings}</h2> <h2 className="text-2xl">{langui.settings}</h2>
@ -364,7 +365,7 @@ export const AppLayout = ({
onChange={(items) => { onChange={(items) => {
const newPreferredLanguages = items.map((item) => item.code); const newPreferredLanguages = items.map((item) => item.code);
setPreferredLanguages(newPreferredLanguages); setPreferredLanguages(newPreferredLanguages);
umami("[Settings] Change preferred languages"); sendAnalytics("Settings", "Change preferred languages");
}} }}
/> />
)} )}
@ -383,7 +384,7 @@ export const AppLayout = ({
onClick: () => { onClick: () => {
setDarkMode(false); setDarkMode(false);
setSelectedThemeMode(true); setSelectedThemeMode(true);
umami("[Settings] Change theme (light)"); sendAnalytics("Settings", "Change theme (light)");
}, },
active: selectedThemeMode && !darkMode, active: selectedThemeMode && !darkMode,
text: langui.light, text: langui.light,
@ -391,7 +392,7 @@ export const AppLayout = ({
{ {
onClick: () => { onClick: () => {
setSelectedThemeMode(false); setSelectedThemeMode(false);
umami("[Settings] Change theme (auto)"); sendAnalytics("Settings", "Change theme (auto)");
}, },
active: !selectedThemeMode, active: !selectedThemeMode,
text: langui.auto, text: langui.auto,
@ -400,7 +401,7 @@ export const AppLayout = ({
onClick: () => { onClick: () => {
setDarkMode(true); setDarkMode(true);
setSelectedThemeMode(true); setSelectedThemeMode(true);
umami("[Settings] Change theme (dark)"); sendAnalytics("Settings", "Change theme (dark)");
}, },
active: selectedThemeMode && darkMode, active: selectedThemeMode && darkMode,
text: langui.dark, text: langui.dark,
@ -417,7 +418,10 @@ export const AppLayout = ({
value={currencySelect} value={currencySelect}
onChange={(newCurrency) => { onChange={(newCurrency) => {
setCurrencySelect(newCurrency); setCurrencySelect(newCurrency);
umami(`[Settings] Change currency (${currencyOptions[newCurrency]})}`); sendAnalytics(
"Settings",
`Change currency (${currencyOptions[newCurrency]})}`
);
}} }}
className="w-28" className="w-28"
/> />
@ -431,13 +435,11 @@ export const AppLayout = ({
{ {
onClick: () => { onClick: () => {
setFontSize((current) => current / 1.05); setFontSize((current) => current / 1.05);
umami( sendAnalytics(
`[Settings] Change font size (${((fontSize / 1.05) * 100).toLocaleString( "Settings",
undefined, `Change font size (${((fontSize / 1.05) * 100).toLocaleString(undefined, {
{ maximumFractionDigits: 0,
maximumFractionDigits: 0, })}%)`
}
)}%)`
); );
}, },
icon: Icon.TextDecrease, icon: Icon.TextDecrease,
@ -445,7 +447,7 @@ export const AppLayout = ({
{ {
onClick: () => { onClick: () => {
setFontSize(1); setFontSize(1);
umami("[Settings] Change font size (100%)"); sendAnalytics("Settings", "Change font size (100%)");
}, },
text: `${(fontSize * 100).toLocaleString(undefined, { text: `${(fontSize * 100).toLocaleString(undefined, {
maximumFractionDigits: 0, maximumFractionDigits: 0,
@ -454,13 +456,11 @@ export const AppLayout = ({
{ {
onClick: () => { onClick: () => {
setFontSize((current) => current * 1.05); setFontSize((current) => current * 1.05);
umami( sendAnalytics(
`[Settings] Change font size (${(fontSize * 1.05 * 100).toLocaleString( "Settings",
undefined, `Change font size (${(fontSize * 1.05 * 100).toLocaleString(undefined, {
{ maximumFractionDigits: 0,
maximumFractionDigits: 0, })}%)`
}
)}%)`
); );
}, },
icon: Icon.TextIncrease, icon: Icon.TextIncrease,
@ -476,7 +476,7 @@ export const AppLayout = ({
active={!dyslexic} active={!dyslexic}
onClick={() => { onClick={() => {
setDyslexic(false); setDyslexic(false);
umami("[Settings] Change font (Zen Maru Gothic)"); sendAnalytics("Settings", "Change font (Zen Maru Gothic)");
}} }}
className="font-zenMaruGothic" className="font-zenMaruGothic"
text="Zen Maru Gothic" text="Zen Maru Gothic"
@ -485,7 +485,7 @@ export const AppLayout = ({
active={dyslexic} active={dyslexic}
onClick={() => { onClick={() => {
setDyslexic(true); setDyslexic(true);
umami("[Settings] Change font (OpenDyslexic)"); sendAnalytics("Settings", "Change font (OpenDyslexic)");
}} }}
className="font-openDyslexic" className="font-openDyslexic"
text="OpenDyslexic" text="OpenDyslexic"
@ -501,7 +501,7 @@ export const AppLayout = ({
value={playerName} value={playerName}
onChange={(newName) => { onChange={(newName) => {
setPlayerName(newName); setPlayerName(newName);
umami("[Settings] Change username"); sendAnalytics("Settings", "Change username");
}} }}
/> />
</div> </div>

3
src/components/Inputs/LanguageSwitcher.tsx
View File

@ -6,6 +6,7 @@ import { cJoin } from "helpers/className";
import { prettyLanguage } from "helpers/formatters"; import { prettyLanguage } from "helpers/formatters";
import { iterateMap } from "helpers/others"; import { iterateMap } from "helpers/others";
import { useLanguages } from "hooks/useLocalData"; import { useLanguages } from "hooks/useLocalData";
import { sendAnalytics } from "helpers/analytics";
/* /*
* ╭─────────────╮ * ╭─────────────╮
@ -42,7 +43,7 @@ export const LanguageSwitcher = ({
active={value === localesIndex} active={value === localesIndex}
onClick={() => { onClick={() => {
onLanguageChanged(value); onLanguageChanged(value);
umami(`[Language Switcher] Switch language (${locale})`); sendAnalytics("Language Switcher", `Switch language (${locale})`);
}} }}
text={prettyLanguage(locale, languages)} text={prettyLanguage(locale, languages)}
/> />

15
src/components/Panels/MainPanel.tsx
View File

@ -9,6 +9,7 @@ import { cIf, cJoin } from "helpers/className";
import { isDefinedAndNotEmpty } from "helpers/others"; import { isDefinedAndNotEmpty } from "helpers/others";
import { Link } from "components/Inputs/Link"; import { Link } from "components/Inputs/Link";
import { useIs3ColumnsLayout } from "hooks/useContainerQuery"; import { useIs3ColumnsLayout } from "hooks/useContainerQuery";
import { sendAnalytics } from "helpers/analytics";
/* /*
* ╭─────────────╮ * ╭─────────────╮
@ -40,9 +41,9 @@ export const MainPanel = (): JSX.Element => {
<Button <Button
onClick={() => { onClick={() => {
if (mainPanelReduced) { if (mainPanelReduced) {
umami("[MainPanel] Expand"); sendAnalytics("MainPanel", "Expand");
} else { } else {
umami("[MainPanel] Reduce"); sendAnalytics("MainPanel", "Reduce");
} }
toggleMainPanelReduced(); toggleMainPanelReduced();
}} }}
@ -81,7 +82,7 @@ export const MainPanel = (): JSX.Element => {
<Button <Button
onClick={() => { onClick={() => {
setConfigPanelOpen(true); setConfigPanelOpen(true);
umami("[Settings] Open settings"); sendAnalytics("Settings", "Open settings");
}} }}
icon={Icon.Settings} icon={Icon.Settings}
/> />
@ -173,7 +174,7 @@ export const MainPanel = (): JSX.Element => {
)} )}
<div className="mt-4 mb-8 grid place-content-center"> <div className="mt-4 mb-8 grid place-content-center">
<a <a
onClick={() => umami("[MainPanel] Visit license")} onClick={() => sendAnalytics("MainPanel", "Visit license")}
aria-label="Read more about the license we use for this website" aria-label="Read more about the license we use for this website"
className="group grid grid-flow-col place-content-center gap-1 transition-[filter]" className="group grid grid-flow-col place-content-center gap-1 transition-[filter]"
href="https://creativecommons.org/licenses/by-sa/4.0/"> href="https://creativecommons.org/licenses/by-sa/4.0/">
@ -202,7 +203,7 @@ export const MainPanel = (): JSX.Element => {
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8"> <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
<a <a
aria-label="Browse our GitHub repository, which include this website source code" aria-label="Browse our GitHub repository, which include this website source code"
onClick={() => umami("[MainPanel] Visit GitHub")} onClick={() => sendAnalytics("MainPanel", "Visit GitHub")}
className="aspect-square w-10 className="aspect-square w-10
bg-black transition-colors [mask:url('/icons/github-brands.svg')] bg-black transition-colors [mask:url('/icons/github-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark" ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark"
@ -211,7 +212,7 @@ export const MainPanel = (): JSX.Element => {
rel="noopener noreferrer"></a> rel="noopener noreferrer"></a>
<a <a
aria-label="Follow us on Twitter" aria-label="Follow us on Twitter"
onClick={() => umami("[MainPanel] Visit Twitter")} onClick={() => sendAnalytics("MainPanel", "Visit Twitter")}
className="aspect-square w-10 className="aspect-square w-10
bg-black transition-colors [mask:url('/icons/twitter-brands.svg')] bg-black transition-colors [mask:url('/icons/twitter-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark" ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark"
@ -220,7 +221,7 @@ export const MainPanel = (): JSX.Element => {
rel="noopener noreferrer"></a> rel="noopener noreferrer"></a>
<a <a
aria-label="Join our Discord server!" aria-label="Join our Discord server!"
onClick={() => umami("[MainPanel] Visit Discord")} onClick={() => sendAnalytics("MainPanel", "Visit Discord")}
className="aspect-square w-10 className="aspect-square w-10
bg-black transition-colors [mask:url('/icons/discord-brands.svg')] bg-black transition-colors [mask:url('/icons/discord-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark" ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark"

7
src/helpers/analytics.ts Normal file
View File

@ -0,0 +1,7 @@
export const sendAnalytics = (category: string, event: string): void => {
try {
umami(`[${category}] ${event}`);
} catch (error) {
console.log(error);
}
};

7
src/pages/about-us/contact.tsx
View File

@ -8,6 +8,7 @@ import { randomInt } from "helpers/numbers";
import { RequestMailProps, ResponseMailProps } from "pages/api/mail"; import { RequestMailProps, ResponseMailProps } from "pages/api/mail";
import { useIs1ColumnLayout } from "hooks/useContainerQuery"; import { useIs1ColumnLayout } from "hooks/useContainerQuery";
import { useAppLayout } from "contexts/AppLayoutContext"; import { useAppLayout } from "contexts/AppLayoutContext";
import { sendAnalytics } from "helpers/analytics";
/* /*
* ╭────────╮ * ╭────────╮
@ -66,19 +67,19 @@ const AboutUs = (props: PostStaticProps): JSX.Element => {
case "OKAY": case "OKAY":
setFormResponse(langui.response_email_success ?? ""); setFormResponse(langui.response_email_success ?? "");
setFormState("completed"); setFormState("completed");
umami("[Contact] Send email (success)"); sendAnalytics("Contact", "Send email (success)");
break; break;
case "EENVELOPE": case "EENVELOPE":
setFormResponse(langui.response_invalid_email ?? ""); setFormResponse(langui.response_invalid_email ?? "");
setFormState("stale"); setFormState("stale");
umami("[Contact] Send email (invalid email)"); sendAnalytics("Contact", "Send email (invalid email)");
break; break;
default: default:
setFormResponse(response.message ?? ""); setFormResponse(response.message ?? "");
setFormState("stale"); setFormState("stale");
umami("[Contact] Send email (error)"); sendAnalytics("Contact", "Send email (error)");
break; break;
} }
}); });

14
src/pages/contents/all.tsx
View File

@ -26,6 +26,7 @@ import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
import { cJoin, cIf } from "helpers/className"; import { cJoin, cIf } from "helpers/className";
import { useAppLayout } from "contexts/AppLayoutContext"; import { useAppLayout } from "contexts/AppLayoutContext";
import { getLangui } from "graphql/fetchLocalData"; import { getLangui } from "graphql/fetchLocalData";
import { sendAnalytics } from "helpers/analytics";
/* /*
* ╭─────────────╮ * ╭─────────────╮
@ -137,9 +138,9 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
onChange={(name) => { onChange={(name) => {
setSearchName(name); setSearchName(name);
if (isDefinedAndNotEmpty(name)) { if (isDefinedAndNotEmpty(name)) {
umami("[Contents/All] Change search term"); sendAnalytics("Contents/All", "Change search term");
} else { } else {
umami("[Contents/All] Clear search term"); sendAnalytics("Contents/All", "Clear search term");
} }
}} }}
/> />
@ -151,8 +152,9 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
value={groupingMethod} value={groupingMethod}
onChange={(value) => { onChange={(value) => {
setGroupingMethod(value); setGroupingMethod(value);
umami( sendAnalytics(
`[Contents/All] Change grouping method (${["none", "category", "type"][value + 1]})` "Contents/All",
`Change grouping method (${["none", "category", "type"][value + 1]})`
); );
}} }}
allowEmpty allowEmpty
@ -165,7 +167,7 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
value={keepInfoVisible} value={keepInfoVisible}
onClick={() => { onClick={() => {
toggleKeepInfoVisible(); toggleKeepInfoVisible();
umami(`[Contents/All] Always ${keepInfoVisible ? "hide" : "show"} info`); sendAnalytics("Contents/All", `Always ${keepInfoVisible ? "hide" : "show"} info`);
}} }}
/> />
</WithLabel> </WithLabel>
@ -179,7 +181,7 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
setSearchName(DEFAULT_FILTERS_STATE.searchName); setSearchName(DEFAULT_FILTERS_STATE.searchName);
setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod); setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod);
setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible); setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
umami("[Contents/All] Reset all filters"); sendAnalytics("Contents/All", "Reset all filters");
}} }}
/> />
</SubPanel> </SubPanel>

35
src/pages/library/index.tsx
View File

@ -33,6 +33,7 @@ import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
import { cIf, cJoin } from "helpers/className"; import { cIf, cJoin } from "helpers/className";
import { useCurrencies } from "hooks/useLocalData"; import { useCurrencies } from "hooks/useLocalData";
import { getLangui } from "graphql/fetchLocalData"; import { getLangui } from "graphql/fetchLocalData";
import { sendAnalytics } from "helpers/analytics";
/* /*
* ╭─────────────╮ * ╭─────────────╮
@ -238,9 +239,9 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
onChange={(name) => { onChange={(name) => {
setSearchName(name); setSearchName(name);
if (isDefinedAndNotEmpty(name)) { if (isDefinedAndNotEmpty(name)) {
umami("[Library] Change search term"); sendAnalytics("Library", "Change search term");
} else { } else {
umami("[Library] Clear search term"); sendAnalytics("Library", "Clear search term");
} }
}} }}
/> />
@ -256,10 +257,9 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
value={groupingMethod} value={groupingMethod}
onChange={(value) => { onChange={(value) => {
setGroupingMethod(value); setGroupingMethod(value);
umami( sendAnalytics(
`[Library] Change grouping method (${ "Library",
["none", "category", "type", "year"][value + 1] `Change grouping method (${["none", "category", "type", "year"][value + 1]})`
})`
); );
}} }}
allowEmpty allowEmpty
@ -277,8 +277,9 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
value={sortingMethod} value={sortingMethod}
onChange={(value) => { onChange={(value) => {
setSortingMethod(value); setSortingMethod(value);
umami( sendAnalytics(
`[Library] Change sorting method (${["name", "price", "release date"][value]})` "Library",
`Change sorting method (${["name", "price", "release date"][value]})`
); );
}} }}
/> />
@ -289,7 +290,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
value={showSubitems} value={showSubitems}
onClick={() => { onClick={() => {
toggleShowSubitems(); toggleShowSubitems();
umami(`[Library] ${showSubitems ? "Hide" : "Show"} subitems`); sendAnalytics("Library", `${showSubitems ? "Hide" : "Show"} subitems`);
}} }}
/> />
</WithLabel> </WithLabel>
@ -299,7 +300,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
value={showPrimaryItems} value={showPrimaryItems}
onClick={() => { onClick={() => {
toggleShowPrimaryItems(); toggleShowPrimaryItems();
umami(`[Library] ${showPrimaryItems ? "Hide" : "Show"} primary items`); sendAnalytics("Library", `${showPrimaryItems ? "Hide" : "Show"} primary items`);
}} }}
/> />
</WithLabel> </WithLabel>
@ -309,7 +310,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
value={showSecondaryItems} value={showSecondaryItems}
onClick={() => { onClick={() => {
toggleShowSecondaryItems(); toggleShowSecondaryItems();
umami(`[Library] ${showSecondaryItems ? "Hide" : "Show"} secondary items`); sendAnalytics("Library", `${showSecondaryItems ? "Hide" : "Show"} secondary items`);
}} }}
/> />
</WithLabel> </WithLabel>
@ -320,7 +321,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
value={keepInfoVisible} value={keepInfoVisible}
onClick={() => { onClick={() => {
toggleKeepInfoVisible(); toggleKeepInfoVisible();
umami(`[Library] Always ${keepInfoVisible ? "hide" : "show"} info`); sendAnalytics("Library", `Always ${keepInfoVisible ? "hide" : "show"} info`);
}} }}
/> />
</WithLabel> </WithLabel>
@ -334,7 +335,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
icon: Icon.Favorite, icon: Icon.Favorite,
onClick: () => { onClick: () => {
setFilterUserStatus(LibraryItemUserStatus.Want); setFilterUserStatus(LibraryItemUserStatus.Want);
umami("[Library] Set filter status (I want)"); sendAnalytics("Library", "Set filter status (I want)");
}, },
active: filterUserStatus === LibraryItemUserStatus.Want, active: filterUserStatus === LibraryItemUserStatus.Want,
}, },
@ -343,7 +344,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
icon: Icon.BackHand, icon: Icon.BackHand,
onClick: () => { onClick: () => {
setFilterUserStatus(LibraryItemUserStatus.Have); setFilterUserStatus(LibraryItemUserStatus.Have);
umami("[Library] Set filter status (I have)"); sendAnalytics("Library", "Set filter status (I have)");
}, },
active: filterUserStatus === LibraryItemUserStatus.Have, active: filterUserStatus === LibraryItemUserStatus.Have,
}, },
@ -352,7 +353,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
icon: Icon.RadioButtonUnchecked, icon: Icon.RadioButtonUnchecked,
onClick: () => { onClick: () => {
setFilterUserStatus(LibraryItemUserStatus.None); setFilterUserStatus(LibraryItemUserStatus.None);
umami("[Library] Set filter status (unmarked)"); sendAnalytics("Library", "Set filter status (unmarked)");
}, },
active: filterUserStatus === LibraryItemUserStatus.None, active: filterUserStatus === LibraryItemUserStatus.None,
}, },
@ -361,7 +362,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
text: langui.all, text: langui.all,
onClick: () => { onClick: () => {
setFilterUserStatus(undefined); setFilterUserStatus(undefined);
umami("[Library] Set filter status (all)"); sendAnalytics("Library", "Set filter status (all)");
}, },
active: isUndefined(filterUserStatus), active: isUndefined(filterUserStatus),
}, },
@ -381,7 +382,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod); setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod);
setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible); setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
setFilterUserStatus(DEFAULT_FILTERS_STATE.filterUserStatus); setFilterUserStatus(DEFAULT_FILTERS_STATE.filterUserStatus);
umami("[Library] Reset all filters"); sendAnalytics("Library", "Reset all filters");
}} }}
/> />
</SubPanel> </SubPanel>

9
src/pages/news/index.tsx
View File

@ -24,6 +24,7 @@ import { cIf } from "helpers/className";
import { useIsContentPanelAtLeast } from "hooks/useContainerQuery"; import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
import { useAppLayout } from "contexts/AppLayoutContext"; import { useAppLayout } from "contexts/AppLayoutContext";
import { getLangui } from "graphql/fetchLocalData"; import { getLangui } from "graphql/fetchLocalData";
import { sendAnalytics } from "helpers/analytics";
/* /*
* ╭─────────────╮ * ╭─────────────╮
@ -69,9 +70,9 @@ const News = ({ posts, ...otherProps }: Props): JSX.Element => {
onChange={(name) => { onChange={(name) => {
setSearchName(name); setSearchName(name);
if (isDefinedAndNotEmpty(name)) { if (isDefinedAndNotEmpty(name)) {
umami("[News] Change search term"); sendAnalytics("News", "Change search term");
} else { } else {
umami("[News] Clear search term"); sendAnalytics("News", "Clear search term");
} }
}} }}
/> />
@ -82,7 +83,7 @@ const News = ({ posts, ...otherProps }: Props): JSX.Element => {
value={keepInfoVisible} value={keepInfoVisible}
onClick={() => { onClick={() => {
toggleKeepInfoVisible(); toggleKeepInfoVisible();
umami(`[News] Always ${keepInfoVisible ? "hide" : "show"} info`); sendAnalytics("News", `Always ${keepInfoVisible ? "hide" : "show"} info`);
}} }}
/> />
</WithLabel> </WithLabel>
@ -95,7 +96,7 @@ const News = ({ posts, ...otherProps }: Props): JSX.Element => {
onClick={() => { onClick={() => {
setSearchName(DEFAULT_FILTERS_STATE.searchName); setSearchName(DEFAULT_FILTERS_STATE.searchName);
setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible); setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
umami("[News] Reset all filters"); sendAnalytics("News", "Reset all filters");
}} }}
/> />
</SubPanel> </SubPanel>

11
src/pages/wiki/index.tsx
View File

@ -26,6 +26,7 @@ import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
import { cIf } from "helpers/className"; import { cIf } from "helpers/className";
import { useAppLayout } from "contexts/AppLayoutContext"; import { useAppLayout } from "contexts/AppLayoutContext";
import { getLangui } from "graphql/fetchLocalData"; import { getLangui } from "graphql/fetchLocalData";
import { sendAnalytics } from "helpers/analytics";
/* /*
* ╭─────────────╮ * ╭─────────────╮
@ -82,9 +83,9 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
onChange={(name) => { onChange={(name) => {
setSearchName(name); setSearchName(name);
if (isDefinedAndNotEmpty(name)) { if (isDefinedAndNotEmpty(name)) {
umami("[Wiki] Change search term"); sendAnalytics("Wiki", "Change search term");
} else { } else {
umami("[Wiki] Clear search term"); sendAnalytics("Wiki", "Clear search term");
} }
}} }}
/> />
@ -96,7 +97,7 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
value={groupingMethod} value={groupingMethod}
onChange={(value) => { onChange={(value) => {
setGroupingMethod(value); setGroupingMethod(value);
umami(`[Wiki] Change grouping method (${["none", "category"][value + 1]})`); sendAnalytics("Wiki", `Change grouping method (${["none", "category"][value + 1]})`);
}} }}
allowEmpty allowEmpty
/> />
@ -108,7 +109,7 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
value={keepInfoVisible} value={keepInfoVisible}
onClick={() => { onClick={() => {
toggleKeepInfoVisible(); toggleKeepInfoVisible();
umami(`[Wiki] Always ${keepInfoVisible ? "hide" : "show"} info`); sendAnalytics("Wiki", `Always ${keepInfoVisible ? "hide" : "show"} info`);
}} }}
/> />
</WithLabel> </WithLabel>
@ -122,7 +123,7 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
setSearchName(DEFAULT_FILTERS_STATE.searchName); setSearchName(DEFAULT_FILTERS_STATE.searchName);
setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod); setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod);
setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible); setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
umami("[Wiki] Reset all filters"); sendAnalytics("Wiki", "Reset all filters");
}} }}
/> />

4
src/types/global.d.ts vendored
View File

@ -1,5 +1,7 @@
export {}; export {};
type Umami = (eventName: string) => void;
declare global { declare global {
function umami(eventName: string): void; const umami: Umami;
} }