From 8f834fed3532ea4a2ce744f339bb0bfe38170d9a Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 23 Apr 2023 10:18:19 +0200
Subject: [PATCH]  style: cuesheet block (#355)

* style: cuesheet show block title

* style: cuesheet show full delay string
---
 apps/client/src/common/utils/__tests__/dateConfig.test.js | 8 ++++----
 apps/client/src/common/utils/dateConfig.ts                | 4 ++--
 apps/client/src/features/table/tableRows/BlockRow.jsx     | 2 +-
 apps/client/src/features/table/tableRows/DelayRow.jsx     | 8 +++-----
 e2e/tests/002-upload-showfile.spec.ts                     | 4 ++--
 5 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/common/utils/__tests__/dateConfig.test.js b/apps/client/src/common/utils/__tests__/dateConfig.test.js
index 4dbee84cc..d8c49cc36 100644
--- a/apps/client/src/common/utils/__tests__/dateConfig.test.js
+++ b/apps/client/src/common/utils/__tests__/dateConfig.test.js
@@ -462,10 +462,10 @@ describe('millisToDelayString()', () => {
   });
   describe('converts values in seconds', () => {
     it(`shows a simple string with value in seconds`, () => {
-      expect(millisToDelayString(10000)).toBe('+10sec');
+      expect(millisToDelayString(10000)).toBe('+10 sec');
     });
     it(`... and its negative counterpart`, () => {
-      expect(millisToDelayString(-10000)).toBe('-10sec');
+      expect(millisToDelayString(-10000)).toBe('-10 sec');
     });
 
     const underAMinute = [1, 500, 1000, 6000, 55000, 59999];
@@ -479,10 +479,10 @@ describe('millisToDelayString()', () => {
 
   describe('converts values in minutes', () => {
     it(`shows a simple string with value in minutes`, () => {
-      expect(millisToDelayString(720000)).toBe('+12min');
+      expect(millisToDelayString(720000)).toBe('+12 min');
     });
     it(`... and its negative counterpart`, () => {
-      expect(millisToDelayString(-720000)).toBe('-12min');
+      expect(millisToDelayString(-720000)).toBe('-12 min');
     });
     it(`shows a simple string with value in minutes and seconds`, () => {
       expect(millisToDelayString(630000)).toBe('+00:10:30');
diff --git a/apps/client/src/common/utils/dateConfig.ts b/apps/client/src/common/utils/dateConfig.ts
index ad3f8c9fe..3c4e2c226 100644
--- a/apps/client/src/common/utils/dateConfig.ts
+++ b/apps/client/src/common/utils/dateConfig.ts
@@ -233,9 +233,9 @@ export function millisToDelayString(millis: number | null): undefined | string |
   const absMillis = Math.abs(millis);
 
   if (absMillis < mtm) {
-    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 's')}sec`;
+    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 's')} sec`;
   } else if (absMillis < mth && absMillis % mtm === 0) {
-    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'm')}min`;
+    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'm')} min`;
   } else {
     return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'HH:mm:ss')}`;
   }
diff --git a/apps/client/src/features/table/tableRows/BlockRow.jsx b/apps/client/src/features/table/tableRows/BlockRow.jsx
index bcb2fd78f..1bdb089ac 100644
--- a/apps/client/src/features/table/tableRows/BlockRow.jsx
+++ b/apps/client/src/features/table/tableRows/BlockRow.jsx
@@ -6,7 +6,7 @@ export default function BlockRow(props) {
   const { row } = props;
   return (
     <tr {...row.getRowProps()}>
-      <td className={style.blockCell}>Delay Block</td>
+      <td className={style.blockCell}>{row.original?.title || 'Block'}</td>
     </tr>
   );
 }
diff --git a/apps/client/src/features/table/tableRows/DelayRow.jsx b/apps/client/src/features/table/tableRows/DelayRow.jsx
index 5157b9ea6..fb24298dd 100644
--- a/apps/client/src/features/table/tableRows/DelayRow.jsx
+++ b/apps/client/src/features/table/tableRows/DelayRow.jsx
@@ -1,18 +1,17 @@
 import PropTypes from 'prop-types';
 
-import { millisToMinutes } from '../../../common/utils/dateConfig';
+import { millisToDelayString } from '../../../common/utils/dateConfig';
 
 import style from '../Table.module.scss';
 
 export default function DelayRow(props) {
   const { row } = props;
   const delayVal = row.original.duration;
-  const minutesDelayed = Math.abs(millisToMinutes(delayVal));
-  const labelText = `${minutesDelayed} minutes ${delayVal >= 0 ? 'delayed' : 'ahead'}`;
+  const delayTime = delayVal !== 0 ? millisToDelayString(delayVal) : null;
 
   return (
     <tr {...row.getRowProps()}>
-      <td className={style.delayCell}>{labelText}</td>
+      <td className={style.delayCell}>{delayTime}</td>
     </tr>
   );
 }
@@ -20,4 +19,3 @@ export default function DelayRow(props) {
 DelayRow.propTypes = {
   row: PropTypes.object.isRequired,
 };
-
diff --git a/e2e/tests/002-upload-showfile.spec.ts b/e2e/tests/002-upload-showfile.spec.ts
index bccfcea48..8fac43eb2 100644
--- a/e2e/tests/002-upload-showfile.spec.ts
+++ b/e2e/tests/002-upload-showfile.spec.ts
@@ -17,10 +17,10 @@ test('test', async ({ page }) => {
   await page.getByTestId('delay-input').click();
   await page
     .locator('div')
-    .filter({ hasText: /^SED\+10minNew start: 10:10:00$/ })
+    .filter({ hasText: /^SED\+10 minNew start: 10:10:00$/ })
     .getByPlaceholder('Start')
     .click();
-  await page.getByText('+10minNew start: 10:10:00').click();
+  await page.getByText('+10 minNew start: 10:10:00').click();
   await page.getByText('Second test event').click();
   await page.getByText('Lunch').click();
   await page.getByText('Third test event').click();