Newer
Older
import {
Accordion,
AccordionItem,
AccordionItemButton,
AccordionItemHeading,
AccordionItemPanel,
} from '@/shared/Accordion';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { MapOverlay } from '@/types/models';
import { ZERO } from '@/constants/common';
import { Icon } from '@/shared/Icon';
import { openEditOverlayGroupModal } from '@/redux/modal/modal.slice';
import { overlayGroupSelector } from '@/redux/overlayGroup/overlayGroup.selectors';
import { store } from '@/redux/store';
import { useUserOverlays } from './hooks/useUserOverlays';
import { UserOverlayListItem } from './UserOverlayListItem';
type OverlayGroupProps = {
groupId: number | null;
groupName: string;
overlays: MapOverlay[];
};
export const UserOverlaysGroup = ({
overlays,
groupName,
groupId,
}: OverlayGroupProps): React.ReactNode => {
const { moveUserOverlayListItem, updateUserOverlaysOrder, isPending, userOverlaysList } =
useUserOverlays(overlays, groupId);
const { dispatch, getState } = store;
const state = getState();
const overlayGroup = overlayGroupSelector(state, groupId);
const nullOverlay: MapOverlay = {
id: groupId ? -groupId : ZERO,
group: groupId,
publicOverlay: false,
creator: '',
type: '',
description: '',
name: '',
genomeType: '',
genomeVersion: '',
order: 0,
};
const openEditGroup = (): void => {
if (overlayGroup) {
dispatch(openEditOverlayGroupModal(overlayGroup));
}
};
return (
<DndProvider backend={HTML5Backend}>
<div className="mt-2.5">
<Accordion allowZeroExpanded>
<AccordionItem className="border-b-0" dangerouslySetExpanded={dangerouslySetExpanded}>
<AccordionItemHeading>
<AccordionItemButton
className="px-6 text-sm font-semibold"
sideMenu={
groupId && (
<button onClick={openEditGroup} type="button" className="mr-2">

Piotr Gawron
committed
<Icon name="pencil" />
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
{isPending ? (
<span className="py-4 pl-10 pr-5">Loading...</span>
) : (
<ul>
{userOverlaysList?.map((userOverlay, index) => (
<UserOverlayListItem
moveUserOverlay={moveUserOverlayListItem}
index={index}
userOverlay={userOverlay}
updateUserOverlaysOrder={updateUserOverlaysOrder}
/>
))}
<UserOverlayListItem
moveUserOverlay={moveUserOverlayListItem}
key={nullOverlay.id}
index={0}
userOverlay={nullOverlay}
updateUserOverlaysOrder={updateUserOverlaysOrder}
/>