alejandrosobko

const initialData = {
  column: {
    id: 'column-1',
      numberIds: ['four', 'one', 'five', 'three', 'two'],
    },
    numbers: {
      'five': { id: 'five', content: '5' },
      'four': { id: 'four', content: '4' },
      'one': { id: 'one', content: '1' },
      'three': { id: 'three', content: '3' },

alejandrosobko

class NumbersGame extends React.Component<any, INumbersGameState>{
    
  public constructor(props: any) {
    super(props);
    this.onDragEnd = this.onDragEnd.bind(this);
    this.state = {...initialData};
  }

  public onDragEnd(result: any) {
    // the item was dropped!

alejandrosobko

export default (props: IVerticalColumnProps) =>
  <DroppableWrapper droppableId={props.column.id} className="source">
    <DraggableListItems items={props.items} />
  </DroppableWrapper>

alejandrosobko

export default (props: any) =>
  <Droppable droppableId={props.droppableId}>
    {(provided: any) => (
      <div className={props.className}
            ref={provided.innerRef}
            {...provided.droppableProps}
            {...provided.droppablePlaceholder}>
              {props.children}
      </div>
    )}

alejandrosobko

export default (props: IDraggableListItems) =>
  <div> {props.items.map(toNumberBox)} </div>

function toNumberBox(item: INumberItemProps, position: number) {
  return <NumberBox key={item.id} 
                    className="box" 
                    itemPosition={position} 
                    value={item.id} 
                    content={item.content} />
}

alejandrosobko

export default (props: IDraggableItem) => {
  const className = `dnd-number size-${props.value}`;
 
  return (
    <DraggableItemWrapper draggableId={props.value} 
                          index={props.itemPosition} 
                          className={className}>
      <div>{props.content}</div>
    </DraggableItemWrapper>
  )

alejandrosobko

export default (props: any) =>
  <Draggable draggableId={props.draggableId} index={props.index}>
    {(provided: any) => (
      <div className={props.className} 
           ref={provided.innerRef} 
           {...provided.draggableProps} 
           {...provided.dragHandleProps}>
        {props.children}
      </div>
    )}

alejandrosobko

public onDragEnd(result: any) {
  const { destination, source, draggableId } = result;
  if (!destination) { return }
 
  const column = this.state.column;
  const numberIds = Array.from(column.numberIds);
  numberIds.splice(source.index, 1);
  numberIds.splice(destination.index, 0, draggableId);
  const numbers = numberIds.map((numberId: string) => 
    parseInt(this.state.numbers[numberId].content, 10));