Pass down preSelected, isCellValid and solved to sudokuBoard and childrens. Update function that returns cell's className

Author: mstou

src/components/board/Board.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import Row from './row/Row';
 
-const Board = ({ board, onCellChange }) => (
+const Board = ({ board, valid, preSelected, solved, onCellChange }) => (
  <div className="sudoku-board">
  {board.map( (row,index) => (
  <Row
  row={row}
  onCellChange={(row,column,input) => onCellChange(row,column,input)}
+ valid={valid[index]}
+ solved={solved}
+ preSelected={preSelected[index]}
  rowIndex={index}
  key={index}
  />

src/components/board/row/Row.js

@@ -2,13 +2,16 @@ import React from 'react';
 import Cell from './cell';
 //import './styles.css';
 
-const Row = ({row, rowIndex, onCellChange}) => (
+const Row = ({row, rowIndex, valid, preSelected, solved, onCellChange}) => (
  <div className="sudoku-row">
  {row.map( (num,columnIndex) => (
  <Cell
  data={num}
  row={rowIndex}
  column={columnIndex}
+ cellValid={valid[columnIndex]}
+ preSelected={preSelected[columnIndex]}
+ solved={solved}
  key={`${rowIndex}${columnIndex}`}
  onChange={(row,column,input) => onCellChange(row,column,input)}
  />

src/components/board/row/cell/cell.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const computeClassName = (row,column) => {
+const computeClassName = (row,column,cellValid,preSelected,solved) => {
  let className = '';
  if( column===2 || column===5 ){
  className += 'borderRight';
@@ -11,11 +11,23 @@ const computeClassName = (row,column) => {
  }
  className += 'borderBottom';
  }
+ if(preSelected && solved){
+ if(className!==''){
+ className +=' ';
+ }
+ className += 'preSelected';
+ }
+ if( !cellValid ){
+ if(className!==''){
+ className +=' ';
+ }
+ className += 'notValidCell';
+ }
  return className;
 }
 
-const Cell = ({data, row, column, onChange}) => (
- <div className={`sudoku-cell ${computeClassName(row,column)}`}>
+const Cell = ({data, row, column, cellValid, preSelected, solved, onChange}) => (
+ <div className={`sudoku-cell ${computeClassName(row,column,cellValid,preSelected,solved)}`}>
  <input
  value={(data!==0) ? data : '' }
  onChange={(e) => onChange(row,column,e.target.value.slice(-1))}