From 0292162a846b7b66d83cfc10def782c1c5184c2e Mon Sep 17 00:00:00 2001 From: Alexandra <тут почта пользователя> Date: Sun, 21 Jul 2024 18:29:34 +0300 Subject: [PATCH 1/6] hw04_react_2 --- skypro-kanban/data.js | 79 +++++++++++++++++++ skypro-kanban/src/App.css | 9 +++ skypro-kanban/src/App.jsx | 39 +++++++-- skypro-kanban/src/components/Card/Card.jsx | 12 +-- .../src/components/Column/Column.jsx | 6 +- .../src/components/Header/Header.jsx | 18 ++++- skypro-kanban/src/components/Main/Main.jsx | 32 +++----- .../Popups/PopNewCard/PopNewCard.jsx | 67 +++++++++++++--- skypro-kanban/src/main.jsx | 1 + 9 files changed, 213 insertions(+), 50 deletions(-) create mode 100644 skypro-kanban/data.js diff --git a/skypro-kanban/data.js b/skypro-kanban/data.js new file mode 100644 index 0000000..5abf4b3 --- /dev/null +++ b/skypro-kanban/data.js @@ -0,0 +1,79 @@ +export const cardList = [ + { + id: 1, + topic: "Web Design", + title: "Название задачи", + date: "30.10.23", + status: "БЕЗ СТАТУСА" + }, + { + id: 2, + topic: "Research", + title: "Название задачи", + date: "31.10.23", + status: "БЕЗ СТАТУСА" + }, + { + id: 3, + topic: "Web Design", + title: "Название задачи", + date: "30.10.23", + status: "БЕЗ СТАТУСА" + }, + { + id: 4, + topic: "Copywriting", + title: "Название задачи", + date: "31.10.23", + status: "БЕЗ СТАТУСА" + }, + { + id: 5, + topic: "Web Design", + title: "Название задачи", + date: "31.10.23", + status: "БЕЗ СТАТУСА" + }, + { + id: 6, + topic: "Research", + title: "Название задачи", + date: "30.10.23", + status: "НУЖНО СДЕЛАТЬ" + }, + { + id: 7, + topic: "Research", + title: "Название задачи", + date: "30.10.23", + status: "В РАБОТЕ" + }, + { + id: 8, + topic: "Copywriting", + title: "Название задачи", + date: "30.10.23", status: "В РАБОТЕ" + }, + { + id: 9, + topic: "Web Design", + title: "Название задачи", + date: "30.10.23", + status: "В РАБОТЕ" + }, + { + id: 10, + topic: "Research", + title: "Название задачи", + date: "01.11.23", + status: "ТЕСТИРОВАНИЕ" + }, + { + id: 11, + topic: "Research", + title: "Название задачи", + date: "01.11.23", + status: "ГОТОВО" + }, +]; + diff --git a/skypro-kanban/src/App.css b/skypro-kanban/src/App.css index c094f14..353706c 100644 --- a/skypro-kanban/src/App.css +++ b/skypro-kanban/src/App.css @@ -1125,4 +1125,13 @@ body { .pop-exit__form-group { display: block; } +} + +.loading { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-size: 24px; + color: #333; } \ No newline at end of file diff --git a/skypro-kanban/src/App.jsx b/skypro-kanban/src/App.jsx index d985f0f..da6ab0d 100644 --- a/skypro-kanban/src/App.jsx +++ b/skypro-kanban/src/App.jsx @@ -1,21 +1,48 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import Header from './components/Header/Header'; import Main from './components/Main/Main'; import PopBrowse from './components/Popups/PopBrowse/PopBrowse'; import PopNewCard from './components/Popups/PopNewCard/PopNewCard'; import PopUser from './components/Popups/PopUser/PopUser'; +import { cardList } from '../data'; import './App.css'; function App() { + const [cards, setCards] = useState([]); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + // Эмуляция загрузки данных + setTimeout(() => { + setCards(cardList); + setIsLoading(false); + }, 2000); // 2 секунды задержки + }, []); + + function onCardAdd() { + const newCard = { + id: cards.length + 1, + topic: "Тема", + title: "Новая карточка", + date: new Date().toLocaleDateString('ru-RU'), + status: "Без статуса" + }; + setCards([...cards, newCard]); + } + return (
- + -
-
+
+ {isLoading ? ( +
Данные загружаются...
+ ) : ( +
+ )}
- ); + ) } -export default App; \ No newline at end of file +export default App; diff --git a/skypro-kanban/src/components/Card/Card.jsx b/skypro-kanban/src/components/Card/Card.jsx index 27d3e09..d065a01 100644 --- a/skypro-kanban/src/components/Card/Card.jsx +++ b/skypro-kanban/src/components/Card/Card.jsx @@ -1,23 +1,23 @@ import React from 'react'; import '../../App.css'; -function Card({ title, category, date }) { - const getThemeClass = (category) => { - switch (category.toLowerCase()) { +function Card({ title, topic, date }) { + const getThemeClass = (topic) => { + switch (topic.toLowerCase()) { case 'web design': return '_orange'; case 'research': return '_green'; case 'copywriting': return '_purple'; - default: return ''; + default: return '_gray'; } }; - const themeClass = getThemeClass(category); + const themeClass = getThemeClass(topic); return (
-

{category}

+

{topic}

diff --git a/skypro-kanban/src/components/Column/Column.jsx b/skypro-kanban/src/components/Column/Column.jsx index 8bc4205..989287d 100644 --- a/skypro-kanban/src/components/Column/Column.jsx +++ b/skypro-kanban/src/components/Column/Column.jsx @@ -36,11 +36,11 @@ function Column({ title, tasks }) {

{title}

- {tasks.map((task, index) => ( -
+ {tasks.map((task) => ( +
diff --git a/skypro-kanban/src/components/Header/Header.jsx b/skypro-kanban/src/components/Header/Header.jsx index 3741610..b536665 100644 --- a/skypro-kanban/src/components/Header/Header.jsx +++ b/skypro-kanban/src/components/Header/Header.jsx @@ -1,7 +1,7 @@ import React from 'react'; import '../../App.css'; -function Header() { +function Header({ onCardAdd }) { const handleUserClick = (e) => { e.preventDefault(); // Предотвращаем действие по умолчанию const targetElement = document.querySelector(e.currentTarget.getAttribute('href')); @@ -10,6 +10,16 @@ function Header() { } }; + const handleCreateNewTask = () => { + onCardAdd({ + id: Date.now(), + title: 'Новая задача', + date: new Date().toLocaleDateString('ru-RU'), + category: 'Web Design', + status: 'Без статуса' + }); + }; + return (