Bookmarks panel refactor

src/api/indexedDb.ts

@@ -16,15 +16,14 @@
 
 import { openDB, IDBPDatabase, DBSchema } from 'idb';
 import { observable, when } from 'mobx';
+import { EventBookmark, MessageBookmark } from 'modules/bookmarks/models/Bookmarks';
 import { MessageDisplayRule, MessageSortOrderItem } from '../models/EventMessage';
 import { OrderRule } from '../stores/MessageDisplayRulesStore';
 import { SearchHistory } from '../stores/SearchStore';
 import { FiltersHistoryType } from '../stores/FiltersHistoryStore';
 import { FilterState } from '../components/search-panel/SearchPanelFilters';
 import { Session } from '../stores/messages/SessionsStore';
-import { EventBookmark, MessageBookmark } from '../models/Bookmarks';
 
-// eslint-disable-next-line no-shadow
 export enum IndexedDbStores {
 	EVENTS = 'events',
 	MESSAGES = 'messages',

src/components/StoresProvider.tsx

@@ -18,10 +18,10 @@ import React from 'react';
 import RootStoreContext, { createRootStore } from '../contexts/rootStoreContext';
 import api from '../api';
 
+const rootStore = createRootStore(api);
+
 function RootStoreProvider({ children }: React.PropsWithChildren<{}>) {
-	return (
-		<RootStoreContext.Provider value={createRootStore(api)}>{children}</RootStoreContext.Provider>
-	);
+	return <RootStoreContext.Provider value={rootStore}>{children}</RootStoreContext.Provider>;
 }
 
 export default RootStoreProvider;

src/components/filter/EventsFilterPanel.tsx

@@ -51,7 +51,7 @@ function EventsFilterPanel() {
 	const eventsStore = useWorkspaceEventStore();
 	const eventDataStore = useEventsDataStore();
 	const filterStore = useEventsFilterStore();
-	const { eventsHistory } = useFiltersHistoryStore();
+	const { eventsHistory, onEventFilterSubmit } = useFiltersHistoryStore();
 
 	const [filter, setFilter] = useSetState<EventFilterState | null>(filterStore.filter);
 
@@ -67,6 +67,7 @@ function EventsFilterPanel() {
 	const onSubmit = React.useCallback(() => {
 		if (filter) {
 			eventsStore.applyFilter(filter);
+			onEventFilterSubmit(filter);
 		}
 	}, [filter]);
 

src/components/filter/MessagesFilterPanel.tsx

@@ -55,7 +55,7 @@ const MessagesFilterPanel = () => {
 	const messagesStore = useMessagesWorkspaceStore();
 	const messagesDataStore = useMessagesDataStore();
 	const searchStore = useSearchStore();
-	const { messagesHistory } = useFiltersHistoryStore();
+	const { messagesHistory, onMessageFilterSubmit } = useFiltersHistoryStore();
 	const sessionsStore = useSessionsStore();
 	const { filterStore } = messagesStore;
 
@@ -104,6 +104,10 @@ const MessagesFilterPanel = () => {
 			filter,
 			isSoftFilterApplied,
 		);
+
+		if (filter) {
+			onMessageFilterSubmit(filter);
+		}
 	}, [filter, filterStore.filter, streams, isSoftFilterApplied]);
 
 	const stopLoading = React.useCallback(() => {

src/components/filter/row/EventResolverRow.tsx

@@ -14,11 +14,9 @@
  * limitations under the License.
  ***************************************************************************** */
 
-import moment from 'moment';
-import * as React from 'react';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import api from '../../../api';
-import { getTimestampAsNumber } from '../../../helpers/date';
+import { formatTimestamp } from '../../../helpers/date';
 import { getEventStatus, isEventId } from '../../../helpers/event';
 import { createBemElement, createStyleSelector } from '../../../helpers/styleCreators';
 import { useDebouncedCallback } from '../../../hooks';
@@ -78,11 +76,11 @@ export default function EventResolverRow({ config }: { config: FilterRowEventRes
 		};
 	}, [config.value]);
 
-	const showInput = React.useCallback(() => {
+	const showInput = useCallback(() => {
 		setIsInput(true);
 	}, [setIsInput]);
 
-	const showEventCard = React.useCallback(() => {
+	const showEventCard = useCallback(() => {
 		if (event) {
 			setIsInput(false);
 		}
@@ -109,7 +107,7 @@ export default function EventResolverRow({ config }: { config: FilterRowEventRes
 		400,
 	);
 
-	const onAutocompleteValueSelect = React.useCallback((nextValue: string) => {
+	const onAutocompleteValueSelect = useCallback((nextValue: string) => {
 		config.setValue(nextValue);
 		config.onAutocompleteSelect?.();
 	}, []);
@@ -129,7 +127,7 @@ export default function EventResolverRow({ config }: { config: FilterRowEventRes
 					</div>
 					{event && (
 						<div className='filter-row__event-card-timestamp'>
-							{moment.utc(getTimestampAsNumber(event)).format('DD.MM.YYYY HH:mm:ss.SSS')}
+							{formatTimestamp(event.startTimestamp)}
 						</div>
 					)}
 				</div>

src/components/filter/row/FilterRow.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  ***************************************************************************** */
 
-import * as React from 'react';
 import { ActionFilterRow, FitlerRowItem } from '../../../models/filter/FilterInputs';
 import StringFilterRow from './StringRow';
 import MultipleStringFilterRow from './MultipleStringFIlterRow';

src/components/search-panel/SearchPanelResults.tsx

@@ -14,9 +14,8 @@
  * limitations under the License.
  ***************************************************************************** */
 
-import React from 'react';
-import moment from 'moment';
 import { Virtuoso } from 'react-virtuoso';
+import { formatTimestamp } from 'helpers/date';
 import { getItemId, isEvent } from '../../helpers/event';
 import { FilterEntry, SearchResult } from '../../stores/SearchStore';
 import { ActionType } from '../../models/EventAction';
@@ -103,11 +102,7 @@ const SearchPanelResults = (props: SearchPanelResultsProps) => {
 	return (
 		<div className='search-results'>
 			<div className='history-point'>
-				<p className='history-point__timestamp'>
-					{moment(+timestamp)
-						.utc()
-						.format('DD.MM.YYYY HH:mm:ss.SSS')}
-				</p>
+				<p className='history-point__timestamp'>{formatTimestamp(timestamp)}</p>
 				<button
 					className='bookmark-item__remove-btn'
 					disabled={disabledRemove}

src/components/search-panel/search-form/SearchTypeSwitcher.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  ***************************************************************************** */
 
-import React from 'react';
 import { createBemElement } from '../../../helpers/styleCreators';
 import { SearchPanelType } from '../SearchPanel';