split translation into messages

Author: filipKovachev

examples/ecommerce-jewellery-store/src/components/AdminView.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getter } from '@progress/kendo-react-common';
+import * as React from "react";
+import { getter } from "@progress/kendo-react-common";
 import {
   Grid,
   GridColumn,
@@ -10,16 +10,21 @@ import {
   getSelectedStateFromKeyDown,
   GridSortChangeEvent,
   GridPageChangeEvent,
-} from '@progress/kendo-react-grid';
+} from "@progress/kendo-react-grid";
 import {
   ChartWizard,
   ChartWizardDataRow,
   getWizardDataFromGridSelection,
-} from '@progress/kendo-react-chart-wizard';
-import { Button } from '@progress/kendo-react-buttons';
-import { orderBy } from '@progress/kendo-data-query';
-import { chartAreaStackedIcon } from '@progress/kendo-svg-icons';
-import { sampleData } from '../data/shared-gd-sampleChartData';
+} from "@progress/kendo-react-chart-wizard";
+import { Button } from "@progress/kendo-react-buttons";
+import { orderBy } from "@progress/kendo-data-query";
+import { chartAreaStackedIcon } from "@progress/kendo-svg-icons";
+import { sampleData } from "../data/shared-gd-sampleChartData";
+import { useLanguageContext } from "../helpers/LanguageContext";
+import { LocalizationProvider, loadMessages } from "@progress/kendo-react-intl";
+import esMessages from "../data/messages/es";
+import frMessages from "../data/messages/fr";
+import enMessages from "../data/messages/en";
 
 interface SampleDataItem {
   ID: string;
@@ -33,8 +38,8 @@ interface SampleDataItem {
   URL: string;
 }
 
-const DATA_ITEM_KEY = 'ID';
-const SELECTED_FIELD = 'selected';
+const DATA_ITEM_KEY = "ID";
+const SELECTED_FIELD = "selected";
 const idGetter = getter(DATA_ITEM_KEY);
 
 interface SelectedState {
@@ -44,15 +49,27 @@ interface SelectedState {
 const AdminView: React.FC = () => {
   const gridRef = React.useRef<GridHandle>(null);
   const [selectedState, setSelectedState] = React.useState<SelectedState>({});
-  const [sort, setSort] = React.useState<{ field: string; dir: 'asc' | 'desc' }[]>([
-    { field: 'Sales', dir: 'desc' },
+  const [sort, setSort] = React.useState<{ field: string; dir: "asc" | "desc" }[]>([
+    { field: "Sales", dir: "desc" },
   ]);
   const [showChartWizard, setShowChartWizard] = React.useState<boolean>(false);
   const [chartData, setChartData] = React.useState<ChartWizardDataRow[]>([]);
   const [top3SalesData, setTop3SalesData] = React.useState<ChartWizardDataRow[]>([]);
   const [top3Visible, setTop3Visible] = React.useState<boolean>(false);
   const [page, setPage] = React.useState<{ skip: number; take: number }>({ skip: 0, take: 4 });
 
+  const { t, language } = useLanguageContext();
+
+  React.useEffect(() => {
+    if (language === "es") {
+      loadMessages(esMessages, "es");
+    } else if (language === "fr") {
+      loadMessages(frMessages, "fr");
+    } else {
+      loadMessages(enMessages, "en");
+    }
+  }, [language]);
+
   const data = sampleData.map((item) => ({
     ...item,
     [SELECTED_FIELD]: selectedState[idGetter(item)],
@@ -96,7 +113,7 @@ const AdminView: React.FC = () => {
       setChartData(chartWizardData);
       setShowChartWizard(true);
     } else {
-      console.error('Grid reference is not available.');
+      console.error("Grid reference is not available.");
     }
   }, [selectedState]);
 
@@ -111,8 +128,8 @@ const AdminView: React.FC = () => {
     const sortedTop3Sales = selectedData
       .sort(
         (a, b) =>
-          b.find((field) => field.field === 'Total Sales')?.value -
-          a.find((field) => field.field === 'Total Sales')?.value
+          b.find((field) => field.field === "Total Sales")?.value -
+          a.find((field) => field.field === "Total Sales")?.value
       )
       .slice(0, 3);
 
@@ -127,29 +144,30 @@ const AdminView: React.FC = () => {
     const imageUrl = field && field in dataItem ? (dataItem as Record<string, any>)[field] : dataItem.URL;
     return (
       <td>
-        <img src={imageUrl} alt="Product" style={{ width: '100px', height: 'auto' }} />
+        <img src={imageUrl} alt="Product" style={{ width: "100px", height: "auto" }} />
       </td>
     );
   };
 
   return (
-    <>
-      <div style={{ marginBottom: '10px' }}>
+    <LocalizationProvider language={language}>
+      <div style={{ marginBottom: "10px" }}>
         <Button
           svgIcon={chartAreaStackedIcon}
           onClick={handleSelectedChart}
           disabled={disabled}
-          style={{ marginRight: '10px' }}
+          style={{ marginRight: "10px" }}
         >
-          Chart of Selected Data
+          {t.chartSelectedDataButton}
         </Button>
         <Button svgIcon={chartAreaStackedIcon} onClick={handleTop3Sales}>
-          Top 3 Sales per Category
+          {t.top3SalesButton}
         </Button>
       </div>
       <Grid
+        key={language} 
         ref={gridRef}
-        style={{ height: '500px' }}
+        style={{ height: "500px" }}
         data={pagedData}
         dataItemKey={DATA_ITEM_KEY}
         selectedField={SELECTED_FIELD}
@@ -161,24 +179,24 @@ const AdminView: React.FC = () => {
         selectable={{
           enabled: true,
           drag: true,
-          mode: 'multiple',
+          mode: "multiple",
         }}
         navigatable={true}
         onSelectionChange={onSelectionChange}
         onKeyDown={onKeyDown}
         sortable={true}
         sort={sort}
         onSortChange={(e: GridSortChangeEvent) => {
-          setSort(e.sort as { field: string; dir: 'asc' | 'desc' }[]);
+          setSort(e.sort as { field: string; dir: "asc" | "desc" }[]);
         }}
       >
-        <GridColumn field="URL" title="Product" cell={URLImageCell} />
-        <GridColumn field="Product" title="Name" />
-        <GridColumn field="SKU" title="SKU" />
-        <GridColumn field="Category" title="Category" />
-        <GridColumn field="Price" title="Price" />
-        <GridColumn field="Quantity" title="Quantity" />
-        <GridColumn field="Sales" title="Total Sales" />
+        <GridColumn field="URL" title={t.grid.productTitle} cell={URLImageCell} />
+        <GridColumn field="Product" title={t.grid.nameTitle} />
+        <GridColumn field="SKU" title={t.grid.skuTitle} />
+        <GridColumn field="Category" title={t.grid.categoryTitle} />
+        <GridColumn field="Price" title={t.grid.priceTitle} />
+        <GridColumn field="Quantity" title={t.grid.quantityTitle} />
+        <GridColumn field="Sales" title={t.grid.totalSalesTitle} />
       </Grid>
 
       {showChartWizard && (
@@ -194,7 +212,7 @@ const AdminView: React.FC = () => {
           onClose={() => setTop3Visible(false)}
         />
       )}
-    </>
+    </LocalizationProvider>
   );
 };
 

examples/ecommerce-jewellery-store/src/components/CategoryList.tsx

@@ -1,17 +1,18 @@
-
 import { useNavigate } from "react-router-dom";
 import { CategoryListProps } from "../data/types";
 import { Button } from "@progress/kendo-react-buttons";
 import { CardDescriptor } from "../data/types";
+import { useLanguageContext } from "../helpers/LanguageContext";
 
 export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitle, colSpan = 4 }) => {
     const navigate = useNavigate();
+    const { t } = useLanguageContext(); 
 
     const onNavigate = (card: CardDescriptor) => {
         if (card.collectionText === `Collection "AURELIA"`) {
-            navigate("/category")
+            navigate("/category");
         }
-    }
+    };
 
     return (
         <>
@@ -48,7 +49,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
                                 }}
                             >
                                 <Button themeColor={"primary"} size={"large"} onClick={() => onNavigate(card)}>
-                                    Buy Now
+                                    {t.buyNowButtonText} 
                                 </Button>
                             </div>
                         </div>
@@ -57,4 +58,4 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
             </div>
         </>
     );
-}
+};

examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx

@@ -6,7 +6,11 @@ import { FilterDescriptor, SortDescriptor, State } from "@progress/kendo-data-qu
 import { useCategoriesContext } from "../helpers/CategoriesContext";
 import { useLanguageContext } from "../helpers/LanguageContext";
 
-const FilterComponent: React.FC<{ updateUI: (state: State) => void }> = ({ updateUI }) => {
+interface FilterComponentProps {
+  updateUI: (state: State) => void;
+}
+
+export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) => {
   const { selectedCategory, setSelectedCategory } = useCategoriesContext();
   const { t } = useLanguageContext();
 
@@ -133,4 +137,3 @@ const FilterComponent: React.FC<{ updateUI: (state: State) => void }> = ({ updat
   );
 };
 
-export default FilterComponent;

examples/ecommerce-jewellery-store/src/components/Header.tsx

@@ -14,13 +14,14 @@ import { useLanguageContext } from "../helpers/LanguageContext";
 
 interface CustomMenuItemModel extends MenuItemModel {
   page?: string;
+  id?: string;
 }
 
 const Header: React.FC = () => {
   const navigate = useNavigate();
   const { toggleRole } = useAdminContext();
   const { setSelectedCategory } = useCategoriesContext();
-  const { language, setLanguage, t } = useLanguageContext();
+  const { setLanguage, t } = useLanguageContext();
 
   const handleCartClick = () => {
     navigate("/shoppingcart");
@@ -33,13 +34,6 @@ const Header: React.FC = () => {
   const handleMenuSelect = (event: MenuSelectEvent) => {
     const selectedItem: CustomMenuItemModel = event.item;
 
-    if (selectedItem.id?.startsWith("lang-")) {
-      const selectedLanguage = selectedItem.id.replace("lang-", ""); 
-      setLanguage(selectedLanguage);
-      console.log(`Language chosen: ${selectedLanguage}`);
-      return;
-    }
-
     if (selectedItem.page) {
       navigate(selectedItem.page);
       return;
@@ -54,18 +48,32 @@ const Header: React.FC = () => {
     }
   };
 
+  const handleLanguageMenuSelect = (event: MenuSelectEvent) => {
+    const selectedItem: CustomMenuItemModel = event.item;
+
+    if (selectedItem.id?.startsWith("lang-")) {
+      const selectedLanguage = selectedItem.id.replace("lang-", "") as "en" | "fr" | "es";
+      if (["en", "fr", "es"].includes(selectedLanguage)) {
+        setLanguage(selectedLanguage);
+        console.log(`Language chosen: ${selectedLanguage}`);
+      } else {
+        console.error(`Invalid language selected: ${selectedLanguage}`);
+      }
+    }
+  };
+
   const translatedItems = items.map((item) => ({
     ...item,
-    text: t[`menu${item.text}`] || item.text, 
+    text: t[`menu${item.text}`] || item.text,
     items: item.items?.map((subItem) => ({
       ...subItem,
-      text: t[`menu${subItem.text}`] || subItem.text, 
+      text: t[`menu${subItem.text}`] || subItem.text,
     })),
   }));
 
   const languageMenu = [
     {
-      text: t.languageMenuTitle, 
+      text: t.languageMenuTitle,
       items: [
         { text: t.languageEnglish, id: "lang-en" },
         { text: t.languageFrench, id: "lang-fr" },
@@ -109,7 +117,7 @@ const Header: React.FC = () => {
           offLabel={t.clientLabel}
           onChange={handleSwitchChange}
         />
-        <Menu items={languageMenu} onSelect={handleMenuSelect} />
+        <Menu items={languageMenu} onSelect={handleLanguageMenuSelect} />
       </AppBarSection>
     </AppBar>
   );