No checkbox de selecionar todos, como posso selecionar todos sem que selecione os que ja foram escolhidos e desabilitados? Mesmo que no tsx desse hook eu tenho o disable, o checked ainda marca quando seleciono todos
type UseApiIntegrations = {
picsTotalAssociated: number[] | undefined;
};
type SelectedPicsSummary = {
allSelected: boolean;
count: number;
picsAvailable: Pic[];
};
type ApiIntegrationsState = {
integration: IntegrationUserAccountType[];
};
const {
integration,
} = useSelector<ApplicationState, ApiIntegrationsState>(state => ({
integration: state.apiIntegration.integration,
}));
const [integrationPic, setIntegrationPic] = useState<IntegrationPic[]>([]);
const [selectedPicsSummary, setSelectedPicsSummary] = useState<
SelectedPicsSummary
>({
allSelected: false,
count: 0,
picsAvailable: [],
});
const picsIntegradas = useMemo(() => {
return integration.map(item =>
item.integrationUserAccountPics.map(pics => pics.pic.picId),
);
}, [integration]);
const organizationsIntegrated = organizations.map(org => {
const organizationsPics = connectedPics.filter(
pic => pic.organization?.organizationId === org.organizationId,
);
return {
...org,
integrationPic: organizationsPics,
};
});
setIntegrationOrganization(organizationsIntegrated);
}
}, [integration, organizations, picsAvailable]);
useEffect(() => {
const selectedPics = filterPics.filter(item => item.listSelected);
setSelectedPicsSummary({
allSelected:
selectedPics.length > 0 && selectedPics.length === filterPics.length,
count: selectedPics.length,
picsAvailable,
});
}, [filterPics, picsAvailable]);
const handlePicSelectionToggle = useCallback(
(pic: Pic): void => {
dispatch(setListSelected(pic.picId, !pic.listSelected));
},
[dispatch],
);
const handleAllPicsSelectionToggle = useCallback(() => {
const finalSelected = selectedPicsSummary.count === 0;
dispatch(
setItemsSelected(
// eslint-disable-next-line no-shadow
filterPics.map(item => item.picId),
finalSelected,
),
);
}, [dispatch, filterPics, selectedPicsSummary.count]);
const handleOrganizationSelectionChange = useCallback(
(id: number): void => {
setSelectedOrganizationId(id);
dispatch(getEnabledPics(id));
dispatch(resetSelection());
const allIntegrationPics = [...integrationPics];
allIntegrationPics.map(item => picsConnectedId.includes(item.pic.picId));
setIntegrationPics(allIntegrationPics);
},
[dispatch, integrationPics, picsConnectedId],
);
// TODO Onde seleciona a pic para integrar com a organização
const submitPostEnabledPics = useCallback((): void => {
if (selectedOrganizationId) {
dispatch(
postEnabledPics(
selectedOrganizationId,
picsAvailable.filter(pic => pic.listSelected).map(item => item.picId),
),
);
}
dispatch(resetSelection());
}, [selectedOrganizationId, dispatch, picsAvailable]);
return {
handleAllPicsSelectionToggle,
handlePicSelectionToggle,
organizationsList: filterOrganizations,
picsAllSelected: selectedPicsSummary.allSelected,
picsSelected: selectedPicsSummary.count,
picsTotalAssociated: picsIntegradas.find(item => item),
};
};