Merge pull request #146 from avored/145-upgrade-surrealdb-and-add-rea…

…ct-i18n-next-react-package

upgrade packa and setup of i18next

Cargo.toml

@@ -20,7 +20,7 @@ argon2 = "0.5.2"
 rand = "0.8.5"
 urlencoding = "2.1.3"
 serde_json = "1.0.117"
-surrealdb = { version = "1.3.1", features = ["kv-rocksdb"] }
+surrealdb = { version = "1.5.1", features = ["kv-rocksdb"] }
 jsonwebtoken = "9.3.0"
 chrono = { version = "0.4.38", features = [] }
 email_address = "0.2.4"

react-admin/package.json

@@ -13,10 +13,12 @@
     "axios": "^1.6.3",
     "feather-icons": "^4.29.0",
     "feather-icons-react": "^0.6.2",
+    "i18next": "^23.11.5",
     "joi": "^17.12.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",
+    "react-i18next": "^14.1.2",
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "swagger-ui-react": "^5.17.12",

react-admin/src/index.js

@@ -4,14 +4,34 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {QueryClientProvider, QueryClient} from '@tanstack/react-query'
+import en_locales from "./locales/en.json"
+import fr_locales from "./locales/fr.json"
+import i18next from "i18next";
+import {I18nextProvider} from "react-i18next";
 
 const queryClient = new QueryClient();
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
+i18next.init({
+    interpolation: {escapeValue:false},
+    lng: "en",
+    resources: {
+        en: {
+            global: en_locales
+        },
+        fr: {
+            global: fr_locales
+        }
+    }
+})
+
 root.render(
   // <React.StrictMode>
-  <QueryClientProvider client={queryClient}>
-    <App />
-  </QueryClientProvider>
+    <I18nextProvider i18n={i18next}>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </I18nextProvider>
   // </React.StrictMode>
 );
 

react-admin/src/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "sign_into_your_account": "Sign into your account "
+}

react-admin/src/locales/fr.json

@@ -0,0 +1,3 @@
+{
+  "name": "french name"
+}

react-admin/src/pages/auth/Login.jsx

@@ -9,8 +9,10 @@ import { useLogin } from "./hooks/useLogin"
 import { loginSchema } from "./schemas/login.schema"
 import _ from 'lodash'
 import { ErrorMessage } from "../../components/ErrorMessage"
+import {useTranslation} from "react-i18next";
 
 function Login() {
+  const [t] = useTranslation('global')
   const redirect = useNavigate();
   const {register, handleSubmit, formState: {errors}} = useForm({
     resolver: joiResolver(loginSchema)
@@ -48,7 +50,7 @@ function Login() {
 
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
         <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-          Sign into your account
+          {t('sign_into_your_account')}
         </h2>
       </div>
       <div></div>