Added short URL title to visits header

src/index.scss

@@ -61,7 +61,8 @@ body,
 .dropdown-divider,
 .dropdown-menu,
 .list-group-item,
-.modal-content {
+.modal-content,
+hr {
   border-color: var(--border-color);
 }
 

src/utils/base.scss

@@ -18,7 +18,7 @@ $mediumGrey: #dee2e6;
 $textPlaceholder: #6c757d;
 
 // Misc
-$headerHeight: 57px;
+$headerHeight: 56px;
 $asideMenuWidth: 260px;
 $footer-height: 2.3rem;
 $footer-margin: .8rem;

src/visits/ShortUrlVisitsHeader.tsx

@@ -17,6 +17,7 @@ const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortU
   const { visits } = shortUrlVisits;
   const shortLink = shortUrl?.shortUrl ?? '';
   const longLink = shortUrl?.longUrl ?? '';
+  const title = shortUrl?.title;
 
   const renderDate = () => !shortUrl ? <small>Loading...</small> : (
     <span>
@@ -39,9 +40,9 @@ const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortU
       <hr />
       <div>Created: {renderDate()}</div>
       <div>
-        Long URL:{' '}
+        {`${title ? 'Title' : 'Long URL'}: `}
         {loading && <small>Loading...</small>}
-        {!loading && <ExternalLink href={longLink} />}
+        {!loading && <ExternalLink href={longLink}>{title ?? longLink}</ExternalLink>}
       </div>
     </VisitsHeader>
   );

test/visits/ShortUrlVisitsHeader.test.tsx

@@ -8,35 +8,48 @@ import { ShortUrlVisits } from '../../src/visits/reducers/shortUrlVisits';
 
 describe('<ShortUrlVisitsHeader />', () => {
   let wrapper: ShallowWrapper;
-  const shortUrlDetail = Mock.of<ShortUrlDetail>({
-    shortUrl: {
-      shortUrl: 'https://doma.in/abc123',
-      longUrl: 'https://foo.bar/bar/foo',
-      dateCreated: '2018-01-01T10:00:00+01:00',
-    },
-    loading: false,
-  });
+  const dateCreated = '2018-01-01T10:00:00+01:00';
+  const longUrl = 'https://foo.bar/bar/foo';
   const shortUrlVisits = Mock.of<ShortUrlVisits>({
     visits: [{}, {}, {}],
   });
   const goBack = jest.fn();
+  const createWrapper = (title?: string | null) => {
+    const shortUrlDetail = Mock.of<ShortUrlDetail>({
+      shortUrl: {
+        shortUrl: 'https://doma.in/abc123',
+        longUrl,
+        dateCreated,
+        title,
+      },
+      loading: false,
+    });
 
-  beforeEach(() => {
     wrapper = shallow(
       <ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />,
     );
-  });
+
+    return wrapper;
+  };
+
+  beforeEach(() => createWrapper());
   afterEach(() => wrapper.unmount());
 
   it('shows when the URL was created', () => {
     const moment = wrapper.find(Moment).first();
 
-    expect(moment.prop('children')).toEqual(shortUrlDetail.shortUrl?.dateCreated);
+    expect(moment.prop('children')).toEqual(dateCreated);
   });
 
-  it('shows the long URL', () => {
+  it.each([
+    [ null, longUrl ],
+    [ undefined, longUrl ],
+    [ 'My cool title', 'My cool title' ],
+  ])('shows the long URL and title', (title, expectedContent) => {
+    const wrapper = createWrapper(title);
     const longUrlLink = wrapper.find(ExternalLink).last();
 
-    expect(longUrlLink.prop('href')).toEqual(shortUrlDetail.shortUrl?.longUrl);
+    expect(longUrlLink.prop('href')).toEqual(longUrl);
+    expect(longUrlLink.prop('children')).toEqual(expectedContent);
   });
 });