Feature/history page (#28)

* add alert message and use only entry for card and table Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Refresh table view when translation was changed Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Add sort by date and pinning Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * save history to localstorage Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * improve card and table history Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * extract functions Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Sort in history component Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Fix i18n key Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Move scss imports Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * fix scss import Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * modify state with setState Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * fix import Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * add sortAndFilterEntries function Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
2024-11-21 17:26:29 -05:00 · 2020-05-16 19:54:08 +02:00 · 2020-05-16 19:54:08 +02:00 · 83ab0bbe7e
commit 83ab0bbe7e
parent 5eb8ab7517
39 changed files with 226 additions and 163 deletions
--- a/public/locales/ar.json
+++ b/public/locales/ar.json
@ -25,7 +25,7 @@
  "Import history": "استيراد التاريخ",
  "Clear history": "مسح التاريخ",
  "Refresh history": "حدث التاريخ",
-  "No history": "ليس هناك سِجِل",
+  "noHistory": "ليس هناك سِجِل",
  "Import from browser": "استيراد من المتصفح",
  "releases": "إصدارات",
  "Are you sure?": "هل أنت واثق؟",
--- a/public/locales/ca.json
+++ b/public/locales/ca.json
@ -25,7 +25,7 @@
  "Import history": "Importar historial",
  "Clear history": "Borrar historial",
  "Refresh history": "Actualitzar historial",
-  "No history": "Cap historial",
+  "noHistory": "Cap historial",
  "Import from browser": "Importar del navegador",
  "releases": "Versions",
  "Are you sure?": "Estas segur?",
--- a/public/locales/cs.json
+++ b/public/locales/cs.json
@ -25,7 +25,7 @@
  "Import history": "Importovat historii",
  "Clear history": "Odstranit historii",
  "Refresh history": "Aktualizovat historii",
-  "No history": "Žádná historie",
+  "noHistory": "Žádná historie",
  "Import from browser": "Importovat z prohlížeče",
  "releases": "Vydání",
  "Are you sure?": "Jste si jisti?",
--- a/public/locales/da.json
+++ b/public/locales/da.json
@ -25,7 +25,7 @@
  "Import history": "Importér historik",
  "Clear history": "Ryd hsitorik",
  "Refresh history": "Genindlæs historik",
-  "No history": "Ingen historik",
+  "noHistory": "Ingen historik",
  "Import from browser": "Importér fra browser",
  "releases": "Releases",
  "Are you sure?": "Er du sikker?",
--- a/public/locales/de.json
+++ b/public/locales/de.json
@ -25,7 +25,7 @@
  "Import history": "Verlauf importieren",
  "Clear history": "Verlauf löschen",
  "Refresh history": "Verlauf aktualisieren",
-  "No history": "Kein Verlauf",
+  "noHistory": "Kein Verlauf",
  "Import from browser": "Vom Browser importieren",
  "releases": "Versionen",
  "Are you sure?": "Sind Sie sicher?",
--- a/public/locales/el.json
+++ b/public/locales/el.json
@ -25,7 +25,7 @@
  "Import history": "Εισαγωγή ιστορίας",
  "Clear history": "Καθαρισμός Ιστορίας",
  "Refresh history": "Ανανέωση ιστορίας",
-  "No history": "Δεν υπάρχει ιστορία",
+  "noHistory": "Δεν υπάρχει ιστορία",
  "Import from browser": "Εισαγωγή απο τον περιηγητή",
  "releases": "Κυκλοφορίες",
  "Are you sure?": "Είστε σίγουρος?",
--- a/public/locales/en.json
+++ b/public/locales/en.json
@ -25,7 +25,7 @@
  "Import history": "Import history",
  "Clear history": "Clear history",
  "Refresh history": "Refresh history",
-  "No history": "No history",
+  "noHistory": "No history",
  "Import from browser": "Import from browser",
  "releases": "Releases",
  "Are you sure?": "Are you sure?",
--- a/public/locales/eo.json
+++ b/public/locales/eo.json
@ -25,7 +25,7 @@
  "Import history": "Alportu historion",
  "Clear history": "Malplenigu historion",
  "Refresh history": "Refreŝigu historion",
-  "No history": "Neniu historio",
+  "noHistory": "Neniu historio",
  "Import from browser": "Alportu de retumilo",
  "releases": "Eldonoj",
  "Are you sure?": "Ĉu vi certas?",
--- a/public/locales/es.json
+++ b/public/locales/es.json
@ -25,7 +25,7 @@
  "Import history": "Importar historial",
  "Clear history": "Borrar historial",
  "Refresh history": "Actualizar historial",
-  "No history": "Ningún historial",
+  "noHistory": "Ningún historial",
  "Import from browser": "Importar del navegador",
  "releases": "Versiones",
  "Are you sure?": "¿Estás seguro?",
--- a/public/locales/fr.json
+++ b/public/locales/fr.json
@ -25,7 +25,7 @@
  "Import history": "Importer l'historique",
  "Clear history": "Effacer l'historique",
  "Refresh history": "Actualiser l'historique",
-  "No history": "Pas d'historique",
+  "noHistory": "Pas d'historique",
  "Import from browser": "Importer depuis le navigateur",
  "releases": "Versions",
  "Are you sure?": "Ëtes-vous sûr ?",
--- a/public/locales/hi.json
+++ b/public/locales/hi.json
@ -25,7 +25,7 @@
  "Import history": "इतिहास को आयात करें",
  "Clear history": "इतिहास मिटा दें",
  "Refresh history": "इतिहास ताज़ा करे",
-  "No history": "इतिहास न रखें",
+  "noHistory": "इतिहास न रखें",
  "Import from browser": "ब्राउज़र से आयात",
  "releases": "विज्ञप्ति",
  "Are you sure?": "क्या आपको यकीन है?",
--- a/public/locales/hr.json
+++ b/public/locales/hr.json
@ -25,7 +25,7 @@
  "Import history": "Uvezi povijest",
  "Clear history": "Očisti povijest",
  "Refresh history": "Osvježi povijest",
-  "No history": "Nema povijesti",
+  "noHistory": "Nema povijesti",
  "Import from browser": "Uvezi iz preglednika",
  "releases": "Izdanja",
  "Are you sure?": "Jeste li sigurni?",
--- a/public/locales/id.json
+++ b/public/locales/id.json
@ -25,7 +25,7 @@
  "Import history": "Impor Riwayat",
  "Clear history": "Bersihkan Riwayat",
  "Refresh history": "Muat-ulang Riwayat",
-  "No history": "Tidak ada riwayat",
+  "noHistory": "Tidak ada riwayat",
  "Import from browser": "Impor dari browser",
  "releases": "Penerbitan",
  "Are you sure?": "Apakah anda yakin?",
--- a/public/locales/it.json
+++ b/public/locales/it.json
@ -25,7 +25,7 @@
  "Import history": "Importa cronologia",
  "Clear history": "Cancella cronologia",
  "Refresh history": "Aggiorna cronologia",
-  "No history": "Nessuna cronologia",
+  "noHistory": "Nessuna cronologia",
  "Import from browser": "Importa da browser",
  "releases": "Versioni",
  "Are you sure?": "Sei sicuro?",
--- a/public/locales/ja.json
+++ b/public/locales/ja.json
@ -25,7 +25,7 @@
  "Import history": "履歴をインポート",
  "Clear history": "履歴をクリア",
  "Refresh history": "履歴を更新",
-  "No history": "履歴はありません",
+  "noHistory": "履歴はありません",
  "Import from browser": "ブラウザからインポート",
  "releases": "リリース",
  "Are you sure?": "本当にいいですか？",
--- a/public/locales/ko.json
+++ b/public/locales/ko.json
@ -25,7 +25,7 @@
  "Import history": "기록 불러오기",
  "Clear history": "기록 초기화",
  "Refresh history": "기록 새로고침",
-  "No history": "기록 없음",
+  "noHistory": "기록 없음",
  "Import from browser": "브라우저에서 불러오기",
  "releases": "릴리즈",
  "Are you sure?": "확실합니까?",
--- a/public/locales/nl.json
+++ b/public/locales/nl.json
@ -25,7 +25,7 @@
  "Import history": "Importeer geschiedenis",
  "Clear history": "Verwijder geschiedenis",
  "Refresh history": "Ververs geschiedenis",
-  "No history": "Geen geschidenis gevonden",
+  "noHistory": "Geen geschidenis gevonden",
  "Import from browser": "Importeer van browser",
  "releases": "Versies",
  "Are you sure?": "Weet je het zeker?",
--- a/public/locales/pl.json
+++ b/public/locales/pl.json
@ -25,7 +25,7 @@
  "Import history": "Importuj historię",
  "Clear history": "Wyczyść historię",
  "Refresh history": "Odśwież historię",
-  "No history": "Brak historii",
+  "noHistory": "Brak historii",
  "Import from browser": "Importuj z przeglądarki",
  "releases": "Wydania",
  "Are you sure?": "Jesteś pewny?",
--- a/public/locales/pt.json
+++ b/public/locales/pt.json
@ -25,7 +25,7 @@
  "Import history": "Importar histórico",
  "Clear history": "Apagar histórico",
  "Refresh history": "Atualizar histórico",
-  "No history": "Nenhum histórico",
+  "noHistory": "Nenhum histórico",
  "Import from browser": "Importar do navegador",
  "releases": "Lançamentos",
  "Are you sure?": "Tem certeza?",
--- a/public/locales/ru.json
+++ b/public/locales/ru.json
@ -25,7 +25,7 @@
  "Import history": "Импорт истории",
  "Clear history": "Очистить историю",
  "Refresh history": "Обновить историю",
-  "No history": "Нет истории",
+  "noHistory": "Нет истории",
  "Import from browser": "Импорт из браузера",
  "releases": "Релизы",
  "Are you sure?": "Вы уверены?",
--- a/public/locales/sk.json
+++ b/public/locales/sk.json
@ -25,7 +25,7 @@
  "Import history": "Importovať históriu",
  "Clear history": "Odstrániť históriu",
  "Refresh history": "Aktualizovať históriu",
-  "No history": "Žiadna história",
+  "noHistory": "Žiadna história",
  "Import from browser": "Importovať z prehliadača",
  "releases": "Vydania",
  "Are you sure?": "Ste si istý?",
--- a/public/locales/sr.json
+++ b/public/locales/sr.json
@ -25,7 +25,7 @@
  "Import history": "Увези историјат",
  "Clear history": "Очисти историју",
  "Refresh history": "Освежи историју",
-  "No history": "Нема историје",
+  "noHistory": "Нема историје",
  "Import from browser": "Увези из прегледача",
  "releases": "Издања",
  "Are you sure?": "Јесте ли сигурни?",
--- a/public/locales/sv.json
+++ b/public/locales/sv.json
@ -25,7 +25,7 @@
  "Import history": "Importhistorik",
  "Clear history": "Rensa historik",
  "Refresh history": "Uppdatera historik",
-  "No history": "Ingen historik",
+  "noHistory": "Ingen historik",
  "Import from browser": "Importera från webbläsare",
  "releases": "Lanseringar",
  "Are you sure?": "Är du säker?",
--- a/public/locales/tr.json
+++ b/public/locales/tr.json
@ -25,7 +25,7 @@
  "Import history": "Geçmişi içe aktar",
  "Clear history": "Geçmişi temizle",
  "Refresh history": "Geçmişi yenile",
-  "No history": "Geçmiş yok",
+  "noHistory": "Geçmiş yok",
  "Import from browser": "Tarayıcıdan içe aktar",
  "releases": "Sürümler",
  "Are you sure?": "Emin misiniz?",
--- a/public/locales/uk.json
+++ b/public/locales/uk.json
@ -25,7 +25,7 @@
  "Import history": "Імпортувати історію",
  "Clear history": "Очистити історію",
  "Refresh history": "Оновити історію",
-  "No history": "Історія відсутня",
+  "noHistory": "Історія відсутня",
  "Import from browser": "Імпортувати з браузера",
  "releases": "Релізи",
  "Are you sure?": "Ви впевнені?",
--- a/public/locales/vi.json
+++ b/public/locales/vi.json
@ -25,7 +25,7 @@
  "Import history": "Nhập lịch sử",
  "Clear history": "Xóa lịch sử",
  "Refresh history": "Làm mới lịch sử",
-  "No history": "Không có lịch sử",
+  "noHistory": "Không có lịch sử",
  "Import from browser": "Nhập từ trình duyệt",
  "releases": "Xuất bản",
  "Are you sure?": "Bạn có chắc chắn không ?",
--- a/public/locales/zh-CN.json
+++ b/public/locales/zh-CN.json
@ -25,7 +25,7 @@
  "Import history": "导入历史",
  "Clear history": "清空历史",
  "Refresh history": "刷新历史",
-  "No history": "无历史记录",
+  "noHistory": "无历史记录",
  "Import from browser": "从浏览器导入",
  "releases": "版本",
  "Are you sure?": "您确定吗？",
--- a/public/locales/zh-TW.json
+++ b/public/locales/zh-TW.json
@ -25,7 +25,7 @@
  "Import history": "匯入紀錄",
  "Clear history": "清空紀錄",
  "Refresh history": "更新紀錄",
-  "No history": "沒有紀錄",
+  "noHistory": "沒有紀錄",
  "Import from browser": "從瀏覽器匯入",
  "releases": "版本",
  "Are you sure?": "你確定嗎？",
--- a/src/components/landing/pages/history/common/close-button.scss
+++ b/src/components/landing/pages/history/common/close-button.scss
@ -0,0 +1,7 @@
+.history-close {
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 1;
+  }
+}
--- a/src/components/landing/pages/history/common/close-button.tsx
+++ b/src/components/landing/pages/history/common/close-button.tsx
@ -1,5 +1,6 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import React from "react";
+import "./close-button.scss"

 const CloseButton: React.FC = () => {
    return (
--- a/src/components/landing/pages/history/common/pin-button.scss
+++ b/src/components/landing/pages/history/common/pin-button.scss
@ -11,11 +11,3 @@
    opacity: 1;
  }
 }
-
-.history-close {
-  opacity: 0.5;
-
-  &:hover {
-    opacity: 1;
-  }
-}
--- a/src/components/landing/pages/history/common/pin-button.tsx
+++ b/src/components/landing/pages/history/common/pin-button.tsx
@ -1,17 +1,18 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import React from "react";
+import "./pin-button.scss"

 export interface PinButtonProps {
    pin: boolean;
-    onPinChange: () => void;
+    onPinClick: () => void;
 }

-const PinButton: React.FC<PinButtonProps> = ({pin, onPinChange}) => {
+const PinButton: React.FC<PinButtonProps> = ({pin, onPinClick}) => {
    return (
        <FontAwesomeIcon
            icon="thumbtack"
-            className={`history-pin ${pin? 'active' : ''}`}
-            onClick={onPinChange}
+            className={`history-pin ${pin ? 'active' : ''}`}
+            onClick={onPinClick}
        />
    );
 }
--- a/src/components/landing/pages/history/history-card/history-card-list.tsx
+++ b/src/components/landing/pages/history/history-card/history-card-list.tsx
@ -0,0 +1,18 @@
+import React, {Fragment} from 'react'
+import {HistoryEntriesProps} from "../history-content/history-content";
+import {HistoryCard} from "./history-card";
+
+export const HistoryCardList: React.FC<HistoryEntriesProps> = ({entries, onPinClick}) => {
+    return (
+        <Fragment>
+            {
+                entries.map((entry) => (
+                    <HistoryCard
+                        key={entry.id}
+                        entry={entry}
+                        onPinClick={onPinClick}
+                    />))
+            }
+        </Fragment>
+    )
+}
--- a/src/components/landing/pages/history/history-card/history-card.tsx
+++ b/src/components/landing/pages/history/history-card/history-card.tsx
@ -1,32 +1,34 @@
 import React from 'react'
-import {HistoryInput} from '../history'
 import {Badge, Card} from 'react-bootstrap'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
-import "../common/button.scss"
 import {PinButton} from "../common/pin-button";
 import {CloseButton} from "../common/close-button";
 import moment from "moment";
 import {useTranslation} from "react-i18next";
+import {HistoryEntryProps} from "../history-content/history-content";
+import {formatHistoryDate} from "../../../../../utils/historyUtils";

-export const HistoryCard: React.FC<HistoryInput> = ({pinned, title, lastVisited, tags, onPinChange}) => {
+export const HistoryCard: React.FC<HistoryEntryProps> = ({entry, onPinClick}) => {
    useTranslation()
    return (
        <div className="p-2 col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <Card className="p-0" text={"dark"} bg={"light"}>
                <div className="d-flex justify-content-between p-2">
-                    <PinButton pin={pinned} onPinChange={onPinChange}/>
-                    <Card.Title className="m-0 mt-3">{title}</Card.Title>
+                    <PinButton pin={entry.pinned} onPinClick={() => {
+                        onPinClick(entry.id)
+                    }}/>
+                    <Card.Title className="m-0 mt-3">{entry.title}</Card.Title>
                    <CloseButton/>
                </div>
                <Card.Body>
                    <div className="text-black-50">
-                        <FontAwesomeIcon icon="clock"/> {moment(lastVisited).fromNow()}<br/>
-                        {moment(lastVisited).format("llll")}
-                        <div children=
-                                 {
-                                     tags.map((tag) => <Badge variant={"dark"} key={tag}>{tag}</Badge>)
-                                 }
-                        />
+                        <FontAwesomeIcon icon="clock"/> {moment(entry.lastVisited).fromNow()}<br/>
+                        {formatHistoryDate(entry.lastVisited)}
+                        <div>
+                            {
+                                entry.tags.map((tag) => <Badge variant={"dark"} key={tag}>{tag}</Badge>)
+                            }
+                        </div>
                    </div>
                </Card.Body>
            </Card>
--- a/src/components/landing/pages/history/history-content/history-content.tsx
+++ b/src/components/landing/pages/history/history-content/history-content.tsx
@ -0,0 +1,41 @@
+import React from "react";
+import {HistoryEntry, pinClick, ViewStateEnum} from "../history";
+import {HistoryTable} from "../history-table/history-table";
+import {Alert} from "react-bootstrap";
+import {Trans} from "react-i18next";
+import {HistoryCardList} from "../history-card/history-card-list";
+
+export interface HistoryContentProps {
+    viewState: ViewStateEnum
+    entries: HistoryEntry[]
+    onPinClick: pinClick
+}
+
+export interface HistoryEntryProps {
+    entry: HistoryEntry,
+    onPinClick: pinClick
+}
+
+export interface HistoryEntriesProps {
+    entries: HistoryEntry[]
+    onPinClick: pinClick
+}
+
+export const HistoryContent: React.FC<HistoryContentProps> = ({viewState, entries, onPinClick}) => {
+
+    if (entries.length === 0) {
+        return (
+            <Alert variant={"secondary"}>
+                <Trans i18nKey={"noHistory"}/>
+            </Alert>
+        );
+    }
+
+    switch (viewState) {
+        default:
+        case ViewStateEnum.card:
+            return <HistoryCardList entries={entries} onPinClick={onPinClick}/>
+        case ViewStateEnum.table:
+            return <HistoryTable entries={entries} onPinClick={onPinClick}/>;
+    }
+}
--- a/src/components/landing/pages/history/history-table/history-table-row.tsx
+++ b/src/components/landing/pages/history/history-table/history-table-row.tsx
@ -1,16 +1,20 @@
 import React from "react";
-import {HistoryInput} from "../history";
 import {PinButton} from "../common/pin-button";
 import {CloseButton} from "../common/close-button";
-import moment from "moment";
+import {useTranslation} from "react-i18next";
+import {HistoryEntryProps} from "../history-content/history-content";
+import {formatHistoryDate} from "../../../../../utils/historyUtils";

-export const HistoryTableRow: React.FC<HistoryInput> = ({pinned, title, lastVisited, onPinChange}) => {
+export const HistoryTableRow: React.FC<HistoryEntryProps> = ({entry, onPinClick}) => {
+    useTranslation()
    return (
        <tr>
-            <td>{title}</td>
-            <td>{moment(lastVisited).format("llll")}</td>
+            <td>{entry.title}</td>
+            <td>{formatHistoryDate(entry.lastVisited)}</td>
            <td>
-                <PinButton pin={pinned} onPinChange={onPinChange}/>
+                <PinButton pin={entry.pinned} onPinClick={() => {
+                    onPinClick(entry.id)
+                }}/>
                &nbsp;
                <CloseButton/>
            </td>
--- a/src/components/landing/pages/history/history-table/history-table.tsx
+++ b/src/components/landing/pages/history/history-table/history-table.tsx
@ -1,21 +1,30 @@
 import React from "react";
 import {Table} from "react-bootstrap"
+import {HistoryTableRow} from "./history-table-row";
+import {HistoryEntriesProps} from "../history-content/history-content";

-const HistoryTable: React.FC = ({children}) => {
+const HistoryTable: React.FC<HistoryEntriesProps> = ({entries, onPinClick}) => {
    return (
        <Table striped bordered hover size="sm" variant="dark">
            <thead>
-                <tr>
-                    <th>Title</th>
-                    <th>Last visited</th>
-                    <th>Actions</th>
-                </tr>
+            <tr>
+                <th>Title</th>
+                <th>Last visited</th>
+                <th>Actions</th>
+            </tr>
            </thead>
            <tbody>
-            {children}
+            {
+                entries.map((entry) =>
+                    <HistoryTableRow
+                        key={entry.id}
+                        entry={entry}
+                        onPinClick={onPinClick}
+                    />)
+            }
            </tbody>
        </Table>
    )
 }

-export { HistoryTable }
+export {HistoryTable}
--- a/src/components/landing/pages/history/history.tsx
+++ b/src/components/landing/pages/history/history.tsx
@ -1,26 +1,14 @@
 import React, {Fragment, useEffect, useState} from 'react'
-import {HistoryCard} from "./history-card/history-card";
-import {HistoryTable} from "./history-table/history-table";
-import {HistoryTableRow} from './history-table/history-table-row';
 import {ToggleButton, ToggleButtonGroup} from 'react-bootstrap';
-import moment from "moment";
+import {HistoryContent} from './history-content/history-content';
+import {loadHistoryFromLocalStore, sortAndFilterEntries} from "../../../../utils/historyUtils";

-interface HistoryChange {
-    onPinChange: () => void,
-}
-
-interface ViewState {
-    viewState: ViewStateEnum
-}
-
-enum ViewStateEnum {
+export enum ViewStateEnum {
    card,
    table
 }

-export type HistoryInput = HistoryEntry & HistoryChange
-
-interface HistoryEntry {
+export interface HistoryEntry {
    id: string,
    title: string,
    lastVisited: Date,
@ -28,101 +16,44 @@ interface HistoryEntry {
    pinned: boolean
 }

-interface OldHistoryEntry {
-    id: string;
-    text: string;
-    time: number;
-    tags: string[];
-    pinned: boolean;
-}
+export type pinClick = (entryId: string) => void;

-function loadHistoryFromLocalStore() {
-    const historyJsonString = window.localStorage.getItem("history");
-    if (historyJsonString === null) {
-        // if localStorage["history"] is empty we check the old localStorage["notehistory"]
-        // and convert it to the new format
-        const oldHistoryJsonString = window.localStorage.getItem("notehistory")
-        const oldHistory = oldHistoryJsonString ? JSON.parse(JSON.parse(oldHistoryJsonString)) : [];
-        return oldHistory.map((entry: OldHistoryEntry) => {
-            return {
-                id: entry.id,
-                title: entry.text,
-                lastVisited: moment(entry.time).toDate(),
-                tags: entry.tags,
-                pinned: entry.pinned,
-            }
-        })
-    } else {
-        return JSON.parse(historyJsonString)
-    }
-}
-
-const History: React.FC = () => {
+export const History: React.FC = () => {
    const [historyEntries, setHistoryEntries] = useState<HistoryEntry[]>([])
-    const [viewState, setViewState] = useState<ViewState>({
-        viewState: ViewStateEnum.card
-    })
+    const [viewState, setViewState] = useState<ViewStateEnum>(ViewStateEnum.card)

    useEffect(() => {
        const history = loadHistoryFromLocalStore();
        setHistoryEntries(history);
    }, [])

+    useEffect(() => {
+        window.localStorage.setItem("history", JSON.stringify(historyEntries));
+    }, [historyEntries])
+
+    const pinClick: pinClick = (entryId: string) => {
+        setHistoryEntries((entries) => {
+            return entries.map((entry) => {
+                if (entry.id === entryId) {
+                    entry.pinned = !entry.pinned;
+                }
+                return entry;
+            });
+        })
+    }
+
    return (
        <Fragment>
            <h1>History</h1>
            <ToggleButtonGroup type="radio" name="options" defaultValue={ViewStateEnum.card} className="mb-2"
-                               onChange={(newState: ViewStateEnum) => setViewState(() => ({viewState: newState}))}>
+                               onChange={(newState: ViewStateEnum) => setViewState(newState)}>
                <ToggleButton value={ViewStateEnum.card}>Card</ToggleButton>
                <ToggleButton value={ViewStateEnum.table}>Table</ToggleButton>
            </ToggleButtonGroup>
-            {
-                viewState.viewState === ViewStateEnum.card ? (
-                    <div className="d-flex flex-wrap">
-                        {
-                            historyEntries.length === 0 ?
-                                ''
-                            :
-                                historyEntries.map((entry) =>
-                                    <HistoryCard
-                                        id={entry.id}
-                                        tags={entry.tags}
-                                        pinned={entry.pinned}
-                                        title={entry.title}
-                                        lastVisited={entry.lastVisited}
-                                        onPinChange={() => {
-                                            //   setHistoryEntries((prev: HistoryEntry) => {
-                                            //        return {...prev, pinned: !prev.pinned};
-                                            //     });
-                                        }}
-                                    />)
-                        }
-                    </div>
-                ) : (
-                    <HistoryTable>
-                        {
-                            historyEntries.length === 0 ?
-                                ''
-                            :
-                                historyEntries.map((entry) =>
-                                    <HistoryTableRow
-                                        id={entry.id}
-                                        tags={entry.tags}
-                                        pinned={entry.pinned}
-                                        title={entry.title}
-                                        lastVisited={entry.lastVisited}
-                                        onPinChange={() => {
-                                            //    setEntry((prev: HistoryEntry) => {
-                                            //       return {...prev, pinned: !prev.pinned};
-                                            //   });
-                                        }}
-                                    />)
-                        }
-                    </HistoryTable>
-                )
-            }
+            <div className="d-flex flex-wrap justify-content-center">
+                <HistoryContent viewState={viewState} entries={sortAndFilterEntries(historyEntries)}
+                                onPinClick={pinClick}/>
+            </div>
        </Fragment>
    )
-}
-
-export {History}
+}
--- a/src/utils/historyUtils.ts
+++ b/src/utils/historyUtils.ts
@ -0,0 +1,57 @@
+import {HistoryEntry} from "../components/landing/pages/history/history";
+import moment from "moment";
+
+export function sortAndFilterEntries(entries: HistoryEntry[]): HistoryEntry[] {
+    return sortEntries(entries);
+}
+
+function sortEntries(entries: HistoryEntry[]): HistoryEntry[] {
+    return entries.sort((a, b) => {
+        if (a.pinned && !b.pinned) {
+            return -1;
+        }
+        if (!a.pinned && b.pinned) {
+            return 1;
+        }
+        if (a.lastVisited < b.lastVisited) {
+            return -1;
+        }
+        if (a.lastVisited > b.lastVisited) {
+            return 1;
+        }
+        return 0;
+    })
+}
+
+export function formatHistoryDate(date: Date) {
+    return moment(date).format("llll")
+}
+
+export interface OldHistoryEntry {
+    id: string;
+    text: string;
+    time: number;
+    tags: string[];
+    pinned: boolean;
+}
+
+export function loadHistoryFromLocalStore(): HistoryEntry[] {
+    const historyJsonString = window.localStorage.getItem("history");
+    if (historyJsonString === null) {
+        // if localStorage["history"] is empty we check the old localStorage["notehistory"]
+        // and convert it to the new format
+        const oldHistoryJsonString = window.localStorage.getItem("notehistory")
+        const oldHistory = oldHistoryJsonString ? JSON.parse(JSON.parse(oldHistoryJsonString)) : [];
+        return oldHistory.map((entry: OldHistoryEntry) => {
+            return {
+                id: entry.id,
+                title: entry.text,
+                lastVisited: moment(entry.time).toDate(),
+                tags: entry.tags,
+                pinned: entry.pinned,
+            }
+        })
+    } else {
+        return JSON.parse(historyJsonString)
+    }
+}