adjusted timetable to display correct dates

components/case/representation/representationAgent.js

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { connect } from "react-redux";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { Field, reduxForm } from "redux-form";
+import { Field, reduxForm, change } from "redux-form";
 import {
     RenderPickList,
     RenderTextfield,
@@ -48,7 +48,8 @@ const RepAgent = (props) => {
             <div className="govuk-grid-row">
                 <div className="govuk-form-group">
                     {typeof formObj.representationForm.values
-                        .representationType == "undefined" ? (
+                        .representationType == "undefined" &&
+                    props.representationType != "Select..." ? (
                         <>
                             <h2 className="govuk-heading-m ">
                                 {t(
@@ -208,6 +209,11 @@ const RepAgent = (props) => {
                     <a
                         onClick={() => {
                             setRepresentationCapacity();
+                            props.updateField(
+                                "representationForm",
+                                "representationCapacity",
+                                ""
+                            );
                         }}
                         className="govuk-link"
                     >
@@ -219,4 +225,20 @@ const RepAgent = (props) => {
     );
 };
 
-export default RepAgent;
+const mapStateToProps = (state, props) => {};
+
+const mapDispatchToProps = (dispatch) => ({
+    updateField: (form, field, newValue) =>
+        dispatch(change(form, field, newValue)),
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "representationForm",
+        enableReinitialize: true,
+        destroyOnUnmount: false,
+    })(RepAgent)
+);