/* ----------------- SAMPLE DATA GENERATION - START ----------------- */
const generateEmployees = length =>
Array.from({ length }, (v, k) => ({
id: k + 1,
name: `Emp ${k + 1}`,
hours: [8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8]
}))
const employees = generateEmployees(50)
/* ----------------- SAMPLE DATA GENERATION - END ------------------- */
/* --------------------- INITIALIZATION - START --------------------- */
const { reduxForm, Field, reducer: formReducer } = ReduxForm
const { createStore, combineReducers, applyMiddleware } = Redux
const { Provider, connect } = ReactRedux
const { createSelector } = Reselect
// Creating the Reducers
const employeesReducer = (state = employees) => state
const reducers = {
form: formReducer,
employees: employeesReducer
}
// Custom logger.
// The idea here is log all the dispatched action,
// in order to illustrate the problem with many registered fields better.
const logger = ({ getState }) => {
return next => action => {
console.log("Action: ", action)
return next(action)
}
}
const reducer = combineReducers(reducers)
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
applyMiddleware(logger)
)
/* --------------------- INITIALIZATION - END ----------------------- */
const renderEmployees = employees =>
employees.map(employee => {
return (
<tr key={employee.id}>
<td>{employee.id}</td>
<td>{employee.name}</td>
{employee.hours.map((hour, day) => (
<td key={day}>
<Field component="input" name={`${employee.id}_${day}`} />
</td>
))}
</tr>
)
})
const FormComponent = ({ employees, handleSubmit }) => {
return (
<form onSubmit={handleSubmit}>
<h2>Employees working hours for November (11.2018)</h2>
<p>
<button type="submit">Update all</button>
</p>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
{Array.from({ length: 30 }, (v, k) => (
<th key={k + 1}>{`${k + 1}.11`}</th>
))}
</tr>
</thead>
{renderEmployees(employees)}
</table>
</form>
)
}
const Form = reduxForm({
form: "workingHours",
onSubmit: submittedValues => {
console.log({ submittedValues })
}
})(FormComponent)
const getInitialValues = createSelector(
state => state.employees,
users =>
users.reduce((accumulator, employee) => {
employee.hours.forEach(
(hour, day) => (accumulator[`${employee.id}_${day}`] = hour)
)
return accumulator
}, {})
)
const mapStateToProps = state => ({
employees: state.employees,
initialValues: getInitialValues(state)
})
const App = connect(mapStateToProps)(Form)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
)
table {
border-collapse: collapse;
text-align: center;
}
table, th, td {
border: 1px solid black;
}
th {
height: 50px;
padding: 0 15px;
}
input {
width: 20px;
text-align: center;
}
<script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.4/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/3.0.1/reselect.js"></script>
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>