simle-chat

1
import React from 'react';
2
import { Button, Dropdown, ButtonGroup } from 'react-bootstrap';
3
import { PlusSquare } from 'react-bootstrap-icons';
4
import { useSelector, useDispatch } from 'react-redux';
5
import { useTranslation } from 'react-i18next';
6

7
import { getCurrentChannels, getActiveChannel } from '../../selectors/chatSelectors';
8
import { actions as chatActions } from '../../slices/chatSlice';
9
import { actions as modalActions } from '../../slices/modalSlice';
10

11
const ChannelsField = () => {
12
  const dispatch = useDispatch();
13
  const { t } = useTranslation();
14

15
  const currentChannels = useSelector(getCurrentChannels);
16
  const activeChannel = useSelector(getActiveChannel);
17

18
  const handelSwitchChanel = (event) => {
19
    dispatch(chatActions.setActiveChannel({
20
      name: event.target.name,
21
      id: event.target.id,
22
    }));
23
  };
24

25
  /*
26
    Т.к. модальные окна для добавления и переименования канала обеденены в 1н элемент,
27
  то тут пришлось использовать 2е функции: для кнопки добавления, и отдельно для
28
  переименования и удаленяи канала. Можно использовать одну функцию обработчик,
29
  но тогда в ней придется использовать тернарные операторы.
30
  Возможно это пепеусложнение, и нужно было сделать отдельные элементы, но
31
  т.к. они максимально похожи, то я решил объеденить их.
32
  */
33
  const handelAddChannel = (event) => {
34
    dispatch(modalActions.openModal({
35
      modalType: event.target.dataset.change,
36
      show: true,
37
    }));
38
  };
39

40
  const handelChangeChannel = (event) => {
41
    const changeableСhannel = currentChannels.find((channel) => channel.id === event.target.id);
42
    dispatch(modalActions.openModal({
43
      id: event.target.id,
44
      modalType: event.target.dataset.change,
45
      show: true,
46
      name: changeableСhannel.name,
47
    }));
48
  };
49

50
  return (
51
    <div className="col-4 col-md-2 border-end px-0 bg-light flex-column h-100 d-flex">
52
      <div className="d-flex mt-1 align-items-center justify-content-between mb-2 ps-4 pe-2 p-4">
53
        <strong>{t('chatPage.channels.title')}</strong>
54
        <Button
55
          onClick={handelAddChannel}
56
          type="button"
57
          variant="group-vertical"
58
          className="p-0 text-primary"
59
          id="addChannel"
60
          data-change="addChannel"
61
        >
62
          <PlusSquare id="addChannel" data-change="addChannel" size={20} />
63
          <span className="visually-hidden" id="addChannel" data-change="addChannel">{t('chatPage.channels.addButton')}</span>
64
        </Button>
65
      </div>
66
      { currentChannels === null
67
        ? null
68
        : (
69
          <ul
70
            id="channels-box"
71
            className="nav flex-column nav-pills nav-fill px-2 mb-3 overflow-auto h-100 d-block"
72
          >
73
            {currentChannels.map((channel) => {
74
              const variant = channel.name === activeChannel ? 'secondary' : null;
75
              return (
76
                <li
77
                  className="nav-item w-100"
78
                  key={channel.id}
79
                >
80
                  {!channel.removable && (
81
                    <Button
82
                      type="button"
83
                      className="w-100 rounded-0 text-start"
84
                      variant={variant}
85
                      id={channel.id}
86
                      name={channel.name}
87
                      onClick={handelSwitchChanel}
88
                    >
89
                      <span className="me-1">{t('chatPage.channels.prefix')}</span>
90
                      {channel.name}
91
                    </Button>
92
                  )}
93
                  {channel.removable && (
94
                    <Dropdown as={ButtonGroup} className="d-flex">
95
                      <Button
96
                        type="button"
97
                        className="w-100 rounded-0 text-start text-truncate"
98
                        variant={variant}
99
                        id={channel.id}
100
                        name={channel.name}
101
                        onClick={handelSwitchChanel}
102
                      >
103
                        <span className="me-1">{t('chatPage.channels.prefix')}</span>
104
                        {channel.name}
105
                      </Button>
106
                      <Dropdown.Toggle split className="flex-grow-0" variant={variant}>
107
                        <span className="visually-hidden">{t('chatPage.channels.changeButton')}</span>
108
                      </Dropdown.Toggle>
109
                      <Dropdown.Menu>
110
                        <Dropdown.Item id={channel.id} data-change="deleteChannel" onClick={handelChangeChannel} href="#/action-1">
111
                          {t('chatPage.channels.deleteChannel')}
112
                        </Dropdown.Item>
113
                        <Dropdown.Item id={channel.id} data-change="renameChannel" onClick={handelChangeChannel} href="#/action-2">
114
                          {t('chatPage.channels.renameChannel')}
115
                        </Dropdown.Item>
116
                      </Dropdown.Menu>
117
                    </Dropdown>
118
                  )}
119
                </li>
120
              );
121
            })}
122
          </ul>
123
        )}
124
    </div>
125
  );
126
};
127

128
export default ChannelsField;
129