Merge pull request #4597 from BenCookie95/4474_date-properties

Updating date when prop has changed

webapp/src/properties/date/__snapshots__/date.test.tsx.snap

@@ -34,6 +34,23 @@ exports[`properties/dateRange handle clear 1`] = `
 </div>
 `;
 
+exports[`properties/dateRange returns component with new date after prop change 1`] = `
+<div>
+  <div
+    class="DateRange  octo-propertyvalue"
+  >
+    <button
+      class="Button"
+      type="button"
+    >
+      <span>
+        June 15
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`properties/dateRange returns default correctly 1`] = `
 <div>
   <div

webapp/src/properties/date/date.test.tsx

@@ -315,4 +315,36 @@ describe('properties/dateRange', () => {
 
         expect(mockedMutator.changePropertyValue).toHaveBeenCalledWith(board.id, card, propertyTemplate.id, JSON.stringify({from: today}))
     })
+
+    test('returns component with new date after prop change', () => {
+        const component = wrapIntl(
+            <DateProp
+                property={new DateProperty()}
+                propertyValue=''
+                showEmptyPlaceholder={false}
+                readOnly={false}
+                board={{...board}}
+                card={{...card}}
+                propertyTemplate={propertyTemplate}
+            />,
+        )
+
+        const {container, rerender} = render(component)
+
+        rerender(
+            wrapIntl(
+                <DateProp
+                    property={new DateProperty()}
+                    propertyValue={'{"from": ' + June15.getTime().toString() + '}'}
+                    showEmptyPlaceholder={false}
+                    readOnly={false}
+                    board={{...board}}
+                    card={{...card}}
+                    propertyTemplate={propertyTemplate}
+                />,
+            ),
+        )
+
+        expect(container).toMatchSnapshot()
+    })
 })

webapp/src/properties/date/date.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useMemo, useState, useCallback} from 'react'
+import React, {useMemo, useState, useCallback, useEffect} from 'react'
 import {useIntl} from 'react-intl'
 import {DateUtils} from 'react-day-picker'
 import MomentLocaleUtils from 'react-day-picker/moment'
@@ -58,6 +58,12 @@ function DateRange(props: PropertyProps): JSX.Element {
     const [value, setValue] = useState(propertyValue)
     const intl = useIntl()
 
+    useEffect(() => {
+        if (value !== propertyValue) {
+            setValue(propertyValue)
+        }
+    }, [propertyValue, setValue])
+
     const onChange = useCallback((newValue) => {
         if (value !== newValue) {
             setValue(newValue)