From 30823a08b0ec0095f6cb8ba70b5d535b50522bda Mon Sep 17 00:00:00 2001 From: xem Date: Mon, 8 Nov 2021 16:24:34 +0100 Subject: [PATCH] QMAPS-2359: show disabled panel history, save switch setting in localStorage --- src/adapters/search_history.js | 8 ++++ src/components/TopBar.jsx | 8 ++-- src/libs/colors.js | 1 + src/panel/PanelManager.jsx | 9 ++++ src/panel/direction/DirectionInput.jsx | 10 ++-- src/panel/history/HistoryPanel.jsx | 50 ++++++++++++++++++++ src/panel/menu/AppMenu.jsx | 17 ++++++- src/scss/app.scss | 1 + src/scss/includes/panels/favorite_panel.scss | 4 +- src/scss/includes/panels/history_panel.scss | 14 ++++++ 10 files changed, 108 insertions(+), 14 deletions(-) create mode 100644 src/panel/history/HistoryPanel.jsx create mode 100644 src/scss/includes/panels/history_panel.scss diff --git a/src/adapters/search_history.js b/src/adapters/search_history.js index 3c4b3a7ae..c5b142ded 100644 --- a/src/adapters/search_history.js +++ b/src/adapters/search_history.js @@ -6,6 +6,14 @@ import Intention from 'src/adapters/intention'; const SEARCH_HISTORY_KEY = 'search_history_v1'; const HISTORY_SIZE = 100; +export function setHistoryEnabled(value) { + set(SEARCH_HISTORY_KEY + '_enabled', value); +} + +export function getHistoryEnabled() { + return get(SEARCH_HISTORY_KEY + '_enabled'); +} + export function saveQuery(item) { // Delete query if it's already in the list deleteQuery(item); diff --git a/src/components/TopBar.jsx b/src/components/TopBar.jsx index 9ea540685..787691c41 100644 --- a/src/components/TopBar.jsx +++ b/src/components/TopBar.jsx @@ -8,7 +8,7 @@ import Menu from 'src/panel/Menu'; import { useConfig, useDevice, useI18n } from 'src/hooks'; import { handleFocus } from 'src/libs/input'; import { selectItem, fetchSuggests } from 'src/libs/suggest'; -import { saveQuery } from 'src/adapters/search_history'; +import { getHistoryEnabled, saveQuery } from 'src/adapters/search_history'; const MAPBOX_RESERVED_KEYS = ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', '-', '+', '=']; @@ -18,7 +18,7 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto const [focused, setFocused] = useState(false); const { isMobile } = useDevice(); const config = useConfig(); - const searchHistoryConfig = config.searchHistory; + const searchHistoryEnabled = getHistoryEnabled(); const { _ } = useI18n(); // give keyboard focus to the field when typing anywhere @@ -54,7 +54,7 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto const onSelectSuggestion = (item, options) => { selectItem(item, options); - if (item && searchHistoryConfig?.enabled) { + if (item && searchHistoryEnabled) { saveQuery(item); } inputRef.current.blur(); @@ -121,7 +121,7 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto onToggle={onSuggestToggle} onSelect={onSelectSuggestion} withFeedback - withHistory={searchHistoryConfig?.enabled} + withHistory={searchHistoryEnabled} > {({ onKeyDown, onFocus, onBlur, highlightedValue }) => ( { }); }); + router.addRoute('History', '/history', () => { + setPanelOptions({ + ActivePanel: HistoryPanel, + options: {}, + panelSize: 'default', + }); + }); + if (directionConf.enabled) { const isPublicTransportActive = (directionConf.publicTransport && directionConf.publicTransport.enabled) || diff --git a/src/panel/direction/DirectionInput.jsx b/src/panel/direction/DirectionInput.jsx index 4b79983df..817e8ecef 100644 --- a/src/panel/direction/DirectionInput.jsx +++ b/src/panel/direction/DirectionInput.jsx @@ -11,8 +11,8 @@ import Telemetry from 'src/libs/telemetry'; import { handleFocus } from 'src/libs/input'; import { IconArrowLeftLine, IconClose } from '@qwant/qwant-ponents'; import classnames from 'classnames'; -import { useConfig, useDevice, useI18n } from 'src/hooks'; -import { saveQuery } from 'src/adapters/search_history'; +import { useDevice, useI18n } from 'src/hooks'; +import { getHistoryEnabled, saveQuery } from 'src/adapters/search_history'; const DirectionInput = ({ isLoading, @@ -26,7 +26,7 @@ const DirectionInput = ({ }) => { const [readOnly, setReadOnly] = useState(false); const { isMobile } = useDevice(); - const searchHistoryConfig = useConfig('searchHistory'); + const searchHistoryEnabled = getHistoryEnabled(); const { _ } = useI18n(); useEffect(() => { @@ -73,7 +73,7 @@ const DirectionInput = ({ } else { const name = selectedPoi.type === 'latlon' ? selectedPoi.address.street : selectedPoi.name; onChangePoint(name, selectedPoi); - if (searchHistoryConfig?.enabled) { + if (searchHistoryEnabled) { saveQuery(selectedPoi); } } @@ -92,7 +92,7 @@ const DirectionInput = ({ outputNode={document.querySelector('.direction-autocomplete_suggestions')} withGeoloc={withGeoloc} onSelect={selectItem} - withHistory={searchHistoryConfig?.enabled} + withHistory={searchHistoryEnabled} hide={otherPoint} > {({ onKeyDown, onFocus, onBlur, highlightedValue }) => ( diff --git a/src/panel/history/HistoryPanel.jsx b/src/panel/history/HistoryPanel.jsx new file mode 100644 index 000000000..b0589633c --- /dev/null +++ b/src/panel/history/HistoryPanel.jsx @@ -0,0 +1,50 @@ +/* globals _ */ +import React, { useState } from 'react'; +import Panel from 'src/components/ui/Panel'; +import { Flex, Switch, Text } from '@qwant/qwant-ponents'; +import { setHistoryEnabled, getHistoryEnabled } from 'src/adapters/search_history'; + +const HistoryPanel = () => { + const [isChecked, setIsChecked] = useState(getHistoryEnabled()); + const close = () => { + window.app.navigateTo('/'); + }; + + const onChange = e => { + setIsChecked(e.target.checked); + setHistoryEnabled(e.target.checked); + }; + + return ( + + {_('My history', 'history panel')} + + } + minimizedTitle={_('Show history', 'history panel')} + onClose={close} + className="history_panel" + > + + + {_( + 'Your history is disabled. If you enable it, it will only be visible to you on this device', + 'history panel' + )} +   + {_('Learn more')} + + + + + ); +}; + +export default HistoryPanel; diff --git a/src/panel/menu/AppMenu.jsx b/src/panel/menu/AppMenu.jsx index 6440c48b1..f9a08c829 100644 --- a/src/panel/menu/AppMenu.jsx +++ b/src/panel/menu/AppMenu.jsx @@ -3,14 +3,15 @@ import PropTypes from 'prop-types'; import MenuItem from './MenuItem'; import Telemetry from 'src/libs/telemetry'; import { Divider } from 'src/components/ui'; -import { IconHeart, IconEdit, IconBug } from 'src/components/ui/icons'; +import { IconHeart, IconHistory, IconEdit, IconBug } from 'src/components/ui/icons'; import { IconLight, IconApps } from '@qwant/qwant-ponents'; -import { PINK_DARK, ACTION_BLUE_BASE } from 'src/libs/colors'; +import { PINK_DARK, ACTION_BLUE_BASE, PURPLE } from 'src/libs/colors'; import { useConfig, useI18n } from 'src/hooks'; const AppMenu = ({ close, openProducts }) => { const { baseUrl } = useConfig('system'); const { getLocalizedUrl, _ } = useI18n(); + const searchHistoryConfig = useConfig('searchHistory'); const navTo = (url, options) => { close(); @@ -30,6 +31,18 @@ const AppMenu = ({ close, openProducts }) => { > {_('My favorites', 'menu')} + {searchHistoryConfig?.enabled && ( + { + e.preventDefault(); + navTo('/history/'); + }} + icon={} + > + {_('My search history', 'menu')} + + )}