import { Localized } from "@fluent/react/compat" ; import React , { FunctionComponent , useCallback , useState } from "react" ; import { useField } from "react-final-form" ; import { Label } from "coral-ui/components/v2" ; import SiteSearch from "../SiteSearch" ; import SiteModeratorModalSelectedSiteQuery from "./SiteModeratorModalSelectedSiteQuery" ; interface Props { selectedSiteIDs ? : string [ ] ; } const SiteModeratorModalSites = ( { selectedSiteIDs , } ) => { const [ candidateSites , setCandidateSites ] = useState < string [ ] > ( selectedSiteIDs || [ ] ) ; const { input : siteIDsInput } = useField < string [ ] > ( "siteIDs" ) ; const onRemoveSite = useCallback ( ( siteID ) => { const changed = [ ... siteIDsInput . value ] ; const index = changed . indexOf ( siteID ) ; if ( index >= 0 ) { changed . splice ( index , 1 ) ; } siteIDsInput . onChange ( changed ) ; } , [ siteIDsInput ] ) ; const onAddSite = useCallback ( ( siteID ) => { const changed = [ ... siteIDsInput . value ] ; const index = changed . indexOf ( siteID ) ; if ( index === - 1 ) { changed . push ( siteID ) ; if ( ! candidateSites . includes ( siteID ) ) { setCandidateSites ( [ ... candidateSites , siteID ] ) ; } } siteIDsInput . onChange ( changed ) ; } , [ siteIDsInput ] ) ; const onToggle = useCallback ( ( siteID , checked ) => checked ? onRemoveSite ( siteID ) : onAddSite ( siteID ) , [ onAddSite , onRemoveSite ] ) ; return ( < > < Localized id = "community-siteModeratorModal-selectSites" > < Label > Select sites to moderate < /Label> < /Localized> { candidateSites . map ( ( siteID ) => { const checked = siteIDsInput . value . includes ( siteID ) ; return ( < SiteModeratorModalSelectedSiteQuery key = { siteID } siteID = { siteID } checked = { checked } onChange = { onToggle } / > ) ; } ) } < SiteSearch showSiteSearchLabel = { false } showAllSitesSearchFilterOption = { false } showOnlyScopedSitesInSearchResults = { true } onSelect = { onAddSite } clearTextFieldValueAfterSelect = { true } / > < />); } ; export default SiteModeratorModalSites ;