fixed code

src/components/ImageViewer.jsx

@@ -1,19 +1,20 @@
-import { useState, useCallback, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { useTranslation } from 'react-i18next';
 import CloseIcon from "./icons/CloseIcon";
+import Toast from "./Toast";
 import { getImageUrl } from "../config/authConstants";
-import { useChats } from "../hooks/useChats";
+import { useContactSeller } from "../hooks/useContactSeller";
 import { useAuthContext } from "../context/AuthContext";
 
 export default function ImageViewer({ images, initialIndex = 0, onClose, postData }) {
+  const { t } = useTranslation();
   const [index, setIndex] = useState(initialIndex);
   const touchStart = useRef(null);
   const swiped = useRef(false);
-  const navigate = useNavigate();
-  const { createOrGetChat } = useChats();
   const { isAuthenticated } = useAuthContext();
+  const { contactSeller, error: contactError, clearError } = useContactSeller(postData);
 
-  const urls = images.map(u => getImageUrl(u));
+  const urls = useMemo(() => images.map(u => getImageUrl(u)), [images]);
 
   const next = useCallback(() => {
     setIndex(i => (i + 1) % urls.length);
@@ -59,63 +60,63 @@ export default function ImageViewer({ images, initialIndex = 0, onClose, postDat
     touchStart.current = null;
   }, [prev, next]);
 
-  const handleContact = useCallback(async () => {
-    if (!postData) return;
-    try {
-      const chat = await createOrGetChat(postData.userId, postData.id, {
-        title: postData.title,
-        images: postData.images,
-        emoji: postData.emoji,
-      });
-      onClose();
-      navigate(`/chats/${chat.id}`);
-    } catch (err) {
-      console.error(err);
-    }
-  }, [postData, createOrGetChat, navigate, onClose]);
+  const handleContact = useCallback(() => {
+    // Закрываем вьюер перед переходом в чат
+    contactSeller(onClose);
+  }, [contactSeller, onClose]);
 
   const showContact = isAuthenticated && postData && !postData.isOwner && postData.status !== 'CLOSED';
 
   if (!urls.length) return null;
 
   return (
-    <div
-      className="f-viewer-bg"
-      onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
-      onClick={e => e.target === e.currentTarget && !swiped.current && onClose()}
-    >
-      <button className="f-viewer-close" onClick={onClose}>
-        <CloseIcon />
-      </button>
+      <div
+          className="f-viewer-bg"
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+          onClick={e => e.target === e.currentTarget && !swiped.current && onClose()}
+      >
+        <button type="button" className="f-viewer-close" onClick={onClose} aria-label={t('common.close')}>
+          <CloseIcon />
+        </button>
 
-      <div className="f-viewer">
-        <div className="f-viewer-img-wrap" onClick={handleImgClick}>
-          <img
-            src={urls[index]}
-            alt=""
-            className="f-viewer-img"
-          />
+        <div className="f-viewer">
+          <div className="f-viewer-img-wrap" onClick={handleImgClick}>
+            <img
+                src={urls[index]}
+                alt=""
+                className="f-viewer-img"
+            />
+          </div>
+
+          {showContact && (
+              <button type="button" className="f-viewer-contact" onClick={handleContact}>
+                {t('postCard.write')}
+              </button>
+          )}
+
+          {urls.length > 1 && (
+              <div className="f-viewer-dots">
+                {urls.map((_, i) => (
+                    <button
+                        type="button"
+                        key={i}
+                        className={`f-viewer-dot${i === index ? " active" : ""}`}
+                        onClick={() => setIndex(i)}
+                        aria-label={t('viewer.goToImage', { number: i + 1 })}
+                    />
+                ))}
+              </div>
+          )}
         </div>
 
-        {showContact && (
-          <button className="f-viewer-contact" onClick={handleContact}>
-            Написать
-          </button>
-        )}
-
-        {urls.length > 1 && (
-          <div className="f-viewer-dots">
-            {urls.map((_, i) => (
-              <button
-                key={i}
-                className={`f-viewer-dot${i === index ? " active" : ""}`}
-                onClick={() => setIndex(i)}
-              />
-            ))}
-          </div>
+        {contactError && (
+            <Toast
+                message={contactError}
+                type="error"
+                onDismiss={clearError}
+            />
         )}
       </div>
-    </div>
   );
-}
+}