Add header view

Author: khshourov

views/interactivity/src/components/icons.svg.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export function Icons() {
+  return (
+    <svg style={{ display: 'none' }}>
+      <symbol id="icon-last-access-at" viewBox="0 0 448 512">
+        <path d="M96 32l0 32L48 64C21.5 64 0 85.5 0 112l0 48 448 0 0-48c0-26.5-21.5-48-48-48l-48 0 0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32L160 64l0-32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192L0 192 0 464c0 26.5 21.5 48 48 48l352 0c26.5 0 48-21.5 48-48l0-272z"></path>
+      </symbol>
+      <symbol id="icon-total-access" viewBox="0 0 384 512">
+        <path d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-384c0-35.3-28.7-64-64-64L64 0zM96 64l192 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L96 160c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32zm32 160a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zM96 352a32 32 0 1 1 0-64 32 32 0 1 1 0 64zM64 416c0-17.7 14.3-32 32-32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32zM192 256a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm32 64a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zm64-64a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm32 64a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zM288 448a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"></path>
+      </symbol>
+      <symbol id="icon-audio" viewBox="0 0 640 512">
+        <path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"></path>
+      </symbol>
+    </svg>
+  );
+}

views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.css

@@ -0,0 +1,21 @@
+.access-info-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-left;
+  gap: 1em;
+}
+.access-info-container > .access-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+}
+.icon {
+  width: 1em;
+  height: 1em;
+}
+.access-info > .access-content {
+  margin-top: 0.35em;
+}

views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SearchResultAccessSummary } from './SearchResultAccessSummary';
+
+test('access-summary block should show last access date and total access for searched word', async () => {
+  const accessSummary = {
+    lastAccessAt: '2024-01-01T00:00:00.000Z',
+    totalAccess: 313,
+  };
+
+  render(<SearchResultAccessSummary accessSummary={accessSummary} />);
+
+  expect(screen.getByText('2024-01-01 00:00:00')).toBeDefined();
+  expect(screen.getByText('313')).toBeDefined();
+});

views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Utils } from '../../../lib/utils';
+import { Icons } from '../../icons.svg';
+import { AccessSummary } from '../../types';
+import './SearchResultAccessSummary.css';
+
+export function SearchResultAccessSummary({
+  accessSummary,
+}: {
+  accessSummary: AccessSummary;
+}) {
+  return (
+    <div className="access-info-container" data-testid="access-summary">
+      <div className="access-info">
+        <Icons />
+        <div className="icon">
+          <svg>
+            <use id="#icon-last-access-at" />
+          </svg>
+        </div>
+        <span className="access-content">
+          {new Utils().iso8601ToDateTime(accessSummary.lastAccessAt)}
+        </span>
+        <div className="icon">
+          <svg>
+            <use id="#icon-total-access" />
+          </svg>
+        </div>
+        <span className="access-content">{accessSummary.totalAccess}</span>
+      </div>
+    </div>
+  );
+}

views/interactivity/src/components/search-result-view/header/SearchResultHeader.css

@@ -0,0 +1,12 @@
+.header-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2em;
+}
+.word {
+  padding: 0.5em 0;
+  max-width: 60%;
+  word-wrap: anywhere;
+}

views/interactivity/src/components/search-result-view/header/SearchResultHeader.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SearchResultHeader } from './SearchResultHeader';
+
+test('header should have the searched word and access-summary section (when provided)', async () => {
+  const searchedWord = 'hello';
+  const accessSummary = {
+    totalAccess: 3,
+    lastAccessAt: '2024-01-01T00:00:00.000Z',
+  };
+
+  render(
+    <SearchResultHeader word={searchedWord} accessSummary={accessSummary} />,
+  );
+
+  const word = screen.getByText(searchedWord);
+  const accessSummaryBlock = screen.queryByTestId('access-summary');
+
+  expect(word).toBeDefined();
+  expect(accessSummaryBlock).not.toBeNull();
+});
+
+test('header should not have any access-summary section for first time access of a word', async () => {
+  const searchedWord = 'hello';
+
+  render(<SearchResultHeader word={searchedWord} accessSummary={null} />);
+
+  const accessSummaryBlock = screen.queryByTestId('access-summary');
+
+  expect(accessSummaryBlock).toBeNull();
+});

views/interactivity/src/components/search-result-view/header/SearchResultHeader.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AccessSummary } from '../../types';
+import { SearchResultAccessSummary } from './SearchResultAccessSummary';
+import './SearchResultHeader.css';
+
+export function SearchResultHeader({
+  word,
+  accessSummary,
+}: {
+  word: string;
+  accessSummary: AccessSummary;
+}) {
+  return (
+    <div className="header-container" data-testid="header-container">
+      <div className="word">{word}</div>
+      {accessSummary && (
+        <SearchResultAccessSummary accessSummary={accessSummary} />
+      )}
+    </div>
+  );
+}

views/interactivity/src/lib/utils.test.ts

@@ -24,3 +24,11 @@ describe('decodeBase64Gzip()', () => {
     expect(uncompressed).toBe('some text');
   });
 });
+
+describe('iso8601ToDateTime()', () => {
+  test('function should return datetime string when iso 8601 datetime is given', () => {
+    expect(utils.iso8601ToDateTime('2024-01-01T00:00:00.000Z')).toBe(
+      '2024-01-01 00:00:00',
+    );
+  });
+});

views/interactivity/src/lib/utils.ts

@@ -7,4 +7,9 @@ export class Utils {
     );
     return pako.inflate(binaryData, { to: 'string' });
   }
+
+  iso8601ToDateTime(iso8601: string) {
+    // iso 8601: YYYY-MM-DDThh:mm:ss.SSSZ
+    return iso8601.split('.')[0].replace('T', ' ');
+  }
 }