Fix(firestore): Respect data type when applying filter

src/components/Firestore/CollectionFilter/CollectionFilter.tsx

@@ -31,12 +31,23 @@
   isSingleValueCollectionFilter,
   isSortableCollectionFilter,
 } from '../models';
+import { isBoolean, isNumber } from '../utils';
 import { useCollectionFilter, useDispatch } from '../store';
 import styles from './CollectionFilter.module.scss';
 import { ConditionEntries } from './ConditionEntries';
 import { ConditionEntry } from './ConditionEntry';
 import { SortRadioGroup } from './SortRadioGroup';
 
+function getConditionEntryType(value: any) {
+  if (isBoolean(value)) {
+    return 'boolean';
+  }
+  if (isNumber(value)) {
+    return 'number';
+  }
+  return 'string';
+}
+
 export const CollectionFilter: React.FC<
   React.PropsWithChildren<{
     className?: string;
@@ -54,7 +65,20 @@
 
   const cf = formMethods.watch();
 
+  const [fieldType, setFieldType] = useState(
+    getConditionEntryType(
+      isSingleValueCollectionFilter(collectionFilter) && collectionFilter.value
+    )
+  );
+
   const onSubmit = (data: CollectionFilterType) => {
+    if (isSingleValueCollectionFilter(data)) {
+      if (fieldType === 'number') {
+        data.value = Number(data.value);
+      } else if (fieldType === 'boolean') {
+        data.value = data.value === 'true';
+      }
+    }
     dispatch(
       actions.addCollectionFilter({
         path,
@@ -96,14 +120,19 @@
             preview={<ConditionPreview cf={cf} />}
             defaultOpen
           >
-            <ConditionSelect>
+            <ConditionSelect
+              fieldType={fieldType}
+              setFieldType={setFieldType}
+            >
               {cf && isSingleValueCollectionFilter(cf) && (
                 <ConditionEntry
                   name="value"
                   error={
                     (formMethods.formState.touchedFields as any)['value'] &&
                     (formMethods.formState.errors as any)['value']?.message
                   }
+                  fieldType={fieldType}
+                  setFieldType={setFieldType}
                 />
               )}
 
@@ -207,9 +236,12 @@
   );
 };
 
-const ConditionSelect: React.FC<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+const ConditionSelect: React.FC<
+  React.PropsWithChildren<{
+    fieldType: string;
+    setFieldType: (type: string) => void;
+  }>
+> = ({ children, fieldType, setFieldType }) => {
   const options: Array<{
     label: string;
     value: WhereFilterOp;

src/components/Firestore/CollectionFilter/ConditionEntry.tsx

@@ -14,36 +14,28 @@
  * limitations under the License.
  */
 
 import React, { useEffect, useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
 import { Field, SelectField } from '../../../components/common/Field';
 import { NUMBER_REGEX, isBoolean, isNumber } from '../utils';
 import styles from './CollectionFilter.module.scss';
 
-function getConditionEntryType(value: any) {
-  if (isBoolean(value)) {
-    return 'boolean';
-  }
-  if (isNumber(value)) {
-    return 'number';
-  }
-  return 'string';
-}
 
 interface ConditionEntryProps {
   name: string;
   // Error may be undefined; require consumers to still pass or we might end up
   // in a state where we validate without showing the error message.
   error: string | undefined;
+  fieldType: string;
+  setFieldType: (type: string) => void;
 }
 
 export const ConditionEntry: React.FC<
   React.PropsWithChildren<ConditionEntryProps>
-> = React.memo(({ name, error }) => {
+> = React.memo(({ name, error, fieldType, setFieldType }) => {
   const { setValue, watch } = useFormContext();
   const value = watch(name);
-  const [fieldType, setFieldType] = useState(getConditionEntryType(value));
 
   useEffect(() => {
     // Essentially setting the defaultValue of this form-field,
@@ -58,9 +50,7 @@
       <SelectField
         options={['string', 'number', 'boolean']}
         value={fieldType}
-        onChange={(evt) => {
-          setFieldType(evt.currentTarget.value);
-        }}
+        onChange={(evt) => setFieldType(evt.currentTarget.value)}
         fieldClassName={styles.conditionEntryType}
       />