Полная интернационализация

FRONT/DEV/src/components/workSpace/sideBar/toolSpace/devicesBar.tsx

@@ -11,6 +11,7 @@ import { useWorkSpaceStore } from "../../../../store"
 import { workSpaceNames } from "../../../../const/workspace/names"
 import { IconComponent } from "../../../../const/buttons/icons"
 import { buttonNames } from "../../../../const/buttons/names"
+import {useTranslation} from "../../../../utils/i18n/hooks";
 
 const Container = styled.div`
     display: flex;
@@ -102,11 +103,12 @@ interface CurrentDevice {
 }
 
 export const DevicesBar = () => {
-    const { openModal } = useModalContext();
-    const { setIpAddress, ipAddress } = useIpStore();
-    const { devices, addDevice, deleteDevice } = useDevicesStore()
-    const { isOpen, collapseMenu } = useMenu(menusNames[1]);
-    const { setWorkModule } = useWorkSpaceStore()
+    const {openModal} = useModalContext();
+    const {setIpAddress, ipAddress} = useIpStore();
+    const {devices, addDevice, deleteDevice} = useDevicesStore()
+    const {isOpen, collapseMenu} = useMenu(menusNames[1]);
+    const {setWorkModule} = useWorkSpaceStore()
+    const {t} = useTranslation('common');
 
     const [currentDevice, setCurrentDevice] = useState<CurrentDevice>({
         address: 'localhost',
@@ -163,8 +165,8 @@ export const DevicesBar = () => {
     const handleDelete = (number: number, adress: string) => {
         deleteDevice(number)
 
-        
-        if(adress == ipAddress){
+
+        if (adress == ipAddress) {
             setIpAddress('localhost')
         }
     };
@@ -173,7 +175,7 @@ export const DevicesBar = () => {
         const isAvailable = await checkWebSocketAvailability(ip);
         if (!isAvailable) {
             openModal(ModalMap['3'], {
-                message: `Не удалось подключиться к серверу по адресу ${ip}`,
+                message: t('nodes-connectionError') + ip,
             });
             return;
         }
@@ -191,44 +193,46 @@ export const DevicesBar = () => {
     return (
         <Container>
             <Title>
-                <p className="unselectable">Доступные узлы</p>
+                <p className="unselectable">{t('nodes-availableNodes')}</p>
             </Title>
 
             <DeviceBlock>
                 <DeviceControl className="unselectable" onClick={() => switchWs(currentDevice.address)}>
-                    <p>Корневой адрес</p>
+                    <p>{t('nodes-rootAddress')}</p>
                 </DeviceControl>
                 {currentDevice.hostname == '' ? (
-                    <Text className="paddingP">Название: Загрузка<AnimDot /></Text>
+                    <Text className="paddingP">
+                        {t('nodes-name')}: {t('nodes-loading')}<AnimDot/>
+                    </Text>
                 ) : (
-                    <p className="paddingP">Название: {currentDevice.hostname}</p>
+                    <p className="paddingP">{t('nodes-name')}: {currentDevice.hostname}</p>
                 )}
             </DeviceBlock>
 
             <DevicesContainer>
                 <DevicesHeader className="unselectable" onClick={collapseMenu}>
-                    <p>Дополнительные узлы</p>
-                    <IconComponent name={isOpen ? buttonNames[5] : buttonNames[6]} />
+                    <p>{t('nodes-additionalNodes')}</p>
+                    <IconComponent name={isOpen ? buttonNames[5] : buttonNames[6]}/>
                 </DevicesHeader>
 
-                <DevicesContent $isactive={isOpen.toString()} >
+                <DevicesContent $isactive={isOpen.toString()}>
                     {devices.length > 0 &&
                         devices.map((device, index) => (
                             <DeviceBlock key={index}>
                                 <DeviceControl className="unselectable" onClick={() => switchWs(device.address)}>
-                                    <p>Узел {device.number}</p>
+                                    <p>{t('nodes-node')} {device.number}</p>
                                     <IconComponent
                                         width="20"
                                         height="20"
                                         name={buttonNames[2]}
                                         setColor="white"
                                         onClick={(e: any) => {
-                                            e.stopPropagation(); // Предотвращаем всплытие события
+                                            e.stopPropagation();
                                             handleDelete(device.number, device.address);
                                         }}
                                     />
                                 </DeviceControl>
-                                <p className="paddingP">Адрес: {device.address}</p>
+                                <p className="paddingP">{t('nodes-address')}: {device.address}</p>
                             </DeviceBlock>
                         ))
                     }
@@ -237,7 +241,6 @@ export const DevicesBar = () => {
                         +
                     </PlusBlock>
                 </DevicesContent>
-
             </DevicesContainer>
         </Container>
     )