import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { bem } from 'utils/bem'; import { GlobalLayout } from 'app/components/global-layout'; import { globalLabelSelector } from 'common/selectors'; import { ErrorViewStates } from 'common-v2/components'; import { Loading } from 'common-v2/types'; import { getLabelCounters } from 'label-permissions/actions'; import { artistsSelector, countersSelector, teamMembersSelector } from 'label-permissions/selectors'; import { LabelPermissionsTab } from 'label-permissions/types'; import { LabelPermissions, PermissionTabs } from '../../components'; import { MembersTableContainer } from '../members-table-container'; import { ArtistsTableContainer } from '../artists-table-container'; import { SEARCH_INPUT_PLACEHOLDER_MAP } from './constants'; import { BEM_CLASS, SLabelPermissionsContainer } from './s-label-permissions-container'; import { Head, HeadStaticTitles } from 'app/components/head'; const classes = bem(BEM_CLASS); export const LabelPermissionsContainer = React.memo(() => { const [activeTab, setActiveTab] = useState(LabelPermissionsTab.MEMBERS); const [search, setSearch] = useState(''); const dispatch = useDispatch(); const label = useSelector(globalLabelSelector); const { data: counters } = useSelector(countersSelector); const { loading: teamMembersLoading } = useSelector(teamMembersSelector); const { loading: artistsLoading } = useSelector(artistsSelector); const isSearchDisabled = teamMembersLoading === Loading.Started || artistsLoading === Loading.Started; const content = useMemo(() => { switch (activeTab) { case LabelPermissionsTab.MEMBERS: return ; case LabelPermissionsTab.ARTISTS: return ; } }, [activeTab, label, search]); const onTabChange = useCallback((activeTab: LabelPermissionsTab) => { setActiveTab(prevActiveTab => { if (activeTab !== prevActiveTab) { setSearch(''); } return activeTab; }); }, []); const onSearchChange = useCallback((event: React.ChangeEvent) => { setSearch(event.target.value); }, []); const clearSearch = useCallback(() => { setSearch(''); }, []); useEffect(() => { if (!label?.id) return; setSearch(''); dispatch(getLabelCounters.request(label.id)); }, [dispatch, label?.id]); return ( <> } > {content} ); });