feat: move state to context

frontend/src/components/QueryBuilderV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -1,4 +1,5 @@
 import { Button, Select } from 'antd';
+import { useQueryBuilderV2Context } from 'components/QueryBuilderV2/QueryBuilderV2Context';
 import { useEffect, useState } from 'react';
 
 const havingOperators = [
@@ -36,24 +37,22 @@ const havingOperators = [
 	},
 ];
 
-function HavingFilter({
+function HavingFilter({ onClose }: { onClose: () => void }): JSX.Element {
-	selectedAggreateOptions,
+	const { aggregationOptions } = useQueryBuilderV2Context();
-	onClose,
+
-}: {
-	selectedAggreateOptions: { func: string; arg: string }[];
-	onClose: () => void;
-}): JSX.Element {
 	const [selectedHavingOptions, setSelectedHavingOptions] = useState<string[]>(
 		[],
 	);
 
+	console.log('selectedHavingOptions', selectedHavingOptions);
+
 	const [options, setOptions] = useState<{ label: string; value: string }[]>([]);
 
 	useEffect(() => {
 		const options = [];
 
-		for (let i = 0; i < selectedAggreateOptions.length; i++) {
+		for (let i = 0; i < aggregationOptions.length; i++) {
-			const opt = selectedAggreateOptions[i];
+			const opt = aggregationOptions[i];
 
 			for (let j = 0; j < havingOperators.length; j++) {
 				const operator = havingOperators[j];
@@ -65,17 +64,8 @@ function HavingFilter({
 			}
 		}
 
-		console.log('options', options);
-
 		setOptions(options);
-	}, [selectedAggreateOptions]);
+	}, [aggregationOptions]);
-
-	console.log(
-		'selectedHavingOptions',
-		selectedHavingOptions,
-		selectedAggreateOptions,
-		setSelectedHavingOptions,
-	);
 
 	console.log('options', options);
 

frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.tsx

@@ -48,12 +48,10 @@ function QueryAddOns({
 	query,
 	version,
 	isListViewPanel,
-	selectedAggreateOptions,
 }: {
 	query: IBuilderQuery;
 	version: string;
 	isListViewPanel: boolean;
-	selectedAggreateOptions: { func: string; arg: string }[];
 }): JSX.Element {
 	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
 
@@ -123,7 +121,6 @@ function QueryAddOns({
 					{selectedViews.find((view) => view.key === 'having') && (
 						<div className="add-on-content">
 							<HavingFilter
-								selectedAggreateOptions={selectedAggreateOptions}
 								onClose={(): void => {
 									setSelectedViews(
 										selectedViews.filter((view) => view.key !== 'having'),

frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.tsx

@@ -4,16 +4,10 @@ import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 
 import QueryAggregationSelect from './QueryAggregationSelect';
 
-function QueryAggregationOptions({
+function QueryAggregationOptions(): JSX.Element {
-	onAggregationOptionsSelect,
-}: {
-	onAggregationOptionsSelect: (value: { func: string; arg: string }[]) => void;
-}): JSX.Element {
 	return (
 		<div className="query-aggregation-container">
-			<QueryAggregationSelect
+			<QueryAggregationSelect />
-				onAggregationOptionsSelect={onAggregationOptionsSelect}
-			/>
 
 			<div className="query-aggregation-interval">
 				<div className="query-aggregation-interval-label">every</div>

frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -33,6 +33,8 @@ import { useQuery } from 'react-query';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TracesAggregatorOperator } from 'types/common/queryBuilder';
 
+import { useQueryBuilderV2Context } from '../QueryBuilderV2Context';
+
 const chipDecoration = Decoration.mark({
 	class: 'chip-decorator',
 });
@@ -110,12 +112,9 @@ function getFunctionContextAtCursor(
 }
 
 // eslint-disable-next-line react/no-this-in-sfc
-function QueryAggregationSelect({
+function QueryAggregationSelect(): JSX.Element {
-	onAggregationOptionsSelect,
-}: {
-	onAggregationOptionsSelect: (value: { func: string; arg: string }[]) => void;
-}): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
+	const { setAggregationOptions } = useQueryBuilderV2Context();
 	const queryData = currentQuery.builder.queryData[0];
 	const [input, setInput] = useState('');
 	const [cursorPos, setCursorPos] = useState(0);
@@ -146,7 +145,7 @@ function QueryAggregationSelect({
 			});
 		}
 		setFunctionArgPairs(pairs);
-		onAggregationOptionsSelect(pairs);
+		setAggregationOptions(pairs);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [input]);
 

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -1,37 +1,34 @@
 import './QueryBuilderV2.styles.scss';
 
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useState } from 'react';
 
 import QueryAddOns from './QueryAddOns/QueryAddOns';
 import QueryAggregation from './QueryAggregation/QueryAggregation';
+import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
 import QuerySearch from './QuerySearch/QuerySearch';
 
-function QueryBuilderV2(): JSX.Element {
+function QueryBuilderV2Main(): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 
-	const [selectedAggreateOptions, setSelectedAggreateOptions] = useState<
-		{ func: string; arg: string }[]
-	>([]);
-
-	console.log('selectedAggreateOptions', selectedAggreateOptions);
-
 	return (
 		<div className="query-builder-v2">
 			<QuerySearch />
-			<QueryAggregation
+			<QueryAggregation />
-				onAggregationOptionsSelect={(pairs): void => {
-					setSelectedAggreateOptions(pairs);
-				}}
-			/>
 			<QueryAddOns
 				query={currentQuery.builder.queryData[0]}
 				version="v3"
 				isListViewPanel={false}
-				selectedAggreateOptions={selectedAggreateOptions}
 			/>
 		</div>
 	);
 }
 
+function QueryBuilderV2(): JSX.Element {
+	return (
+		<QueryBuilderV2Provider>
+			<QueryBuilderV2Main />
+		</QueryBuilderV2Provider>
+	);
+}
+
 export default QueryBuilderV2;

frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx

@@ -0,0 +1,62 @@
+import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
+
+// Types for the context state
+export type AggregationOption = { func: string; arg: string };
+
+interface QueryBuilderV2ContextType {
+	searchText: string;
+	setSearchText: (text: string) => void;
+	aggregationOptions: AggregationOption[];
+	setAggregationOptions: (options: AggregationOption[]) => void;
+	aggregationInterval: string;
+	setAggregationInterval: (interval: string) => void;
+	queryAddValues: any; // Replace 'any' with a more specific type if available
+	setQueryAddValues: (values: any) => void;
+}
+
+const QueryBuilderV2Context = createContext<
+	QueryBuilderV2ContextType | undefined
+>(undefined);
+
+export function QueryBuilderV2Provider({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	const [searchText, setSearchText] = useState('');
+	const [aggregationOptions, setAggregationOptions] = useState<
+		AggregationOption[]
+	>([]);
+	const [aggregationInterval, setAggregationInterval] = useState('');
+	const [queryAddValues, setQueryAddValues] = useState<any>(null); // Replace 'any' if you have a type
+
+	return (
+		<QueryBuilderV2Context.Provider
+			value={useMemo(
+				() => ({
+					searchText,
+					setSearchText,
+					aggregationOptions,
+					setAggregationOptions,
+					aggregationInterval,
+					setAggregationInterval,
+					queryAddValues,
+					setQueryAddValues,
+				}),
+				[searchText, aggregationOptions, aggregationInterval, queryAddValues],
+			)}
+		>
+			{children}
+		</QueryBuilderV2Context.Provider>
+	);
+}
+
+export const useQueryBuilderV2Context = (): QueryBuilderV2ContextType => {
+	const context = useContext(QueryBuilderV2Context);
+	if (!context) {
+		throw new Error(
+			'useQueryBuilderV2Context must be used within a QueryBuilderV2Provider',
+		);
+	}
+	return context;
+};