Merge pull request #1162 from bigcapitalhq/refactor/advancedfilter-ts-conversion

refactor(webapp): convert AdvancedFilter widget to typed TypeScript

Author: abouolia

packages/webapp/src/components/AdvancedFilter/AdvancedFilter.schema.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as Yup from 'yup';
 
 export const getFilterDropdownSchema = () =>

packages/webapp/src/components/AdvancedFilter/AdvancedFilterCompatatorField.tsx

@@ -1,13 +1,15 @@
-// @ts-nocheck
 import { Classes } from '@blueprintjs/core';
 import React from 'react';
 import { FSelect } from '../Forms';
 import { getConditionTypeCompatators } from './utils';
+import type { IDynamicFilterCompatatorFieldProps } from './interfaces';
+
+type FSelectProps = React.ComponentProps<typeof FSelect>;
 
 export default function DynamicFilterCompatatorField({
   dataType,
   ...restProps
-}) {
+}: IDynamicFilterCompatatorFieldProps & Omit<FSelectProps, 'dataType'>) {
   const options = getConditionTypeCompatators(dataType);
 
   return (

packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx

@@ -1,6 +1,6 @@
-// @ts-nocheck
 import { Button, Classes, InputGroup, MenuItem } from '@blueprintjs/core';
-import { Formik, FastField, FieldArray } from 'formik';
+import { Formik, FastField, FieldArray, useFormikContext } from 'formik';
+import type { FieldInputProps, FormikContextType, ArrayHelpers } from 'formik';
 import { get, first, defaultTo, isEqual, isEmpty } from 'lodash';
 import React from 'react';
 import intl from 'react-intl-universal';
@@ -17,10 +17,21 @@ import { useAdvancedFilterAutoSubmit } from './components';
 import {
   filterConditionRoles,
   getConditionalsOptions,
+  getConditionTypeCompatators,
   transformFieldsToOptions,
   shouldFilterValueFieldUpdate,
-  getConditionTypeCompatators,
 } from './utils';
+import type {
+  IAdvancedFilterDropdown,
+  IAdvancedFilterDropdownCondition,
+  IAdvancedFilterDropdownConditionsProps,
+  IAdvancedFilterDropdownFooter,
+  IConditionOption,
+  IFilterDropdownFormikValues,
+  IFilterRole,
+  IResourceField,
+  IResourceFieldType,
+} from './interfaces';
 import {
   Choose,
   Icon,
@@ -30,10 +41,19 @@ import {
 } from '@/components';
 import { useUpdateEffect } from '@/hooks';
 
+type ConditionRenderHelpers = {
+  handleClick: (event: React.MouseEvent<HTMLElement>) => void;
+  modifiers: { active: boolean; disabled: boolean };
+  query: string;
+};
+
 /**
  * Condition item list renderer.
  */
-function ConditionItemRenderer(condition, { handleClick, modifiers, query }) {
+function ConditionItemRenderer(
+  condition: IConditionOption,
+  { handleClick }: ConditionRenderHelpers,
+) {
   return (
     <MenuItem
       text={
@@ -51,7 +71,7 @@ function ConditionItemRenderer(condition, { handleClick, modifiers, query }) {
 /**
  * Filter condition field.
  */
-function FilterConditionField() {
+function FilterConditionField(): JSX.Element {
   const conditionalsOptions = getConditionalsOptions();
   const { conditionIndex, getConditionFieldPath } = useFilterCondition();
 
@@ -89,11 +109,11 @@ function FilterConditionField() {
 /**
  * Compatator field.
  */
-function FilterCompatatorFilter() {
+function FilterCompatatorFilter(): JSX.Element {
   const { getConditionFieldPath, fieldMeta } = useFilterCondition();
 
   const comparatorFieldPath = getConditionFieldPath('comparator');
-  const fieldType = get(fieldMeta, 'fieldType');
+  const fieldType = fieldMeta?.fieldType;
 
   return (
     <FFormGroup
@@ -103,14 +123,20 @@ function FilterCompatatorFilter() {
     >
       <AdvancedFilterCompatatorField
         name={comparatorFieldPath}
-        dataType={fieldType}
+        dataType={fieldType as IResourceFieldType}
         className={Classes.FILL}
         fastField
       />
     </FFormGroup>
   );
 }
 
+type DefaultComparatorHookArgs = {
+  getConditionValue: (field: keyof IFilterRole) => unknown;
+  setConditionValue: (field: keyof IFilterRole, value: unknown) => void;
+  fieldMeta?: IResourceField;
+};
+
 /**
  * Changes default value of comparator field in the condition row once the
  * field option changing.
@@ -119,12 +145,12 @@ function useDefaultComparatorFieldValue({
   getConditionValue,
   setConditionValue,
   fieldMeta,
-}) {
+}: DefaultComparatorHookArgs) {
   const fieldKeyValue = getConditionValue('fieldKey');
 
   const comparatorsOptions = React.useMemo(
-    () => getConditionTypeCompatators(fieldMeta.fieldType),
-    [fieldMeta.fieldType],
+    () => (fieldMeta ? getConditionTypeCompatators(fieldMeta.fieldType) : []),
+    [fieldMeta],
   );
 
   useUpdateEffect(() => {
@@ -138,7 +164,7 @@ function useDefaultComparatorFieldValue({
 /**
  * Resource fields field.
  */
-function FilterFieldsField() {
+function FilterFieldsField(): JSX.Element {
   const {
     getConditionFieldPath,
     getConditionValue,
@@ -159,15 +185,21 @@ function FilterFieldsField() {
 
   return (
     <FastField name={fieldPath}>
-      {({ field, form }) => (
+      {({
+        field,
+        form,
+      }: {
+        field: FieldInputProps<IFilterRole['fieldKey']>;
+        form: FormikContextType<IFilterDropdownFormikValues>;
+      }) => (
         <FFormGroup className={'form-group--fieldKey'} name={fieldPath}>
           <FSelect
             selectedItem={field.value}
             textAccessor={'label'}
             valueAccessor={'value'}
             items={transformFieldsToOptions(fields)}
             className={Classes.FILL}
-            onItemSelect={(option) => {
+            onItemSelect={(option: IConditionOption) => {
               form.setFieldValue(fieldPath, option.value);
 
               // Resets the value field to empty once the field option changing.
@@ -188,7 +220,7 @@ function FilterFieldsField() {
 /**
  * Advanced filter value field.
  */
-function FilterValueField() {
+function FilterValueField(): JSX.Element | null {
   const { conditionIndex, fieldMeta, getConditionFieldPath } =
     useFilterCondition();
 
@@ -197,9 +229,9 @@ function FilterValueField() {
     return null;
   }
   // Field meta type, name and options.
-  const fieldType = get(fieldMeta, 'fieldType');
-  const fieldName = get(fieldMeta, 'name');
-  const options = get(fieldMeta, 'options');
+  const fieldType = fieldMeta.fieldType;
+  const fieldName = fieldMeta.name;
+  const options = fieldMeta.options;
 
   const valueFieldPath = getConditionFieldPath('value');
 
@@ -209,11 +241,17 @@ function FilterValueField() {
       fieldKey={fieldType} // Pass to shouldUpdate function.
       shouldUpdate={shouldFilterValueFieldUpdate}
     >
-      {({ form: { setFieldValue }, field }) => (
+      {({
+        form: { setFieldValue },
+        field,
+      }: {
+        form: FormikContextType<IFilterDropdownFormikValues>;
+        field: FieldInputProps<unknown>;
+      }) => (
         <FFormGroup className={'form-group--value'} name={valueFieldPath}>
           <AdvancedFilterValueField
             isFocus={conditionIndex === 0}
-            value={field.value}
+            value={typeof field.value === 'string' ? field.value : ''}
             key={'name'}
             label={fieldName}
             fieldType={fieldType}
@@ -231,7 +269,10 @@ function FilterValueField() {
 /**
  * Advanced filter condition line.
  */
-function AdvancedFilterDropdownCondition({ conditionIndex, onRemoveClick }) {
+function AdvancedFilterDropdownCondition({
+  conditionIndex,
+  onRemoveClick,
+}: IAdvancedFilterDropdownCondition) {
   // Handle click remove condition.
   const handleClickRemoveCondition = () => {
     onRemoveClick && onRemoveClick(conditionIndex);
@@ -259,27 +300,31 @@ function AdvancedFilterDropdownCondition({ conditionIndex, onRemoveClick }) {
 /**
  * Advanced filter dropdown condition.
  */
-function AdvancedFilterDropdownConditions({ push, remove, replace, form }) {
+function AdvancedFilterDropdownConditions(
+  props: IAdvancedFilterDropdownConditionsProps,
+): JSX.Element {
+  const { push, remove, replace, form } = props;
   const { initialCondition } = useAdvancedFilterContext();
 
   // Handle remove condition.
-  const handleClickRemoveCondition = (conditionIndex) => {
+  const handleClickRemoveCondition = (conditionIndex: number) => {
     if (form.values.conditions.length > 1) {
       remove(conditionIndex);
     } else {
       replace(0, { ...initialCondition });
     }
   };
   // Handle new condition button click.
-  const handleNewConditionBtnClick = (index) => {
+  const handleNewConditionBtnClick = () => {
     push({ ...initialCondition });
   };
 
   return (
     <div className="filter-dropdonw__conditions-wrap">
       <div className={'filter-dropdown__conditions'}>
-        {form.values.conditions.map((condition, index) => (
+        {form.values.conditions.map((_condition, index) => (
           <AdvancedFilterDropdownCondition
+            key={index}
             conditionIndex={index}
             onRemoveClick={handleClickRemoveCondition}
           />
@@ -293,16 +338,17 @@ function AdvancedFilterDropdownConditions({ push, remove, replace, form }) {
 /**
  * Advanced filter dropdown form.
  */
-function AdvancedFilterDropdownForm() {
+function AdvancedFilterDropdownForm(): JSX.Element {
   // Advanced filter auto-save.
   useAdvancedFilterAutoSubmit();
+  const form = useFormikContext<IFilterDropdownFormikValues>();
 
   return (
     <div className="filter-dropdown__form">
       <FieldArray
         name={'conditions'}
-        render={({ ...fieldArrayProps }) => (
-          <AdvancedFilterDropdownConditions {...fieldArrayProps} />
+        render={(arrayHelpers: ArrayHelpers) => (
+          <AdvancedFilterDropdownConditions {...arrayHelpers} form={form} />
         )}
       />
     </div>
@@ -312,14 +358,12 @@ function AdvancedFilterDropdownForm() {
 /**
  * Advanced filter dropdown footer.
  */
-function AdvancedFilterDropdownFooter({ onClick }) {
-  // Handle new filter condition button click.
-  const onClickNewFilter = (event) => {
-    onClick && onClick(event);
-  };
+function AdvancedFilterDropdownFooter({
+  onClick,
+}: IAdvancedFilterDropdownFooter): JSX.Element {
   return (
     <div className="filter-dropdown__footer">
-      <Button minimal={true} onClick={onClickNewFilter}>
+      <Button minimal={true} onClick={onClick}>
         <T id={'new_conditional'} />
       </Button>
     </div>
@@ -337,23 +381,24 @@ export function AdvancedFilterDropdown({
   defaultValue,
   defaultCondition,
   onFilterChange,
-}) {
+}: IAdvancedFilterDropdown): JSX.Element {
   // Initial condition.
-  const initialCondition = {
+  const initialCondition: IFilterRole = {
     fieldKey: defaultFieldKey,
     comparator: defaultTo(defaultComparator, 'contain'),
     condition: defaultTo(defaultCondition, 'or'),
     value: defaultTo(defaultValue, ''),
   };
   // Initial conditions.
-  const initialConditions = !isEmpty(conditions)
-    ? conditions
-    : [initialCondition, initialCondition];
+  const initialConditions: IFilterRole[] =
+    conditions && !isEmpty(conditions)
+      ? conditions
+      : [initialCondition, initialCondition];
 
   const [prevConditions, setPrevConditions] = React.useState(initialConditions);
 
   // Handle the filter dropdown form submit.
-  const handleFitlerDropdownSubmit = (values) => {
+  const handleFitlerDropdownSubmit = (values: IFilterDropdownFormikValues) => {
     const conditions = filterConditionRoles(values.conditions);
 
     // Campare the current conditions with previous conditions, if they were equal
@@ -367,7 +412,7 @@ export function AdvancedFilterDropdown({
   const validationSchema = getFilterDropdownSchema();
 
   // Initial values.
-  const initialValues = {
+  const initialValues: IFilterDropdownFormikValues = {
     conditions: initialConditions,
   };