import clsx from 'clsx' import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd' import { MenuIcon } from '@heroicons/react/solid' import { toast } from 'react-hot-toast' import { XCircleIcon } from '@heroicons/react/outline' import { Col } from 'web/components/layout/col' import { Row } from 'web/components/layout/row' import { Subtitle } from 'web/components/subtitle' import { keyBy } from 'lodash' import { Button } from './button' import { updateUser } from 'web/lib/firebase/users' import { leaveGroup } from 'web/lib/firebase/groups' import { User } from 'common/user' import { useUser } from 'web/hooks/use-user' import { Group } from 'common/group' export function ArrangeHome(props: { sections: { label: string; id: string; group?: Group }[] setSectionIds: (sections: string[]) => void }) { const { sections, setSectionIds } = props const sectionsById = keyBy(sections, 'id') return ( { const { destination, source, draggableId } = e if (!destination) return const section = sectionsById[draggableId] const newSectionIds = sections.map((section) => section.id) newSectionIds.splice(source.index, 1) newSectionIds.splice(destination.index, 0, section.id) setSectionIds(newSectionIds) }} > ) } function DraggableList(props: { title: string items: { id: string; label: string; group?: Group }[] }) { const user = useUser() const { title, items } = props return ( {(provided) => ( {items.map((item, index) => ( {(provided, snapshot) => (
)}
))} {provided.placeholder} )}
) } const SectionItem = (props: { item: { id: string; label: string; group?: Group } user: User | null | undefined className?: string }) => { const { item, user, className } = props const { group } = item return ( {group && ( )} ) }