Updating property in child component from parent? - html

Question

I'm making a Trello Board with cards that store information.
I have 3 important components to undertake this:
TrelloBoard.js - containing 5 lanes which are divs. It also stores all the cards.
Lanes.js - which are divs that hold cards visually only
Cards.js - which contain info and can be dragged onto other lanes
In TrellBoard.js my cards are stored inside the state as follows:
cards: [ [], [], [], [], []],
At the moment each component has a state that keeps track of which column it is in [0-4] and the position in the column [0+]
When I drag a card from one lane to the other, a method onDragStart in Card.js stores the position (column - lane X - and index within the column - position Y) and then once I drop it on a lane a method onDrop(...) in Lane.js is called which lets TrelloBoard.js know that I am moving a card from lane X with position Y, to the last place in lane Z
In TrelloBoard, I now splice the card from the cards array and move it to another position via transferCards(...) method:
INITIAL:
0 1 2 3 4
- - - - -
ONE MOVE
0 - 2 3 4
- - 1 - -
Now if I move Card 2 from the 3rd column to 2nd column like so :
FAILURE
0 2 1 3 4
- - - - -
The state inside of my Card 1 believes that it is at position (1) instead of position (0) as it is displayed. This is because after I moved Card 2, the rest of the cards in the 3rd column (i.e Card 1 in the first diagram) did not update their state, which contains their index.
I was thinking I could manage all the data about the cards in TrelloBoard.js, but then once I integrate ore complex data such as due dates, descriptions, status, maybe even avatars... it becomes too complex to manage inside of TrelloBoard.js and I would rather manage all the data in each individual component.
So at the moment I'm quite stuck figuring out how to manage the cards
I'm not too familiar with React yet, but I was thinking I could attach a ref to every card that has been created, and from the method that splices and updates the cards[] array in TrelloBoard.js, that I could call each a method in each Card (in the affected column) that will move their position/index within the column (e.g., something like shiftDown() { this.setState({ index: this.index-1}) } ) and call that from TrelloBoard.js
TrelloBoard.js
import React, { Component } from 'react';
import './TrelloBoard.css';
import Card from '../components/Lane/Card';
import Lane from '../components/Lane/Lane';
import Modal from '../components/UI/Modal/Modal';
import Axios from 'axios';
class TrelloBoard extends Component {
constructor(props) {
super(props);
this.child = React.createRef();
}
state = {
cardModal: false,
modalTitle: "default",
modalStatus: "default",
modalStatusNumber: -1,
cards: [ [], [], [], [], []], // this should actually be lanes - thought
lanes: [],
testInit: false
}
setModalTitle = (name) => {
this.setState({modalTitle : name});
}
setModalStatus = (status) => {
this.setState({modalStatus : status})
}
closeModalHandler = () => {
this.setState({cardModal : false});
}
cardClickedHandler = (name, col) => {
this.setModalTitle(name);
this.setModalStatus(this.titles[col]);
this.setState({modalStatusNumber: col})
this.openModalHandler();
}
openModalHandler = () => {
this.setState({cardModal : true});
}
titles = ['Open', 'In progress', 'To be tested', 'Re-opened', 'Closed'];
colors = ['open', 'progress', 'test', 'reopened', '
componentDidMount() {
this.initCards();
}
initCards() {
if (!this.state.testInit) {
let initCards = [ [], [], [], [], []];
let initLanes = [];
let i = 0;
let n = 0;
for (const t of this.titles) {
n = 0;
const keyName = i+"-"+n;
const card = (<Card clicked = {this.cardClickedHandler}
ref={this.child}
keyID = {keyName}
column={i} >Column {i} card</Card>);
initCards[i].push(card);
const lane = (<Lane color={this.colors[i]} columnNumber={i}
title = {t} transfer={this.transferCards}>
{card}
</Lane>);
initLanes.push(lane);
i++;
}
this.setState({ cards: [...initCards] });
this.setState({ lanes: [...initLanes] });
this.setState({ testInit: true});
}
}
transferCards = (dragStartColumn, dragStartIndex, dragDestinationColumn, name) => {
const tempCards = [...this.state.cards];
// const spliced
tempCards[dragStartColumn].splice(dragStartIndex, 1);
// now all the cards after this one will have the incorrect position so we will have to update them all
// but then I don't have access to the rest of the data in the lane after that... damn!
const keyName = dragDestinationColumn+"-"+(tempCards[dragDestinationColumn].length);
const newCard = (<Card clicked = {this.cardClickedHandler}
keyID = {keyName} ref={this.child} index={tempCards[dragDestinationColumn].length-1}
column={dragDestinationColumn} name={name}>{name}</Card>);
tempCards[dragDestinationColumn].push(newCard);
// THIS IS WHAT I HAVE IN MIND!
// for (const c of tempCards[dragStartColumn]) {
// c.child.shiftDown();
// }
// alert("col: " + dragDestinationColumn + " | item: " + (tempCards[dragDestinationColumn].length-1) +
// " | destCol: " + dragDestinationColumn);
// spliced[0] needs to update its column index
const tempLanes = [...this.state.lanes];
const i = dragStartColumn;
const originalLane = (<Lane color={this.colors[i]} columnNumber={i}
title = {this.titles[i]} transfer={this.transferCards}>
{tempCards[dragStartColumn]}
</Lane>);
const d = dragDestinationColumn;
const destinationLane = (<Lane color={this.colors[d]} columnNumber={d}
title = {this.titles[d]} transfer={this.transferCards}>
{tempCards[dragDestinationColumn]}
</Lane>);
// problem 2 lines tempCards[..]..
alert(tempCards[2].length);
tempLanes[dragStartColumn] = originalLane;
tempLanes[dragDestinationColumn] = destinationLane;
this.setState( { cards: tempCards });
this.setState( { lanes: tempLanes });
// alert(array.length + " nuber of columns");
}
render () {
return (
<div className="wrapper">
{this.state.lanes}
<Modal
show = {this.state.cardModal} modalClosed = {this.closeModalHandler}
status={this.state.modalStatus} title={this.state.modalTitle}
color={this.state.modalStatusNumber} >
</Modal>
</div>
);
}
}
export default TrelloBoard;
Lane.js
import React, { Component } from 'react';
import './Lane.css';
import LaneContents from './LaneContents';
import LaneTitle from './LaneTitle';
import Space from './Space';
class Lane extends Component {
state = {
columnNumber: -1
}
onDragOver(ev) {
ev.preventDefault();
}
onDrop(ev, cat) {
let id = ev.dataTransfer.getData("id");
let name = ev.dataTransfer.getData("name");
const draggedCardColumn = id.split("-");
if (+draggedCardColumn[0] === this.state.columnNumber) {
return alert("dragging and dropping to same col");
}
// let TrelloBoard know to remove the card and put it in the other column
alert("col: " + +draggedCardColumn[0] + " | item: " + +draggedCardColumn[1] + " | destCol:" + +this.state.columnNumber);
this.props.transfer(+draggedCardColumn[0], +draggedCardColumn[1], this.state.columnNumber, name);
}
componentDidMount() {
this.setState({ columnNumber: this.props.columnNumber })
}
render() {
return (
<div className= "box"
onDrop={(e)=>{this.onDrop(e, "wip")}}
onDragOver={(e) => this.onDragOver(e)}>
<LaneTitle color={this.props.color}>{this.props.title}</LaneTitle>
<Space/>
<LaneContents>
{this.props.children}
</LaneContents>
</div>
);
}
};
export default Lane;
Card.js
import React, { Component } from 'react';
import './Card.css';
class Card extends Component {
state = {
column: 2,
index: -1,
name: "default"
}
componentDidMount() {
this.setState({column: this.props.column});
this.setState({title: this.props.children});
this.setState({index: this.props.index});
this.setState({name: this.props.name});
}
onDragEnd = (ev) => {
ev.preventDefault();
}
onDragStart = (ev, id) => {
console.log('dragstart:',id);
ev.dataTransfer.setData("id", id);
ev.dataTransfer.setData("name", this.props.children);
}
updateIndex(newIndex) {
this.setState({ index: newIndex });
}
shiftDown() {
// THIS IS WHAT I HAVE IN MIND - to be called from TrelloBoard.js
// this.setState({ index: this.state.index - 1});
}
updateColumn(newColumn) {
this.setState({ column: newColumn });
}
setTitle() {
this.setState({ title: this.props.children})
}
render() {
return (
<div
key = {this.props.keyID}
className="box-contents--card droppable"
draggable="true"
onClick = {() => this.props.clicked(this.props.children, this.state.column) }
onDragStart = {(e) => this.onDragStart(e, this.props.keyID)}
onDragEnd = {(e) => this.onDragEnd(e)}
>
{this.props.children}
</div>
);
}
};
export default Card;