refine Types

client/src/components/advancedSearch/Condition.tsx

@@ -8,30 +8,9 @@ import {
   MenuItem,
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
+import {ConditionProps, Field} from './Types';
 
-interface ConditionProps {
-  others?: object;
-  onDelete: () => void;
-  triggerChange: (data: TriggerChangeData) => void;
-  fields: Field[];
-  id: string;
-  initData: any;
-  className?: string;
-}
-
-interface Field {
-  name: string;
-  type: 'int' | 'float';
-}
-
-interface TriggerChangeData {
-  field: Field;
-  op: string;
-  value: string;
-  isCorrect: boolean;
-  id: string;
-}
-
+// Todo: Move to corrsponding Constant file.
 // Static logical operators.
 const LogicalOperators = [
   {

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -3,29 +3,11 @@ import { makeStyles, Theme, createStyles, Button } from '@material-ui/core';
 import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import ConditionItem from './Condition';
 import AddIcon from '@material-ui/icons/Add';
-
-interface ConditionGroupProps {
-  others?: object;
-  fields: Field[];
-  handleConditions: any;
-  conditions: any[];
-}
-
-interface BinaryLogicalOpProps {
-  onChange: (newOp: string) => void;
-  className?: string;
-  initValue?: string;
-}
-
-interface AddConditionProps {
-  className?: string;
-  onClick?: () => void;
-}
-
-interface Field {
-  name: string;
-  type: 'int' | 'float';
-}
+import {
+  ConditionGroupProps,
+  BinaryLogicalOpProps,
+  AddConditionProps,
+} from './Types';
 
 // "And & or" operator component.
 const BinaryLogicalOp: FC<BinaryLogicalOpProps> = props => {
@@ -102,8 +84,8 @@ const ConditionGroup = React.forwardRef((props: ConditionGroupProps, ref) => {
   // Generate condition items with operators and add condition btn.
   const generateConditionItems = (conditions: any[]) => {
     const conditionsLength = conditions.length;
-    const results = conditions.reduce((prev: any, condition, ind) => {
-      if (ind === conditionsLength - 1) {
+    const results = conditions.reduce((prev: any, condition, currentIndex) => {
+      if (currentIndex === conditionsLength - 1) {
         prev.push(
           <ConditionItem
             key={condition.id}
@@ -114,7 +96,7 @@ const ConditionGroup = React.forwardRef((props: ConditionGroupProps, ref) => {
             fields={fields}
             triggerChange={onConditionChange}
             initData={condition?.data}
-            className={generateClassName(conditions, ind)}
+            className={generateClassName(conditions, currentIndex)}
           />
         );
         prev.push(
@@ -158,7 +140,7 @@ const ConditionGroup = React.forwardRef((props: ConditionGroupProps, ref) => {
             fields={fields}
             triggerChange={onConditionChange}
             initData={condition?.data}
-            className={generateClassName(conditions, ind)}
+            className={generateClassName(conditions, currentIndex)}
           />
         );
         prev.push(

client/src/components/advancedSearch/CopyButton.tsx

@@ -7,14 +7,7 @@ import {
   IconButton,
   Fade,
 } from '@material-ui/core';
-
-interface CopyButtonProps {
-  className?: string;
-  icon?: any;
-  label: string;
-  value: string;
-  others?: any;
-}
+import { CopyButtonProps } from './Types';
 
 const CopyIcon = (
   <svg

client/src/components/advancedSearch/Dialog.tsx

@@ -16,26 +16,7 @@ import CachedIcon from '@material-ui/icons/Cached';
 import ConditionGroup from './ConditionGroup';
 import CopyBtn from './CopyButton';
 import DialogTemplate from '../customDialog/DialogTemplate';
-
-interface DialogProps {
-  others?: object;
-  open: boolean;
-  onClose: () => void;
-  onSubmit: (data: any) => void;
-  onReset: () => void;
-  onCancel: () => void;
-  title: string;
-  fields: Field[];
-  handleConditions: any;
-  conditions: any[];
-  isLegal: boolean;
-  expression: string;
-}
-
-interface Field {
-  name: string;
-  type: 'int' | 'float';
-}
+import { DialogProps } from './Types';
 
 const AdvancedDialog = React.forwardRef((props: DialogProps, ref) => {
   const {

client/src/components/advancedSearch/Filter.tsx

@@ -8,23 +8,8 @@ import {
   Tooltip,
 } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
-
 import AdvancedDialog from './Dialog';
-
-interface FilterProps {
-  className?: string;
-  title: string;
-  showTitle?: boolean;
-  others?: object;
-  onSubmit: (data: any) => void;
-  tooltipPlacement?: 'left' | 'right' | 'bottom' | 'top';
-  fields: Field[];
-}
-
-interface Field {
-  name: string;
-  type: 'int' | 'float';
-}
+import { FilterProps, Field } from './Types';
 
 const generateHashCode = (source: string) => {
   var hash = 0,

client/src/components/advancedSearch/Types.ts

@@ -0,0 +1,75 @@
+// import { ReactElement } from 'react';
+
+export interface ConditionProps {
+  others?: object;
+  onDelete: () => void;
+  triggerChange: (data: TriggerChangeData) => void;
+  fields: Field[];
+  id: string;
+  initData: any;
+  className?: string;
+}
+
+export interface Field {
+  name: string;
+  type: 'int' | 'float';
+}
+
+export interface TriggerChangeData {
+  field: Field;
+  op: string;
+  value: string;
+  isCorrect: boolean;
+  id: string;
+}
+
+export interface ConditionGroupProps {
+  others?: object;
+  fields: Field[];
+  handleConditions: any;
+  conditions: any[];
+}
+
+export interface BinaryLogicalOpProps {
+  onChange: (newOp: string) => void;
+  className?: string;
+  initValue?: string;
+}
+
+export interface AddConditionProps {
+  className?: string;
+  onClick?: () => void;
+}
+
+export interface CopyButtonProps {
+  className?: string;
+  icon?: any;
+  label: string;
+  value: string;
+  others?: any;
+}
+
+export interface DialogProps {
+  others?: object;
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: any) => void;
+  onReset: () => void;
+  onCancel: () => void;
+  title: string;
+  fields: Field[];
+  handleConditions: any;
+  conditions: any[];
+  isLegal: boolean;
+  expression: string;
+}
+
+export interface FilterProps {
+  className?: string;
+  title: string;
+  showTitle?: boolean;
+  others?: object;
+  onSubmit: (data: any) => void;
+  tooltipPlacement?: 'left' | 'right' | 'bottom' | 'top';
+  fields: Field[];
+}