React Effect Senior

[Nolra]

Code: https://github.com/Nolra/front_course_2023/tree/react-effect-senior

Обязательно к прочтению и повторению (желательно с пробами примеров): https://reactdev.ru/reference/useEffect

HW: (https://nolra.github.io/react_hw/ - вкладка Effects, компонент - Chat) Напишите приложение, которое симулирует подключение к трем разным чатам (с уведомлениями в консоли) и которое также может включать/отключать шифрование. И последняя функция - изменения темы для отображения уведомлений о сообщениях.

Для показа уведомлений вам понадобится библиотека - npm i toastify-js (правильное использование этой библиотеки описано ниже)

// notifications.js
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';

export function showNotification(message, theme) {
    Toastify({
        text: message,
        duration: 2000,
        gravity: 'top',
        position: 'right',
        style: {
            background: theme === 'dark' ? 'black' : 'white',
            color: theme === 'dark' ? 'white' : 'black',
        },
    }).showToast();
}

А для того, чтобы переключение темы не вызывало переподключение вам потребуется использовать useEffectEvent, но так как он официально не добавлен в стабильную версию реакт вы можете использовать этот полифил вместо него:

// useEffectEventHook.js import { useRef, useInsertionEffect, useCallback } from 'react';

export function useEffectEvent(fn) {
  const ref = useRef(null);
  useInsertionEffect(() => {
    ref.current = fn;
  }, [fn]);
  return useCallback((...args) => {
    const f = ref.current;
    return f(...args);
  }, []);
}

[voidaugust]

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

UPD: добавил кое-что, теперь рандомные всплывающие сообщения зависят от выбранной комнаты.

[nedostatoksna]

https://nedostatoksna.github.io/react_homeworks/ https://github.com/nedostatoksna/react_homeworks/tree/main/src/components/Effect