From ece9e9d9ed0109ddf445deede78246d4db719e08 Mon Sep 17 00:00:00 2001 From: KarimAldeen Date: Sun, 14 Apr 2024 12:46:31 +0300 Subject: [PATCH] fix_translate --- src/Hooks/useChangeLanguage.tsx | 134 ++++++++++-------- src/Pages/Home/HomePage.tsx | 1 - .../Products/View/FormikTab/Field/Object.tsx | 2 +- src/Pages/order/OrderPage.tsx | 130 ++++++++--------- src/Pages/order/ui/CustomDateRange.tsx | 3 + src/Pages/order/ui/CustomNumber.tsx | 10 +- src/Pages/order/useTableColumns.tsx | 9 +- src/Styles/Layout/Layout.scss | 1 + src/api/helper/ueGetPagination.tsx | 5 +- src/api/helper/useGetOneQuery.ts | 2 +- src/api/helper/useGetQuery.ts | 6 +- src/api/home.ts | 2 +- src/translate/ar.json | 10 +- src/translate/de.json | 10 +- src/translate/en.json | 10 +- src/translate/text | 23 ++- 16 files changed, 203 insertions(+), 155 deletions(-) diff --git a/src/Hooks/useChangeLanguage.tsx b/src/Hooks/useChangeLanguage.tsx index a056763..c455ee8 100644 --- a/src/Hooks/useChangeLanguage.tsx +++ b/src/Hooks/useChangeLanguage.tsx @@ -1,71 +1,85 @@ -import { useEffect } from 'react'; -import { initReactI18next, useTranslation } from 'react-i18next'; -import i18n from 'i18next'; -import translationEN from '../translate/en.json'; -import translationAR from '../translate/ar.json'; -import translationDE from '../translate/de.json'; + import { useEffect } from 'react'; + import { initReactI18next, useTranslation } from 'react-i18next'; + import i18n from 'i18next'; + import translationEN from '../translate/en.json'; + import translationAR from '../translate/ar.json'; + import translationDE from '../translate/de.json'; -let language = localStorage.getItem('language') ?? 'en'; + let language = localStorage.getItem('language') ?? 'en'; -i18n.use(initReactI18next).init({ - resources: { - en: { - translation: translationEN + i18n.use(initReactI18next).init({ + resources: { + en: { + translation: translationEN + }, + ar: { + translation: translationAR + }, + de: { + translation: translationDE + } }, - ar: { - translation: translationAR - }, - de: { - translation: translationDE + lng: language ?? "en", + interpolation: { + escapeValue: false } - }, - lng: language ?? "en", - interpolation: { - escapeValue: false - } - }); + }); -// console.log(navigator.language,"navigator.language"); + // console.log(navigator.language,"navigator.language"); -export function useLanguage() { - useEffect(() => { - changeLanguage(language); - }, []); - - const changeLanguage = (newLanguage:any) => { - i18n.changeLanguage(newLanguage); - localStorage.setItem('language', newLanguage); - applyLanguageStyles(newLanguage); - }; - - return { changeLanguage }; -} - -function applyLanguageStyles(language:any) { - if (language === 'ar') { - document.body.setAttribute('dir', 'rtl'); - document.body.classList.remove('de'); - document.body.classList.add('ar'); - } else if (language === 'en') { - document.body.setAttribute('dir', 'ltr'); - document.body.classList.remove('ar', 'de'); - document.body.classList.add('en'); - } else if (language === 'de') { - document.body.setAttribute('dir', 'ltr'); - document.body.classList.remove('ar'); - document.body.classList.add('de'); + export function useLanguage() { + useEffect(() => { + // Define a function to handle language change events + const handleLanguageChange = () => { + const newLanguage = localStorage.getItem('language') ?? 'en'; + changeLanguage(newLanguage); + }; + + // Add an event listener to detect changes in localStorage + window.addEventListener('storage', handleLanguageChange); + + // Clean up by removing the event listener when the component unmounts + return () => { + window.removeEventListener('storage', handleLanguageChange); + }; + }, []); + + const changeLanguage = (newLanguage:any) => { + i18n.changeLanguage(newLanguage); + localStorage.setItem('language', newLanguage); + applyLanguageStyles(newLanguage); + // Refresh the page to apply the language changes + window.location.reload(); + }; + + return { changeLanguage }; + } + + function applyLanguageStyles(language:any) { + if (language === 'ar') { + document.body.setAttribute('dir', 'rtl'); + document.body.classList.remove('de'); + document.body.classList.add('ar'); + } else if (language === 'en') { + document.body.setAttribute('dir', 'ltr'); + document.body.classList.remove('ar', 'de'); + document.body.classList.add('en'); + } else if (language === 'de') { + document.body.setAttribute('dir', 'ltr'); + document.body.classList.remove('ar'); + document.body.classList.add('de'); + } } -} -export function useLanguageMenu() { - const { t } = useTranslation(); + export function useLanguageMenu() { + const { t } = useTranslation(); - const languageOptions = [ - { code: 'ar', icon: '/Layout/Ar.svg', label: t('Arabic') }, - { code: 'en', icon: '/Layout/En.svg', label: t('English') }, - { code: 'de', icon: '/Layout/De.svg', label: t('German') } - ]; + const languageOptions = [ + { code: 'ar', icon: '/Layout/Ar.svg', label: t('Arabic') }, + { code: 'en', icon: '/Layout/En.svg', label: t('English') }, + { code: 'de', icon: '/Layout/De.svg', label: t('German') } + ]; - return { languageOptions }; -} + return { languageOptions }; + } diff --git a/src/Pages/Home/HomePage.tsx b/src/Pages/Home/HomePage.tsx index 459ba53..a83d6b7 100644 --- a/src/Pages/Home/HomePage.tsx +++ b/src/Pages/Home/HomePage.tsx @@ -11,7 +11,6 @@ export default function HomePage() { const { t } = useTranslation(); const {data,isLoading} = useGetHome() - console.log(data); const cardsData = [ diff --git a/src/Pages/Products/View/FormikTab/Field/Object.tsx b/src/Pages/Products/View/FormikTab/Field/Object.tsx index 15e7098..f77ff7b 100644 --- a/src/Pages/Products/View/FormikTab/Field/Object.tsx +++ b/src/Pages/Products/View/FormikTab/Field/Object.tsx @@ -74,7 +74,7 @@ const ObjectField = ({ tabKey }: any) => { ))} ); diff --git a/src/Pages/order/OrderPage.tsx b/src/Pages/order/OrderPage.tsx index adefa17..257d309 100644 --- a/src/Pages/order/OrderPage.tsx +++ b/src/Pages/order/OrderPage.tsx @@ -22,7 +22,7 @@ const OrderPage = () => { const { data, status } = useGetOrder(); - const totalRows = data?.pagination?.total || 0; + const totalRows = data?.meta?.total; const columns = useTableColumns(); @@ -33,81 +33,81 @@ const OrderPage = () => { { label:
Rejected
, value: "rejected" }, { label:
Pending Cancellation
, value: "pending_cancellation" } ]; - const { data:Coupon } = useGetCoupon() - - - const SelectData = Coupon?.coupons?.map((item:any)=>( - { - label : item?.name, - value : item?.id - } - )) - const location = useLocation(); - const navigate = useNavigate(); - const { username, coupon, state, fromDate, toDate, totalFrom, totalTo,reset } = useOrderFillterState(); + const { data: Coupon } = useGetCoupon() - const handleSubmit = () => { - let queryParams = []; - - if (username !== null) { - queryParams.push(`username=${username}`); - } - if (coupon !== null) { - queryParams.push(`coupon=${coupon}`); - } - if (state !== null) { - queryParams.push(`state=${state}`); - } - if (fromDate !== null) { - queryParams.push(`createdFrom=${fromDate}`); - } - if (toDate !== null) { - queryParams.push(`createdTo=${toDate}`); - } - if (totalFrom !== null) { - queryParams.push(`totalFrom=${totalFrom}`); - } - if (totalTo !== null) { - queryParams.push(`totalTo=${totalTo}`); - } - - const queryString = queryParams.join('&'); - const newPathname = `${location.pathname}${queryString ? '?' : ''}${queryString}`; - - navigate(newPathname); - }; - - - const handelReset=()=>{ - - navigate(`${location.pathname}`); - reset() - - + const SelectData = Coupon?.coupons?.map((item: any) => ( + { + label: item?.name, + value: item?.id } - const [t] = useTranslation() + )) + const location = useLocation(); + const navigate = useNavigate(); + const { username, coupon, state, fromDate, toDate, totalFrom, totalTo, reset } = useOrderFillterState(); + + + const handleSubmit = () => { + let queryParams = []; + + if (username !== null) { + queryParams.push(`username=${username}`); + } + if (coupon !== null) { + queryParams.push(`coupon=${coupon}`); + } + if (state !== null) { + queryParams.push(`state=${state}`); + } + if (fromDate !== null) { + queryParams.push(`createdFrom=${fromDate}`); + } + if (toDate !== null) { + queryParams.push(`createdTo=${toDate}`); + } + if (totalFrom !== null) { + queryParams.push(`totalFrom=${totalFrom}`); + } + if (totalTo !== null) { + queryParams.push(`totalTo=${totalTo}`); + } + + const queryString = queryParams.join('&'); + const newPathname = `${location.pathname}${queryString ? '?' : ''}${queryString}`; + + navigate(newPathname); + }; + + + const handelReset = () => { + + navigate(`${location.pathname}`); + reset() + + + } + const [t] = useTranslation() + - return ( <> - + -
- - - - - - - +
+ + + + + + + + +
+ -
- - { const dateFormat = 'YYYY-MM-DD'; const { toDate,fromDate,setFromDate,setToDate } = useOrderFillterState(); // Moved hook call inside the functional component + const [t] = useTranslation(); const onCalendarChange = (value: any) => { const FromData = value[0]?.format(dateFormat) @@ -23,6 +25,7 @@ const CustomDateRange = () => { format={dateFormat} onChange={onCalendarChange} className="CustomDateRange" + placeholder={[t(`PriceFrom`),t(`PriceTo`)]} /> ) } diff --git a/src/Pages/order/ui/CustomNumber.tsx b/src/Pages/order/ui/CustomNumber.tsx index f2d9846..412eb49 100644 --- a/src/Pages/order/ui/CustomNumber.tsx +++ b/src/Pages/order/ui/CustomNumber.tsx @@ -1,6 +1,7 @@ import { InputNumber } from 'antd'; import { useState, useEffect } from 'react'; import { useOrderFillterState } from '../../../zustand/OrderFillter'; +import { useTranslation } from 'react-i18next'; const CustomNumber = () => { const [valueFrom, setValueFrom] = useState(null); @@ -18,11 +19,16 @@ const CustomNumber = () => { setValueTo(value); setTotalTo(value); }; + const [t] = useTranslation() return (
- - + +
); }; diff --git a/src/Pages/order/useTableColumns.tsx b/src/Pages/order/useTableColumns.tsx index 99680ed..1e29200 100644 --- a/src/Pages/order/useTableColumns.tsx +++ b/src/Pages/order/useTableColumns.tsx @@ -36,7 +36,6 @@ const useTableColumns = () => { { name: t("status"), center: true, - width:"300", cell: (row: any) => { let status = row?.state; let icon; @@ -85,10 +84,10 @@ const useTableColumns = () => { showDelete={false} objectToEdit={row} onDelete={() => deleteMutation.mutate({order_id:row.id })} - showEdit={true} - showView={false} - onView={()=>navigate(`/order/view/${row?.id}` )} - onEdit={()=>navigate(`/order/${row?.id}` )} + showEdit={false} + showView={true} + // onView={()=>navigate(`/order/view/${row?.id}` )} + onView={()=>navigate(`/order/${row?.id}` )} /> diff --git a/src/Styles/Layout/Layout.scss b/src/Styles/Layout/Layout.scss index 3db18bd..2e9a1a3 100644 --- a/src/Styles/Layout/Layout.scss +++ b/src/Styles/Layout/Layout.scss @@ -597,6 +597,7 @@ padding: 10px 40px; gap: 5px; padding-inline: 10px; text-wrap: nowrap; + white-space: nowrap; width: 300px; align-items: center; justify-content: center; diff --git a/src/api/helper/ueGetPagination.tsx b/src/api/helper/ueGetPagination.tsx index 7a23fda..f570e1c 100644 --- a/src/api/helper/ueGetPagination.tsx +++ b/src/api/helper/ueGetPagination.tsx @@ -7,7 +7,8 @@ export default function useGetQueryPagination(KEY: string | string[], Api: strin const axios = useAxios(); const location = useLocation(); let pagination = location?.search || ''; - + const language = localStorage.getItem("language") ?? "en" + const { logout } = useAuthState(); const navigate = useNavigate(); @@ -25,7 +26,7 @@ export default function useGetQueryPagination(KEY: string | string[], Api: strin const apiUrl = Api + paginationParams; return useQuery( - [Array.isArray(KEY) ? KEY.join(',') : KEY, pagination], async () => { + [Array.isArray(KEY) ? KEY.join(',') : KEY, pagination,language], async () => { const response = await axios.get(apiUrl, { params }); return response.data; }, diff --git a/src/api/helper/useGetOneQuery.ts b/src/api/helper/useGetOneQuery.ts index ce26472..c0719f6 100644 --- a/src/api/helper/useGetOneQuery.ts +++ b/src/api/helper/useGetOneQuery.ts @@ -11,7 +11,7 @@ function useGetOneQuery(key: string, url: string , params:any={},options:any={}) const {id} = useParams() return useQuery( - [id, key], + [id, key,language], async () => { const response = await axios.get(url+"/"+ id+`?lang=${language}`); return response.data; diff --git a/src/api/helper/useGetQuery.ts b/src/api/helper/useGetQuery.ts index 02e9cd9..4c689fd 100644 --- a/src/api/helper/useGetQuery.ts +++ b/src/api/helper/useGetQuery.ts @@ -3,12 +3,14 @@ import useAxios from './useAxios'; import useAuthState from '../../lib/state mangment/AuthState'; import { useNavigate } from 'react-router-dom'; -function useGetQuery(key: string, url: string , params:any={},options:any={}) { +function useGetQuery(KEY: string | string[], url: string , params:any={},options:any={}) { const axios = useAxios(); const {logout} = useAuthState() const navigate = useNavigate() + const language = localStorage.getItem("language") ?? "en" + return useQuery( - params ? [key, params] : key, + params ? [Array.isArray(KEY) ? KEY.join(',') : KEY, params,language] : [Array.isArray(KEY) ? KEY.join(',') : KEY,language], async () => { const response = await axios.get(url , {params}); return response.data; diff --git a/src/api/home.ts b/src/api/home.ts index 8809cab..df80374 100644 --- a/src/api/home.ts +++ b/src/api/home.ts @@ -8,7 +8,7 @@ const API = { UPDATE: `home/overview`, }; -const KEY = "home" +const KEY = ["home","order","users","categories"] export const useGetHome = (params?:any) => useGetQuery(KEY, API.GET_ALL,params); \ No newline at end of file diff --git a/src/translate/ar.json b/src/translate/ar.json index 9f0b9af..f992062 100644 --- a/src/translate/ar.json +++ b/src/translate/ar.json @@ -166,7 +166,15 @@ "checkAndModify": "يرجى التحقق من الشبكة الخاصة بك وإعادة تحميل الصفحة.", "refetch": "إعادة تحميل الصفحة", "goToHome": "الانتقال إلى الصفحة الرئيسية" - } + }, + "value_en": "القيمة (الإنجليزية)", + "value_ar": "القيمة (العربية)", + "value_de": "القيمة (الألمانية)", + "type": "النوع", + "id": "المعرف", + "submite": "تقديم", + "PriceFrom": "السعر من", + "PriceTo": "السعر إلى" diff --git a/src/translate/de.json b/src/translate/de.json index 8ebcc84..30eeae7 100644 --- a/src/translate/de.json +++ b/src/translate/de.json @@ -164,7 +164,15 @@ "refetch": "Seite neu laden", "goToHome": "Zum Startseite" } - +, +"value_en": "Wert (Englisch)", +"value_ar": "Wert (Arabisch)", +"value_de": "Wert (Deutsch)", +"type": "Typ", +"id": "ID", +"submite": "Einreichen", +"PriceFrom": "Preis ab", +"PriceTo": "Preis bis" diff --git a/src/translate/en.json b/src/translate/en.json index c65299c..bf06d24 100644 --- a/src/translate/en.json +++ b/src/translate/en.json @@ -169,6 +169,14 @@ "refetch": "Refetch Page", "goToHome": "Go to Home" } - +, +"value_en": "Value (English)", +"value_ar": "Value (Arabic)", +"value_de": "Value (German)", +"type": "Type", +"id": "ID", +"submite": "Submit", +"PriceFrom": "Price From", +"PriceTo": "Price To" } \ No newline at end of file diff --git a/src/translate/text b/src/translate/text index e71f214..928285b 100644 --- a/src/translate/text +++ b/src/translate/text @@ -1,12 +1,11 @@ -sorry_only_user_can_change_his_status -create_notification -SupportMessages -email -whatsApp -subject -message -SupportMessages -EditDetails -OrderItems -reset -submite \ No newline at end of file +value_en +value_ar +value_de +type +id + +submite +PriceFrom +PriceTo +PriceFrom +PriceTo \ No newline at end of file