From 7f7d67847115eb93e7dc0d0abf380a23669699a8 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Fri, 5 Jul 2024 19:53:49 +0530
Subject: [PATCH] refactor: add `t`, `useTranslation` helpers to use
translations (#395)
---
.eslintrc.json | 7 +++++++
cspell.json | 1 +
src/background/container.ts | 3 +++
src/background/services/tabEvents.ts | 8 +++++---
src/popup/Popup.tsx | 11 ++++++----
src/popup/components/SiteNotMonetized.tsx | 7 +++----
src/popup/lib/context.tsx | 25 +++++++++++++++++++++--
src/popup/pages/MissingHostPermission.tsx | 4 +++-
src/shared/helpers.ts | 15 ++++++++++++++
9 files changed, 67 insertions(+), 14 deletions(-)
diff --git a/.eslintrc.json b/.eslintrc.json
index bc38f51d..4ded5dda 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -59,6 +59,13 @@
"react-hooks/exhaustive-deps": "error",
"react/react-in-jsx-scope": "off",
"react/jsx-uses-react": "off",
+ "@typescript-eslint/no-unused-vars": [
+ "error",
+ {
+ "argsIgnorePattern": "^_",
+ "varsIgnorePattern": "^_"
+ }
+ ],
"@typescript-eslint/no-explicit-any": "off"
},
"overrides": [
diff --git a/cspell.json b/cspell.json
index b497a076..503ba166 100644
--- a/cspell.json
+++ b/cspell.json
@@ -17,6 +17,7 @@
"temp",
"*.svg",
"pnpm-lock.yaml",
+ ".eslintrc.json",
"cspell-dictionary.txt"
]
}
diff --git a/src/background/container.ts b/src/background/container.ts
index 2d303618..58c36938 100644
--- a/src/background/container.ts
+++ b/src/background/container.ts
@@ -13,6 +13,7 @@ import {
} from './services'
import { createLogger, Logger } from '@/shared/logger'
import { LOG_LEVEL } from '@/shared/defines'
+import { tFactory, type Translation } from '@/shared/helpers'
interface Cradle {
logger: Logger
@@ -25,6 +26,7 @@ interface Cradle {
sendToPopup: SendToPopup
tabEvents: TabEvents
background: Background
+ t: Translation
tabState: TabState
}
@@ -38,6 +40,7 @@ export const configureContainer = () => {
container.register({
logger: asValue(logger),
browser: asValue(browser),
+ t: asValue(tFactory(browser)),
events: asClass(EventsService).singleton(),
deduplicator: asClass(Deduplicator)
.singleton()
diff --git a/src/background/services/tabEvents.ts b/src/background/services/tabEvents.ts
index ddd4bb24..2feab400 100644
--- a/src/background/services/tabEvents.ts
+++ b/src/background/services/tabEvents.ts
@@ -4,6 +4,7 @@ import { MonetizationService } from './monetization'
import { StorageService } from './storage'
import { IsTabMonetizedPayload } from '@/shared/messages'
import { getTabId } from '../utils'
+import type { Translation } from '@/shared/helpers'
const runtime = browser.runtime
const ICONS = {
@@ -29,6 +30,7 @@ export class TabEvents {
constructor(
private monetizationService: MonetizationService,
private storage: StorageService,
+ private t: Translation,
private browser: Browser
) {}
clearTabSessions = (
@@ -63,14 +65,14 @@ export class TabEvents {
) => {
const { enabled } = await this.storage.get(['enabled'])
- let title = this.browser.i18n.getMessage('appName')
+ let title = this.t('appName')
let iconData = enabled ? ICONS.default : ICONS.warning
if (enabled && payload) {
const { value: isTabMonetized } = payload
iconData = isTabMonetized ? ICONS.active : ICONS.inactive
const tabStateText = isTabMonetized
- ? this.browser.i18n.getMessage('monetizationActiveShort')
- : this.browser.i18n.getMessage('monetizationInactiveShort')
+ ? this.t('monetizationActiveShort')
+ : this.t('monetizationInactiveShort')
title = `${title} - ${tabStateText}`
}
const tabId = sender && getTabId(sender)
diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
index ab7ca67c..6fd2b49f 100644
--- a/src/popup/Popup.tsx
+++ b/src/popup/Popup.tsx
@@ -1,7 +1,8 @@
import { MainLayout } from '@/popup/components/layout/MainLayout'
-import { PopupContextProvider } from './lib/context'
+import { PopupContextProvider, TranslationContextProvider } from './lib/context'
import { LazyMotion, domAnimation } from 'framer-motion'
import React from 'react'
+import browser from 'webextension-polyfill'
import { ProtectedRoute } from '@/popup/components/ProtectedRoute'
import {
RouteObject,
@@ -49,9 +50,11 @@ const router = createMemoryRouter(routes)
export const Popup = () => {
return (
{browser.i18n.getMessage('hostsPermissionsNeeded')}
+{t('hostsPermissionsNeeded')}