There is an app, like Scrum game
every developer can select card with task difficulty estimation and unveil it for another devs in Scrum room.
FrontEnd Apps communicate with each other with backend Node.js script via WebSocket.
FrontEnd App is built with jQuery and it works well.
I was tasked to rebuild it with React JS.
I started with cards and stacked almost immediately.
Question is how to build App architecture to not use huge and deep global state but use component dependent states?
My approach :
class scrumPoker {
constructor() {
this.selfCardStates = [
{ n : 1, value : 0, state : 'inactive' },
{ n : 2, value : 1, state : 'inactive' },
{ n : 3, value : 10, state : 'inactive' },
{ n : 4, value : 50, state : 'inactive' },
];
this.cardRefs = [];
this.selfCardStates.map( ( card, i ) => {
this.cardRefs[i] = useRef( null );
} );
this.tools = toolBox = new toolBoxClass();
}
renderSingleCard = ( cardState ) => {
const [ card, setCard ] = useState( cardState );
const state = ( card.state == 'inactive' ) ? 'active' : 'unveiled';
return (
<div key={card.n} ref={this.cardRefs[card.n]} className="single-card"
onClick={ () => {
setCard( { n: card.n, value: card.value, state: state } );
this.cardRefs[card.n].current.className = 'single-card ' + state;
} }>
<div className="card-n">{card.n}</div>
<div className="card-value">{card.value}</div>
<div className="card-state">{card.state}</div>
</div>
);
}
renderCards = () => {
let cards = [];
cards = this.selfCardStates.map( ( cardState, i ) => {
return this.renderSingleCard( cardState, i )
} );
return (
<div className="cards-box">{cards}</div>
);
}
renderMainPage = function() {
return (
<React.Fragment>
<this.renderCards />
<div className="test-box">
<button onClick = { () => {
this.selfCardStates = [
{ n : 4, value : 20, state : 'active' },
{ n : 3, value : 30, state : 'active' },
{ n : 2, value : 50, state : 'active' },
{ n : 1, value : 100, state : 'active' },
];
} }>test</button>
</div>
</React.Fragment>
);
}
}
I expect to update state of all of 4 cards by button click, so I expect to see new cards set, but nothing happens.
cardRefs is used for CSS manipulating, it is secondary stuff.
Where is the convenience of React JS and how to re-build class to have ability to rebuild Cards set in reactive way by button click ( or Websocket answer receiving in real App ) ?
I do not understand how to organize my App to have flexibility with states manipulation and not to build large deep-nested almost global State ?
In terms of this App it means will be added another modules ( to create room, to handle WS requests, to add / remove user etc. ) and I do not see how to complete it without large deep-nested State.
How to structure App in right way ?