simle-chat

1
import { useEffect } from 'react';
2
import { useDispatch } from 'react-redux';
3
import { useNavigate } from 'react-router-dom';
4
import { useTranslation } from 'react-i18next';
5
import { toast } from 'react-toastify';
6
import axios from 'axios';
7

8
import { actions as chatActions } from '../../slices/chatSlice';
9
import useAuth from '../../hooks/index';
10
import routes from '../../routes';
11

12
import ChannelsField from './ChannelsField';
13
import ChatField from './ChatField';
14

15
const ChatPage = () => {
16
  const dispatch = useDispatch();
17
  const navigate = useNavigate();
18
  const { getAuthHeader, logOut } = useAuth();
19
  const { t } = useTranslation();
20

21
  useEffect(() => {
22
    const axiosRequest = async () => {
23
      const headers = await getAuthHeader();
24
      try {
25
        const messages = await axios.get(routes.dataRequestPath('messages'), { headers });
26
        const channels = await axios.get(routes.dataRequestPath('channels'), { headers });
27
        dispatch(chatActions.setCurrentChats(messages.data));
28
        dispatch(chatActions.setCurrentChannels(channels.data));
29
      } catch (error) {
30
        if (!error.isAxiosError) {
31
          toast.error(t('toasts.auth.unknownErr'));
32
        } else if (error.response.status === 401) {
33
          logOut();
34
          navigate(routes.loginPagePath());
35
        } else {
36
          toast.error(t('toasts.auth.networkErr'));
37
        }
38
      }
39
    };
40
    axiosRequest();
41
  }, [dispatch, getAuthHeader]);
42

43
  return (
44
    <div className="container h-100 my-4 overflow-hidden rounded shadow">
45
      <div className="row h-100 bg-white flex-md-row">
46
        <ChannelsField />
47
        <ChatField />
48
      </div>
49
    </div>
50
  );
51
};
52

53
export default ChatPage;
54