Heatmap

global-setup.js

@@ -0,0 +1,3 @@
+module.exports = async () => {
+  process.env.TZ = 'America/New_York';
+};

package.json

@@ -18,7 +18,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject",
     "lint": "eslint .",
     "format": "eslint --fix .",
@@ -30,6 +30,9 @@
       "pre-commit": "sh scripts/validate-branch-name"
     }
   },
+  "jest": {
+    "globalSetup": "./global-setup.js"
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -54,6 +57,7 @@
     "eslint-plugin-react-hooks": "^2.5.0",
     "history": "^4.10.1",
     "husky": "^4.2.5",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
     "react-test-renderer": "^16.13.1"
   }
 }

src/components/Heatmap.js

@@ -1,5 +1,138 @@
-import React from 'react';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import HeatmapCell from './HeatmapCell';
+
+const daysOfWeek = [
+  'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
+];
+
+const hoursOfDay = ['12', '2', '4', '6', '8', '10'];
+
+const createTimeHeader = (period) => (
+  hoursOfDay.map((hour) => {
+    const timeLabel = `${hour}:00${period}`;
+    return (
+      <TableHeader colSpan="2" key={timeLabel}>
+        {timeLabel}
+      </TableHeader>
+    );
+  })
+);
+
+const getCounts = (posts) => {
+  const counts = Array(7).fill().map(() => Array(24).fill(0));
+
+  posts.forEach((post) => {
+    const date = new Date(post.data.created_utc * 1000);
+    counts[date.getDay()][date.getHours()] += 1;
+  });
+
+  return counts;
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 60px;
+`;
+
+const Table = styled.table`
+  border-spacing: 0;
+  cell-collapse: 0;
+`;
+
+const TableHeader = styled.th`
+  background-image: linear-gradient(
+    ${({ theme }) => theme.color.topgradient},
+    ${({ theme }) => theme.color.bottomgradient}
+  );
+  border: none;
+  height: 52px;
+  padding: 0;
+  color: ${({ theme }) => theme.color.tablecolumnheader};
+  font-weight: 500;
+  font-size: ${({ theme }) => theme.font.size.small};
+`;
+
+const RowHeader = styled.td`
+  color: ${({ theme }) => theme.color.background};
+  background-color: ${({ theme }) => theme.color.tablerowheader};
+  text-align: center;
+  width: 154px;
+  height: 40px;
+  padding: 0;
+  font-weight: 600;
+  font-size: ${({ theme }) => theme.font.size.medium};
+`;
+
+const TimezoneWrapper = styled.div`
+  margin-top: 12px;
+  font-size: ${({ theme }) => theme.font.size.small};
+`;
+
+const Timezone = styled.span`
+    font-weight: bold;
+`;
+
+const Heatmap = ({ posts }) => {
+  const [counts] = useState(getCounts(posts));
+  const [clickedCellId, setClickedCellId] = useState('');
+
+  const handleCellClick = (cellId) => {
+    setClickedCellId(cellId);
+  };
+
+  return (
+    <Wrapper>
+      <Table>
+        <thead>
+          <tr>
+            <th>&nbsp;</th>
+            {createTimeHeader('am')}
+            {createTimeHeader('pm')}
+          </tr>
+        </thead>
+        <tbody>
+          {counts.map((days, day) => {
+            const dayOfWeek = daysOfWeek[day];
+            return (
+              <tr key={dayOfWeek}>
+                <RowHeader key={dayOfWeek}>{dayOfWeek}</RowHeader>
+                {days.map((hourCount, hour) => {
+                  const id = `${dayOfWeek}-${hour}`;
+                  const colorValue = Math.min(hourCount, 10);
+                  return (
+                    <HeatmapCell
+                      colorValue={colorValue}
+                      key={id}
+                      id={id}
+                      handleCellClick={handleCellClick}
+                      clickedCellId={clickedCellId}
+                    >
+                      {hourCount}
+                    </HeatmapCell>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+      <TimezoneWrapper>
+        All times are shown in your timezone:
+        {' '}
+        <Timezone>{Intl.DateTimeFormat().resolvedOptions().timeZone}</Timezone>
+      </TimezoneWrapper>
+    </Wrapper>
+  );
+};
+
+Heatmap.propTypes = {
+  posts: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
 
-const Heatmap = () => <div>Heatmap Placeholder</div>;
 
 export default Heatmap;

src/components/HeatmapCell.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const TableCell = styled.td`
+  text-align: center;
+  width: 39px;
+  height: 39px;
+  padding: 0;
+  color: white;
+  font-weight: bold;
+  font-size: ${({ theme }) => theme.font.size.small};
+  background-color: ${({ theme, colorValue }) => theme.color.count[colorValue]};
+  border: 1px solid ${({ theme, colorValue, clicked }) => (
+    clicked ? theme.color.tablerowheader : theme.color.count[colorValue]
+  )};
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.color.tablerowheader};
+  }
+`;
+
+const HeatmapCell = ({
+  children, colorValue, handleCellClick, id, clickedCellId,
+}) => {
+  const [clicked, setClicked] = useState(false);
+
+  const handleClick = () => {
+    setClicked(true);
+    handleCellClick(id);
+  };
+
+  useEffect(() => {
+    if (clickedCellId === id) {
+      setClicked(true);
+    } else {
+      setClicked(false);
+    }
+  }, [clickedCellId, id]);
+
+  return (
+    <TableCell
+      colorValue={colorValue}
+      clicked={clicked}
+      onClick={handleClick}
+    >
+      {children}
+    </TableCell>
+  );
+};
+
+HeatmapCell.propTypes = {
+  children: PropTypes.node.isRequired,
+  colorValue: PropTypes.number.isRequired,
+  handleCellClick: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  clickedCellId: PropTypes.string.isRequired,
+};
+
+export default HeatmapCell;

src/components/PostTable.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 const PostTable = ({ posts }) => (
   <>
     <div>Data Table Placeholder</div>
-    {posts.slice(0, 10).map((post) => (
+    {posts.slice(0, 1).map((post) => (
       <div key={post.data.name}>{post.data.title}</div>
     ))}
   </>

src/pages/Search.js

@@ -30,7 +30,7 @@ const Search = () => {
     }
     return (
       <>
-        <Heatmap />
+        <Heatmap posts={posts} />
         <PostTable posts={posts} />
       </>
     );

src/styles/themes.js

@@ -39,12 +39,30 @@ const mainTheme = {
     externalLink: '#0087ff',
     searchBoxBorder: '#e6e6e6',
     spinner: '#fdb755',
+    tablecolumnheader: '#787878',
+    tablerowheader: '#1E2537',
+    topgradient: '#fefefe',
+    bottomgradient: '#e9e9e9',
+    count: {
+      0: '#e0e592',
+      1: '#aed396',
+      2: '#a9d194',
+      3: '#a0ce93',
+      4: '#99cd94',
+      5: '#8cc894',
+      6: '#5eb391',
+      7: '#5db492',
+      8: '#5cb391',
+      9: '#5aad8c',
+      10: '#3984a3',
+    },
   },
   font: {
     primary: "'Montserrat', san-serif",
     secondary: "'Bitter', serif",
     size: {
       normal: '16px',
+      medium: '15px',
       small: '14px',
     },
   },

src/tests/Heatmap.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, fireEvent } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import fetchMock from 'jest-fetch-mock';
+import App from '../App';
+import * as kittens1 from './responses/1.json';
+import * as kittens2 from './responses/2.json';
+import * as kittens3 from './responses/3.json';
+import * as kittens4 from './responses/4.json';
+import * as kittens5 from './responses/5.json';
+
+fetchMock.enableMocks();
+
+const renderSearchPage = (route) => render(
+  <MemoryRouter initialEntries={[route]}>
+    <App />
+  </MemoryRouter>,
+);
+
+describe('Heatmap', () => {
+  beforeEach(() => {
+    fetch.resetMocks();
+
+    fetch
+      .once(JSON.stringify(kittens1))
+      .once(JSON.stringify(kittens2))
+      .once(JSON.stringify(kittens3))
+      .once(JSON.stringify(kittens4))
+      .once(JSON.stringify(kittens5));
+  });
+
+  it('to contain post counts for each hour of each day', async () => {
+    let tableCells;
+    await act(async () => {
+      const { findAllByRole } = renderSearchPage('/search/kittens');
+      tableCells = await findAllByRole('cell');
+    });
+
+    expect(tableCells.length).toEqual(175); // Includes row headers
+    expect(tableCells[1].innerHTML).toEqual('3'); // Sunday at 12:00am
+  });
+
+  it('cell highlights on click', async () => {
+    let tableCells;
+    await act(async () => {
+      const { findAllByRole } = renderSearchPage('/search/kittens');
+      tableCells = await findAllByRole('cell');
+    });
+
+    const originalStyle = window.getComputedStyle(tableCells[1]);
+    const originalBorder = originalStyle.getPropertyValue('border');
+    expect(originalBorder).toEqual('1px solid #a0ce93');
+
+    fireEvent.click(tableCells[1]);
+
+    const updatedStyle = window.getComputedStyle(tableCells[1]);
+    const updatedBorder = updatedStyle.getPropertyValue('border');
+    expect(updatedBorder).toEqual('1px solid #1e2537');
+  });
+});