- {editingId ? 'Edit Article' : 'Create New Article'} + {editingId ? 'Редактировать статью' : 'Создать новую статью'}
+ {error && ( +
+ {error}
+
+ )}
+
- {article.category}
+ {categoryName}
Access Denied
- You don't have permission to {action} articles in the {category} category. + You don't have permission to {action} articles in the {category.name} category.
{city ? `${city} ` : ''} - {category ? `${category} Статьи` : 'Тематические статьи'} + {categoryParam ? `${categoryParam} Статьи` : 'Тематические статьи'}
Показано {Math.min(currentPage * ARTICLES_PER_PAGE, filteredArticles.length)} из {filteredArticles.length} статей
@@ -73,7 +75,7 @@ export function FeaturedSection() {
{/* About Section */}
-
{/* Quick Links */}
About CultureScope
+О нас
- CultureScope is your premier destination for arts and culture coverage. - Founded in 2024, we bring you the latest in film, theater, music, sports, - and cultural stories from around the globe. + Культура двух столиц - это главное место, где вы можете найти информацию об искусстве и культуре. + Основав портал в 2015 году, мы предлагаем вам самые свежие новости о кино, + театре, музыке, спорте и культуре Москвы и Санкт-Петербурга.
-
Quick Links
+Быстрые ссылки
- - Film + Кино
- - Theater + Театр
- - Music + Музыка
- - Sports + Спорт
- - Art + Исскуство
- - Legends + Легенды
- - Anniversaries + Юбилеи
- - Memory + Память
-
Contact Us
+Контакты
-
- contact@culturescope.com + izolkin@yandex.ru - @@ -93,12 +93,12 @@ export function Footer() {
Our Partners
+Наши партнеры
-
- - Metropolitan Museum + + Туроператор «Прогулки» -
@@ -121,7 +121,7 @@ export function Footer() {
- © {new Date().getFullYear()} CultureScope. All rights reserved. + © {new Date().getFullYear()} Культура двух столиц. Все права защищены.
•diff --git a/src/components/GalleryManager.tsx b/src/components/GalleryManager.tsx index 1eeed5b..b1b9419 100644 --- a/src/components/GalleryManager.tsx +++ b/src/components/GalleryManager.tsx @@ -49,11 +49,11 @@ export function GalleryManager({ images, onChange }: GalleryManagerProps) { {/* Add New Image */}-Add New Image
+Добавить новое фото
{/* Gallery Preview */}- Add Image + Добавить фото -Gallery Images
+Состав галереи
{images.map((image, index) => (void; + onError: (error: string) => void; +} + +export function CoverImageUpload({ coverImage, onImageUpload, onError }: CoverImageUploadProps) { + const fileInputRef = useRef(null); + + const handleFileSelect = async (event: React.ChangeEvent ) => { + const file = event.target.files?.[0]; + if (!file) return; + + try { + // Проверка разрешения изображения + const resolution = imageResolutions.find(r => r.id === 'large'); + if (!resolution) + throw new Error('Invalid resolution'); + + const formData = new FormData(); + formData.append('file', file); + formData.append('resolutionId', resolution.id); + formData.append('folder', 'articles/1'); + + // Получение токена из локального хранилища + const token = localStorage.getItem('token'); + + // Отправка запроса на сервер + const response = await axios.post('/api/images/upload-url', formData, { + headers: { + 'Content-Type': 'multipart/form-data', + 'Authorization': `Bearer ${token}`, // Передача токена аутентификации + }, + }); + + if (response.data?.fileUrl) { + onImageUpload(response.data.fileUrl); // Передача URL загруженного изображения + } + } catch (error) { + onError('Failed to upload image. Please try again.'); + console.error('Upload error:', error); + } + + // Сброс значения input для повторного выбора того же файла + if (fileInputRef.current) { + fileInputRef.current.value = ''; + } + }; + + const handleClearImage = () => { + onImageUpload(''); + if (fileInputRef.current) { + fileInputRef.current.value = ''; + } + }; + + return ( + + ++ ); +} diff --git a/src/components/ImageUpload/ImageUploader.tsx b/src/components/ImageUpload/ImageUploader.tsx index 2b30e40..7e0c1d2 100644 --- a/src/components/ImageUpload/ImageUploader.tsx +++ b/src/components/ImageUpload/ImageUploader.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { ImageDropzone } from './ImageDropzone'; import { ResolutionSelect } from './ResolutionSelect'; import { UploadProgress } from './UploadProgress'; diff --git a/src/data/mock.ts b/src/data/mock.ts index a84ca61..db12c27 100644 --- a/src/data/mock.ts +++ b/src/data/mock.ts @@ -1,15 +1,15 @@ -import { Article, Author } from '../types'; +import {Article, Author, CategoryName} from '../types'; export const authors: Author[] = [ { id: '1', - name: 'Elena Martinez', + name: 'Елена Маркова', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=150&h=150', bio: 'Cultural critic and art historian based in Barcelona', }, { id: '2', - name: 'James Chen', + name: 'Илья Золкин', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=150&h=150', bio: 'Music journalist and classical pianist', }, @@ -21,7 +21,7 @@ export const articles: Article[] = [ title: 'The Renaissance of Independent Theater', excerpt: 'How small theater companies are revolutionizing modern storytelling through innovative approaches and community engagement.', content: 'In the heart of urban artistic communities, independent theater companies are crafting innovative narratives that challenge traditional storytelling methods.', - category: 'Theater', + categoryId: 2, // Theater city: 'New York', author: authors[0], coverImage: 'https://images.unsplash.com/photo-1503095396549-807759245b35?auto=format&fit=crop&q=80&w=2070', @@ -56,7 +56,7 @@ export const articles: Article[] = [ title: 'Evolution of Digital Art Museums', excerpt: 'Exploring the intersection of technology and traditional art spaces in the modern digital age.', content: 'As we venture further into the digital age, museums are adapting to new ways of presenting art that blend traditional curation with cutting-edge technology.', - category: 'Art', + categoryId: 5, // Art city: 'London', author: authors[1], coverImage: 'https://images.unsplash.com/photo-1460661419201-fd4cecdf8a8b?auto=format&fit=crop&q=80&w=2070', @@ -72,7 +72,7 @@ export const articles: Article[] = [ title: 'The Future of Classical Music', excerpt: 'Contemporary composers bridging the gap between traditional and modern musical expressions.', content: 'Classical music is experiencing a remarkable transformation as new composers blend traditional orchestral elements with contemporary influences.', - category: 'Music', + categoryId: 3, // Music city: 'London', author: authors[1], coverImage: 'https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?auto=format&fit=crop&q=80&w=2070', @@ -88,7 +88,7 @@ export const articles: Article[] = [ title: 'Modern Literature in the Digital Age', excerpt: 'How e-books and digital platforms are changing the way we consume and create literature.', content: 'The digital revolution has transformed the literary landscape, offering new ways for authors to reach readers and for stories to be told.', - category: 'Art', + categoryId: 5, // Art city: 'New York', author: authors[0], coverImage: 'https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?auto=format&fit=crop&q=80&w=2070', @@ -104,7 +104,7 @@ export const articles: Article[] = [ title: 'The Rise of Immersive Art Installations', excerpt: 'How interactive and immersive art is transforming gallery spaces worldwide.', content: 'Interactive art installations are revolutionizing the way we experience and engage with contemporary art.', - category: 'Art', + categoryId: 5, // Art city: 'New York', author: authors[0], coverImage: 'https://images.unsplash.com/photo-1547826039-bfc35e0f1ea8?auto=format&fit=crop&q=80&w=2070', @@ -120,7 +120,7 @@ export const articles: Article[] = [ title: 'Film Festivals in the Post-Pandemic Era', excerpt: 'How film festivals are adapting to hybrid formats and reaching wider audiences.', content: 'Film festivals are embracing digital platforms while maintaining the magic of in-person screenings.', - category: 'Film', + categoryId: 1, // Film city: 'London', author: authors[1], coverImage: 'https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&q=80&w=2070', @@ -136,10 +136,10 @@ export const articles: Article[] = [ title: 'Street Art: From Vandalism to Validation', excerpt: 'The evolution of street art and its acceptance in the contemporary art world.', content: 'Street art has transformed from a controversial form of expression to a celebrated art movement.', - category: 'Art', + categoryId: 5, // Art city: 'New York', author: authors[0], - coverImage: 'https://images.unsplash.com/photo-1499781350541-7783f6c6a0c8?auto=format&fit=crop&q=80&w=2070', + coverImage: 'https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?auto=format&fit=crop&q=80&w=2070', gallery: [] , publishedAt: '2024-03-09T10:00:00Z', readTime: 6, @@ -152,7 +152,7 @@ export const articles: Article[] = [ title: 'The New Wave of Theater Technology', excerpt: 'How digital innovations are enhancing live theater performances.', content: 'Modern theater productions are incorporating cutting-edge technology to create immersive experiences.', - category: 'Theater', + categoryId: 2, // Theater city: 'London', author: authors[1], coverImage: 'https://images.unsplash.com/photo-1507676184212-d03ab07a01bf?auto=format&fit=crop&q=80&w=2070', diff --git a/src/data/mockUsers.ts b/src/data/mockUsers.ts index 775fd89..8b20e77 100644 --- a/src/data/mockUsers.ts +++ b/src/data/mockUsers.ts @@ -1,7 +1,17 @@ import { User } from '../types/auth'; import { Category, City } from '../types'; -const categories: Category[] = ['Film', 'Theater', 'Music', 'Sports', 'Art', 'Legends', 'Anniversaries', 'Memory']; +const categories: Category[] = [ + {id : 1, name : 'Film'}, + {id : 2, name : 'Theater'}, + {id : 3, name : 'Music'}, + {id : 4, name : 'Sports'}, + {id : 5, name : 'Art'}, + {id : 6, name : 'Legends'}, + {id : 7, name : 'Anniversaries'}, + {id : 8, name : 'Memory'} +]; + const cities: City[] = ['New York', 'London']; export const mockUsers: User[] = [ @@ -12,7 +22,7 @@ export const mockUsers: User[] = [ permissions: { categories: categories.reduce((acc, category) => ({ ...acc, - [category]: { create: true, edit: true, delete: true } + [category.id]: { create: true, edit: true, delete: true } }), {}), cities: cities, isAdmin: true diff --git a/src/hooks/useBackgroundImage.ts b/src/hooks/useBackgroundImage.ts index 682e13b..f2a16d2 100644 --- a/src/hooks/useBackgroundImage.ts +++ b/src/hooks/useBackgroundImage.ts @@ -1,4 +1,4 @@ -import { Category } from '../types'; +import { CategoryName } from '../types'; const backgroundImages = { Film: '/images/film-bg.avif?auto=format&fit=crop&q=80&w=2070', @@ -12,6 +12,6 @@ const backgroundImages = { default: 'https://images.unsplash.com/photo-1460661419201-fd4cecdf8a8b?auto=format&fit=crop&q=80&w=2070' }; -export function useBackgroundImage(category?: Category | null) { - return category ? backgroundImages[category] : backgroundImages.default; +export function useBackgroundImage(name?: CategoryName | null) { + return name ? backgroundImages[name] : backgroundImages.default; } \ No newline at end of file diff --git a/src/hooks/useUserManagement.ts b/src/hooks/useUserManagement.ts index d59527e..6e129ea 100644 --- a/src/hooks/useUserManagement.ts +++ b/src/hooks/useUserManagement.ts @@ -39,8 +39,8 @@ export function useUserManagement() { ...selectedUser.permissions, categories: { ...selectedUser.permissions.categories, - [category]: { - ...selectedUser.permissions.categories[category], + [category.name]: { + ...selectedUser.permissions.categories[category.name], [action]: value, }, }, diff --git a/src/pages/AdminPage.tsx b/src/pages/AdminPage.tsx index b74311f..2aa0512 100644 --- a/src/pages/AdminPage.tsx +++ b/src/pages/AdminPage.tsx @@ -1,20 +1,32 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; +import axios from "axios"; import { useEditor, EditorContent } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit'; import { Header } from '../components/Header'; import { GalleryManager } from '../components/GalleryManager'; -import { Category, City, GalleryImage } from '../types'; -import { ImagePlus, Bold, Italic, List, ListOrdered, Quote, Pencil, Trash2, ChevronLeft, ChevronRight } from 'lucide-react'; +import { CoverImageUpload } from '../components/ImageUpload/CoverImageUpload'; +import {Category, City, Article, GalleryImage, CategoryMap} from '../types'; +import { Bold, Italic, List, ListOrdered, Quote, Pencil, Trash2, ChevronLeft, ChevronRight } from 'lucide-react'; import { articles } from '../data/mock'; -const categories: Category[] = ['Film', 'Theater', 'Music', 'Sports', 'Art', 'Legends', 'Anniversaries', 'Memory']; +//const categories: Category[] = ['Film', 'Theater', 'Music', 'Sports', 'Art', 'Legends', 'Anniversaries', 'Memory']; +const categories: Category[] = ['Кино', 'Театр', 'Музыка', 'Спорт', 'Искусство', 'Легенды', 'Юбилеи', 'Память']; + +/* +const categorieIds: Category[] = CategoryNames.map((name, index) => ({ + id: index + 1, + name, +})); +*/ + + const cities: City[] = ['New York', 'London']; const ARTICLES_PER_PAGE = 5; export function AdminPage() { const [title, setTitle] = useState(''); const [excerpt, setExcerpt] = useState(''); - const [category, setCategory] = useState+ {coverImage && ( ++++ )} ++ + +
+ + + +++ Рекомендуемый размер: 1920x1080px. Поддерживаются PNG, JPG, JPEG или WebP до 10MB. +
+('Art'); + const [category, setCategory] = useState ('Искусство'); const [city, setCity] = useState ('New York'); const [coverImage, setCoverImage] = useState(''); const [readTime, setReadTime] = useState(5); @@ -25,6 +37,7 @@ export function AdminPage() { const [currentPage, setCurrentPage] = useState(1); const [filterCategory, setFilterCategory] = useState (''); const [filterCity, setFilterCity] = useState (''); + const [error, setError] = useState (null); const editor = useEditor({ extensions: [StarterKit], @@ -36,6 +49,25 @@ export function AdminPage() { }, }); +/* + useEffect(() => { + async function fetchArticles() { + try { + const response = await axios.get('/api/articles', { + headers: { + Authorization: `Bearer ${localStorage.getItem('token')}`, + }, + }); + setArticlesList(response.data); + } catch (err) { + setError('Не удалось загрузить статьи'); + console.error(err); + } + } + fetchArticles(); + }, []); +*/ + const filteredArticles = useMemo(() => { return articlesList.filter(article => { if (filterCategory && filterCity) { @@ -82,12 +114,19 @@ export function AdminPage() { setShowDeleteModal(null); }; - const handleSubmit = (e: React.FormEvent) => { + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); + + const categoryId : number = CategoryMap[category]; + if (!categoryId) { + console.error('Invalid category name.'); + return; + } + const articleData = { title, excerpt, - category, + categoryId, city, coverImage, readTime, @@ -97,14 +136,22 @@ export function AdminPage() { if (editingId) { setArticlesList(prev => - prev.map(article => - article.id === editingId - ? { ...article, ...articleData } - : article - ) + prev.map(article => + article.id === editingId + ? {...article, ...articleData} + : article + ) ); setEditingId(null); } else { + // Создание новой статьи + const response = await axios.post('/api/articles', articleData, { + headers: { + Authorization: `Bearer ${localStorage.getItem('token')}`, + }, + }); + setArticlesList(prev => [...prev, response.data]); + // In a real app, this would send data to an API console.log('Creating new article:', articleData); } @@ -126,13 +173,19 @@ export function AdminPage() {