Feat/seconds

.gitignore

@@ -6,7 +6,7 @@ node_modules/
 .pnp.js
 
 # testing
-/coverage
+coverage/
 
 # production
 build/

client/src/common/components/countdown/Countdown.jsx

@@ -1,13 +1,14 @@
 import { memo } from 'react';
-import { formatDisplay } from 'common/dateConfig';
+import { formatDisplay } from 'common/utils/dateConfig';
 import styles from './Countdown.module.css';
 
 const Countdown = ({ time, small, negative, hideZeroHours }) => {
-  let display = '-- : -- : --';
-
   // prepare display string
-  if (time != null && !isNaN(time))
-    display = formatDisplay(Math.abs(time), hideZeroHours);
+  const display =
+    time != null && !isNaN(time)
+      ? formatDisplay(time, hideZeroHours)
+      : '-- : -- : --';
+
   const colour = negative ? '#ff7597' : '#fffffa';
 
   return (

client/src/common/components/eventTimes/EventTimesVertical.jsx

@@ -1,6 +1,6 @@
 import EditableTimer from 'common/input/EditableTimer';
 import { showWarningToast } from 'common/helpers/toastManager';
-import { stringFromMillis } from 'common/dateConfig';
+import { stringFromMillis } from 'common/utils/dateConfig';
 
 const label = {
   fontSize: '0.75em',

client/src/common/components/views/TodayItem.jsx

@@ -1,4 +1,4 @@
-import { stringFromMillis } from 'common/dateConfig';
+import { stringFromMillis } from 'common/utils/dateConfig';
 import style from './Paginator.module.css';
 export default function TodayItem(props) {
   const { selected, timeStart, timeEnd, title, backstageEvent } = props;

client/src/common/input/EditableTimer.jsx

@@ -1,10 +1,6 @@
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { useEffect, useState } from 'react';
-import {
-  timeFormat,
-  stringFromMillis,
-  timeStringToMillis,
-} from '../dateConfig';
+import { stringFromMillis, timeStringToMillis } from '../utils/dateConfig';
 import { showErrorToast } from '../helpers/toastManager';
 import style from './EditableTimer.module.css';
 
@@ -16,31 +12,30 @@ export default function EditableTimer(props) {
   useEffect(() => {
     if (time == null) return;
     try {
-      setValue(stringFromMillis(time + delay, false));
+      setValue(stringFromMillis(time + delay));
     } catch (error) {
       showErrorToast('Error parsing date', error.text);
     }
   }, [time, delay]);
 
   const validateValue = (value) => {
     const success = handleSubmit(value);
-
     if (success) setValue(value);
-    else setValue(stringFromMillis(time + delay, false));
+    else setValue(stringFromMillis(time + delay, true));
   };
 
   const handleSubmit = (value) => {
     // Check if there is anything there
     if (value === '') return false;
 
     // Time now and time submitedVal
-    const original = stringFromMillis(time + delay, false);
+    const original = stringFromMillis(time + delay, true);
 
     // check if time is different from before
     if (value === original) return false;
 
     // convert to millis object
-    const millis = timeStringToMillis(value, timeFormat);
+    const millis = timeStringToMillis(value);
 
     // validate with parent
     if (!validate(name, millis)) return false;
@@ -55,12 +50,13 @@ export default function EditableTimer(props) {
     <Editable
       onChange={(v) => setValue(v)}
       onSubmit={(v) => validateValue(v)}
+      onCancel={() => setValue(stringFromMillis(time + delay, true))}
       value={value}
-      placeholder='--:--'
+      placeholder='--:--:--'
       className={delay > 0 ? style.delayedEditable : style.editable}
     >
       <EditablePreview />
-      <EditableInput type='time' min='00:00' max='23:59' />
+      <EditableInput type='time' step='1' min='00:00:00' max='23:59:00' />
     </Editable>
   );
 }

client/src/common/input/EditableTimer.module.css

@@ -1,9 +1,10 @@
 .editable,
 .delayedEditable {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
-  width: 5em;
+  width: 6.5em;
+  letter-spacing: 1px;
   height: fit-content;
 
   text-align: center;

client/src/common/utils/__tests__/dateConfig.test.js

@@ -0,0 +1,216 @@
+import {
+  formatDisplay,
+  millisToMinutes,
+  millisToSeconds,
+  timeStringToMillis,
+} from '../dateConfig';
+
+describe('test string from formatDisplay function', () => {
+  it('test with null values', () => {
+    const t = { val: null, result: '00:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with valid millis', () => {
+    const t = { val: 3600, result: '01:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with negative millis', () => {
+    const t = { val: -3600, result: '01:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 0', () => {
+    const t = { val: 0, result: '00:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -0', () => {
+    const t = { val: -0, result: '00:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 86400 (24 hours)', () => {
+    const t = { val: 86400, result: '00:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 86401 (24 hours and 1 second)', () => {
+    const t = { val: 86401, result: '00:00:01' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -86401 (-24 hours and 1 second)', () => {
+    const t = { val: -86401, result: '00:00:01' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+});
+
+describe('test string from formatDisplay function with hidezero', () => {
+  it('test with null values', () => {
+    const t = { val: null, result: '00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with valid millis', () => {
+    const t = { val: 3600, result: '01:00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with negative millis', () => {
+    const t = { val: -3600, result: '01:00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with 0', () => {
+    const t = { val: 0, result: '00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with -0', () => {
+    const t = { val: -0, result: '00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with 86400 (24 hours)', () => {
+    const t = { val: 86400, result: '00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with 86401 (24 hours and 1 second)', () => {
+    const t = { val: 86401, result: '00:01' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with -86401 (-24 hours and 1 second)', () => {
+    const t = { val: -86401, result: '00:01' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+});
+
+describe('test millisToSeconds function', () => {
+  it('test with null values', () => {
+    const t = { val: null, result: 0 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+
+  it('test with valid millis', () => {
+    const t = { val: 3600000, result: 3600 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+
+  it('test with negative millis', () => {
+    const t = { val: -3600000, result: -3600 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+
+  it('test  with 0', () => {
+    const t = { val: 0, result: 0 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -0', () => {
+    const t = { val: -0, result: -0 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 86401000 (24 hours and 1 second)', () => {
+    const t = { val: 86401000, result: 86401 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -86401000 (-24 hours and 1 second)', () => {
+    const t = { val: -86401000, result: -86401 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+});
+
+describe('test millisToMinutes function', () => {
+  it('test with null values', () => {
+    const t = { val: null, result: 0 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with valid millis', () => {
+    const t = { val: 3600000, result: 60 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with negative millis', () => {
+    const t = { val: -3600000, result: -60 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test  with 0', () => {
+    const t = { val: 0, result: 0 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -0', () => {
+    const t = { val: -0, result: -0 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 86401000 (24 hours and 1 second)', () => {
+    const t = { val: 86401000, result: 1440 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -86401000 (-24 hours and 1 second)', () => {
+    const t = { val: -86401000, result: -1440 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+});
+
+describe('test timeStringToMillis function', () => {
+  it('test with null', () => {
+    const t = { val: null, result: 0 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 00:00:00', () => {
+    const t = { val: '00:00:00', result: 0 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with -00:00:00', () => {
+    const t = { val: '-00:00:00', result: 0 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 00:00:01', () => {
+    const t = { val: '00:00:01', result: 1000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with -00:00:01', () => {
+    const t = { val: '-00:00:01', result: 1000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 01:00:01', () => {
+    const t = { val: '01:00:01', result: 3601000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 24:00:01', () => {
+    const t = { val: '24:00:01', result: 86401000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 00:00:5', () => {
+    const t = { val: '00:00:5', result: 5000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 00:1:00', () => {
+    const t = { val: '00:1:00', result: 60000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 1:00:00', () => {
+    const t = { val: '1:00:00', result: 3600000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+});