React-Redux how to use reusable checkbox component for displaying data - react-redux

Question

I have been asked to tamper with React-Redux code (knowing very little at the moment) and update a colleague's front-end code. One of the application's functionality, is for the administrator to create alert notifications and distribute them across different departments. These departments are selected with checkboxes and finally with a 'Send' button, they alert everyone involved. The form with all the necessary fields, is saved in the database. The notification details page, has detailed information and the mockup that we are supposed to produce, has the involved departments with the same form of grouped checkeboxes (along with their checked/unchecked status).
My colleague had created a reusable component like so:
import React from "react";
import { connect } from "react-redux";
import {reset, change, registerField } from "redux-form";
import _ from "lodash";
import DepartmentTypeCheckBoxes from "./ThreatTypeCheckBoxes";
import { setNotifView, setNotifViewForm } from "Actions/notifView.action";
import { Label } from "reactstrap";
import { ICustomProps } from "Entities/baseForm";
interface INotificationState {
notifStatus?: boolean;
}
interface IProps extends ICustomProps {
registerField(): void;
resetForm(): void;
changeField(value: any): any;
setNotifView(view: any): void;
setNotifViewForm(form: any): void;
}
class DepartmentType extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
};
this.onFieldChange = this.onFieldChange.bind(this);
}
public componentWillMount() {
this.props.registerField();
}
public onFieldChange() {
if(this.state.status && this.state.status == true){
this.setState({ status: false })
this.props.changeField(false);
}
else{
this.setState({ status: true })
this.props.changeField(true);
}
}
public componentWillReceiveProps(nextProps: IProps , nextState: IState) {
}
public render() {
return (
<div className="form-group">
<div className="f" >
<Label for="type">Department Types</Label>
<div className="">
<div className="">
<DepartmentTypeCheckBoxes id="1" value="option1" label="Development" fieldName="development" formName="CreateAlertNotification"></DepartmentTypeCheckBoxes>
</div>
<div className="">
<DepartmentTypeCheckBoxes id="2" value="option2" label="Human resources" fieldName="humanResources" formName="CreateAlertNotification"></DepartmentTypeCheckBoxes>
</div>
<div className="">
<DepartmentTypeCheckBoxes id="3" value="option3" label="Consultance" fieldTag="consultance" formTag="CreateAlertNotification"></DepartmentTypeCheckBoxes>
</div>
</div>
<div className="">
<div className="">
<div className="">
<DepartmentTypeCheckBoxes id="4" value="option4" label="Logistics" fieldTag="logistics" formTag="CreateAlertNotification"></DepartmentTypeCheckBoxes>
</div>
</div>
<div className="">
{this.props.children && this.props.children}
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state: any, ownProps: ICustomProps) => {
return {
};
};
const mapDispatchToProps = (dispatch: any, ownProps: ICustomProps) => {
const formTag = ownProps.formTag;
const fieldTag = ownProps.fieldTag;
return {
registerField: () => dispatch(registerField(formTag, fieldTag, "FieldArray")),
changeField: (value: any) => dispatch(change(formTag, fieldTag, value, false, false)),
setNotifView: (view: any) => dispatch(setNotifView(view)),
setNotifViewForm: (form: any) => dispatch(setNotifViewForm(form)),
resetFields: () => dispatch(reset("CreateAlertNotification")),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(DepartmentType);
and uses it in the submission form like so:
<Row>
<Col md="6">
{ initialValues.ShowDepartmentBoxes &&
<DepartmentType fieldTag="DepType" formTag="CreateAlertNotification">
<Field name="AnotherCustomField" className="form-control" component={renderField} type="text" label="General Information" />
</DepartmentType>
}
</Col>
<Col md="6">
<AnotherCustomField fieldTag="SomeFieldName" formTag="CreateAlertNotification" Mode="create"/>
</Col>
</Row>
I want to use the same DepartmentType field in my "Notification Details" page, with the values loaded in the notification object from the db. Assuming I have 4 bool values like
notification.IsHumanResourcesAlerted
notification.IsDevelopmentAlerted,
notification.IsLogisticsAlerted,
notification.IsConsultanceAlerted
how will I pass them in the details page that is NOT a form and the "value" in the DepartmentTypeCheckBoxes seems to be predefined?
I have not found anything relevant yet and because we are on a tight schedule, I want to try and come up with a solution as possible.
Any help is appreciated.

Answer 1

I might be misunderstanding the implementation of your form and your details page, but if you need the form to exist exactly as it is selected on your send page you could see how the values of this form are being dispatched. With that information you could build something into an existing reducer for your details page or create a new reducer that holds those values and then use them later on to display your details page.
This would most likely be considered improper usage of Redux store (see https://goshakkk.name/should-i-put-form-state-into-redux/ for why I feel that may be the case). But it would work for your implementation as I understand it.
Edit: I should also mention that to display this data you could just display it as the same form as before, but disable the checkboxes so that the preselected values you imported cannot be changed.