fix: use client timezone in About AO unit and Interpretations

dhis2 · Sep 8, 2023 · 65246b6 · 65246b6
1 parent 6d1bcc9
commit 65246b6
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 55 deletions.
diff --git a/src/components/AboutAOUnit/AboutAOUnit.js b/src/components/AboutAOUnit/AboutAOUnit.js
@@ -1,4 +1,8 @@
-import { useDataQuery, useDataMutation } from '@dhis2/app-runtime'
+import {
+    useDataQuery,
+    useDataMutation,
+    useTimeZoneConversion,
+} from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Parser as RichTextParser } from '@dhis2/d2-ui-rich-text'
 import {
@@ -57,6 +61,7 @@ const getUnsubscribeMutation = (type, id) => ({
 
 const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
     const [isExpanded, setIsExpanded] = useState(true)
+    const { fromServerDate } = useTimeZoneConversion()
 
     const queries = useMemo(() => getQueries(type), [type])
 
@@ -208,7 +213,7 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
                                     <IconClock16 color={colors.grey700} />
                                     {i18n.t('Last updated {{time}}', {
                                         time: moment(
-                                            data.ao.lastUpdated
+                                            fromServerDate(data.ao.lastUpdated)
                                         ).fromNow(),
                                     })}
                                 </p>
@@ -219,15 +224,19 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
                                               'Created {{time}} by {{author}}',
                                               {
                                                   time: moment(
-                                                      data.ao.created
+                                                      fromServerDate(
+                                                          data.ao.created
+                                                      )
                                                   ).fromNow(),
                                                   author: data.ao.createdBy
                                                       .displayName,
                                               }
                                           )
                                         : i18n.t('Created {{time}}', {
                                               time: moment(
-                                                  data.ao.created
+                                                  fromServerDate(
+                                                      data.ao.created
+                                                  )
                                               ).fromNow(),
                                           })}
                                 </p>

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationThread.js b/src/components/Interpretations/InterpretationModal/InterpretationThread.js
@@ -1,3 +1,4 @@
+import { useTimeZoneConversion } from '@dhis2/app-runtime'
 import { IconClock16, colors } from '@dhis2/ui'
 import cx from 'classnames'
 import moment from 'moment'
@@ -16,6 +17,7 @@ const InterpretationThread = ({
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu,
 }) => {
+    const { fromServerDate } = useTimeZoneConversion()
     const focusRef = useRef()
 
     useEffect(() => {
@@ -36,7 +38,9 @@ const InterpretationThread = ({
             <div className={'scrollbox'}>
                 <div className={'title'}>
                     <IconClock16 color={colors.grey700} />
-                    {moment(interpretation.created).format('LLL')}
+                    {moment(fromServerDate(interpretation.created)).format(
+                        'LLL'
+                    )}
                 </div>
                 {DownloadMenu && (
                     <DownloadMenu relativePeriodDate={interpretation.created} />

diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationList.js b/src/components/Interpretations/InterpretationsUnit/InterpretationList.js
@@ -1,3 +1,4 @@
+import { useTimeZoneConversion } from '@dhis2/app-runtime'
 import { IconCalendar24, colors, spacers } from '@dhis2/ui'
 import moment from 'moment'
 import PropTypes from 'prop-types'
@@ -25,6 +26,7 @@ export const InterpretationList = ({
     refresh,
     disabled,
 }) => {
+    const { fromServerDate } = useTimeZoneConversion()
     const interpretationsByDate = interpretations.reduce(
         (groupedInterpretations, interpretation) => {
             const date = interpretation.created.split('T')[0]
@@ -50,7 +52,7 @@ export const InterpretationList = ({
                         <div className="date-section">
                             <IconCalendar24 color={colors.grey600} />
                             <time dateTime={date} className="date-header">
-                                {moment(date).format('ll')}
+                                {moment(fromServerDate(date)).format('ll')}
                             </time>
                         </div>
                         <ol className="interpretation-list">

diff --git a/src/components/Interpretations/common/Message/Message.js b/src/components/Interpretations/common/Message/Message.js
@@ -1,63 +1,69 @@
+import { useTimeZoneConversion } from '@dhis2/app-runtime'
 import { Parser as RichTextParser } from '@dhis2/d2-ui-rich-text'
 import { UserAvatar, spacers, colors } from '@dhis2/ui'
 import moment from 'moment'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Message = ({ children, text, created, username }) => (
-    <li className="container">
-        <div className="header">
-            <UserAvatar name={username} extrasmall />
-            {username}
-            <time dateTime={created}>{moment(created).format('lll')}</time>
-        </div>
-        <div className="content">
-            <RichTextParser>{text}</RichTextParser>
-        </div>
-        <div className="footer">{children}</div>
-        <style jsx>{`
-            .container {
-                padding: ${spacers.dp8};
-                background-color: ${colors.grey100};
-                border-radius: 5px;
-                display: flex;
-                flex-direction: column;
-                gap: ${spacers.dp8};
-            }
+const Message = ({ children, text, created, username }) => {
+    const { fromServerDate } = useTimeZoneConversion()
+    return (
+        <li className="container">
+            <div className="header">
+                <UserAvatar name={username} extrasmall />
+                {username}
+                <time dateTime={created}>
+                    {moment(fromServerDate(created)).format('lll')}
+                </time>
+            </div>
+            <div className="content">
+                <RichTextParser>{text}</RichTextParser>
+            </div>
+            <div className="footer">{children}</div>
+            <style jsx>{`
+                .container {
+                    padding: ${spacers.dp8};
+                    background-color: ${colors.grey100};
+                    border-radius: 5px;
+                    display: flex;
+                    flex-direction: column;
+                    gap: ${spacers.dp8};
+                }
 
-            .header {
-                display: flex;
-                gap: 6px;
-                align-items: center;
-                font-size: 13px;
-                line-height: 16px;
-                color: ${colors.grey900};
-            }
+                .header {
+                    display: flex;
+                    gap: 6px;
+                    align-items: center;
+                    font-size: 13px;
+                    line-height: 16px;
+                    color: ${colors.grey900};
+                }
 
-            .header time {
-                font-size: 12px;
-                color: ${colors.grey600};
-            }
+                .header time {
+                    font-size: 12px;
+                    color: ${colors.grey600};
+                }
 
-            .content {
-                font-size: 14px;
-                line-height: 19px;
-                color: ${colors.grey900};
-            }
+                .content {
+                    font-size: 14px;
+                    line-height: 19px;
+                    color: ${colors.grey900};
+                }
 
-            .content :global(p:first-child) {
-                margin: 0;
-            }
+                .content :global(p:first-child) {
+                    margin: 0;
+                }
 
-            .footer {
-                display: flex;
-                flex-direction: column;
-                align-items: flex-start;
-                gap: ${spacers.dp8};
-            }
-        `}</style>
-    </li>
-)
+                .footer {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    gap: ${spacers.dp8};
+                }
+            `}</style>
+        </li>
+    )
+}
 
 Message.propTypes = {
     children: PropTypes.node.isRequired,