React.js – Тема 7 – Courses WebSkill

Тема 7. React.js Local Chat App

Створення Local Chat App

Новий додаток
Форматування
Файли та папки

Створення Product Catalog React.js додатку, введення команд в консоль
D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку
npx create-react-app назва додатку - створення нового React.js проєкту
npx create-react-app - сама команда створення
назва додатку - назва папки в якій буде додаток
cd назва додатку - переходимо в створену папку

Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли: setupTests.js,repor,WebVitals.js,logo.svg,index.css,App.test.js
З файлу index.js видаляємо такі рядки
import './index.css'; import reportWebVitals from './reportWebVitals'; reportWebVitals();
Та коментарі: // If you want...
З файлу App.js видаляємо import logo from './logo.svg';
Тег <div className="app"> і все що всередині нього

В папці src залишаємо лише такі файли:
App.js, App.css, index.js
Одразу можете створити папку Components - папка для компонентів наших файлів

Скопіюйте стилізацію нижче та замініть її в файлі App.css

Інформація

Робимо заміну всієї стилізації в файлі App.css на свою, яку копіювали вище

Початок роботи із App.js та Chat.js

Інформація

1. Створити новий компонент Chat.js, одразу підключіть та виведіть його в App.js

2. В файлі Chat.js потрібно вивести 2 стани: для збереження повідомлень користувачів та для введення нового повідомлення користувача.

3. Добавити 'useEffect' хуки один для завантаження, другий для зберігання повідомлень в локальному сховищі

4. Добавити 2 функції, одна для відправлення повідомлень, друга - для зміни стану нового повідомлення

// Chat.js
import React, { useState, useEffect } from 'react';

const Chat = () => {
  // Стан для збереження повідомлень користувачів
  const [messages, setMessages] = useState([]);
  // Стан для введення нового повідомлення користувача
  const [newMessage, setNewMessage] = useState('');

// Ефект, який завантажує повідомлення з локального сховища при завантаженні компонента
  useEffect(() => {
    const storedMessages = JSON.parse(localStorage.getItem('chatMessages')) || [];
    setMessages(storedMessages);
  }, []);

// Ефект, який зберігає повідомлення в локальному сховищі при їх зміні
  useEffect(() => {
    localStorage.setItem('chatMessages', JSON.stringify(messages));
  }, [messages]);

// Функція для зміни стану нового повідомлення на основі введеного тексту
  const handleInputChange = (e) => {
    setNewMessage(e.target.value);
  };

// Функція для відправлення повідомлення
  const handleSendMessage = () => {
    if (newMessage.trim() !== '') {
      // Додає нове повідомлення до списку повідомлень та очищує поле вводу
      setMessages([...messages, newMessage]);
      setNewMessage('');
    }
  };

return (
    <div className="chat-container">
      <div className="messages-container">
        {messages.map((message, index) => (
          <div key={index} className="message">
            {message}
          </div>
        ))}
      </div>
      <div className="input-container">
        <input
          type="text"
          value={newMessage}
          onChange={handleInputChange}
          placeholder="Type a message..."
          className="message-input"
        />
        <button onClick={handleSendMessage} className="send-button">
          Send
        </button>
      </div>
    </div>
  );
};

export default Chat;

Скріншоти усіх файлів в нашому додатку

Завдання 1

Інформація

Перше завдання зв'язане з вдосконаленням коду, добавляючи вибір із повідомлень які можна відправити.

1. Створіть список фіксованих фраз або шаблонів, які можна вставляти у поле введення повідомлення.
2. Відобразіть ці фрази для вибору у вигляді кнопок або випадаючого списку
3.Після вибору фрази вставте її у поле введення повідомлення

Завдання 2

Інформація

Друге завдання зв'язане з вдосконаленням коду, добавляючи можливість видалення повідомлень із підтвердженням через модальне вікно.

1. Створіть компонент для pop up вікна, потрібно добавити в нього кнопки скасування та підтвердження видалення.
2. Добавити функції та стани:
2.1 Функція для видалення повідомлення
2.2 Функція для скасування видалення
2.3 Функція для підтвердження видалення
2.4 Стани для відкриття модального вікна підтвердження та індексу повідомлення, яке потрібно видалити
3. Добавити кнопку видалення з викликом функції для видалення повідомлення та модальне вікно підтвердження видалення в return();
4. Переглянути або скопіювати стилізацію можна нижче, використовуйте її як приклад

/* Стилі для Завдання 2 */

.predefined-messages {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.message {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 8px;
  margin-bottom: 8px;
}

.delete-button {
  padding: 6px 10px;
  background-color: #ff6347;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* Стилі для модального попап вікна підтвердження видалення повідомлення */
.confirmation-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.confirmation-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.confirmation-content p {
  margin-bottom: 20px;
}

.confirmation-buttons button {
  margin: 0 10px;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.confirmation-buttons button:first-child {
  background-color: #ccc;
  color: #000;
}

.confirmation-buttons button:last-child {
  background-color: #ff6347;
  color: #fff;
}

Завдання 3

Інформація UserInfoForm.js
Інформація Chat.js
Інформація App.js

Третє завдання зв'язане з вдосконаленням коду, добавляючи входу в чат використовуючи ім'я або нік а також відображення імені при надсиланні повідомлення.

1. Створіть компонент з інформацією про користувача, потрібно добавити в нього стани для збереження значень імені та електронної пошти
2. Добавити функції в новий компонент:
2.1 Функція, яка викликається при зміні значення поля введення імені і таку ж для електронної пошти
2.2 Функція, яка викликається при кліку на кнопку "Start Chat"(Перевіряє, чи введено ім'я та електронну пошту перед викликом функції onStartChat)
2.3 Поля введення для імені та електронної пошти
2.4 Кнопка для початку чату
3. Переглянути або скопіювати стилізацію можна нижче, використовуйте її як приклад

1. Змінити функцію для відправлення повідомлень handleSendMessage, щоб відображати ім'я, хто надіслав повідомлення
2. Добавити рядок для показу імені в блок відображення повідомлень користувачів

1. Стани для відображення чату та збереження імені та електронної пошти користувача
2. Функція, яка викликається при початку чату:
2.1 Зберігає ім'я користувача
2.2 Зберігає електронну пошту користувача
2.3 Показує компонент чату
3. Обгортка для центрування контенту
4. Умовний оператор для відображення форми введення даних або чату
5. Компонент для введення даних користувача
6. Компонент чату

Слідкуйте за нами: