steps translation

public/locales/en/translations.json

@@ -12,6 +12,11 @@
     "English": "English",
     "Romanian": "Romanian"
   },
+  "Steps": {
+    "Login": "Login",
+    "Network": "Network",
+    "Settings": "Settings"
+  },
   "Login": {
     "Username": "Username",
     "Password": "Password"

public/locales/ro/translations.json

@@ -3,6 +3,11 @@
     "English": "Engleză",
     "Romanian": "Română"
   },
+  "Steps": {
+    "Login": "Autentificare",
+    "Network": "Rețea",
+    "Settings": "Setări"
+  },
   "Login": {
     "Username": "Utilizator",
     "Password": "Parolă"

src/components/layout/stepper/ApplicationStepper.js

@@ -11,6 +11,7 @@ import {
 import { useLocation, useHistory } from "react-router-dom";
 import CustomStepConnector from "./CustomStepConnector";
 import StepIcon from "./StepIcon";
+import { useTranslation } from "react-i18next";
 
 const styles = () => ({
   stepperCard: {
@@ -29,6 +30,7 @@ const ApplicationStepper = () => {
   const classes = useStyles();
   const location = useLocation();
   const history = useHistory();
+  const { t } = useTranslation();
 
   useEffect(() => {
     const step = steps.find(z => z.route === location.pathname);
@@ -59,7 +61,9 @@ const ApplicationStepper = () => {
               disabled={step.disabled}
               onClick={() => handleStepClick(step)}
             >
-              <StepLabel StepIconComponent={StepIcon}>{step.title}</StepLabel>
+              <StepLabel StepIconComponent={StepIcon}>
+                {t(step.title)}
+              </StepLabel>
             </StepButton>
           </Step>
         ))}

src/constants/steps.js

@@ -3,21 +3,21 @@ import { Router, VpnKey, Settings } from "@material-ui/icons";
 const steps = [
   {
     id: 0,
-    title: "Login",
+    title: "Steps.Login",
     route: "/",
     disabled: false,
     icon: <VpnKey />
   },
   {
     id: 1,
-    title: "Network",
+    title: "Steps.Network",
     route: "/network",
     disabled: false,
     icon: <Router />
   },
   {
     id: 2,
-    title: "Settings",
+    title: "Steps.Settings",
     route: "/settings",
     disabled: false,
     icon: <Settings />

src/index.js

@@ -6,12 +6,10 @@ import App from "./components/App";
 import { BrowserRouter as Router } from "react-router-dom";
 
 ReactDOM.render(
-  <React.StrictMode>
+  <Router basename={process.env.PUBLIC_URL || ""}>
-    <Router basename={process.env.PUBLIC_URL || ""}>
+    <Suspense fallback={<div>Loading...</div>}>
-      <Suspense fallback={<div>Loading...</div>}>
+      <App />
-        <App />
+    </Suspense>
-      </Suspense>
+  </Router>,
-    </Router>
-  </React.StrictMode>,
   document.getElementById("root")
 );