refactor: UI for linking events (#763)

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

@@ -1,7 +1,4 @@
-import {
-  forgivingStringToMillis,
-  millisToDelayString,
-} from '../dateConfig';
+import { forgivingStringToMillis, millisToDelayString } from '../dateConfig';
 
 describe('test forgivingStringToMillis()', () => {
   describe('function handles time with no separators', () => {
@@ -270,10 +267,10 @@ describe('millisToDelayString()', () => {
   });
   describe('converts values in seconds', () => {
     it('shows a simple string with value in seconds', () => {
-      expect(millisToDelayString(10000)).toBe('+10 sec');
+      expect(millisToDelayString(10000, true)).toBe('+10 sec');
     });
     it('... and its negative counterpart', () => {
-      expect(millisToDelayString(-10000)).toBe('-10 sec');
+      expect(millisToDelayString(-10000, true)).toBe('-10 sec');
     });
 
     const underAMinute = [1, 500, 1000, 6000, 55000, 59999];
@@ -287,32 +284,32 @@ describe('millisToDelayString()', () => {
 
   describe('converts values in minutes', () => {
     it('shows a simple string with value in minutes', () => {
-      expect(millisToDelayString(720000)).toBe('+12 min');
+      expect(millisToDelayString(720000, true)).toBe('+12 min');
     });
     it('... and its negative counterpart', () => {
-      expect(millisToDelayString(-720000)).toBe('-12 min');
+      expect(millisToDelayString(-720000, true)).toBe('-12 min');
     });
     it('shows a simple string with value in minutes and seconds', () => {
-      expect(millisToDelayString(630000)).toBe('+00:10:30');
+      expect(millisToDelayString(630000, true)).toBe('+00:10:30');
     });
     it('... and its negative counterpart', () => {
-      expect(millisToDelayString(-630000)).toBe('-00:10:30');
+      expect(millisToDelayString(-630000, true)).toBe('-00:10:30');
     });
 
     const underAnHour = [60000, 360000, 720000];
     underAnHour.forEach((value) => {
       it(`handles ${value}`, () => {
-        expect(millisToDelayString(value)?.endsWith('min')).toBe(true);
+        expect(millisToDelayString(value, true)?.endsWith('min')).toBe(true);
       });
     });
   });
 
   describe('converts values with full time string', () => {
     it('positive added time', () => {
-      expect(millisToDelayString(45015000)).toBe('+12:30:15');
+      expect(millisToDelayString(45015000, true)).toBe('+12:30:15');
     });
     it('negative added time', () => {
-      expect(millisToDelayString(-45015000)).toBe('-12:30:15');
+      expect(millisToDelayString(-45015000, true)).toBe('-12:30:15');
     });
   });
 });

apps/client/src/common/utils/dateConfig.ts

@@ -155,19 +155,21 @@ export const forgivingStringToMillis = (value: string): number => {
   return millis;
 };
 
-export function millisToDelayString(millis: number | null): undefined | string | null {
+export function millisToDelayString(millis: number | null, small = false): undefined | string | null {
   if (millis == null || millis === 0) {
     return null;
   }
 
   const isNegative = millis < 0;
   const absMillis = Math.abs(millis);
+  const delayed = small ? '+' : 'delayed by ';
+  const ahead = small ? '-' : 'ahead by ';
 
   if (absMillis < MILLIS_PER_MINUTE) {
-    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 's')} sec`;
+    return `${isNegative ? ahead : delayed}${formatFromMillis(absMillis, 's')} sec`;
   } else if (absMillis < MILLIS_PER_HOUR && absMillis % MILLIS_PER_MINUTE === 0) {
-    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'm')} min`;
+    return `${isNegative ? ahead : delayed}${formatFromMillis(absMillis, 'm')} min`;
   } else {
-    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'HH:mm:ss')}`;
+    return `${isNegative ? ahead : delayed}${formatFromMillis(absMillis, 'HH:mm:ss')}`;
   }
 }

apps/client/src/common/utils/eventsManager.ts

@@ -21,6 +21,8 @@ export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
     duration: event.duration,
     timeEnd: event.timeEnd,
     timerType: event.timerType,
+    timeStrategy: event.timeStrategy,
+    linkStart: event.linkStart,
     endAction: event.endAction,
     isPublic: event.isPublic,
     skip: event.skip,