diff --git a/locales/en.json b/locales/en.json index 42038fd..5820580 100644 --- a/locales/en.json +++ b/locales/en.json @@ -13,5 +13,41 @@ "dry-wash.landing.hero-section.headline": "Revitalize Your Ride with Eco-Friendly Care!", "dry-wash.landing.make-order-button": "Make order", "dry-wash.landing.site-logo": "The logo of the \"Dry Master\" company", - "dry-wash.landing.social-proof-section.heading": "We are being chosen" + "dry-wash.landing.social-proof-section.heading": "We are being chosen", + "dry-wash.arm.master.add": "Add", + "dry-wash.arm.order.title": "Orders", + "dry-wash.arm.order.status.progress": "In Progress", + "dry-wash.arm.order.status.complete": "Completed", + "dry-wash.arm.order.status.pending": "Pending", + "dry-wash.arm.order.status.working": "Working", + "dry-wash.arm.order.status.canceled": "Canceled", + "dry-wash.arm.order.status.placeholder": "Select Status", + "dry-wash.arm.order.table.header.carNumber": "Car Number", + "dry-wash.arm.order.table.header.washingTime": "Washing Time", + "dry-wash.arm.order.table.header.orderDate": "Order Date", + "dry-wash.arm.order.table.header.status": "Status", + "dry-wash.arm.order.table.header.telephone": "Telephone", + "dry-wash.arm.order.table.header.location": "Location", + "dry-wash.arm.master.title": "Masters", + "dry-wash.arm.master.table.header.name": "Name", + "dry-wash.arm.master.table.header.currentJob": "Current Job", + "dry-wash.arm.master.table.header.phone": "Phone", + "dry-wash.arm.master.table.header.actions": "Actions", + "dry-wash.arm.master.table.actionsMenu.delete": "Delete Master", + "dry-wash.arm.master.drawer.title": "Add New Master", + "dry-wash.arm.master.drawer.inputName.label": "Full Name", + "dry-wash.arm.master.drawer.inputName.placeholder": "Enter Full Name", + "dry-wash.arm.master.drawer.inputPhone.label": "Phone Number", + "dry-wash.arm.master.drawer.inputPhone.placeholder": "Enter Phone Number", + "dry-wash.arm.master.drawer.button.save": "Save", + "dry-wash.arm.master.drawer.button.cancel": "Cancel", + "dry-wash.arm.master.sideBar.orders": "Orders", + "dry-wash.arm.master.sideBar.master": "Masters", + "dry-wash.arm.master.sideBar.title": "Dry Master", + "dry-wash.notFound.title": "Page Not Found", + "dry-wash.notFound.description": "Unfortunately, the page you are looking for does not exist.", + "dry-wash.notFound.button.back": "Back to Home", + "dry-wash.errorBoundary.title": "Something went wrong", + "dry-wash.errorBoundary.description": "We are already working on fixing the issue", + "dry-wash.errorBoundary.button.reload": "Reload Page" } diff --git a/locales/ru.json b/locales/ru.json index 660a185..3511bb3 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -3,7 +3,7 @@ "dry-wash.arm.order.title": "Заказы", "dry-wash.arm.order.status.progress": "Выполняется", "dry-wash.arm.order.status.complete": "Завершено", - "dry-wash.arm.order.status.pending": "в ожидании", + "dry-wash.arm.order.status.pending": "В ожидании", "dry-wash.arm.order.status.working": "В работе", "dry-wash.arm.order.status.canceled": "Отменено", "dry-wash.arm.order.status.placeholder": "Выберите статус", @@ -26,9 +26,9 @@ "dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона", "dry-wash.arm.master.drawer.button.save": "Сохранить", "dry-wash.arm.master.drawer.button.cancel": "Отменить", - "dry-wash.arm.master.sideBar.title": " Сухой мастер", - "dry-wash.arm.master.sideBar.title.master": "Мастера", - "dry-wash.arm.master.sideBar.title.orders": "Заказы", + "dry-wash.arm.master.sideBar.orders": "Заказы", + "dry-wash.arm.master.sideBar.master": "Мастера", + "dry-wash.arm.master.sideBar.title": "Сухой мастер", "dry-wash.landing.benefits-section.description": "Откройте для себя преимущества наших услуг по химчистке автомобилей", "dry-wash.landing.benefits-section.heading": "Преимущества экологичной автомойки", "dry-wash.landing.benefits-section.list.0": "Экологически безопасные продукты", @@ -46,8 +46,8 @@ "dry-wash.landing.social-proof-section.heading": "Нас выбирают", "dry-wash.notFound.title": "Страница не найдена", "dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.", - "dry-wash.notFound.button.back": " Вернуться на главную", + "dry-wash.notFound.button.back": "Вернуться на главную", "dry-wash.errorBoundary.title":"Что-то пошло не так", - "dry-wash.errorBoundary.description": " Мы уже работаем над исправлением проблемы", + "dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы", "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу" } diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx index 63b1be2..d505583 100644 --- a/src/components/ErrorBoundary/ErrorBoundary.tsx +++ b/src/components/ErrorBoundary/ErrorBoundary.tsx @@ -34,15 +34,16 @@ class ErrorBoundary extends Component { render() { const { hasError } = this.state; //TODO: добавить анимацию после залива 404 страницы + //TODO: может сделать обертку для хука, чтоб язык менялся без перезагрузки if (hasError) { return (
- {i18next.t('dry-wash.errorBoundary.title')} + {i18next.t('~:dry-wash.errorBoundary.title')} - {i18next.t('dry-wash.errorBoundary.description')} + {i18next.t('~:dry-wash.errorBoundary.description')}
diff --git a/src/components/MasterActionsMenu/MasterActionsMenu.tsx b/src/components/MasterActionsMenu/MasterActionsMenu.tsx index 6f5bd9a..a11ab5b 100644 --- a/src/components/MasterActionsMenu/MasterActionsMenu.tsx +++ b/src/components/MasterActionsMenu/MasterActionsMenu.tsx @@ -7,16 +7,18 @@ import { IconButton, } from '@chakra-ui/react'; import { EditIcon } from '@chakra-ui/icons'; -import i18next from 'i18next'; +import { useTranslation } from 'react-i18next'; const MasterActionsMenu = () => { + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.arm.master.table.actionsMenu', + }); + return ( } as={IconButton} variant='outline' /> - - {i18next.t('dry-wash.arm.master.table.actionsMenu.delete')} - + {t('delete')} ); diff --git a/src/components/MasterDrawer/MasterDrawer.tsx b/src/components/MasterDrawer/MasterDrawer.tsx index 03ed489..03cc9d1 100644 --- a/src/components/MasterDrawer/MasterDrawer.tsx +++ b/src/components/MasterDrawer/MasterDrawer.tsx @@ -12,7 +12,7 @@ import { DrawerHeader, DrawerOverlay, } from '@chakra-ui/react'; -import i18next from 'i18next'; +import { useTranslation } from 'react-i18next'; const MasterDrawer = ({ isOpen, onClose }) => { const [newMaster, setNewMaster] = useState({ name: '', phone: '' }); @@ -22,51 +22,44 @@ const MasterDrawer = ({ isOpen, onClose }) => { onClose(); }; + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.arm.master.drawer', + }); + return ( - - {i18next.t('dry-wash.arm.master.drawer.title')} - + {t('title')} - - {i18next.t('dry-wash.arm.master.drawer.inputName.label')} - + {t('inputName.label')} setNewMaster({ ...newMaster, name: e.target.value }) } - placeholder={i18next.t( - 'dry-wash.arm.master.drawer.inputName.placeholder', - )} + placeholder={t('inputName.placeholder')} /> - - {' '} - {i18next.t('dry-wash.arm.master.drawer.inputPhone.label')} - + {t('inputPhone.label')} setNewMaster({ ...newMaster, phone: e.target.value }) } - placeholder={i18next.t( - 'dry-wash.arm.master.drawer.inputPhone.placeholder', - )} + placeholder={t('inputPhone.placeholder')} /> diff --git a/src/components/Masters/Masters.tsx b/src/components/Masters/Masters.tsx index 5d7a236..f871257 100644 --- a/src/components/Masters/Masters.tsx +++ b/src/components/Masters/Masters.tsx @@ -11,32 +11,38 @@ import { useDisclosure, Flex, } from '@chakra-ui/react'; -import i18next from 'i18next'; - import { mastersData } from '../../mocks'; import MasterItem from '../MasterItem'; import MasterDrawer from '../MasterDrawer'; +import { useTranslation } from 'react-i18next'; -const TABLE_HEADERS = ['name', 'currentJob', 'phone', 'actions']; +const TABLE_HEADERS = [ + 'name' as const, + 'currentJob' as const, + 'phone' as const, + 'actions' as const, +]; const Masters = () => { const { isOpen, onOpen, onClose } = useDisclosure(); + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.arm.master', + }); + return ( - {i18next.t('dry-wash.arm.master.title')} + {t('title')} {TABLE_HEADERS.map((name) => ( - + ))} diff --git a/src/components/OrderItem/OrderItem.tsx b/src/components/OrderItem/OrderItem.tsx index 64c5444..72be7e2 100644 --- a/src/components/OrderItem/OrderItem.tsx +++ b/src/components/OrderItem/OrderItem.tsx @@ -1,8 +1,26 @@ import React, { useState } from 'react'; import { Td, Tr, Link, Select } from '@chakra-ui/react'; -import i18next from 'i18next'; +import { useTranslation } from 'react-i18next'; -const statuses = ['pending', 'progress', 'working', 'canceled', 'complete']; +const statuses = [ + 'pending' as const, + 'progress' as const, + 'working' as const, + 'canceled' as const, + 'complete' as const, +]; + +type GetArrItemType = + ArrType extends Array ? ItemType : never; + +export type OrderProps = { + carNumber?: string; + washTime?: string; + orderDate?: string; + status?: GetArrItemType; + phone?: string; + location?: string; +}; const OrderItem = ({ carNumber, @@ -11,7 +29,11 @@ const OrderItem = ({ status, phone, location, -}) => { +}: OrderProps) => { + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.arm.order', + }); + const [statusSelect, setStatus] = useState(status); return ( @@ -22,12 +44,12 @@ const OrderItem = ({
- {i18next.t(`dry-wash.arm.master.table.header.${name}`)} - {t(`table.header.${name}`)}
diff --git a/src/components/Orders/Orders.tsx b/src/components/Orders/Orders.tsx index 0c1ad8e..a80d886 100644 --- a/src/components/Orders/Orders.tsx +++ b/src/components/Orders/Orders.tsx @@ -1,36 +1,44 @@ import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react'; import React from 'react'; -import i18next from 'i18next'; - import { ordersData } from '../../mocks'; import OrderItem from '../OrderItem'; +import { useTranslation } from 'react-i18next'; +import { OrderProps } from '../OrderItem/OrderItem'; + const Orders = () => { + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.arm.order', + }); + const TABLE_HEADERS = [ - 'carNumber', - 'washingTime', - 'orderDate', - 'status', - 'telephone', - 'location', + 'carNumber' as const, + 'washingTime' as const, + 'orderDate' as const, + 'status' as const, + 'telephone' as const, + 'location' as const, ]; + return ( - {i18next.t('dry-wash.arm.order.title')} + {t('title')} {TABLE_HEADERS.map((name, key) => ( - + ))} {ordersData.map((order, index) => ( - + ))}
- {i18next.t(`dry-wash.arm.order.table.header.${name}`)} - {t(`table.header.${name}`)}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 4ae207a..308531c 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -1,46 +1,51 @@ -import { Box, Button, Heading, VStack } from '@chakra-ui/react'; +import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react'; import React from 'react'; -import { Divider } from '@chakra-ui/react'; -import i18next from 'i18next'; import { Link } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; -const Sidebar = () => ( - - - {i18next.t(`dry-wash.arm.master.sideBar.title`)} - +const Sidebar = () => { + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.arm.master.sideBar', + }); - - - - - - - - -); + return ( + + + {t('title')} + + + + + + + + + + + ); +}; export default Sidebar; diff --git a/src/components/landing/CtaButton/CtaButton.tsx b/src/components/landing/CtaButton/CtaButton.tsx index cf5df8d..725c961 100644 --- a/src/components/landing/CtaButton/CtaButton.tsx +++ b/src/components/landing/CtaButton/CtaButton.tsx @@ -15,7 +15,7 @@ export const CtaButton: FC = (props) => { colorScheme='primary' {...props} > - {t('dry-wash.landing.make-order-button')} + {t('~:dry-wash.landing.make-order-button')} ); }; diff --git a/src/components/landing/SiteLogo/SiteLogo.tsx b/src/components/landing/SiteLogo/SiteLogo.tsx index b56b5e8..caec618 100644 --- a/src/components/landing/SiteLogo/SiteLogo.tsx +++ b/src/components/landing/SiteLogo/SiteLogo.tsx @@ -7,7 +7,7 @@ import { LogoSvg } from '../../../assets/icons'; export const SiteLogo: FC = () => { const { t } = useTranslation(); - return {t('dry-wash.landing.site-logo')}; + return {t('~:dry-wash.landing.site-logo')}; }; // todo: replace Image by SVG React component