history: fix misaligned columns on history page

jamaljsr · jamaljsr · commit 26644b6a3c5f · 2020-06-30T01:52:25.000-04:00
diff --git a/app/package.json b/app/package.json
@@ -22,6 +22,7 @@
     "@improbable-eng/grpc-web": "0.12.0",
     "big.js": "5.2.2",
     "bootstrap": "4.5.0",
+    "date-fns": "2.14.0",
     "debug": "4.1.1",
     "emotion-theming": "10.0.27",
     "file-saver": "2.0.2",
diff --git a/app/src/__tests__/components/history/HistoryPage.spec.tsx b/app/src/__tests__/components/history/HistoryPage.spec.tsx
@@ -39,8 +39,8 @@ describe('HistoryPage', () => {
   it('should display the table headers', () => {
     const { getByText } = render();
     expect(getByText('Status')).toBeInTheDocument();
-    expect(getByText('Loop Type')).toBeInTheDocument();
-    expect(getByText('Amount (sats)')).toBeInTheDocument();
+    expect(getByText('Type')).toBeInTheDocument();
+    expect(getByText('Amount')).toBeInTheDocument();
     expect(getByText('Created')).toBeInTheDocument();
     expect(getByText('Updated')).toBeInTheDocument();
   });
diff --git a/app/src/__tests__/timezone.ts b/app/src/__tests__/timezone.ts
@@ -16,7 +16,7 @@ describe('Timezone', () => {
 
   it('should format the swap timestamps correctly', () => {
     const swap = new Swap(loopListSwaps.swapsList[0]);
-    expect(swap.createdOnLabel).toEqual('4/8/2020 11:59:13 PM');
-    expect(swap.updatedOnLabel).toEqual('4/9/2020 2:12:49 AM');
+    expect(swap.createdOnLabel).toEqual('Apr 8, 11:59 PM');
+    expect(swap.updatedOnLabel).toEqual('Apr 9, 2:12 AM');
   });
 });
diff --git a/app/src/__tests__/util/csv.spec.ts b/app/src/__tests__/util/csv.spec.ts
@@ -16,7 +16,7 @@ describe('csv Util', () => {
     const actual = csv.convert(Swap.csvColumns, swaps);
     const expected = [
       '"Swap ID","Type","Amount","Status","Created On","Updated On"',
-      '"f4eb118383c2b09d8c7289ce21c25900cfb4545d46c47ed23a31ad2aa57ce830","Loop Out","500000","Failed","4/8/2020 11:59:13 PM","4/9/2020 2:12:49 AM"',
+      '"f4eb118383c2b09d8c7289ce21c25900cfb4545d46c47ed23a31ad2aa57ce830","Loop Out","500000","Failed","Apr 8, 11:59 PM","Apr 9, 2:12 AM"',
     ].join('\n');
     expect(actual).toEqual(expected);
   });
diff --git a/app/src/components/history/HistoryRow.tsx b/app/src/components/history/HistoryRow.tsx
@@ -21,40 +21,50 @@ const Styled = {
       border-bottom-width: 0;
     }
   `,
-  Column: styled(Column)`
+  HeaderRow: styled(Row)`
+    margin-right: 0;
+  `,
+  HeaderColumn: styled(Column)`
     white-space: nowrap;
-    line-height: ${ROW_HEIGHT}px;
+    padding: 0 5px;
+
+    &:last-child {
+      padding-right: 0;
+    }
   `,
-  StatusHeader: styled(HeaderFour)`
-    margin-left: 35px;
+  Column: styled(Column)`
+    line-height: ${ROW_HEIGHT}px;
+    padding: 0 5px;
   `,
-  StatusIcon: styled.span`
-    display: inline-block;
-    margin-right: 20px;
+  ActionColumn: styled(Column)`
+    max-width: 50px;
+    padding: 0 20px;
+    line-height: ${ROW_HEIGHT}px;
   `,
 };
 
 export const HistoryRowHeader: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.history.HistoryRowHeader');
-  const { StatusHeader } = Styled;
+  const { HeaderRow, ActionColumn, HeaderColumn } = Styled;
   return (
-    <Row>
-      <Column>
-        <StatusHeader>{l('status')}</StatusHeader>
-      </Column>
-      <Column>
+    <HeaderRow>
+      <ActionColumn />
+      <HeaderColumn cols={3}>
+        <HeaderFour>{l('status')}</HeaderFour>
+      </HeaderColumn>
+      <HeaderColumn>
         <HeaderFour>{l('type')}</HeaderFour>
-      </Column>
-      <Column>
-        <HeaderFour>{l('amount')} (sats)</HeaderFour>
-      </Column>
-      <Column right cols={3}>
+      </HeaderColumn>
+      <HeaderColumn right>
+        <HeaderFour>{l('amount')}</HeaderFour>
+      </HeaderColumn>
+      <HeaderColumn right>
         <HeaderFour>{l('created')}</HeaderFour>
-      </Column>
-      <Column right cols={3}>
+      </HeaderColumn>
+      <HeaderColumn right>
         <HeaderFour>{l('updated')}</HeaderFour>
-      </Column>
-    </Row>
+      </HeaderColumn>
+    </HeaderRow>
   );
 };
 
@@ -64,25 +74,19 @@ interface Props {
 }
 
 const HistoryRow: React.FC<Props> = ({ swap, style }) => {
-  const { Row, Column, StatusIcon } = Styled;
+  const { Row, Column, ActionColumn } = Styled;
   return (
     <Row style={style}>
-      <Column>
-        <StatusIcon>
-          <SwapDot swap={swap} />
-        </StatusIcon>
-        {swap.stateLabel}
-      </Column>
+      <ActionColumn>
+        <SwapDot swap={swap} />
+      </ActionColumn>
+      <Column cols={3}>{swap.stateLabel}</Column>
       <Column>{swap.typeName}</Column>
-      <Column>
+      <Column right>
         <Unit sats={swap.amount} suffix={false} />
       </Column>
-      <Column right cols={3}>
-        {swap.createdOnLabel}
-      </Column>
-      <Column right cols={3}>
-        {swap.updatedOnLabel}
-      </Column>
+      <Column right>{swap.createdOnLabel}</Column>
+      <Column right>{swap.updatedOnLabel}</Column>
     </Row>
   );
 };
diff --git a/app/src/i18n/locales/en-US.json b/app/src/i18n/locales/en-US.json
@@ -15,7 +15,7 @@
   "cmps.history.HistoryPage.pageTitle": "Loop History",
   "cmps.history.HistoryRowHeader.status": "Status",
   "cmps.history.HistoryRowHeader.amount": "Amount",
-  "cmps.history.HistoryRowHeader.type": "Loop Type",
+  "cmps.history.HistoryRowHeader.type": "Type",
   "cmps.history.HistoryRowHeader.created": "Created",
   "cmps.history.HistoryRowHeader.updated": "Updated",
   "cmps.loop.ChannelIcon.processing.in": "Loop In currently in progress",
diff --git a/app/src/store/models/swap.ts b/app/src/store/models/swap.ts
@@ -2,6 +2,7 @@ import { action, computed, observable } from 'mobx';
 import { now } from 'mobx-utils';
 import * as LOOP from 'types/generated/loop_pb';
 import Big from 'big.js';
+import formatDate from 'date-fns/format';
 import { CsvColumns } from 'util/csv';
 import { ellipseInside } from 'util/strings';
 
@@ -84,7 +85,7 @@ export default class Swap {
 
   /** The date this swap was created as formatted string */
   @computed get createdOnLabel() {
-    return `${this.createdOn.toLocaleDateString()} ${this.createdOn.toLocaleTimeString()}`;
+    return formatDate(this.createdOn, 'MMM d, h:mm a');
   }
 
   /** The date this swap was last updated as a JS Date object */
@@ -94,7 +95,7 @@ export default class Swap {
 
   /** The date this swap was last updated as formatted string */
   @computed get updatedOnLabel() {
-    return `${this.updatedOn.toLocaleDateString()} ${this.updatedOn.toLocaleTimeString()}`;
+    return formatDate(this.updatedOn, 'MMM d, h:mm a');
   }
 
   /**
diff --git a/app/yarn.lock b/app/yarn.lock
@@ -5391,6 +5391,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@2.14.0:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"
+  integrity sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
