feat: translations

Author: Angular2Guy

frontend/app/header/header.tsx

@@ -18,6 +18,7 @@ import { useAtom } from "jotai";
 
 import GlobalState from "../GlobalState";
 import { useNavigate } from "react-router";
+import { useTranslation } from 'node_modules/react-i18next';
 
 const Header = () => {
     const [locationModalState, setLocationModalState] = useAtom(GlobalState.locationModalState);
@@ -26,9 +27,10 @@ const Header = () => {
     const [globalLoginModal, setGlobalLoginModal] = useAtom(GlobalState.loginModalState);
     const [globalWebWorkerRefState, setGlobalWebWorkerRefState] = useAtom(GlobalState.webWorkerRefState); 
     const navigate = useNavigate();
+    const { t } = useTranslation();
 
     const logout = (event: FormEvent) => {
-        console.log("Logout ",event);
+        //console.log("Logout ",event);
         setJwtTokenState('');    
         globalWebWorkerRefState?.postMessage({jwtToken: '', newNotificationUrl: ''});
         setGlobalWebWorkerRefState(null);
@@ -44,10 +46,10 @@ const Header = () => {
     }
 
     return <div className={styles.headerBase}>
-        <span>Cheap Gas</span>
-        <Button variant="outlined" onClick={logout} className={styles.headerButton}>Logout</Button>
-        <Button variant="outlined" onClick={location} className={styles.headerButton}>Location</Button>
-        <Button variant="outlined" onClick={targetPrice} className={styles.headerButton}>Target Price</Button>
+        <span>{t('header.title')}</span>
+        <Button variant="outlined" onClick={logout} className={styles.headerButton}>{t('common.logout')}</Button>
+        <Button variant="outlined" onClick={location} className={styles.headerButton}>{t('header.location')}</Button>
+        <Button variant="outlined" onClick={targetPrice} className={styles.headerButton}>{t('header.targetPrice')}</Button>
     </div>
 }
 

frontend/app/i18n/en/translation.json

@@ -12,5 +12,23 @@
         "password": "Password",
         "login": "Login",
         "signin": "Sign In"
+    },
+    "header": {
+        "title": "Cheap Gas",
+        "location": "Location",
+        "targetPrice": "Target Price"
+    },
+    "location": {
+        "setLocation": "Set your location",
+        "searchRadius": "Search Radius (km)",
+        "postalCode": "Postal Code",
+        "getLocation": "Get Location"
+    },
+    "targetPrice": {
+        "setTargetPrice": "Set your target prices",
+        "diesel": "Target Price Diesel",
+        "e5": "Target Price E5",
+        "e10": "Target Price E10"
     }
+
 }

frontend/app/location-modal/location-modal.tsx

@@ -20,9 +20,11 @@ import { fetchLocation, postLocationRadius } from "../service/http-client";
 import { type PostCodeLocation } from "../model/location";
 import { type UserRequest } from "../model/user";
 import { useAtom } from "jotai";
+import { useTranslation } from 'node_modules/react-i18next';
 
 const LocationModal = () => {
     let controller: AbortController | null = null;
+    const { t } = useTranslation();
     const [open, setOpen] = useState(false);
     const [searchRadius, setSearchRadius] = useState(0);
     const [longitude, setLongitude] = useState(0);
@@ -144,23 +146,23 @@ const LocationModal = () => {
             renderInput={(params) => <TextField {...params} label="Locations" onChange={handleChange} />}
         ></Autocomplete>
         <div>
-            <h3>Longitude: {longitude}</h3>
-            <h3>Latitude: {latitude}</h3>
-            <h3>Postcode: {postCode}</h3>
+            <h3>{t('location.longitude')}: {longitude}</h3>
+            <h3>{t('location.latitude')}: {latitude}</h3>
+            <h3>{t('location.postalCode')}: {postCode}</h3>
         </div>
          <TextField
             autoFocus
             margin="dense"
             value={searchRadius} 
             onChange={handleSearchRadiusChange}            
-            label="Search Radius"
+            label={t('location.searchRadius')}
             type="string"
             fullWidth
             variant="standard"/>      
           <div>
-            <Button type="submit">Ok</Button>
-            <Button onClick={handleCancel}>Cancel</Button>              
-            <Button className={styles.toright} onClick={handleGetLocation}>Get Location</Button>  
+            <Button type="submit">{t('common.ok')}</Button>
+            <Button onClick={handleCancel}>{t('common.cancel')}</Button>              
+            <Button className={styles.toright} onClick={handleGetLocation}>{t('location.getLocation')}</Button>  
           </div>
     </Box>
     </DialogContent>

frontend/app/main-container/main-container.tsx

@@ -31,6 +31,7 @@ function MainContainer() {
   const [globalUserUuidState, setGlobalUserUuidState] = useAtom(GlobalState.userUuidState);
   const navigate = useNavigate();
 
+  
   useEffect(() => {
     if((!globalJwtTokenState || !globalUserUuidState || globalJwtTokenState.length < 10 || globalUserUuidState.length < 10)) {
       navigate('/');

frontend/app/target-price-modal/target-price-modal.tsx

@@ -17,10 +17,12 @@ import { useState, useMemo, type ChangeEventHandler, type FormEvent } from "reac
 import { postTargetPrices } from "../service/http-client";
 import { type UserRequest } from "../model/user";
 import { useAtom } from 'jotai';
+import { useTranslation } from 'node_modules/react-i18next';
 
 
 const TargetPriceModal = () => {
     let controller: AbortController | null = null;
+    const { t } = useTranslation();
     const [targetDiesel, setTargetDiesel] = useState('0');
     const [targetE5, setTargetE5] = useState('0');
     const [targetE10, setTargetE10] = useState('0');
@@ -100,7 +102,7 @@ const TargetPriceModal = () => {
                         margin="dense"
                         value={targetDiesel}
                         onChange={handleTargetDieselChange}
-                        label="Targetprice Diesel"
+                        label={t('targetPrice.diesel')}
                         type="string"
                         fullWidth
                         variant="standard" />
@@ -109,7 +111,7 @@ const TargetPriceModal = () => {
                         margin="dense"
                         value={targetE5}
                         onChange={handleTargetE5Change}
-                        label="Targetprice E5"
+                        label={t('targetPrice.e5')}
                         type="string"
                         fullWidth
                         variant="standard" />
@@ -118,14 +120,14 @@ const TargetPriceModal = () => {
                         margin="dense"
                         value={targetE10}
                         onChange={handleTargetE10Change}
-                        label="Targetprice E10"
+                        label={t('targetPrice.e10')}
                         type="string"
                         fullWidth
                         variant="standard" />
                 </div>
                 <div>
-                    <Button type="submit">Ok</Button>
-                    <Button onClick={handleCancel}>Cancel</Button>
+                    <Button type="submit">{t('common.ok')}</Button>
+                    <Button onClick={handleCancel}>{t('common.cancel')}</Button>
                 </div>
             </Box>
         </DialogContent>