Merge pull request #21 from SAINIAbhishek/react_i18next

integrate i18n
SAINIAbhishek · Aug 7, 2024 · 6d9f8c8 · 6d9f8c8
2 parents 1e9a3dc + 669d430
commit 6d9f8c8
Show file tree

Hide file tree

Showing 30 changed files with 373 additions and 205 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ Additionally, the application employs the Context API and Hooks to effectively m
 - React Router Dom
 - Eslint
 - Prettier
+- React i18next
 
 <hr>
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -23,11 +23,13 @@
     "date-fns": "^2.30.0",
     "dotenv": "^16.4.5",
     "formik": "^2.4.6",
+    "i18next": "^23.12.2",
     "react": "^18.3.1",
     "react-cookie": "^4.1.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
+    "react-i18next": "^15.0.0",
     "react-router-dom": "^6.26.0",
     "yup": "^1.4.0"
   },

diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
@@ -1,3 +1,4 @@
+import '@/lib/i18n';
 import AppProvider from '@/providers/app-provider';
 import AppRoute from '@/routes';
 import AuthProvider from '@/providers/auth-provider';

diff --git a/frontend/src/components/buttons/icon-btn/index.tsx b/frontend/src/components/buttons/icon-btn/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   title?: string;
@@ -19,10 +20,12 @@ const IconButton = ({
   type = 'button',
   title,
 }: Props) => {
+  const { t } = useTranslation();
+
   return (
     <button
       type={type}
-      title={title}
+      title={title && t(title)}
       disabled={isDisabled}
       onClick={handleClick}
       className={`font-medium text-sm p-2.5 text-center inline-flex items-center 

diff --git a/frontend/src/components/buttons/link-btn/index.tsx b/frontend/src/components/buttons/link-btn/index.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 type Props = {
   title: string;
   className?: string;
@@ -13,13 +15,15 @@ const LinkButton = ({
   isDisabled,
   type = 'button',
 }: Props) => {
+  const { t } = useTranslation();
+
   return (
     <button
       type={type}
       disabled={isDisabled}
       onClick={handleClick}
       className={`font-medium hover:underline text-primary-500 ml-1 ${className}`}>
-      {title}
+      {t(title)}
     </button>
   );
 };

diff --git a/frontend/src/components/buttons/primary-btn/index.tsx b/frontend/src/components/buttons/primary-btn/index.tsx
@@ -1,4 +1,5 @@
 import Spinner from '@/components/spinner';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   title: string;
@@ -17,6 +18,8 @@ const PrimaryButton = ({
   isDisabled,
   type = 'button',
 }: Props) => {
+  const { t } = useTranslation();
+
   return (
     <button
       type={type}
@@ -25,7 +28,7 @@ const PrimaryButton = ({
       className={`w-auto bg-primary-600 text-white focus:outline-none font-medium px-3 rounded-lg transition hover:bg-primary-700 ${
         isLoading ? 'py-1' : 'py-2.5'
       } ${isDisabled || isLoading ? 'cursor-not-allowed' : ''} ${className}`}>
-      {isLoading ? <Spinner size="sm" color="border-white" /> : title}
+      {isLoading ? <Spinner size="sm" color="border-white" /> : t(title)}
     </button>
   );
 };

diff --git a/frontend/src/components/form/checkbox-field/index.tsx b/frontend/src/components/form/checkbox-field/index.tsx
@@ -1,7 +1,10 @@
 import { ErrorMessage, Field } from 'formik';
 import { FormikValues } from 'formik/dist/types';
+import { useTranslation } from 'react-i18next';
 
 const CheckboxField = ({ name, label, onChange, value }: FormikValues) => {
+  const { t } = useTranslation();
+
   return (
     <div>
       <div className="flex items-start">
@@ -18,7 +21,7 @@ const CheckboxField = ({ name, label, onChange, value }: FormikValues) => {
         </div>
         <div className="ml-3 text-sm">
           <label htmlFor={name} className="font-light text-gray-300">
-            {label}
+            {t(label)}
           </label>
         </div>
       </div>

diff --git a/frontend/src/components/form/date-field/index.tsx b/frontend/src/components/form/date-field/index.tsx
@@ -2,6 +2,7 @@ import { ErrorMessage } from 'formik';
 import { FormikValues } from 'formik/dist/types';
 import DatePicker from 'react-datepicker';
 import { DATE_FORMAT } from '@/config';
+import { useTranslation } from 'react-i18next';
 
 const DateField = ({
   name,
@@ -13,29 +14,35 @@ const DateField = ({
   touched,
   dateFormat = DATE_FORMAT,
   ...props
-}: FormikValues) => (
-  <div>
-    <label htmlFor={name} className="block mb-2 text-sm font-medium text-white">
-      {label}
-    </label>
-    <DatePicker
-      selected={value}
-      dateFormat={dateFormat}
-      onBlur={onBlur}
-      onChange={onChange}
-      value={value}
-      name={name}
-      className={`border sm:text-sm rounded-lg placeholder-gray-400 border-gray-600 p-2.5 bg-gray-700 text-white block w-full ${
-        error && touched ? 'border-red-500' : 'focus:ring-blue-500'
-      }`}
-      {...props}
-    />
-    <ErrorMessage
-      name={name}
-      component="div"
-      className="text-red-500 text-sm pt-1"
-    />
-  </div>
-);
+}: FormikValues) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <label
+        htmlFor={name}
+        className="block mb-2 text-sm font-medium text-white">
+        {t(label)}
+      </label>
+      <DatePicker
+        selected={value}
+        dateFormat={dateFormat}
+        onBlur={onBlur}
+        onChange={onChange}
+        value={value}
+        name={name}
+        className={`border sm:text-sm rounded-lg placeholder-gray-400 border-gray-600 p-2.5 bg-gray-700 text-white block w-full ${
+          error && touched ? 'border-red-500' : 'focus:ring-blue-500'
+        }`}
+        {...props}
+      />
+      <ErrorMessage
+        name={name}
+        component="div"
+        className="text-red-500 text-sm pt-1"
+      />
+    </div>
+  );
+};
 
 export default DateField;
diff --git a/frontend/src/components/form/input-field/index.tsx b/frontend/src/components/form/input-field/index.tsx
@@ -1,5 +1,6 @@
 import { ErrorMessage, Field } from 'formik';
 import { FormikValues } from 'formik/dist/types';
+import { useTranslation } from 'react-i18next';
 
 const InputField = ({
   name,
@@ -11,30 +12,36 @@ const InputField = ({
   error,
   touched,
   ...props
-}: FormikValues) => (
-  <div>
-    <label htmlFor={name} className="block mb-2 text-sm font-medium text-white">
-      {label}
-    </label>
-    <Field
-      type={type}
-      name={name}
-      onBlur={onBlur}
-      onChange={onChange}
-      value={value}
-      id={name}
-      className={`border sm:text-sm rounded-lg placeholder-gray-400 border-gray-600 p-2.5 bg-gray-700 text-white block w-full ${
-        error && touched ? 'border-red-500' : 'focus:ring-blue-500'
-      }`}
-      placeholder={`Enter your ${label.toLowerCase()}`}
-      {...props}
-    />
-    <ErrorMessage
-      name={name}
-      component="div"
-      className="text-red-500 text-sm pt-1"
-    />
-  </div>
-);
+}: FormikValues) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <label
+        htmlFor={name}
+        className="block mb-2 text-sm font-medium text-white">
+        {t(label)}
+      </label>
+      <Field
+        type={type}
+        name={name}
+        onBlur={onBlur}
+        onChange={onChange}
+        value={value}
+        id={name}
+        className={`border sm:text-sm rounded-lg placeholder-gray-400 border-gray-600 p-2.5 bg-gray-700 text-white block w-full ${
+          error && touched ? 'border-red-500' : 'focus:ring-blue-500'
+        }`}
+        placeholder={`Enter your ${t(label).toLowerCase()}`}
+        {...props}
+      />
+      <ErrorMessage
+        name={name}
+        component="div"
+        className="text-red-500 text-sm pt-1"
+      />
+    </div>
+  );
+};
 
 export default InputField;
diff --git a/frontend/src/components/form/textarea-field/index.tsx b/frontend/src/components/form/textarea-field/index.tsx
@@ -1,5 +1,6 @@
 import { ErrorMessage, Field } from 'formik';
 import { FormikValues } from 'formik/dist/types';
+import { useTranslation } from 'react-i18next';
 
 const TextareaField = ({
   name,
@@ -10,30 +11,36 @@ const TextareaField = ({
   error,
   touched,
   ...props
-}: FormikValues) => (
-  <div>
-    <label htmlFor={name} className="block mb-2 text-sm font-medium text-white">
-      {label}
-    </label>
-    <Field
-      as="textarea"
-      name={name}
-      onBlur={onBlur}
-      onChange={onChange}
-      value={value}
-      id={name}
-      className={`border sm:text-sm rounded-lg placeholder-gray-400 border-gray-600 p-2.5 bg-gray-700 text-white block w-full ${
-        error && touched ? 'border-red-500' : 'focus:ring-blue-500'
-      }`}
-      placeholder={`Enter your ${label.toLowerCase()}`}
-      {...props}
-    />
-    <ErrorMessage
-      name={name}
-      component="div"
-      className="text-red-500 text-sm pt-1"
-    />
-  </div>
-);
+}: FormikValues) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <label
+        htmlFor={name}
+        className="block mb-2 text-sm font-medium text-white">
+        {t(label)}
+      </label>
+      <Field
+        as="textarea"
+        name={name}
+        onBlur={onBlur}
+        onChange={onChange}
+        value={value}
+        id={name}
+        className={`border sm:text-sm rounded-lg placeholder-gray-400 border-gray-600 p-2.5 bg-gray-700 text-white block w-full ${
+          error && touched ? 'border-red-500' : 'focus:ring-blue-500'
+        }`}
+        placeholder={`Enter your ${label.toLowerCase()}`}
+        {...props}
+      />
+      <ErrorMessage
+        name={name}
+        component="div"
+        className="text-red-500 text-sm pt-1"
+      />
+    </div>
+  );
+};
 
 export default TextareaField;
diff --git a/frontend/src/components/navbar/dropdown-user.tsx b/frontend/src/components/navbar/dropdown-user.tsx
@@ -1,10 +1,12 @@
 import { useAuth } from '@/providers/auth-provider';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 const DropdownUser = () => {
   const navigate = useNavigate();
   const { user, logout } = useAuth();
+  const { t } = useTranslation();
 
   const [showDropdown, setShowDropdown] = useState<boolean>(false);
 
@@ -26,7 +28,7 @@ const DropdownUser = () => {
         <img
           className="w-8 rounded-full"
           src="/user-default.png"
-          alt="user photo"
+          alt={t('label.user_photo')}
         />
       </button>
 
@@ -45,7 +47,7 @@ const DropdownUser = () => {
           <li
             onClick={handleLogout}
             className="block px-4 py-2 text-sm text-gray-900 hover:bg-gray-400 cursor-pointer">
-            Sign out
+            {t('button.sign_out')}
           </li>
         </ul>
       </div>
-Original file line number
+Diff line change
@@ Expand Up @@
     - React Router Dom
     - Eslint
     - Prettier
+    - React i18next
     <hr>
@@ Expand Down @@