refactor: enable i18n (#33)

refactor: i18n
Leko · Sep 1, 2022 · b2b0526 · b2b0526
1 parent 192c842
commit b2b0526
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 24 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -0,0 +1,20 @@
+{
+  "appName": { "message": "gcal-url-opener" },
+  "refresh": { "message": "Refresh" },
+  "signOut": { "message": "Sign out" },
+  "eventStartsIn": {
+    "message": "$title$ in $startsIn$",
+    "placeholders": {
+      "title": { "content": "$1" },
+      "startsIn": { "content": "$2" }
+    }
+  },
+  "meetingsOnToday": { "message": "Meetings on today" },
+  "upcomingMeetings": { "message": "Upcoming meetings" },
+  "pastMeetings": { "message": "Past meetings" },
+  "noMoreUpcomingMeetings": { "message": "No more upcoming meetings." },
+  "unAuthorized": {
+    "message": "You are not logged in to Google. Please log in with the Google account you wish to link your calendar to."
+  },
+  "privacyPolicy": { "message": "Privacy Policy" }
+}
diff --git a/manifest.json b/manifest.json
@@ -2,12 +2,8 @@
   "manifest_version": 3,
   "name": "crx-gcal-url-opener",
   "description": "Chrome extension that automatically opens Google Calendar meet links and event URLs",
-  "permissions": [
-    "alarms",
-    "identity",
-    "identity.email",
-    "storage"
-  ],
+  "permissions": ["alarms", "identity", "identity.email", "storage"],
+  "default_locale": "en",
   "content_security_policy": {},
   "action": {
     "default_popup": "src/popup.html"

diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
@@ -8,6 +8,7 @@ import {
 } from "@mui/material";
 import LogoutIcon from "@mui/icons-material/Logout";
 import RepeatIcon from "@mui/icons-material/Repeat";
+import { t } from "../i18n";
 
 type Props = {
   isAuthenticated: boolean;
@@ -21,16 +22,16 @@ export function AppBar(props: Props) {
   return (
     <MuiAppBar>
       <Toolbar>
-        <Typography variant="subtitle1">gcal-url-opener</Typography>
+        <Typography variant="subtitle1">{t("appName")}</Typography>
         <div style={{ flexGrow: 1 }} />
         {isAuthenticated ? (
           <>
-            <Tooltip title="Refresh">
+            <Tooltip title={t("refresh")}>
               <IconButton onClick={onRefresh}>
                 <RepeatIcon />
               </IconButton>
             </Tooltip>
-            <Tooltip title="Sign out">
+            <Tooltip title={t("signOut")}>
               <IconButton onClick={onSignOut}>
                 <LogoutIcon />
               </IconButton>

diff --git a/src/components/EventList.tsx b/src/components/EventList.tsx
@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 import OpenInNew from "@mui/icons-material/OpenInNew";
 import ExpandMore from "@mui/icons-material/ExpandMore";
+import { t } from "../i18n";
 
 type Event = {
   id: string;
@@ -46,13 +47,18 @@ export function EventList(props: Props) {
       <AccordionSummary expandIcon={<ExpandMore />}>
         {
           <Typography variant="subtitle2">
-            {subheader}{" "}
-            <Chip variant="filled" label={events.length} size="small" />
+            {subheader}
+            <Chip
+              variant="filled"
+              label={events.length}
+              size="small"
+              sx={{ marginLeft: 1 }}
+            />
           </Typography>
         }
       </AccordionSummary>
       <AccordionDetails>
-        <List disablePadding>
+        <List disablePadding dense>
           {events.map((e) => (
             <ListItem
               key={e.id}
@@ -70,7 +76,10 @@ export function EventList(props: Props) {
               }
             >
               <ListItemText
-                primary={`${e.title} in ${relativeDuration(e.startsIn)}`}
+                primary={t("eventStartsIn", [
+                  e.title,
+                  relativeDuration(e.startsIn),
+                ])}
                 secondary={e.url}
                 secondaryTypographyProps={{
                   style: {
@@ -85,7 +94,7 @@ export function EventList(props: Props) {
           ))}
           {events.length === 0 ? (
             <ListItem dense>
-              <ListItemText primary={`No more upcoming meetings.`} />
+              <ListItemText primary={t("noMoreUpcomingMeetings")} />
             </ListItem>
           ) : null}
         </List>

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -0,0 +1,8 @@
+import messages from "../_locales/en/messages.json";
+
+export function t(
+  key: keyof typeof messages,
+  substitutions?: string | string[]
+): string {
+  return chrome.i18n.getMessage(key, substitutions);
+}
diff --git a/src/popup.tsx b/src/popup.tsx
@@ -8,6 +8,7 @@ import { EventList } from "./components/EventList";
 import { URL_PRIVACY_POLICY } from "./constants";
 import googleSigninDarkNormal from "./images/btn_google_signin_dark_normal_web@2x.png";
 import pkg from "../package.json";
+import { t } from "./i18n";
 
 type Event = {
   id: string;
@@ -113,20 +114,19 @@ function App() {
         onRefresh={handleRefresh}
         onSignOut={handleSignOut}
       />
-      <Container>
-        <Typography variant="subtitle1">{events.length} events</Typography>
-      </Container>
       {isAuthenticated ? (
-        <Box my={4}>
-          <EventList subheader={"Meetings on today"} events={eventsOnToday} />
-          <EventList subheader={"Upcoming meetings"} events={upcomingEvents} />
-          <EventList subheader={"Past meetings"} events={pastEvents} />
+        <Box my={2} mt={8}>
+          <EventList subheader={t("meetingsOnToday")} events={eventsOnToday} />
+          <EventList
+            subheader={t("upcomingMeetings")}
+            events={upcomingEvents}
+          />
+          <EventList subheader={t("pastMeetings")} events={pastEvents} />
         </Box>
       ) : (
         <Box my={2} pt={2}>
           <Alert color="warning">
-            You are not logged in to Google. Please log in with the Google
-            account you wish to link your calendar to.
+            {t("unAuthorized")}
             <Button onClick={handleSignIn} variant="text">
               <img
                 src={chrome.runtime.getURL(googleSigninDarkNormal)}
@@ -141,7 +141,7 @@ function App() {
         <Typography variant="body2">
           &copy;{` Leko | v${pkg.version} | `}
           <a href={URL_PRIVACY_POLICY} target="_blank" rel="noopener">
-            Privacy Policy
+            {t("privacyPolicy")}
           </a>
         </Typography>
       </Container>