@@ -8,7 +8,12 @@ import {
88} from '../../../utils/hooks' ;
99import { SETTING_KEYS } from '../settings/constants' ;
1010
11- import { changeUserInput , selectQueriesHistoryFilter } from './query' ;
11+ import {
12+ changeUserInput ,
13+ selectHistoryCurrentQueryId ,
14+ selectQueriesHistoryFilter ,
15+ setHistoryCurrentQueryId ,
16+ } from './query' ;
1217import type { QueryInHistory , QueryStats } from './types' ;
1318import { getQueryInHistory } from './utils' ;
1419
@@ -17,116 +22,118 @@ const MAXIMUM_QUERIES_IN_HISTORY = 20;
1722export function useQueriesHistory ( ) {
1823 const dispatch = useTypedDispatch ( ) ;
1924 const queriesFilter = useTypedSelector ( selectQueriesHistoryFilter ) ;
25+ const historyCurrentQueryId = useTypedSelector ( selectHistoryCurrentQueryId ) ;
2026
2127 const [ savedHistoryQueries , saveHistoryQueries ] = useSetting < QueryInHistory [ ] > (
2228 SETTING_KEYS . QUERIES_HISTORY ,
2329 ) ;
2430
25- const [ historyQueries , setQueries ] = React . useState < QueryInHistory [ ] > ( [ ] ) ;
26- const [ historyCurrentIndex , setCurrentIndex ] = React . useState ( - 1 ) ;
27-
28- React . useEffect ( ( ) => {
29- if ( ! savedHistoryQueries || savedHistoryQueries . length === 0 ) {
30- setQueries ( [ ] ) ;
31- setCurrentIndex ( - 1 ) ;
32- } else {
33- const sliceLimit = savedHistoryQueries . length - MAXIMUM_QUERIES_IN_HISTORY ;
34-
35- const preparedQueries = savedHistoryQueries
36- . slice ( sliceLimit < 0 ? 0 : sliceLimit )
37- . map ( getQueryInHistory ) ;
31+ const preparedQueries = React . useMemo ( ( ) => {
32+ const queries = savedHistoryQueries ?? [ ] ;
3833
39- setQueries ( preparedQueries ) ;
40- setCurrentIndex ( preparedQueries . length - 1 ) ;
41- }
34+ return queries . map ( getQueryInHistory ) ;
4235 } , [ savedHistoryQueries ] ) ;
4336
4437 const filteredHistoryQueries = React . useMemo ( ( ) => {
4538 const normalizedFilter = queriesFilter ?. toLowerCase ( ) ;
4639 return normalizedFilter
47- ? historyQueries . filter ( ( item ) =>
40+ ? preparedQueries . filter ( ( item ) =>
4841 item . queryText . toLowerCase ( ) . includes ( normalizedFilter ) ,
4942 )
50- : historyQueries ;
51- } , [ historyQueries , queriesFilter ] ) ;
43+ : preparedQueries ;
44+ } , [ preparedQueries , queriesFilter ] ) ;
5245
5346 // These functions are used inside Monaco editorDidMount
5447 // They should be stable to work properly
5548 const goToPreviousQuery = useEventHandler ( ( ) => {
56- setCurrentIndex ( ( index ) => {
57- if ( historyQueries . length > 0 && index > 0 ) {
58- const newIndex = index - 1 ;
59- const query = historyQueries [ newIndex ] ;
60-
61- if ( query ) {
62- dispatch ( changeUserInput ( { input : query . queryText } ) ) ;
63- return newIndex ;
64- }
65- }
66- return index ;
67- } ) ;
49+ if ( preparedQueries . length === 0 ) {
50+ return ;
51+ }
52+
53+ let query : QueryInHistory | undefined ;
54+
55+ const currentIndex = preparedQueries . findIndex ( ( q ) => q . queryId === historyCurrentQueryId ) ;
56+
57+ if ( currentIndex === - 1 ) {
58+ // Query not found, start from last
59+ query = preparedQueries . at ( - 1 ) ;
60+ } else if ( currentIndex === 0 ) {
61+ // At first query, wrap to last
62+ query = preparedQueries . at ( - 1 ) ;
63+ } else {
64+ // Go to previous query
65+ query = preparedQueries [ currentIndex - 1 ] ;
66+ }
67+
68+ if ( query ) {
69+ dispatch ( changeUserInput ( { input : query . queryText } ) ) ;
70+ dispatch ( setHistoryCurrentQueryId ( query . queryId ) ) ;
71+ }
6872 } ) ;
6973
7074 const goToNextQuery = useEventHandler ( ( ) => {
71- setCurrentIndex ( ( index ) => {
72- if ( historyQueries . length > 0 && index < historyQueries . length - 1 ) {
73- const newIndex = index + 1 ;
74- const query = historyQueries [ newIndex ] ;
75- if ( query ) {
76- dispatch ( changeUserInput ( { input : query . queryText } ) ) ;
77- return newIndex ;
78- }
79- }
80-
81- return index ;
82- } ) ;
75+ if ( preparedQueries . length === 0 ) {
76+ return ;
77+ }
78+
79+ let query : QueryInHistory | undefined ;
80+
81+ const currentIndex = preparedQueries . findIndex ( ( q ) => q . queryId === historyCurrentQueryId ) ;
82+
83+ if ( currentIndex === - 1 ) {
84+ // Query not found, start from last
85+ query = preparedQueries . at ( - 1 ) ;
86+ } else if ( currentIndex === preparedQueries . length - 1 ) {
87+ // At last query, wrap to first
88+ query = preparedQueries [ 0 ] ;
89+ } else {
90+ // Go to next query
91+ query = preparedQueries [ currentIndex + 1 ] ;
92+ }
93+
94+ if ( query ) {
95+ dispatch ( changeUserInput ( { input : query . queryText } ) ) ;
96+ dispatch ( setHistoryCurrentQueryId ( query . queryId ) ) ;
97+ }
8398 } ) ;
8499
85100 const saveQueryToHistory = useEventHandler ( ( queryText : string , queryId : string ) => {
86- setQueries ( ( currentQueries ) => {
87- const newQueries = [ ...currentQueries , { queryText, queryId} ] . slice (
88- currentQueries . length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0 ,
89- ) ;
90- saveHistoryQueries ( newQueries ) ;
101+ if ( ! queryText ) {
102+ return ;
103+ }
104+ // +1 to include new query
105+ const sliceLimit = preparedQueries . length + 1 - MAXIMUM_QUERIES_IN_HISTORY ;
106+ const slicedQueries = preparedQueries . slice ( sliceLimit < 0 ? 0 : sliceLimit ) ;
107+ const newQueries = [ ...slicedQueries , { queryText, queryId} ] ;
91108
92- // Update currentIndex to point to the newly added query
93- const newCurrentIndex = newQueries . length - 1 ;
94- setCurrentIndex ( newCurrentIndex ) ;
109+ saveHistoryQueries ( newQueries ) ;
95110
96- return newQueries ;
97- } ) ;
111+ // Update currentQueryId to point to the newly added query
112+ dispatch ( setHistoryCurrentQueryId ( queryId ) ) ;
98113 } ) ;
99114
100115 const updateQueryInHistory = useEventHandler ( ( queryId : string , stats : QueryStats ) => {
101- if ( ! stats ) {
116+ if ( ! stats || ! preparedQueries . length ) {
102117 return ;
103118 }
104119
105- setQueries ( ( currentQueries ) => {
106- if ( ! currentQueries . length ) {
107- return currentQueries ;
108- }
109-
110- const index = currentQueries . findIndex ( ( item ) => item . queryId === queryId ) ;
111-
112- if ( index !== - 1 ) {
113- const newQueries = [ ...currentQueries ] ;
114- const { durationUs, endTime} = stats ;
115- newQueries . splice ( index , 1 , {
116- ...currentQueries [ index ] ,
117- durationUs,
118- endTime,
119- } ) ;
120- saveHistoryQueries ( newQueries ) ;
121- return newQueries ;
122- }
123- return currentQueries ;
124- } ) ;
120+ const index = preparedQueries . findIndex ( ( item ) => item . queryId === queryId ) ;
121+
122+ if ( index !== - 1 ) {
123+ const newQueries = [ ...preparedQueries ] ;
124+ const { durationUs, endTime} = stats ;
125+ newQueries [ index ] = {
126+ ...preparedQueries [ index ] ,
127+ durationUs,
128+ endTime,
129+ } ;
130+ saveHistoryQueries ( newQueries ) ;
131+ }
125132 } ) ;
126133
127134 return {
128- historyQueries,
129- historyCurrentIndex ,
135+ historyQueries : preparedQueries ,
136+ historyCurrentQueryId ,
130137 filteredHistoryQueries,
131138 goToPreviousQuery,
132139 goToNextQuery,
0 commit comments