cozy-search
Version:
UI components about search bar and IA assistant
235 lines (191 loc) • 10.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _twakeIcons = require("@linagora/twake-icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
var _react = _interopRequireWildcard(require("react"));
var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
var _Dialog = _interopRequireDefault(require("cozy-ui/transpiled/react/Dialog"));
var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
var _SearchBar = _interopRequireDefault(require("cozy-ui/transpiled/react/SearchBar"));
var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"));
var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
var _twakeI18n = require("twake-i18n");
var _NotFoundConversation = _interopRequireDefault(require("./NotFoundConversation"));
var _helpers = require("./helpers");
var _useConversation2 = _interopRequireDefault(require("../../hooks/useConversation"));
var _useFetchConversations = _interopRequireDefault(require("../../hooks/useFetchConversations"));
var _AssistantProvider = require("../AssistantProvider");
var _ConversationList = _interopRequireDefault(require("../Conversations/ConversationList"));
var _ConversationListItemWider = _interopRequireDefault(require("../Conversations/ConversationListItemWider"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var styles = {
"searchBarDesktop--result": "styles__searchBarDesktop--result___2bQQy",
"suggestionsPlaceholder": "styles__suggestionsPlaceholder___y-vsv",
"search-bar-icon": "styles__search-bar-icon___1affF",
"search-bar--mobile": "styles__search-bar--mobile___1CSb2"
};
var SearchConversationContainer = function SearchConversationContainer(_ref) {
var children = _ref.children,
isMobile = _ref.isMobile;
return !isMobile ? /*#__PURE__*/_react.default.createElement("div", {
className: "u-w-100 u-h-100 u-flex u-flex-items-center u-flex-justify-center"
}, children) : /*#__PURE__*/_react.default.createElement(_Dialog.default, {
fullScreen: true,
open: true,
className: "u-w-100 u-h-100"
}, children);
};
var SearchConversation = function SearchConversation() {
var _cx;
var _useI18n = (0, _twakeI18n.useI18n)(),
t = _useI18n.t,
lang = _useI18n.lang;
var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
isMobile = _useBreakpoints.isMobile;
var _useState = (0, _react.useState)(undefined),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
query = _useState2[0],
setQuery = _useState2[1];
var _useState3 = (0, _react.useState)(''),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
searchStr = _useState4[0],
setSearchStr = _useState4[1];
var _useConversation = (0, _useConversation2.default)(),
createNewConversation = _useConversation.createNewConversation,
goToConversation = _useConversation.goToConversation;
var _useAssistant = (0, _AssistantProvider.useAssistant)(),
setIsOpenSearchConversation = _useAssistant.setIsOpenSearchConversation;
var _useFetchConversation = (0, _useFetchConversations.default)({
query: query
}),
conversations = _useFetchConversation.conversations,
isLoading = _useFetchConversation.isLoading;
var groupedConversations = (0, _react.useMemo)(function () {
return (0, _helpers.groupConversationsByDate)(conversations || []);
}, [conversations]);
var debouncedFetchConversations = (0, _react.useMemo)(function () {
return (0, _debounce.default)( /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(value) {
var fetchQuery;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
// FIXME: This fallback query is highly inefficient.
// It bypasses index usage, forcing CouchDB to scan the entire database,
// deserialize every document, and then evaluate the regex via `$elemMatch`.
// Furthermore, it restricts us from doing fuzzy-search.
// We need a dedicated task to migrate this to an efficient client-side search approach.
fetchQuery = value ? {
messages: {
$elemMatch: {
content: {
$regex: (0, _escapeRegExp.default)(value)
}
}
}
} : undefined;
setQuery(fetchQuery);
case 2:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function (_x) {
return _ref2.apply(this, arguments);
};
}(), 300);
}, [setQuery]);
(0, _react.useEffect)(function () {
return function () {
debouncedFetchConversations.cancel();
};
}, [debouncedFetchConversations]);
var handleSearchChange = function handleSearchChange(e) {
var newQuery = e.target.value;
setSearchStr(newQuery);
debouncedFetchConversations(newQuery);
};
return /*#__PURE__*/_react.default.createElement(SearchConversationContainer, {
isMobile: isMobile
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)('u-h-100 u-flex u-flex-column u-flex-items-start u-ov-hidden', {
'u-w-7 u-mh-half': !isMobile,
'u-w-100': isMobile
})
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)('u-w-100 u-bxz', {
'u-mv-2': !isMobile,
'u-p-1': isMobile
})
}, /*#__PURE__*/_react.default.createElement("div", {
className: "u-flex u-flex-items-center u-w-100"
}, /*#__PURE__*/_react.default.createElement(_SearchBar.default, {
elevation: 1,
disabledHover: !!isMobile,
className: (0, _classnames.default)('u-flex-auto u-miw-0', (_cx = {}, (0, _defineProperty2.default)(_cx, styles['search-bar--mobile'], isMobile), (0, _defineProperty2.default)(_cx, 'u-mb-2', !isMobile), _cx)),
placeholder: t('assistant.search_conversation.placeholder'),
size: "medium",
value: searchStr,
onChange: handleSearchChange
}), isMobile && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
size: "small",
className: "u-ml-half u-flex-shrink-0",
onClick: function onClick() {
return setIsOpenSearchConversation(false);
},
"aria-label": t('assistant.search_conversation.close')
}, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
icon: _twakeIcons.Cross
}))), /*#__PURE__*/_react.default.createElement(_Buttons.default, {
label: t('assistant.search_conversation.new_chat'),
variant: "secondary",
startIcon: /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
icon: _twakeIcons.Plus
}),
onClick: createNewConversation,
size: "large",
className: (0, _classnames.default)({
'u-ml-half-t u-bdrs-6': !isMobile,
'u-mt-1 u-bdrs-7 u-bdw-1': isMobile
})
})), /*#__PURE__*/_react.default.createElement("div", {
className: "u-ov-auto u-flex-auto u-w-100 u-pos-relative"
}, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
className: "u-flex u-flex-items-center u-flex-justify-center u-p-2"
}, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
size: "xxlarge"
})) : groupedConversations.map(function (group, index) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
key: group.dayTimestamp
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "subtitle1",
color: "textSecondary",
className: (0, _classnames.default)('u-mb-half u-ml-1 u-ml-half-t', {
'u-mt-1': index > 0
})
}, group.key === 'today' ? t('assistant.search_conversation.recent') : group.key === 'yesterday' ? t('assistant.time.yesterday') : (0, _helpers.formatDayLabel)(group.dayTimestamp, lang)), /*#__PURE__*/_react.default.createElement(_ConversationList.default, {
divider: true,
disableAction: true,
conversations: group.items,
onOpenConversation: goToConversation,
ItemComponent: _ConversationListItemWider.default
}));
}), !isLoading && (conversations === null || conversations === void 0 ? void 0 : conversations.length) === 0 && /*#__PURE__*/_react.default.createElement(_NotFoundConversation.default, null))));
};
var _default = SearchConversation;
exports.default = _default;