import * as React from "react" ; import { Droppable } from "react-beautiful-dnd" ; import Card from "../Card/Card" ; import { db } from "../../model" ; import Spinner from "../Spinner/Spinner" ; import NotFound from "../NotFound/NotFound" ; type Props = { listId : string ; } ; function Cards ( { listId } ) { const list = db . listsById . watch ( listId ) ; if ( list . _notFound ) return < NotFound missing = { `listsById.${ listId }` } />; if ( list . _fetching ) return < Spinner />; const cards = list . data . cards ; React . useEffect ( ( ) => { } , [ cards ] ) ; return ( < Droppable droppableId = { listId } > { ( provided , { isDraggingOver } ) => ( < > < div className = "cards" ref = { provided . innerRef } > { cards . map ( ( cardId , index ) => ( < Card isDraggingOver = { isDraggingOver } key = { cardId } cardId = { cardId } listId = { listId } index = { index } / > ) ) } { provided . placeholder } < div style = { { float : "left" , clear : "both" } } ref = { ( ) => { } } /> < /div> < />)} < /Droppable>); } export default Cards ;