From eb8cf71a4ec8054c9a9e05cab5a5cc29bbbd13ce Mon Sep 17 00:00:00 2001
From: sahalliburton <61989526+sahalliburton@users.noreply.github.com>
Date: Tue, 16 Jun 2020 14:41:02 -0400
Subject: [PATCH] Shalliburton/fix saving hearing time (#14539)

* move time options to constants files

* use new constants file

* add 15 minute increment time options

* refactor HearingTime to make it a functional component

* fix linting issues

* add storybook story for HearingTime

* reduce cognitive complexity

* fixing some component key issues and newly introduced bugs

* linting corrections

* add value prop

* add scheduledTimeString prop

* WIP: Started fixing issue with time saving

* Reset unchanged files

Co-authored-by: Ferris Tseng <ferris@navapbc.com>
Co-authored-by: Stephen Halliburton <stephenhalliburton@TST-C02VKASTHTD5.fios-router.home>
Co-authored-by: va-bot <james.kassemi+vabot@adhocteam.us>
---
 .../dailyDocket/DailyDocketRows.jsx           | 75 +++++++++++++------
 1 file changed, 52 insertions(+), 23 deletions(-)

diff --git a/client/app/hearings/components/dailyDocket/DailyDocketRows.jsx b/client/app/hearings/components/dailyDocket/DailyDocketRows.jsx
index c7a2bb17725..1fb1432f0e3 100644
--- a/client/app/hearings/components/dailyDocket/DailyDocketRows.jsx
+++ b/client/app/hearings/components/dailyDocket/DailyDocketRows.jsx
@@ -12,20 +12,31 @@ const rowsMargin = css({
 });
 
 const Header = ({ user }) => (
-  <div {...docketRowStyle}
+  <div
+    {...docketRowStyle}
     {...css({
       '& *': {
         background: 'none !important'
       },
       '& > div > div': { verticalAlign: 'bottom' }
-    })} className={user.userHasHearingPrepRole ? 'judge-view' : ''}>
+    })}
+    className={user.userHasHearingPrepRole ? 'judge-view' : ''}
+  >
     <div>
       <div>{user.userHasHearingPrepRole && <strong>Prep</strong>}</div>
-      <div></div>
-      <div><strong>Appellant/Veteran ID/Representative</strong></div>
-      <div><strong>Type/Time/RO</strong></div>
+      <div />
+      <div>
+        <strong>Appellant/Veteran ID/Representative</strong>
+      </div>
+      <div>
+        <strong>Type/Time/RO</strong>
+      </div>
+    </div>
+    <div>
+      <div>
+        <strong>Actions</strong>
+      </div>
     </div>
-    <div><div><strong>Actions</strong></div></div>
   </div>
 );
 
@@ -36,25 +47,43 @@ Header.propTypes = {
 };
 
 export default class DailyDocketHearingRows extends React.Component {
-  render () {
-    const { hearings, readOnly, regionalOffice,
-      openDispositionModal, user, saveHearing, hidePreviouslyScheduled } = this.props;
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hearings: []
+    };
+  }
+
+  componentDidMount() {
+    const sortedHearings = sortHearings(this.props.hearings);
+
+    this.setState({ hearings: sortedHearings });
+  }
 
-    const sortedHearings = sortHearings(hearings);
+  render() {
+    const { readOnly, regionalOffice, openDispositionModal, user, saveHearing, hidePreviouslyScheduled } = this.props;
 
-    return <div {...rowsMargin}>
-      <Header user={user} />
-      <div>{sortedHearings.map((hearing, index) => (
-        <DailyDocketRow hearingId={hearing.externalId}
-          index={index}
-          readOnly={readOnly}
-          hidePreviouslyScheduled={hidePreviouslyScheduled}
-          user={user}
-          saveHearing={saveHearing}
-          regionalOffice={regionalOffice}
-          openDispositionModal={openDispositionModal} />
-      ))}</div>
-    </div>;
+    return (
+      <div {...rowsMargin}>
+        <Header user={user} />
+        <div>
+          {this.state.hearings.length > 0 &&
+            this.state.hearings.map((hearing, index) => (
+              <DailyDocketRow
+                hearingId={hearing.externalId}
+                index={index}
+                readOnly={readOnly}
+                hidePreviouslyScheduled={hidePreviouslyScheduled}
+                user={user}
+                saveHearing={saveHearing}
+                regionalOffice={regionalOffice}
+                openDispositionModal={openDispositionModal}
+              />
+            ))}
+        </div>
+      </div>
+    );
   }
 }