Some cleanup after manual testing

elastic · Mar 18, 2020 · 587b221 · 587b221
1 parent b1c09a8
commit 587b221
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 19 deletions.
diff --git a/x-pack/plugins/painless_lab/public/application/components/main.tsx b/x-pack/plugins/painless_lab/public/application/components/main.tsx
@@ -23,7 +23,7 @@ interface Props {
 }
 
 export const Main: FunctionComponent<Props> = ({ http }) => {
-  const { state, setState } = useAppContext();
+  const { state, updateState } = useAppContext();
 
   const [isRequestFlyoutOpen, setRequestFlyoutOpen] = useState(false);
   const { inProgress, response, submit } = useSubmitCode(http);
@@ -51,7 +51,7 @@ export const Main: FunctionComponent<Props> = ({ http }) => {
 
           <Editor
             code={state.code}
-            onChange={nextCode => setState(s => ({ ...s, code: nextCode }))}
+            onChange={nextCode => updateState(() => ({ code: nextCode }))}
           />
         </EuiFlexItem>
 
@@ -64,7 +64,7 @@ export const Main: FunctionComponent<Props> = ({ http }) => {
         isLoading={inProgress}
         toggleRequestFlyout={toggleRequestFlyout}
         isRequestFlyoutOpen={isRequestFlyoutOpen}
-        reset={() => setState(s => ({ ...s, code: exampleScript }))}
+        reset={() => updateState(() => ({ code: exampleScript }))}
       />
 
       {isRequestFlyoutOpen && (

diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx
@@ -24,7 +24,7 @@ import { painlessContextOptions } from '../../common/constants';
 import { useAppContext } from '../../context';
 
 export const ContextTab: FunctionComponent = () => {
-  const { state, setState } = useAppContext();
+  const { state, updateState } = useAppContext();
   const { context, document, index, query } = state;
 
   return (
@@ -63,7 +63,7 @@ export const ContextTab: FunctionComponent = () => {
         <EuiSuperSelect
           options={painlessContextOptions}
           valueOfSelected={context}
-          onChange={nextContext => setState(s => ({ ...s, context: nextContext }))}
+          onChange={nextContext => updateState(() => ({ context: nextContext }))}
           itemLayoutAlign="top"
           hasDividers
           fullWidth
@@ -90,7 +90,10 @@ export const ContextTab: FunctionComponent = () => {
           <EuiFieldText
             fullWidth
             value={index || ''}
-            onChange={e => setState(s => ({ ...s, index: e.target.value }))}
+            onChange={e => {
+              const nextIndex = e.target.value;
+              updateState(() => ({ index: nextIndex }));
+            }}
           />
         </EuiFormRow>
       )}
@@ -129,7 +132,7 @@ export const ContextTab: FunctionComponent = () => {
               languageId="json"
               height={150}
               value={query}
-              onChange={nextQuery => setState(s => ({ ...s, query: nextQuery }))}
+              onChange={nextQuery => updateState(() => ({ query: nextQuery }))}
               options={{
                 fontSize: 12,
                 minimap: {
@@ -168,7 +171,7 @@ export const ContextTab: FunctionComponent = () => {
               languageId="json"
               height={400}
               value={document}
-              onChange={nextDocument => setState(s => ({ ...s, document: nextDocument }))}
+              onChange={nextDocument => updateState(() => ({ document: nextDocument }))}
               options={{
                 fontSize: 12,
                 minimap: {

diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx
@@ -21,7 +21,7 @@ import { CodeEditor } from '../../../../../../../src/plugins/kibana_react/public
 import { useAppContext } from '../../context';
 
 export const ParametersTab: FunctionComponent = () => {
-  const { state, setState } = useAppContext();
+  const { state, updateState } = useAppContext();
   return (
     <>
       <EuiSpacer size="m" />
@@ -63,7 +63,7 @@ export const ParametersTab: FunctionComponent = () => {
             languageId="json"
             height={600}
             value={state.parameters}
-            onChange={nextParams => setState(s => ({ ...s, params: nextParams }))}
+            onChange={nextParams => updateState(() => ({ parameters: nextParams }))}
             options={{
               fontSize: 12,
               minimap: {

diff --git a/x-pack/plugins/painless_lab/public/application/context.tsx b/x-pack/plugins/painless_lab/public/application/context.tsx
@@ -11,7 +11,7 @@ import { PAINLESS_LAB_KEY } from './constants';
 
 interface ContextValue {
   state: Store;
-  setState: (nextState: (s: Store) => Store) => void;
+  updateState: (nextState: (s: Store) => Partial<Store>) => void;
 }
 
 const AppContext = createContext<ContextValue>(undefined as any);
@@ -22,15 +22,17 @@ export const AppContextProvider = ({ children }: { children: ReactNode }) => {
     ...JSON.parse(localStorage.getItem(PAINLESS_LAB_KEY) || '{}'),
   }));
 
-  const wrappedSetState = (nextState: (s: Store) => Store): void => {
-    localStorage.setItem(PAINLESS_LAB_KEY, JSON.stringify(state));
-    setState(() => nextState(state));
+  const updateState = (getNextState: (s: Store) => Partial<Store>): void => {
+    const update = getNextState(state);
+    const nextState = {
+      ...state,
+      ...update,
+    };
+    localStorage.setItem(PAINLESS_LAB_KEY, JSON.stringify(nextState));
+    setState(() => nextState);
   };
-  return (
-    <AppContext.Provider value={{ setState: wrappedSetState, state }}>
-      {children}
-    </AppContext.Provider>
-  );
+
+  return <AppContext.Provider value={{ updateState, state }}>{children}</AppContext.Provider>;
 };
 
 export const useAppContext = () => {