| 37 | } |
| 38 | |
| 39 | export default function ChannelsView({ |
| 40 | currentCommunity, |
| 41 | channels, |
| 42 | setChannels, |
| 43 | api, |
| 44 | counts, |
| 45 | }: Props) { |
| 46 | const [currentId, setCurrentId] = useState(''); |
| 47 | const [modal, setModal] = useState<ModalView>(ModalView.NONE); |
| 48 | const [modalChannel, setModalChannel] = useState<SerializedChannel | null>(); |
| 49 | const debouncedUpdateChannel = useCallback( |
| 50 | debounce((channel: SerializedChannel) => |
| 51 | api.updateChannel({ |
| 52 | accountId: currentCommunity.id, |
| 53 | channelId: channel.id, |
| 54 | channelName: channel.channelName, |
| 55 | channelDefault: channel.default, |
| 56 | channelPrivate: channel.type === 'PRIVATE', |
| 57 | viewType: channel.viewType, |
| 58 | landing: channel.landing, |
| 59 | readonly: channel.readonly, |
| 60 | hidden: channel.hidden, |
| 61 | }) |
| 62 | ), |
| 63 | [currentCommunity] |
| 64 | ); |
| 65 | const debouncedDeleteChannel = useCallback(debounce(api.deleteChannel), []); |
| 66 | const debouncedReorderChannels = useCallback( |
| 67 | debounce(api.reorderChannels), |
| 68 | [] |
| 69 | ); |
| 70 | |
| 71 | const onDragStart = (event: React.DragEvent) => { |
| 72 | const node = event.target as HTMLDivElement; |
| 73 | if (node) { |
| 74 | const id = node.getAttribute('data-id'); |
| 75 | if (id) { |
| 76 | setCurrentId(id); |
| 77 | node.classList.add(styles.dragged); |
| 78 | } |
| 79 | } |
| 80 | }; |
| 81 | |
| 82 | const onDragEnd = (event: React.DragEvent) => { |
| 83 | const node = event.target as HTMLDivElement; |
| 84 | node.classList.remove(styles.dragged); |
| 85 | }; |
| 86 | |
| 87 | function onDragOver(event: React.DragEvent) { |
| 88 | event.preventDefault(); |
| 89 | return false; |
| 90 | } |
| 91 | |
| 92 | function onDragEnter(event: React.DragEvent) { |
| 93 | const id = event.currentTarget.getAttribute('data-id'); |
| 94 | if (id === currentId) { |
| 95 | return; |
| 96 | } |