[Localization] Added localization to the Portal (#1147)

Co-authored-by: WiFi <itamaroryan@users.noreply.github.com>
Co-authored-by: CoolGame8 <78743717+CoolGame8@users.noreply.github.com>

Author: 3 people

.prettierignore

@@ -1,5 +1,6 @@
 # Add files here to ignore them from prettier formatting
 **/*.json
+!**/locale/**/*.json
 **/*.md
 **/*.yml
 .next

.vscode/settings.json

@@ -7,4 +7,9 @@
     "editor.defaultFormatter": "ms-python.black-formatter",
   },
   "nxConsole.generateAiAgentRules": true,
+  "i18n-ally.localesPaths": [
+    "apps/portal/locale",
+    "apps/frontend/locale",
+  ],
+  "i18n-ally.keystyle": "nested" 
 }

apps/portal/.eslintrc.json

@@ -10,7 +10,8 @@
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@next/next/no-html-link-for-pages": ["error", "apps/portal/pages"]
+        "@next/next/no-html-link-for-pages": ["error", "apps/portal/pages"],
+        "react/jsx-no-literals": "warn"
       }
     },
     {

apps/portal/components/app-bar.tsx

@@ -13,20 +13,23 @@ import {
   Button
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/MenuRounded';
+import { useTranslations } from 'next-intl';
+import LanguageSwitcher from './language-switcher';
 
 const pages = [
   {
-    name: 'אירועים',
+    name: 'events',
     href: '/events'
   },
   {
-    name: 'מחשבון ניקוד',
+    name: 'scorer',
     href: '/scorer'
   }
 ];
 
 const ResponsiveAppBar = () => {
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
+  const t = useTranslations('components:app-bar');
 
   return (
     <AppBar position="static">
@@ -62,7 +65,7 @@ const ResponsiveAppBar = () => {
             >
               {pages.map(page => (
                 <MenuItem key={page.name} component={Link} href={page.href}>
-                  <Typography sx={{ textAlign: 'center' }}>{page.name}</Typography>
+                  <Typography sx={{ textAlign: 'center' }}>{t(page.name)}</Typography>
                 </MenuItem>
               ))}
             </Menu>
@@ -91,6 +94,11 @@ const ResponsiveAppBar = () => {
             </Box>
           </Box>
 
+          {/* Mobile Language Switcher */}
+          <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
+            <LanguageSwitcher />
+          </Box>
+
           {/* Desktop */}
           <Box
             display={{ xs: 'none', md: 'flex' }}
@@ -117,10 +125,15 @@ const ResponsiveAppBar = () => {
                 href={page.href}
                 sx={{ my: 2, mx: 1, color: 'white', display: 'block' }}
               >
-                {page.name}
+                {t(page.name)}
               </Button>
             ))}
           </Box>
+
+          {/* Desktop Language Switcher */}
+          <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+            <LanguageSwitcher />
+          </Box>
         </Toolbar>
       </Container>
     </AppBar>

apps/portal/components/events/award-winner.tsx

@@ -1,32 +1,50 @@
 import { Typography, Stack } from '@mui/material';
 import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
+import { useTranslations } from 'next-intl';
 import {
   CoreValuesAwards,
   CoreValuesAwardsTypes,
   PersonalAwards,
   PersonalAwardTypes,
-  PortalAward
+  PortalAward,
+  PortalTeam
 } from '@lems/types';
 import { getColorByPlace } from '../../lib/styling';
-
+import { useLocaleAwardName } from '../../locale/hooks/use-locale-award';
 interface AwardWinnerProps {
   award: PortalAward;
-  winnerText: string;
+  /**
+   * Whether to show the winner's name or just the award name and place.
+   * Defaults to true.
+   */
+  showWinner?: boolean;
 }
 
-const AwardWinner: React.FC<AwardWinnerProps> = ({ award, winnerText }) => {
+const AwardWinner: React.FC<AwardWinnerProps> = ({ award, showWinner = true }) => {
+  const t = useTranslations('components:events:award-winner');
+  const awardNameToText = useLocaleAwardName();
+
+  const isTeamAward = typeof award.winner !== 'string';
+  const winnerText: string = isTeamAward
+    ? `${(award.winner as PortalTeam).name} #${(award.winner as PortalTeam).number}`
+    : (award.winner as string);
+
   const showTrophys = ![...CoreValuesAwardsTypes, ...PersonalAwardTypes].includes(
     award.name as CoreValuesAwards | PersonalAwards
   );
 
   return (
     <Stack direction="row" spacing={1} mt={1}>
       {typeof award.winner === 'string' ? (
-        <Typography variant="body1">{winnerText}</Typography>
+        <Typography variant="body1">{award.winner}</Typography>
       ) : (
         <>
           {showTrophys && <EmojiEventsIcon sx={{ mr: 1, color: getColorByPlace(award.place) }} />}
-          <Typography variant="body1">{winnerText}</Typography>
+          <Typography variant="body1">
+            {showWinner && winnerText}
+            {!showWinner && t('award.name', { name: awardNameToText(award.name) })}
+            {!showWinner && showTrophys && t('award.place', { place: award.place })}
+          </Typography>
         </>
       )}
     </Stack>

apps/portal/components/events/event-link.tsx

@@ -9,13 +9,13 @@ import {
   Divider,
   Stack,
   Typography,
+  useTheme,
   useMediaQuery
 } from '@mui/material';
 import Grid, { GridProps } from '@mui/material/Grid';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { PortalEvent } from '@lems/types';
-import theme from '../../lib/theme';
+import ChevronEndIcon from '../icons/chevron-end';
 
 interface EventDescriptionProps extends GridProps {
   event: PortalEvent;
@@ -71,6 +71,7 @@ interface EventLinkProps {
 }
 
 const EventLink: React.FC<EventLinkProps> = ({ event, includeDate = false }) => {
+  const theme = useTheme();
   const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
 
   if (!event.divisions || event.divisions.length === 0) {
@@ -82,7 +83,7 @@ const EventLink: React.FC<EventLinkProps> = ({ event, includeDate = false }) =>
           '& .MuiButton-endIcon svg': { fontSize: 24 },
           borderRadius: 3
         }}
-        endIcon={<ChevronLeftIcon sx={{ color: 'rgba(0, 0, 0, 0.54)', position: 'relative' }} />}
+        endIcon={<ChevronEndIcon sxProps={{ position: 'relative' }} />}
         fullWidth
         size="small"
         LinkComponent={Link}
@@ -144,7 +145,7 @@ const EventLink: React.FC<EventLinkProps> = ({ event, includeDate = false }) =>
                 minHeight: 48,
                 borderRadius: 3
               }}
-              endIcon={<ChevronLeftIcon sx={{ color: 'rgba(0, 0, 0, 0.54)' }} />}
+              endIcon={<ChevronEndIcon />}
               fullWidth
               size="small"
               LinkComponent={Link}

apps/portal/components/events/event-quick-links.tsx

@@ -2,13 +2,16 @@ import Link from 'next/link';
 import { Button, Paper } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import { PortalEvent } from '@lems/types';
+import { useTranslations } from 'next-intl';
 
 interface EventQuickLinksProps {
   event: PortalEvent;
   hasAwards: boolean;
 }
 
 const EventQuickLinks: React.FC<EventQuickLinksProps> = ({ event, hasAwards }) => {
+  const t = useTranslations('components:events:event-quick-links');
+
   return (
     <Grid
       container
@@ -25,7 +28,7 @@ const EventQuickLinks: React.FC<EventQuickLinksProps> = ({ event, hasAwards }) =
           LinkComponent={Link}
           href={`/events/${event.id}/scoreboard`}
         >
-          לוח תוצאות
+          {t('scoreboard')}
         </Button>
       </Grid>
       {hasAwards && (
@@ -37,7 +40,7 @@ const EventQuickLinks: React.FC<EventQuickLinksProps> = ({ event, hasAwards }) =
             LinkComponent={Link}
             href={`/events/${event.id}/awards`}
           >
-            פרסים
+            {t('awards')}
           </Button>
         </Grid>
       )}
@@ -49,7 +52,7 @@ const EventQuickLinks: React.FC<EventQuickLinksProps> = ({ event, hasAwards }) =
           LinkComponent={Link}
           href={`/events/${event.id}/schedule/field`}
         >
-          לוח זמנים - זירה
+          {t('field-schedule')}
         </Button>
       </Grid>
       <Grid size={{ xs: 6, md: 3 }}>
@@ -60,7 +63,7 @@ const EventQuickLinks: React.FC<EventQuickLinksProps> = ({ event, hasAwards }) =
           LinkComponent={Link}
           href={`/events/${event.id}/schedule/judging`}
         >
-          לוח זמנים - שיפוט
+          {t('judging-schedule')}
         </Button>
       </Grid>
       <Grid size={{ xs: 6, md: 3 }}>
@@ -71,7 +74,7 @@ const EventQuickLinks: React.FC<EventQuickLinksProps> = ({ event, hasAwards }) =
           LinkComponent={Link}
           href={`/events/${event.id}/schedule/general`}
         >
-          לוח זמנים כללי
+          {t('general-schedule')}
         </Button>
       </Grid>
     </Grid>

apps/portal/components/events/event-status.tsx

@@ -1,51 +1,57 @@
 import dayjs from 'dayjs';
 import { Paper, Stack, Typography } from '@mui/material';
 import Grid from '@mui/material/Grid';
-import { PortalEvent, PortalEventStatus } from '@lems/types';
+import { PortalEventStatus } from '@lems/types';
 import LiveIcon from '../live-icon';
+import { useTranslations } from 'next-intl';
 
 interface EventStatusProps {
-  event: PortalEvent;
   status: PortalEventStatus;
 }
 
-const EventStatus: React.FC<EventStatusProps> = ({ event, status }) => {
+const EventStatus: React.FC<EventStatusProps> = ({ status }) => {
+  const t = useTranslations('components:events:event-status');
+
   const hasCurrentMatch = status.field.match.number > 0;
   const hasCurrentSession = status.judging.session.number > 0;
 
   return (
     <Paper sx={{ p: 2, my: 2, width: '100%' }}>
       <Stack direction="row" alignItems="center" spacing={2} mb={1}>
         <Typography variant="h2" maxWidth="90%">
-          אירוע פעיל
+          {t('active-event')}
         </Typography>
         <LiveIcon />
       </Stack>
       <Grid container width="100%">
         <Grid size={{ xs: 12, md: 6 }}>
           {hasCurrentMatch ? (
             <>
-              <Typography variant="h6">מקצה נוכחי - מקצה #{status.field.match.number}</Typography>
-              <Typography color="text.secondary" gutterBottom>
-                זמן מתוכנן: {dayjs(status.field.match.time).format('HH:mm')}
+              <Typography variant="h6">
+                {t('current-match', { number: status.field.match.number })}
+              </Typography>
+              <Typography variant="h6">
+                {t('current-match-time', { time: dayjs(status.field.match.time).format('HH:mm') })}
               </Typography>
             </>
           ) : (
-            <Typography variant="h6">כל המקצים הושלמו</Typography>
+            <Typography variant="h6">{t('all-matches-completed')}</Typography>
           )}
         </Grid>
         <Grid size={{ xs: 12, md: 6 }}>
           {hasCurrentSession ? (
             <>
-              <Typography variant="h6">
-                סבב שיפוט נוכחי - סבב #{status.judging.session.number}
+              <Typography color="text.secondary" gutterBottom>
+                {t('current-session', { number: status.judging.session.number })}
               </Typography>
               <Typography color="text.secondary" gutterBottom>
-                זמן מתוכנן: {dayjs(status.judging.session.time).format('HH:mm')}
+                {t('current-session-time', {
+                  time: dayjs(status.judging.session.time).format('HH:mm')
+                })}
               </Typography>
             </>
           ) : (
-            <Typography variant="h6">כל סבבי השיפוט הושלמו</Typography>
+            <Typography variant="h6">{t('all-sessions-completed')}</Typography>
           )}
         </Grid>
       </Grid>

apps/portal/components/icons/chevron-end.tsx

@@ -0,0 +1,20 @@
+import { SvgIconProps, SxProps, useTheme } from '@mui/material';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+interface DirectionalIconProps extends SvgIconProps {
+  sxProps?: SxProps;
+}
+
+const ChevronEndIcon: React.FC<DirectionalIconProps> = ({ sxProps, ...props }) => {
+  const theme = useTheme();
+  const isRtl = theme.direction === 'rtl';
+
+  return isRtl ? (
+    <ChevronLeftIcon {...props} sx={{ ...sxProps, color: 'rgba(0, 0, 0, 0.54)' }} />
+  ) : (
+    <ChevronRightIcon {...props} sx={{ ...sxProps, color: 'rgba(0, 0, 0, 0.54)' }} />
+  );
+};
+
+export default ChevronEndIcon;

apps/portal/components/icons/chevron-start.tsx

@@ -0,0 +1,20 @@
+import { SvgIconProps, SxProps, useTheme } from '@mui/material';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+interface DirectionalIconProps extends SvgIconProps {
+  sxProps?: SxProps;
+}
+
+const ChevronStartIcon: React.FC<DirectionalIconProps> = ({ sxProps, ...props }) => {
+  const theme = useTheme();
+  const isRtl = theme.direction === 'rtl';
+
+  return isRtl ? (
+    <ChevronRightIcon {...props} sx={{ ...sxProps, color: 'rgba(0, 0, 0, 0.54)' }} />
+  ) : (
+    <ChevronLeftIcon {...props} sx={{ ...sxProps, color: 'rgba(0, 0, 0, 0.54)' }} />
+  );
+};
+
+export default ChevronStartIcon;