0162db46b3
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m4s
727 lines
23 KiB
JavaScript
727 lines
23 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react'
|
||
import { useAuth } from './auth/AuthContext'
|
||
import BoardSelector from './BoardSelector'
|
||
import LoadingError from './LoadingError'
|
||
import WishlistDetail from './WishlistDetail'
|
||
import './Wishlist.css'
|
||
|
||
const API_URL = '/api/wishlist'
|
||
const BOARDS_CACHE_KEY = 'wishlist_boards_cache'
|
||
const ITEMS_CACHE_KEY = 'wishlist_items_cache'
|
||
const SELECTED_BOARD_KEY = 'wishlist_selected_board_id'
|
||
|
||
function Wishlist({ onNavigate, refreshTrigger = 0, isActive = false, initialBoardId = null, boardDeleted = false }) {
|
||
const { authFetch } = useAuth()
|
||
const [boards, setBoards] = useState([])
|
||
|
||
// Восстанавливаем выбранную доску из localStorage или используем initialBoardId
|
||
const getInitialBoardId = () => {
|
||
if (initialBoardId) return initialBoardId
|
||
return getSavedBoardId()
|
||
}
|
||
|
||
// Получает сохранённую доску из localStorage
|
||
const getSavedBoardId = () => {
|
||
try {
|
||
const saved = localStorage.getItem(SELECTED_BOARD_KEY)
|
||
if (saved) {
|
||
const boardId = parseInt(saved, 10)
|
||
if (!isNaN(boardId)) return boardId
|
||
}
|
||
} catch (err) {
|
||
console.error('Error loading selected board from cache:', err)
|
||
}
|
||
return null
|
||
}
|
||
|
||
const [selectedBoardId, setSelectedBoardIdState] = useState(getInitialBoardId)
|
||
const [items, setItems] = useState([])
|
||
const [completed, setCompleted] = useState([])
|
||
const [completedCount, setCompletedCount] = useState(0)
|
||
const [loading, setLoading] = useState(true)
|
||
const [boardsLoading, setBoardsLoading] = useState(true)
|
||
const [error, setError] = useState('')
|
||
const [completedExpanded, setCompletedExpanded] = useState(false)
|
||
const [completedLoading, setCompletedLoading] = useState(false)
|
||
const [selectedItem, setSelectedItem] = useState(null)
|
||
const [selectedWishlistForDetail, setSelectedWishlistForDetail] = useState(null)
|
||
const fetchingRef = useRef(false)
|
||
const fetchingCompletedRef = useRef(false)
|
||
const initialFetchDoneRef = useRef(false)
|
||
const prevIsActiveRef = useRef(isActive)
|
||
|
||
// Обёртка для setSelectedBoardId с сохранением в localStorage
|
||
const setSelectedBoardId = (boardId) => {
|
||
setSelectedBoardIdState(boardId)
|
||
try {
|
||
if (boardId) {
|
||
localStorage.setItem(SELECTED_BOARD_KEY, String(boardId))
|
||
} else {
|
||
localStorage.removeItem(SELECTED_BOARD_KEY)
|
||
}
|
||
} catch (err) {
|
||
console.error('Error saving selected board to cache:', err)
|
||
}
|
||
}
|
||
|
||
// Загрузка досок из кэша
|
||
const loadBoardsFromCache = () => {
|
||
try {
|
||
const cached = localStorage.getItem(BOARDS_CACHE_KEY)
|
||
if (cached) {
|
||
const data = JSON.parse(cached)
|
||
setBoards(data.boards || [])
|
||
// Проверяем, что сохранённая доска существует в списке
|
||
if (selectedBoardId) {
|
||
const boardExists = data.boards?.some(b => b.id === selectedBoardId)
|
||
if (!boardExists && data.boards?.length > 0) {
|
||
setSelectedBoardId(data.boards[0].id)
|
||
}
|
||
} else if (data.boards?.length > 0) {
|
||
// Пытаемся восстановить из localStorage
|
||
const savedBoardId = getSavedBoardId()
|
||
if (savedBoardId && data.boards.some(b => b.id === savedBoardId)) {
|
||
setSelectedBoardId(savedBoardId)
|
||
} else {
|
||
setSelectedBoardId(data.boards[0].id)
|
||
}
|
||
}
|
||
return true
|
||
}
|
||
} catch (err) {
|
||
console.error('Error loading boards from cache:', err)
|
||
}
|
||
return false
|
||
}
|
||
|
||
// Сохранение досок в кэш
|
||
const saveBoardsToCache = (boardsData) => {
|
||
try {
|
||
localStorage.setItem(BOARDS_CACHE_KEY, JSON.stringify({
|
||
boards: boardsData,
|
||
timestamp: Date.now()
|
||
}))
|
||
} catch (err) {
|
||
console.error('Error saving boards to cache:', err)
|
||
}
|
||
}
|
||
|
||
// Загрузка желаний из кэша (по board_id)
|
||
const loadItemsFromCache = (boardId) => {
|
||
try {
|
||
const cached = localStorage.getItem(`${ITEMS_CACHE_KEY}_${boardId}`)
|
||
if (cached) {
|
||
const data = JSON.parse(cached)
|
||
setItems(data.items || [])
|
||
setCompletedCount(data.completedCount || 0)
|
||
return true
|
||
}
|
||
} catch (err) {
|
||
console.error('Error loading items from cache:', err)
|
||
}
|
||
return false
|
||
}
|
||
|
||
// Сохранение желаний в кэш
|
||
const saveItemsToCache = (boardId, itemsData, count) => {
|
||
try {
|
||
localStorage.setItem(`${ITEMS_CACHE_KEY}_${boardId}`, JSON.stringify({
|
||
items: itemsData,
|
||
completedCount: count,
|
||
timestamp: Date.now()
|
||
}))
|
||
} catch (err) {
|
||
console.error('Error saving items to cache:', err)
|
||
}
|
||
}
|
||
|
||
// Загрузка списка досок
|
||
const fetchBoards = async () => {
|
||
try {
|
||
const response = await authFetch(`${API_URL}/boards`)
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setBoards(data || [])
|
||
saveBoardsToCache(data || [])
|
||
|
||
// Проверяем, что выбранная доска существует в списке
|
||
if (selectedBoardId) {
|
||
const boardExists = data?.some(b => b.id === selectedBoardId)
|
||
if (!boardExists && data?.length > 0) {
|
||
// Сохранённая доска не существует, выбираем первую
|
||
setSelectedBoardId(data[0].id)
|
||
}
|
||
} else if (data?.length > 0) {
|
||
// Пытаемся восстановить из localStorage
|
||
const savedBoardId = getSavedBoardId()
|
||
if (savedBoardId && data.some(b => b.id === savedBoardId)) {
|
||
setSelectedBoardId(savedBoardId)
|
||
} else {
|
||
setSelectedBoardId(data[0].id)
|
||
}
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('Error fetching boards:', err)
|
||
} finally {
|
||
setBoardsLoading(false)
|
||
}
|
||
}
|
||
|
||
// Загрузка желаний выбранной доски
|
||
const fetchItems = async () => {
|
||
if (!selectedBoardId || fetchingRef.current) return
|
||
fetchingRef.current = true
|
||
|
||
try {
|
||
const hasDataInState = items.length > 0 || completedCount > 0
|
||
if (!hasDataInState) {
|
||
const cacheLoaded = loadItemsFromCache(selectedBoardId)
|
||
if (!cacheLoaded) {
|
||
setLoading(true)
|
||
}
|
||
}
|
||
|
||
const response = await authFetch(`${API_URL}/boards/${selectedBoardId}/items`)
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Ошибка при загрузке желаний')
|
||
}
|
||
|
||
const data = await response.json()
|
||
const allItems = [...(data.unlocked || []), ...(data.locked || [])]
|
||
const count = data.completed_count || 0
|
||
|
||
setItems(allItems)
|
||
setCompletedCount(count)
|
||
saveItemsToCache(selectedBoardId, allItems, count)
|
||
setError('')
|
||
} catch (err) {
|
||
setError(err.message)
|
||
if (!loadItemsFromCache(selectedBoardId)) {
|
||
setItems([])
|
||
setCompletedCount(0)
|
||
}
|
||
} finally {
|
||
setLoading(false)
|
||
fetchingRef.current = false
|
||
}
|
||
}
|
||
|
||
// Загрузка завершённых для текущей доски
|
||
const fetchCompleted = async () => {
|
||
if (fetchingCompletedRef.current || !selectedBoardId) return
|
||
fetchingCompletedRef.current = true
|
||
|
||
try {
|
||
setCompletedLoading(true)
|
||
// Используем новый API для получения завершённых на доске
|
||
const response = await authFetch(`${API_URL}/boards/${selectedBoardId}/completed`)
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Ошибка при загрузке завершённых желаний')
|
||
}
|
||
|
||
const data = await response.json()
|
||
const completedData = Array.isArray(data) ? data : []
|
||
setCompleted(completedData)
|
||
} catch (err) {
|
||
console.error('Error fetching completed items:', err)
|
||
setCompleted([])
|
||
} finally {
|
||
setCompletedLoading(false)
|
||
fetchingCompletedRef.current = false
|
||
}
|
||
}
|
||
|
||
// Первая инициализация
|
||
useEffect(() => {
|
||
if (!initialFetchDoneRef.current) {
|
||
initialFetchDoneRef.current = true
|
||
|
||
// Загружаем доски из кэша
|
||
const boardsCacheLoaded = loadBoardsFromCache()
|
||
if (boardsCacheLoaded) {
|
||
setBoardsLoading(false)
|
||
}
|
||
|
||
// Загружаем доски с сервера
|
||
fetchBoards()
|
||
}
|
||
}, [])
|
||
|
||
// Загружаем желания при смене доски
|
||
useEffect(() => {
|
||
if (selectedBoardId) {
|
||
// Сбрасываем состояние
|
||
setItems([])
|
||
setCompletedCount(0)
|
||
setCompleted([])
|
||
setCompletedExpanded(false)
|
||
setLoading(true)
|
||
|
||
// Пробуем загрузить из кэша
|
||
const cacheLoaded = loadItemsFromCache(selectedBoardId)
|
||
if (cacheLoaded) {
|
||
setLoading(false)
|
||
}
|
||
|
||
// Загружаем свежие данные
|
||
fetchItems()
|
||
}
|
||
}, [selectedBoardId])
|
||
|
||
// Обновление при активации таба
|
||
useEffect(() => {
|
||
const wasActive = prevIsActiveRef.current
|
||
prevIsActiveRef.current = isActive
|
||
|
||
if (!initialFetchDoneRef.current) return
|
||
|
||
if (isActive && !wasActive) {
|
||
fetchBoards()
|
||
if (selectedBoardId) {
|
||
fetchItems()
|
||
}
|
||
}
|
||
}, [isActive])
|
||
|
||
// Обновление при refreshTrigger
|
||
useEffect(() => {
|
||
if (refreshTrigger > 0 && selectedBoardId) {
|
||
// Очищаем кэш для текущей доски, чтобы загрузить свежие данные
|
||
try {
|
||
localStorage.removeItem(`${ITEMS_CACHE_KEY}_${selectedBoardId}`)
|
||
} catch (err) {
|
||
console.error('Error clearing cache:', err)
|
||
}
|
||
fetchBoards()
|
||
fetchItems()
|
||
if (completedExpanded && completedCount > 0) {
|
||
fetchCompleted()
|
||
}
|
||
}
|
||
}, [refreshTrigger, selectedBoardId])
|
||
|
||
// Обновление при initialBoardId (когда создана новая доска или переход по ссылке)
|
||
useEffect(() => {
|
||
if (initialBoardId && initialBoardId !== selectedBoardId) {
|
||
// Сбрасываем флаг загрузки, чтобы не блокировать новую загрузку
|
||
fetchingRef.current = false
|
||
|
||
// Обновляем список досок (чтобы новая доска появилась)
|
||
fetchBoards().then(() => {
|
||
// Переключаемся на новую доску после обновления списка
|
||
// Это вызовет useEffect для selectedBoardId, который загрузит данные
|
||
setSelectedBoardId(initialBoardId)
|
||
})
|
||
}
|
||
}, [initialBoardId])
|
||
|
||
// Обработка удаления доски - выбираем первую доступную
|
||
useEffect(() => {
|
||
if (boardDeleted && boards.length > 0) {
|
||
// Очищаем текущие данные
|
||
setItems([])
|
||
setCompletedCount(0)
|
||
setCompleted([])
|
||
setCompletedExpanded(false)
|
||
setLoading(true)
|
||
|
||
// Обновляем список досок и выбираем первую
|
||
fetchBoards().then(() => {
|
||
// fetchBoards обновит boards, но мы уже в этом useEffect
|
||
// selectedBoardId обновится автоматически в useEffect ниже
|
||
})
|
||
}
|
||
}, [boardDeleted])
|
||
|
||
// Если текущая доска больше не существует в списке - выбираем первую
|
||
useEffect(() => {
|
||
if (boards.length > 0 && selectedBoardId) {
|
||
const boardExists = boards.some(b => b.id === selectedBoardId)
|
||
if (!boardExists) {
|
||
setSelectedBoardId(boards[0].id)
|
||
}
|
||
}
|
||
}, [boards, selectedBoardId])
|
||
|
||
const handleBoardChange = (boardId) => {
|
||
setSelectedBoardId(boardId)
|
||
}
|
||
|
||
const handleBoardEdit = () => {
|
||
const board = boards.find(b => b.id === selectedBoardId)
|
||
if (board?.is_owner) {
|
||
onNavigate?.('board-form', { boardId: selectedBoardId })
|
||
} else {
|
||
// Показать подтверждение выхода
|
||
handleLeaveBoard()
|
||
}
|
||
}
|
||
|
||
const handleLeaveBoard = async () => {
|
||
if (!window.confirm('Отвязаться от этой доски? Вы больше не будете видеть её желания.')) return
|
||
|
||
try {
|
||
const response = await authFetch(`${API_URL}/boards/${selectedBoardId}/leave`, {
|
||
method: 'POST'
|
||
})
|
||
|
||
if (response.ok) {
|
||
// Убираем доску из списка
|
||
const newBoards = boards.filter(b => b.id !== selectedBoardId)
|
||
setBoards(newBoards)
|
||
saveBoardsToCache(newBoards)
|
||
|
||
// Выбираем первую доску
|
||
if (newBoards.length > 0) {
|
||
setSelectedBoardId(newBoards[0].id)
|
||
} else {
|
||
setSelectedBoardId(null)
|
||
setItems([])
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('Error leaving board:', err)
|
||
}
|
||
}
|
||
|
||
const handleAddBoard = () => {
|
||
onNavigate?.('board-form', { boardId: null })
|
||
}
|
||
|
||
const handleToggleCompleted = () => {
|
||
const newExpanded = !completedExpanded
|
||
setCompletedExpanded(newExpanded)
|
||
|
||
if (newExpanded && completedCount > 0) {
|
||
fetchCompleted()
|
||
}
|
||
}
|
||
|
||
const handleAddClick = () => {
|
||
// Если selectedBoardId равен null, но есть доски, используем первую доску
|
||
// Если доски еще не загружены, используем initialBoardId
|
||
const boardIdToUse = selectedBoardId || (boards.length > 0 ? boards[0].id : initialBoardId)
|
||
onNavigate?.('wishlist-form', { wishlistId: undefined, boardId: boardIdToUse })
|
||
}
|
||
|
||
const handleItemClick = (item) => {
|
||
setSelectedWishlistForDetail(item.id)
|
||
}
|
||
|
||
const handleCloseDetail = () => {
|
||
setSelectedWishlistForDetail(null)
|
||
}
|
||
|
||
const handleMenuClick = (item, e) => {
|
||
e.stopPropagation()
|
||
setSelectedItem(item)
|
||
}
|
||
|
||
const handleEdit = () => {
|
||
if (selectedItem) {
|
||
onNavigate?.('wishlist-form', { wishlistId: selectedItem.id, boardId: selectedBoardId })
|
||
setSelectedItem(null)
|
||
}
|
||
}
|
||
|
||
const handleDelete = async () => {
|
||
if (!selectedItem) return
|
||
|
||
try {
|
||
const response = await authFetch(`${API_URL}/${selectedItem.id}`, {
|
||
method: 'DELETE',
|
||
})
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Ошибка при удалении')
|
||
}
|
||
|
||
setSelectedItem(null)
|
||
await fetchItems()
|
||
if (completedExpanded) {
|
||
await fetchCompleted()
|
||
}
|
||
} catch (err) {
|
||
setError(err.message)
|
||
setSelectedItem(null)
|
||
}
|
||
}
|
||
|
||
const handleCopy = async () => {
|
||
if (!selectedItem) return
|
||
|
||
try {
|
||
const response = await authFetch(`${API_URL}/${selectedItem.id}/copy`, {
|
||
method: 'POST',
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const errorText = await response.text().catch(() => '')
|
||
throw new Error(errorText || 'Ошибка при копировании')
|
||
}
|
||
|
||
const newItem = await response.json()
|
||
|
||
setSelectedItem(null)
|
||
|
||
// Очищаем кэш для текущей доски, чтобы новое желание появилось в списке
|
||
if (selectedBoardId) {
|
||
try {
|
||
localStorage.removeItem(`${ITEMS_CACHE_KEY}_${selectedBoardId}`)
|
||
} catch (err) {
|
||
console.error('Error clearing cache:', err)
|
||
}
|
||
}
|
||
|
||
// Обновляем список
|
||
await fetchItems()
|
||
|
||
// Открываем форму редактирования для нового желания
|
||
onNavigate?.('wishlist-form', { wishlistId: newItem.id, boardId: selectedBoardId })
|
||
} catch (err) {
|
||
console.error('Error copying wishlist item:', err)
|
||
setError(err.message || 'Ошибка при копировании')
|
||
setSelectedItem(null)
|
||
}
|
||
}
|
||
|
||
const formatPrice = (price) => {
|
||
return new Intl.NumberFormat('ru-RU', {
|
||
style: 'currency',
|
||
currency: 'RUB',
|
||
minimumFractionDigits: 0,
|
||
maximumFractionDigits: 0,
|
||
}).format(price)
|
||
}
|
||
|
||
const findFirstUnmetCondition = (item) => {
|
||
if (!item.unlock_conditions || item.unlock_conditions.length === 0) {
|
||
return null
|
||
}
|
||
|
||
for (const condition of item.unlock_conditions) {
|
||
let isMet = false
|
||
|
||
if (condition.type === 'task_completion') {
|
||
isMet = condition.task_completed === true
|
||
} else if (condition.type === 'project_points') {
|
||
const currentPoints = condition.current_points || 0
|
||
const requiredPoints = condition.required_points || 0
|
||
isMet = currentPoints >= requiredPoints
|
||
}
|
||
|
||
if (!isMet) {
|
||
return condition
|
||
}
|
||
}
|
||
|
||
return null
|
||
}
|
||
|
||
const renderUnlockCondition = (item) => {
|
||
if (item.completed) return null
|
||
|
||
const condition = findFirstUnmetCondition(item)
|
||
if (!condition) return null
|
||
|
||
let conditionText = ''
|
||
if (condition.type === 'task_completion') {
|
||
conditionText = condition.task_name || 'Задача'
|
||
} else {
|
||
const points = condition.required_points || 0
|
||
const project = condition.project_name || 'Проект'
|
||
let dateText = ''
|
||
if (condition.start_date) {
|
||
const date = new Date(condition.start_date + 'T00:00:00')
|
||
dateText = ` с ${date.toLocaleDateString('ru-RU')}`
|
||
} else {
|
||
dateText = ' за всё время'
|
||
}
|
||
conditionText = `${points} в ${project}${dateText}`
|
||
}
|
||
|
||
return (
|
||
<div className="unlock-condition-wrapper">
|
||
<div className="unlock-condition-line">
|
||
<div className="unlock-condition">
|
||
<svg className="lock-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/>
|
||
</svg>
|
||
<span className="condition-text">{conditionText}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const renderItem = (item) => {
|
||
const isFaded = (!item.unlocked && !item.completed) || item.completed
|
||
|
||
return (
|
||
<div
|
||
key={item.id}
|
||
className={`wishlist-card ${isFaded ? 'faded' : ''}`}
|
||
onClick={() => handleItemClick(item)}
|
||
>
|
||
<button
|
||
className="card-menu-button"
|
||
onClick={(e) => handleMenuClick(item, e)}
|
||
title="Меню"
|
||
>
|
||
⋮
|
||
</button>
|
||
|
||
<div className="card-image">
|
||
{item.image_url ? (
|
||
<img src={item.image_url} alt={item.name} />
|
||
) : (
|
||
<div className="placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||
<polyline points="21 15 16 10 5 21"/>
|
||
</svg>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="card-name">{item.name}</div>
|
||
|
||
{(() => {
|
||
const unmetCondition = findFirstUnmetCondition(item)
|
||
if (unmetCondition && !item.completed) {
|
||
return renderUnlockCondition(item)
|
||
}
|
||
if (item.price) {
|
||
return <div className="card-price">{formatPrice(item.price)}</div>
|
||
}
|
||
return null
|
||
})()}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (error && items.length === 0 && !boardsLoading && !loading) {
|
||
return (
|
||
<div className="wishlist">
|
||
<BoardSelector
|
||
boards={boards}
|
||
selectedBoardId={selectedBoardId}
|
||
onBoardChange={handleBoardChange}
|
||
onBoardEdit={handleBoardEdit}
|
||
onAddBoard={handleAddBoard}
|
||
loading={boardsLoading}
|
||
/>
|
||
<LoadingError onRetry={() => fetchItems()} />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="wishlist">
|
||
{/* Селектор доски */}
|
||
<BoardSelector
|
||
boards={boards}
|
||
selectedBoardId={selectedBoardId}
|
||
onBoardChange={handleBoardChange}
|
||
onBoardEdit={handleBoardEdit}
|
||
onAddBoard={handleAddBoard}
|
||
loading={boardsLoading}
|
||
/>
|
||
|
||
{/* Основной список */}
|
||
{boardsLoading && loading ? (
|
||
<div className="fixed inset-0 bottom-20 flex justify-center items-center">
|
||
<div className="flex flex-col items-center">
|
||
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
|
||
<div className="text-gray-600 font-medium">Загрузка...</div>
|
||
</div>
|
||
</div>
|
||
) : loading ? (
|
||
<div className="wishlist-loading">
|
||
<div className="w-8 h-8 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="wishlist-grid">
|
||
{items.map(renderItem)}
|
||
</div>
|
||
|
||
{/* Завершённые */}
|
||
{completedCount > 0 && (
|
||
<>
|
||
<div className="section-divider">
|
||
<button
|
||
className="completed-toggle"
|
||
onClick={handleToggleCompleted}
|
||
>
|
||
<span className="completed-toggle-icon">
|
||
{completedExpanded ? '▼' : '▶'}
|
||
</span>
|
||
<span>Завершённые</span>
|
||
</button>
|
||
</div>
|
||
{completedExpanded && (
|
||
<>
|
||
{completedLoading ? (
|
||
<div className="loading-completed">
|
||
<div className="w-8 h-8 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
|
||
</div>
|
||
) : (
|
||
<div className="wishlist-grid">
|
||
{completed.map(renderItem)}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Модальное окно для действий */}
|
||
{selectedItem && (
|
||
<div className="wishlist-modal-overlay" onClick={() => setSelectedItem(null)}>
|
||
<div className="wishlist-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="wishlist-modal-header">
|
||
<h3>{selectedItem.name}</h3>
|
||
</div>
|
||
<div className="wishlist-modal-actions">
|
||
<button className="wishlist-modal-edit" onClick={handleEdit}>
|
||
Редактировать
|
||
</button>
|
||
<button className="wishlist-modal-copy" onClick={handleCopy}>
|
||
Копировать
|
||
</button>
|
||
<button className="wishlist-modal-delete" onClick={handleDelete}>
|
||
Удалить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Модальное окно для деталей желания */}
|
||
{selectedWishlistForDetail && (
|
||
<WishlistDetail
|
||
wishlistId={selectedWishlistForDetail}
|
||
onNavigate={onNavigate}
|
||
boardId={selectedBoardId}
|
||
onRefresh={async () => {
|
||
await fetchItems()
|
||
if (completedExpanded) {
|
||
await fetchCompleted()
|
||
}
|
||
}}
|
||
onClose={handleCloseDetail}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Wishlist
|