From 2d223fe9e8ec937a139009d25e97c023d8b8aeb4 Mon Sep 17 00:00:00 2001 From: Yunus M Date: Wed, 14 May 2025 16:43:28 +0530 Subject: [PATCH] feat: move state to context --- .../QueryAddOns/HavingFilter/HavingFilter.tsx | 28 +++------ .../QueryAddOns/QueryAddOns.tsx | 3 - .../QueryAggregation/QueryAggregation.tsx | 10 +-- .../QueryAggregationSelect.tsx | 11 ++-- .../QueryBuilderV2/QueryBuilderV2.tsx | 25 ++++---- .../QueryBuilderV2/QueryBuilderV2Context.tsx | 62 +++++++++++++++++++ 6 files changed, 89 insertions(+), 50 deletions(-) create mode 100644 frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx diff --git a/frontend/src/components/QueryBuilderV2/QueryAddOns/HavingFilter/HavingFilter.tsx b/frontend/src/components/QueryBuilderV2/QueryAddOns/HavingFilter/HavingFilter.tsx index 99662e3df570..630966870242 100644 --- a/frontend/src/components/QueryBuilderV2/QueryAddOns/HavingFilter/HavingFilter.tsx +++ b/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({ - selectedAggreateOptions, - onClose, -}: { - selectedAggreateOptions: { func: string; arg: string }[]; - onClose: () => void; -}): JSX.Element { +function HavingFilter({ onClose }: { onClose: () => void }): JSX.Element { + const { aggregationOptions } = useQueryBuilderV2Context(); + const [selectedHavingOptions, setSelectedHavingOptions] = useState( [], ); + console.log('selectedHavingOptions', selectedHavingOptions); + const [options, setOptions] = useState<{ label: string; value: string }[]>([]); useEffect(() => { const options = []; - for (let i = 0; i < selectedAggreateOptions.length; i++) { - const opt = selectedAggreateOptions[i]; + for (let i = 0; i < aggregationOptions.length; 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]); - - console.log( - 'selectedHavingOptions', - selectedHavingOptions, - selectedAggreateOptions, - setSelectedHavingOptions, - ); + }, [aggregationOptions]); console.log('options', options); diff --git a/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.tsx b/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.tsx index 56e492fc4caf..983f5dcc55be 100644 --- a/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.tsx +++ b/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([]); @@ -123,7 +121,6 @@ function QueryAddOns({ {selectedViews.find((view) => view.key === 'having') && (
{ setSelectedViews( selectedViews.filter((view) => view.key !== 'having'), diff --git a/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.tsx b/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.tsx index 3a91caf6c723..3e4ced461143 100644 --- a/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.tsx @@ -4,16 +4,10 @@ import InputWithLabel from 'components/InputWithLabel/InputWithLabel'; import QueryAggregationSelect from './QueryAggregationSelect'; -function QueryAggregationOptions({ - onAggregationOptionsSelect, -}: { - onAggregationOptionsSelect: (value: { func: string; arg: string }[]) => void; -}): JSX.Element { +function QueryAggregationOptions(): JSX.Element { return (
- +
every
diff --git a/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregationSelect.tsx b/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregationSelect.tsx index 1776deb74728..62a294b6f7d8 100644 --- a/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregationSelect.tsx +++ b/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({ - onAggregationOptionsSelect, -}: { - onAggregationOptionsSelect: (value: { func: string; arg: string }[]) => void; -}): JSX.Element { +function QueryAggregationSelect(): 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]); diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx index bdb5041a9159..c9068ee12194 100644 --- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx +++ b/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 (
- { - setSelectedAggreateOptions(pairs); - }} - /> +
); } +function QueryBuilderV2(): JSX.Element { + return ( + + + + ); +} + export default QueryBuilderV2; diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx b/frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx new file mode 100644 index 000000000000..6d6e36766774 --- /dev/null +++ b/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(null); // Replace 'any' if you have a type + + return ( + ({ + searchText, + setSearchText, + aggregationOptions, + setAggregationOptions, + aggregationInterval, + setAggregationInterval, + queryAddValues, + setQueryAddValues, + }), + [searchText, aggregationOptions, aggregationInterval, queryAddValues], + )} + > + {children} + + ); +} + +export const useQueryBuilderV2Context = (): QueryBuilderV2ContextType => { + const context = useContext(QueryBuilderV2Context); + if (!context) { + throw new Error( + 'useQueryBuilderV2Context must be used within a QueryBuilderV2Provider', + ); + } + return context; +};