Merge pull request #12 from AyaDigital/feature/DMVP-1041

DMVP-1041 - Display-of-appointment-timer

src/components/Timer/Timer.tsx

+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    timerBlock: {
+      display: 'flex',
+      'column-gap': '5px',
+      'align-items': 'center',
+      'font-weight': 'bold',
+    },
+  })
+);
+
+const eventTime = moment().unix();
+
+export default function Timer(props: { disabled?: boolean }) {
+  const classes = useStyles();
+  const [timer, setTimer] = useState('');
+
+  const interval = 1000;
+
+  setInterval(() => {
+    const currentTime = moment().unix();
+
+    const diffTime = currentTime - eventTime;
+    const duration = moment.duration(diffTime, 'seconds');
+
+    const innerText =
+      String(duration.hours()).padStart(2, '0') +
+      ' : ' +
+      String(duration.minutes()).padStart(2, '0') +
+      ' : ' +
+      String(duration.seconds()).padStart(2, '0');
+
+    setTimeout(() => {
+      setTimer(innerText);
+    }, 100);
+  }, interval);
+
+  useEffect(() => {
+    return () => {
+      setTimer('');
+    };
+  }, []);
+
+  return (
+    <div className={classes.timerBlock}>
+      <span>Timer call: </span>
+      <span>{timer}</span>
+    </div>
+  );
+}

src/layouts/Header/index.tsx

@@ -7,6 +7,7 @@ import ToggleAudioButton from '../../components/Buttons/ToggleAudioButton/Toggle
 import ToggleVideoButton from '../../components/Buttons/ToggleVideoButton/ToggleVideoButton';
 import ToggleScreenShareButton from '../../components/Buttons/ToogleScreenShareButton/ToggleScreenShareButton';
 import ToggleSpeakerViewButton from '../../components/Buttons/ToggleSpeakerView/ToggleSpeakerView';
+import Timer from '../../components/Timer/Timer';
 import Menu from '../../components/MenuBar/Menu/MenuHeader';
 import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
 import { isMobile } from '../../utils';
@@ -70,6 +71,7 @@ export const Header: React.FC<HeaderProps> = () => {
                     {!isSharingScreen && <ToggleScreenShareButton disabled={isReconnecting} />}
                     {isSharingScreen && <Button onClick={() => toggleScreenShare()}>Stop Sharing</Button>}
                     <ToggleSpeakerViewButton disabled={isReconnecting} />
+                    <Timer />
                   </Grid>
                 </Grid>
               ) : null}