fix issue where 'my ip' value was not added to form state. closes #239

hyperglass/ui/components/looking-glass-form.tsx

@@ -149,8 +149,11 @@ export const LookingGlassForm = (): JSX.Element => {
     } else if (e.field === 'queryTarget') {
       if (isString(e.value)) {
         setFormValue('queryTarget', [e.value]);
-      } else if (Array.isArray(e.value)) {
+        setValue('queryTarget', [e.value]);
+      }
+      if (Array.isArray(e.value)) {
         setFormValue('queryTarget', e.value);
+        setValue('queryTarget', e.value);
       }
     }
   }

hyperglass/ui/components/query-target.tsx

@@ -1,17 +1,16 @@
-import { useMemo } from 'react';
 import { Input, InputGroup, InputRightElement, Text } from '@chakra-ui/react';
+import { useMemo } from 'react';
 import { components } from 'react-select';
-import { If, Then, Else } from 'react-if';
 import { Select } from '~/components';
 import { isSingleValue } from '~/components/select';
-import { useColorValue, useDirective, useFormState } from '~/hooks';
+import { useDirective, useFormState } from '~/hooks';
 import { isSelectDirective } from '~/types';
 import { UserIP } from './user-ip';
 
-import type { OptionProps, GroupBase } from 'react-select';
+import { type UseFormRegister, useForm } from 'react-hook-form';
-import type { UseFormRegister } from 'react-hook-form';
+import type { GroupBase, OptionProps } from 'react-select';
 import type { SelectOnChange } from '~/components/select';
-import type { Directive, SingleOption, OnChangeArgs, FormData } from '~/types';
+import type { Directive, FormData, OnChangeArgs, SingleOption } from '~/types';
 
 type OptionWithDescription = SingleOption<{ description: string | null }>;
 
@@ -49,16 +48,13 @@ const Option = (props: OptionProps<OptionWithDescription, false>) => {
 export const QueryTarget = (props: QueryTargetProps): JSX.Element => {
   const { name, register, onChange, placeholder } = props;
 
-  const bg = useColorValue('white', 'blackSolid.800');
-  const color = useColorValue('gray.400', 'whiteAlpha.800');
-  const border = useColorValue('gray.100', 'whiteAlpha.50');
-  const placeholderColor = useColorValue('gray.600', 'whiteAlpha.700');
   const displayTarget = useFormState(s => s.target.display);
   const setTarget = useFormState(s => s.setTarget);
-  const form = useFormState(s => s.form);
+  const queryTarget = useFormState(s => s.form.queryTarget);
   const directive = useDirective();
 
   const options = useMemo(() => buildOptions(directive), [directive]);
+  const isSelect = useMemo(() => directive !== null && isSelectDirective(directive), [directive]);
 
   function handleInputChange(e: React.ChangeEvent<HTMLInputElement>): void {
     setTarget({ display: e.target.value });
@@ -72,43 +68,46 @@ export const QueryTarget = (props: QueryTargetProps): JSX.Element => {
     }
   };
 
+  const handleUserIPChange = (target: string): void => {
+    setTarget({ display: target });
+    onChange({ field: name, value: target });
+  };
+
   return (
     <>
-      <input {...register('queryTarget')} hidden readOnly value={form.queryTarget} />
+      <input {...register('queryTarget')} hidden readOnly value={queryTarget} />
-      <If condition={directive !== null && isSelectDirective(directive)}>
+      {isSelect ? (
-        <Then>
+        <Select<OptionWithDescription, false>
-          <Select<OptionWithDescription, false>
+          name={name}
-            name={name}
+          options={options}
-            options={options}
+          components={{ Option }}
-            components={{ Option }}
+          onChange={handleSelectChange}
-            onChange={handleSelectChange}
+        />
+      ) : (
+        <InputGroup size="lg">
+          <Input
+            bg="white"
+            color="gray.400"
+            borderRadius="md"
+            borderColor="gray.100"
+            value={displayTarget}
+            aria-label={placeholder}
+            placeholder={placeholder}
+            name="queryTargetDisplay"
+            onChange={handleInputChange}
+            _placeholder={{ color: 'gray.600' }}
+            _dark={{
+              bg: 'blackSolid.800',
+              color: 'whiteAlpha.800',
+              borderColor: 'whiteAlpha.50',
+              _placeholder: { color: 'whiteAlpha.700' },
+            }}
           />
-        </Then>
+          <InputRightElement w="max-content" pr={2}>
-        <Else>
+            <UserIP setTarget={handleUserIPChange} />
-          <InputGroup size="lg">
+          </InputRightElement>
-            <Input
+        </InputGroup>
-              bg={bg}
+      )}
-              color={color}
-              borderRadius="md"
-              borderColor={border}
-              value={displayTarget}
-              aria-label={placeholder}
-              placeholder={placeholder}
-              name="queryTargetDisplay"
-              onChange={handleInputChange}
-              _placeholder={{ color: placeholderColor }}
-            />
-            <InputRightElement w="max-content" pr={2}>
-              <UserIP
-                setTarget={(target: string) => {
-                  setTarget({ display: target });
-                  onChange({ field: name, value: target });
-                }}
-              />
-            </InputRightElement>
-          </InputGroup>
-        </Else>
-      </If>
     </>
   );
 };