feat(Next > Album): Display thumbnail images

app/pages/[gallery]/[album].jsx

@@ -1,9 +1,11 @@
 import Head from 'next/head'
+import styled from 'styled-components'
 
 import { get as getAlbum } from '../../src/lib/album'
 import { get as getAlbums } from '../../src/lib/albums'
 import { get as getGalleries } from '../../src/lib/galleries'
 
+import ThumbImg from '../../src/components/ThumbImg'
 import useSearch from '../../src/hooks/useSearch'
 
 async function buildStaticPaths() {
@@ -36,6 +38,11 @@ export async function getStaticPaths() {
   }
 }
 
+const Wrapper = styled.ul`
+  list-style: none;
+  padding-left: 2px;
+`
+
 const AlbumPage = ({ items = [] }) => {
   const {
     filtered,
@@ -49,15 +56,11 @@ const AlbumPage = ({ items = [] }) => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       {searchBox}
-      <ul>
+      <Wrapper>
         {filtered.map((item) => (
-          <li key={item.filename} id={`select${item.id}`}>
-            {item.city}
-            <img src={item.thumbPath} alt={item.caption} />
-            {item?.geo?.lat}, {item?.geo?.lon}
-          </li>
+          <ThumbImg src={item.thumbPath} caption={item.caption} key={item.filename} id={`select${item.id}`} />
         ))}
-      </ul>
+      </Wrapper>
     </div>
   )
 }

app/pages/_app.jsx

@@ -2,9 +2,14 @@ import { createGlobalStyle, ThemeProvider } from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
   body {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+    font-family: Verdana;
+    color: silver;
+    background-color: #323232;
+    margin: 0 auto;
+    display: flex;
+    min-height: 100%;
+    padding: 0 16px;
+    flex-direction: column;
   }
 `
 

app/src/components/Img/__tests__/index.test.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import Img from '../index'
+
+const src = 'test.png'
+const alt = 'test'
+const renderComponent = (props = {}) => {
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  const utils = render(<Img src={src} alt={alt} {...props} />)
+  const image = utils.queryByAltText(alt)
+  return { ...utils, image }
+}
+
+describe('<Img />', () => {
+  test('should render an <img> tag', () => {
+    const { image } = renderComponent()
+    expect(image).toBeInTheDocument()
+    expect(image.tagName).toBe('IMG')
+  })
+
+  test('should throw when no alt attribute is specified', () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {
+      /* noop */
+    })
+    render(<Img src={src} />)
+    expect(consoleSpy).toHaveBeenCalledTimes(1)
+    consoleSpy.mockRestore()
+  })
+
+  test('should have a src attribute', () => {
+    const { image } = renderComponent()
+    expect(image).toHaveAttribute('src', src)
+  })
+
+  test('should not have a class attribute', () => {
+    const { image } = renderComponent()
+    expect(image).not.toHaveAttribute('class')
+  })
+
+  test('should adopt a className attribute', () => {
+    const className = 'test'
+    const { image } = renderComponent({ className })
+    expect(image).toHaveClass(className)
+  })
+
+  test('should not adopt a srcset attribute', () => {
+    const srcset = 'test-HD.png 2x'
+    const { image } = renderComponent({ srcset })
+    expect(image).not.toHaveAttribute('srcset')
+  })
+})

app/src/components/Img/index.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+function Img({ alt, className, src }) {
+  if (!alt) console.error('Missing ALT attribute on IMG') // eslint-disable-line no-console
+  return <img className={className} src={src} alt={alt} />
+}
+
+export default Img

app/src/components/ThumbImg/index.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import styled, { css } from 'styled-components'
+
+import Img from '../Img'
+
+const Bullet = styled.li`
+  width: 195px;
+  height: 110px;
+  background-color: #545454;
+  padding-bottom: 6px;
+  float: left;
+  margin: 6px;
+`
+
+const Caption = styled.span`
+  font-weight: bold;
+  font-size: 11px;
+  margin: 0 5px;
+`
+
+const ImgButton = styled.a`
+  display: block;
+  border-style: solid;
+  border-width: 5px 5px 20px;
+  border-color: #545454;
+  :hover {
+    border-color: orange;
+  }
+
+  ${({ viewed }) => viewed && css`
+      border-color: white;
+  `}
+`
+
+const ThumbImg = ({
+  onClick,
+  caption,
+  href,
+  src,
+}) => {
+  const [viewed, setViewed] = useState(false)
+  const handleClick = (event) => {
+    setViewed(true)
+    event.preventDefault()
+    onClick()
+  }
+
+  return (
+    <Bullet>
+      <ImgButton viewed={viewed} href={href} onClick={handleClick}>
+        <Img src={src} alt="Preview thumbnail (scaled down dimensions)" />
+      </ImgButton>
+      <Caption>{caption}</Caption>
+    </Bullet>
+  )
+}
+
+export default ThumbImg

app/src/components/ThumbImg/tests/index.test.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import ThumbImg from '../index'
+
+describe('Component - <ThumbImg />', () => {
+  const expectedValues = {
+    alt: 'Preview thumbnail (scaled down dimensions)',
+    src: 'test.png',
+  }
+
+  test('should match src attribute value', () => {
+    const { container } = render(<ThumbImg src={expectedValues.src} />)
+    const received = container.querySelector('img').src
+    const expected = expect.stringContaining(expectedValues.src)
+    expect(received).toEqual(expected)
+  })
+
+  test('should have an alt attribute value', () => {
+    const { container } = render(<ThumbImg />)
+    const received = container.querySelector('img').alt
+    const expected = expectedValues.alt
+    expect(received).toEqual(expected)
+  })
+
+  test('should not adopt a srcset attribute', () => {
+    const { container } = render(<ThumbImg srcset="test-HD.png 2x" />)
+    const received = container.querySelector('img').srcset
+    const expected = ''
+    expect(received).toEqual(expected)
+  })
+})

app/src/lib/utils.js

@@ -90,7 +90,7 @@ const file = {
   absolutePath: (filepath) => (path.isAbsolute(filepath) ? filepath : appRoot.resolve(filepath)),
   thumbPath: (item, gallery) => rasterPath(item, gallery, 'thumb'),
   photoPath: (item, gallery) => rasterPath(item, gallery, 'photo'),
-  filenameAsJpg: filenameAsJpg,
+  filenameAsJpg,
 }
 
 function utils(errorSchema) {