added clearHistory functionality (#82)

added clearHistory functionality

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: mrdrogdrog <mr.drogdrog@gmail.com>

public/locales/en.json

@@ -135,5 +135,7 @@
   "clientVersion": "Client version",
   "youAreUsing": "You are using",
   "close": "Close",
-  "issueTracker": "Found a bug? Fill an issue!"
+  "issueTracker": "Found a bug? Fill an issue!",
+  "clearHistoryQuestion": "Do you want to clear the history?",
+  "clearHistoryDisclaimer": "This won't delete any notes."
 }

src/components/landing/pages/history/history-content/history-content.tsx

@@ -42,10 +42,10 @@ export const HistoryContent: React.FC<HistoryContentProps> = ({ viewState, entri
   const mapViewStateToComponent = (viewState: ViewStateEnum) => {
     switch (viewState) {
       default:
-      case ViewStateEnum.card:
+      case ViewStateEnum.CARD:
         return <HistoryCardList entries={entries} onPinClick={onPinClick} pageIndex={pageIndex}
           onLastPageIndexChange={setLastPageIndex}/>
-      case ViewStateEnum.table:
+      case ViewStateEnum.TABLE:
         return <HistoryTable entries={entries} onPinClick={onPinClick} pageIndex={pageIndex}
           onLastPageIndexChange={setLastPageIndex}/>
     }

src/components/landing/pages/history/history-toolbar/clear-history-button.tsx

@@ -0,0 +1,38 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { useState, Fragment } from 'react'
+import { Button, Modal } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+
+export interface ClearHistoryButtonProps {
+  onClearHistory: () => void
+}
+
+export const ClearHistoryButton: React.FC<ClearHistoryButtonProps> = ({ onClearHistory }) => {
+  const { t } = useTranslation()
+  const [show, setShow] = useState(false)
+
+  const handleShow = () => setShow(true)
+  const handleClose = () => setShow(false)
+
+  return (
+    <Fragment>
+      <Button variant={'light'} title={t('clearHistory')} onClick={handleShow}>
+        <FontAwesomeIcon icon={'trash'}/>
+      </Button>
+      <Modal show={show} onHide={handleClose} animation={true} size="sm">
+        <Modal.Body className="text-dark">
+          <h5><Trans i18nKey={'clearHistoryQuestion'}/></h5>
+          <h6><Trans i18nKey={'clearHistoryDisclaimer'}/></h6>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            <Trans i18nKey={'close'}/>
+          </Button>
+          <Button variant="danger" onClick={onClearHistory}>
+            <Trans i18nKey={'clearHistory'}/>
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </Fragment>
+  )
+}

src/components/landing/pages/history/history-toolbar/history-toolbar.tsx

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { SortButton, SortModeEnum } from '../../../../sort-button/sort-button'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import './typeahead-hacks.scss'
+import { ClearHistoryButton } from './clear-history-button'
 
 export type HistoryToolbarChange = (settings: HistoryToolbarState) => void;
 
@@ -17,24 +18,25 @@ export interface HistoryToolbarState {
 }
 
 export enum ViewStateEnum {
-    card,
+  CARD,
-    table
+  TABLE
 }
 
 export interface HistoryToolbarProps {
   onSettingsChange: HistoryToolbarChange
   tags: string[]
+  onClearHistory: () => void
 }
 
 export const initState: HistoryToolbarState = {
-  viewState: ViewStateEnum.card,
+  viewState: ViewStateEnum.CARD,
   titleSortDirection: SortModeEnum.no,
   lastVisitedSortDirection: SortModeEnum.no,
   keywordSearch: '',
   selectedTags: []
 }
 
-export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange, tags }) => {
+export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange, tags, onClearHistory }) => {
   const [t] = useTranslation()
   const [state, setState] = useState<HistoryToolbarState>(initState)
 
@@ -102,9 +104,7 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
         </Button>
       </InputGroup>
       <InputGroup className={'mr-1'}>
-        <Button variant={'light'} title={t('clearHistory')}>
+        <ClearHistoryButton onClearHistory={onClearHistory}/>
-          <FontAwesomeIcon icon={'trash'}/>
-        </Button>
       </InputGroup>
       <InputGroup className={'mr-1'}>
         <Button variant={'light'} title={t('refreshHistory')}>
@@ -116,9 +116,9 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
           onChange={(newViewState: ViewStateEnum) => {
             toggleViewChanged(newViewState)
           }}>
-          <ToggleButton className={'btn-light'} value={ViewStateEnum.card}><Trans
+          <ToggleButton className={'btn-light'} value={ViewStateEnum.CARD}><Trans
             i18nKey={'cards'}/></ToggleButton>
-          <ToggleButton className={'btn-light'} value={ViewStateEnum.table}><Trans
+          <ToggleButton className={'btn-light'} value={ViewStateEnum.TABLE}><Trans
             i18nKey={'table'}/></ToggleButton>
         </ToggleButtonGroup>
       </InputGroup>

src/components/landing/pages/history/history.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect, useState } from 'react'
 import { Row } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { loadHistoryFromLocalStore, sortAndFilterEntries } from '../../../../utils/historyUtils'
+import { loadHistoryFromLocalStore, setHistoryToLocalStore, sortAndFilterEntries } from '../../../../utils/historyUtils'
 import { HistoryContent } from './history-content/history-content'
 import { HistoryToolbar, HistoryToolbarState, initState as toolbarInitState } from './history-toolbar/history-toolbar'
 
@@ -29,9 +29,14 @@ export const History: React.FC = () => {
     if (historyEntries === []) {
       return
     }
-    window.localStorage.setItem('history', JSON.stringify(historyEntries))
+    setHistoryToLocalStore(historyEntries)
   }, [historyEntries])
 
+  const clearHistory = () => {
+    setHistoryToLocalStore([])
+    setHistoryEntries([])
+  }
+
   const pinClick: pinClick = (entryId: string) => {
     setHistoryEntries((entries) => {
       return entries.map((entry) => {
@@ -57,7 +62,11 @@ export const History: React.FC = () => {
     <Fragment>
       <h1 className="mb-4"><Trans i18nKey="history"/></h1>
       <Row className={'justify-content-center mb-3'}>
-        <HistoryToolbar onSettingsChange={setViewState} tags={tags}/>
+        <HistoryToolbar
+          onSettingsChange={setViewState}
+          tags={tags}
+          onClearHistory={clearHistory}
+        />
       </Row>
       <HistoryContent viewState={viewState.viewState}
         entries={entriesToShow}

src/utils/historyUtils.ts

@@ -86,3 +86,7 @@ export function loadHistoryFromLocalStore (): HistoryEntry[] {
     return JSON.parse(historyJsonString) as HistoryEntry[]
   }
 }
+
+export function setHistoryToLocalStore (entries: HistoryEntry[]): void {
+  window.localStorage.setItem('history', JSON.stringify(entries))
+}