Унификация отображения ошибок: LoadingError для загрузки, Toast для действий

play-life-web/src/components/TodoistIntegration.jsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useAuth } from './auth/AuthContext'
+import LoadingError from './LoadingError'
+import Toast from './Toast'
 import './Integrations.css'
 
 function TodoistIntegration({ onNavigate }) {
@@ -9,6 +11,8 @@ function TodoistIntegration({ onNavigate }) {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
   const [message, setMessage] = useState('')
+  const [toastMessage, setToastMessage] = useState(null)
+  const [isLoadingError, setIsLoadingError] = useState(false)
 
   useEffect(() => {
     checkStatus()
@@ -23,7 +27,7 @@ function TodoistIntegration({ onNavigate }) {
         window.history.replaceState({}, '', window.location.pathname)
       } else if (status === 'error') {
         const errorMsg = params.get('message') || 'Произошла ошибка'
-        setError(errorMsg)
+        setToastMessage({ text: errorMsg, type: 'error' })
         window.history.replaceState({}, '', window.location.pathname)
       }
     }
@@ -45,6 +49,7 @@ function TodoistIntegration({ onNavigate }) {
     } catch (error) {
       console.error('Error checking status:', error)
       setError(error.message || 'Не удалось проверить статус')
+      setIsLoadingError(true)
     } finally {
       setLoading(false)
     }
@@ -69,7 +74,7 @@ function TodoistIntegration({ onNavigate }) {
       }
     } catch (error) {
       console.error('Error connecting Todoist:', error)
-      setError(error.message || 'Не удалось подключить Todoist')
+      setToastMessage({ text: error.message || 'Не удалось подключить Todoist', type: 'error' })
       setLoading(false)
     }
   }
@@ -91,15 +96,26 @@ function TodoistIntegration({ onNavigate }) {
       }
       setConnected(false)
       setTodoistEmail('')
-      setMessage('Todoist отключен')
+      setToastMessage({ text: 'Todoist отключен', type: 'success' })
     } catch (error) {
       console.error('Error disconnecting:', error)
-      setError(error.message || 'Не удалось отключить Todoist')
+      setToastMessage({ text: error.message || 'Не удалось отключить Todoist', type: 'error' })
     } finally {
       setLoading(false)
     }
   }
 
+  if (isLoadingError && !loading) {
+    return (
+      <div className="p-4 md:p-6">
+        <button className="close-x-button" onClick={() => onNavigate?.('profile')} title="Закрыть">
+          ✕
+        </button>
+        <LoadingError onRetry={checkStatus} />
+      </div>
+    )
+  }
+
   return (
     <div className="p-4 md:p-6">
       <button className="close-x-button" onClick={() => onNavigate?.('profile')} title="Закрыть">
@@ -108,18 +124,6 @@ function TodoistIntegration({ onNavigate }) {
 
       <h1 className="text-2xl font-bold mb-6">Todoist интеграция</h1>
 
-      {message && (
-        <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6 text-green-800">
-          {message}
-        </div>
-      )}
-
-      {error && (
-        <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6 text-red-800">
-          {error}
-        </div>
-      )}
-
       {loading ? (
         <div className="fixed inset-0 flex justify-center items-center">
           <div className="flex flex-col items-center">
@@ -192,6 +196,13 @@ function TodoistIntegration({ onNavigate }) {
           </div>
         </div>
       )}
+      {toastMessage && (
+        <Toast
+          message={toastMessage.text}
+          type={toastMessage.type}
+          onClose={() => setToastMessage(null)}
+        />
+      )}
     </div>
   )
 }