diff --git a/public/locales/en.json b/public/locales/en.json index c133c4a11..e3e64e4ce 100644 --- a/public/locales/en.json +++ b/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." } diff --git a/src/components/landing/pages/history/history-content/history-content.tsx b/src/components/landing/pages/history/history-content/history-content.tsx index 21d735899..c9e78efcc 100644 --- a/src/components/landing/pages/history/history-content/history-content.tsx +++ b/src/components/landing/pages/history/history-content/history-content.tsx @@ -42,10 +42,10 @@ export const HistoryContent: React.FC = ({ viewState, entri const mapViewStateToComponent = (viewState: ViewStateEnum) => { switch (viewState) { default: - case ViewStateEnum.card: + case ViewStateEnum.CARD: return - case ViewStateEnum.table: + case ViewStateEnum.TABLE: return } diff --git a/src/components/landing/pages/history/history-toolbar/clear-history-button.tsx b/src/components/landing/pages/history/history-toolbar/clear-history-button.tsx new file mode 100644 index 000000000..e3f91d3e0 --- /dev/null +++ b/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 = ({ onClearHistory }) => { + const { t } = useTranslation() + const [show, setShow] = useState(false) + + const handleShow = () => setShow(true) + const handleClose = () => setShow(false) + + return ( + + + + +
+
+
+ + + + +
+
+ ) +} diff --git a/src/components/landing/pages/history/history-toolbar/history-toolbar.tsx b/src/components/landing/pages/history/history-toolbar/history-toolbar.tsx index 7305710f6..0a12f7337 100644 --- a/src/components/landing/pages/history/history-toolbar/history-toolbar.tsx +++ b/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, - table + CARD, + TABLE } export interface HistoryToolbarProps { - onSettingsChange: HistoryToolbarChange - tags: string[] + 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 = ({ onSettingsChange, tags }) => { +export const HistoryToolbar: React.FC = ({ onSettingsChange, tags, onClearHistory }) => { const [t] = useTranslation() const [state, setState] = useState(initState) @@ -102,9 +104,7 @@ export const HistoryToolbar: React.FC = ({ onSettingsChange - +