Add word of the day section (#158)

* Implement past-days function

* Implement DailyWord component

* Add DailyWord to index page and fix free spaces

* Move DailyWord component to src/components folder

* Change daily word header type to h1

* Change margin of containers in pages/index.tsx

* Remove web3GlossaryHeading from pages/index.xts

* Change styles of daily-word component

Author: alireza-jahandoost

_tests_/components/daily-word/daily-word.test.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import DailyWord from '../../../src/components/daily-word/daily-word';
+
+jest.mock("react-i18next", () => ({
+    useTranslation: () => ({ t: (key) => key }),
+}));
+
+const words = ["eip", "ethereum", "whale", "web3", "web2"];
+
+it('it shows a word of words in a link', () => {
+    render(<DailyWord words={words}/>);
+
+    const wordLink = screen.getByRole('link');
+
+    expect(wordLink).toBeInTheDocument();
+    expect(words.includes(wordLink.text)).toBe(true);
+})
+
+it('it links the word to the correct page', () => {
+    render(<DailyWord words={words}/>);
+
+    const wordLink = screen.getByRole('link');
+    const pattern = `search\\?term=${wordLink.text}`;
+    const regex = new RegExp(pattern);
+
+    expect(wordLink).toBeInTheDocument();
+    expect(wordLink.href).toMatch(regex);
+})
+
+it('it shows a unique word in each day that matches with it\'s link', () => {
+    const shownWords = new Set();
+    const element = render(<DailyWord words={words}/>);
+
+    for(let i=0;i<words.length;i++){
+        const singleDay = 24 * 60 * 60 * 1000;
+        const date = new Date((new Date).getTime() + singleDay * i);
+        jest.useFakeTimers().setSystemTime(date);
+        element.rerender(<DailyWord words={words}/>);
+
+        const wordLink = screen.getByRole('link');
+        const word = wordLink.text;
+        const pattern = `search\\?term=${word}`;
+        const regex = new RegExp(pattern);
+
+        expect(wordLink).toBeInTheDocument();
+        expect(wordLink.href).toMatch(regex);
+
+        expect(shownWords.has(word)).toBe(false);
+        shownWords.add(word);
+        jest.useRealTimers();
+    }
+});
+
+it('it shows the title correctly', () => {
+    render(<DailyWord words={words}/>);
+
+    const title = screen.getByText("wordOfTheDay");
+
+    expect(title).toBeInTheDocument();
+})

_tests_/components/daily-word/past-days.test.jsx

@@ -0,0 +1,18 @@
+import pastDays from '../../../src/components/daily-word/past-days';
+
+it("it returns past days of 1970", () => {
+    const singleDay = 24 * 60 * 60 * 1000;
+
+    const timeInJan1970 = singleDay * 5 + 30 * 60 * 1000;
+    const dateInJan1970 = new Date(timeInJan1970);
+
+    const timeIn1970 = singleDay * 98 + 154 * 60 * 1000;
+    const dateIn1970 = new Date(timeIn1970);
+
+    const timeAfter1970 = singleDay * 42195 + 23 * 60 * 60 * 1000 + 30 * 60 * 1000;
+    const date = new Date(timeAfter1970);
+
+    expect(pastDays(dateInJan1970)).toBe(5);
+    expect(pastDays(dateIn1970)).toBe(98);
+    expect(pastDays(date)).toBe(42195);
+})

_tests_/pages/index.test.jsx

@@ -15,7 +15,6 @@ describe("Glosseta Landing Page", () => {
     render(<Home />);
 
     const glossetaContainer = screen.getByTitle("glosseta-landing-page");
-    const glossetaHeading = screen.getByText("web3GlossaryHeading");
     const glossetaDescription = screen.getByText("glossetaDescription");
     const logo = screen.getByTitle("glosseta-logo");
 
@@ -24,8 +23,6 @@ describe("Glosseta Landing Page", () => {
     expect(logo).toHaveAttribute("src", "/glosseta.png");
     expect(logo).toHaveAttribute("alt", "Glosseta logo");
 
-    expect(glossetaHeading).toBeInTheDocument();
-
     expect(glossetaDescription).toBeInTheDocument();
   });
 });

public/locales/en/common.json

@@ -6,7 +6,6 @@
     "enspectButtonTitle": "ENSpect",
     "scrollToTheTopButton": "Click here to scroll to the top of the page",
 
-    "web3GlossaryHeading": "Web3 Glossary",
     "glossetaDescription": "Glosseta is an open-source glossary meant to help people explore and learn the terminology behind web3",
 
     "searchInputGroupAriaLabel" : "Search Bar",
@@ -60,5 +59,7 @@
 
     "footerTwitterA11yText" : "Opens the Glosseta Twitter page in a new window",
     "footerGitHubA11yText" : "Opens the GitHub project repo in a new window",
-    "footerArweaveA11yText" : "Opens Arweave.org in a new window"
+    "footerArweaveA11yText" : "Opens Arweave.org in a new window",
+
+    "wordOfTheDay" : "Word of the day"
 }

src/components/daily-word/daily-word.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text, Link, VStack, Heading } from '@chakra-ui/react';
+import pastDays from "./past-days";
+import { useTranslation } from "next-i18next";
+
+const DailyWord = ({words}:{words:any[]}): JSX.Element => {
+    const { t } = useTranslation();
+
+    const indexOfWords = pastDays(new Date()) % words.length;
+    return (
+        <VStack fontSize={{ base: "lg", md: "xl" }}>
+            <Heading as="h1" color="white" textAlign="center">{t("wordOfTheDay")}</Heading>
+            <Link color="white" href={`/search?term=${words[indexOfWords]}`}>
+                <Text casing="capitalize">{words[indexOfWords]}</Text>
+            </Link>
+        </VStack>
+    )
+}
+
+export default DailyWord;

src/components/daily-word/past-days.tsx

@@ -0,0 +1,6 @@
+const pastDays = (date: Date): number => {
+    const day = 24 * 60 * 60 * 1000;
+    return Math.floor(date.getTime()/day);
+}
+
+export default pastDays;

src/pages/index.tsx

@@ -14,6 +14,7 @@ import SearchBar from "./components/input/search-bar";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useTranslation } from "next-i18next";
 import { termFilter } from "../filter/termConfig";
+import DailyWord from "../components/daily-word/daily-word";
 
 const Home: NextPage = () => {
   const { t } = useTranslation();
@@ -37,9 +38,9 @@ const Home: NextPage = () => {
           marginTop="-65px"
         >
           <VStack>
-            <Heading as="h1" padding={1} color="white" textAlign="center">
-              {t("web3GlossaryHeading")}
-            </Heading>
+            <HStack marginBottom="60px">
+              <DailyWord words={termFilter}/>
+            </HStack>
             <HStack spacing={3}>
               <SearchBar
                 baseWidth={"80vw"}