Typescript refactor.

src/app/(main)/reports/funnel/FunnelChart.tsx

@@ -1,13 +1,18 @@
-import { useCallback, useContext, useMemo } from 'react';
+import { JSX, useCallback, useContext, useMemo } from 'react';
 import { Loading, StatusLight } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useTheme from 'components/hooks/useTheme';
 import BarChart from 'components/metrics/BarChart';
 import { formatLongNumber } from 'lib/format';
-import styles from './FunnelChart.module.css';
 import { ReportContext } from '../[id]/Report';
+import styles from './FunnelChart.module.css';
 
-export function FunnelChart({ className, loading }) {
+export interface FunnelChartProps {
+  className?: string;
+  isLoading?: boolean;
+}
+
+export function FunnelChart({ className, isLoading }: FunnelChartProps) {
   const { report } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
   const { colors } = useTheme();
@@ -15,33 +20,39 @@ export function FunnelChart({ className, loading }) {
   const { parameters, data } = report || {};
 
   const renderXLabel = useCallback(
-    (label, index) => {
+    (label: string, index: number) => {
       return parameters.urls[index];
     },
     [parameters],
   );
 
-  const renderTooltipPopup = useCallback((setTooltipPopup, model) => {
-    const { opacity, labelColors, dataPoints } = model.tooltip;
+  const renderTooltipPopup = useCallback(
+    (
+      setTooltipPopup: (arg0: JSX.Element) => void,
+      model: { tooltip: { opacity: any; labelColors: any; dataPoints: any } },
+    ) => {
+      const { opacity, labelColors, dataPoints } = model.tooltip;
 
-    if (!dataPoints?.length || !opacity) {
-      setTooltipPopup(null);
-      return;
-    }
+      if (!dataPoints?.length || !opacity) {
+        setTooltipPopup(null);
+        return;
+      }
 
-    setTooltipPopup(
-      <>
-        <div>
-          {formatLongNumber(dataPoints[0].raw.y)} {formatMessage(labels.visitors)}
-        </div>
-        <div>
-          <StatusLight color={labelColors?.[0]?.backgroundColor}>
-            {formatLongNumber(dataPoints[0].raw.z)}% {formatMessage(labels.dropoff)}
-          </StatusLight>
-        </div>
-      </>,
-    );
-  }, []);
+      setTooltipPopup(
+        <>
+          <div>
+            {formatLongNumber(dataPoints[0].raw.y)} {formatMessage(labels.visitors)}
+          </div>
+          <div>
+            <StatusLight color={labelColors?.[0]?.backgroundColor}>
+              {formatLongNumber(dataPoints[0].raw.z)}% {formatMessage(labels.dropoff)}
+            </StatusLight>
+          </div>
+        </>,
+      );
+    },
+    [],
+  );
 
   const datasets = useMemo(() => {
     return [
@@ -54,7 +65,7 @@ export function FunnelChart({ className, loading }) {
     ];
   }, [data, colors, formatMessage, labels]);
 
-  if (loading) {
+  if (isLoading) {
     return <Loading icon="dots" className={styles.loading} />;
   }
 
@@ -63,7 +74,7 @@ export function FunnelChart({ className, loading }) {
       className={className}
       datasets={datasets}
       unit="day"
-      loading={loading}
+      isLoading={isLoading}
       renderXLabel={renderXLabel}
       renderTooltipPopup={renderTooltipPopup}
       XAxisType="category"

src/app/(main)/reports/funnel/FunnelParameters.tsx

@@ -1,4 +1,4 @@
-import { useContext, useRef } from 'react';
+import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
 import {
   Icon,
@@ -21,13 +21,12 @@ import PopupForm from '../[id]/PopupForm';
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
-  const ref = useRef(null);
 
   const { parameters } = report || {};
   const { websiteId, dateRange, urls } = parameters || {};
   const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
 
-  const handleSubmit = (data, e) => {
+  const handleSubmit = (data: any, e: any) => {
     e.stopPropagation();
     e.preventDefault();
     if (!queryDisabled) {
@@ -35,11 +34,11 @@ export function FunnelParameters() {
     }
   };
 
-  const handleAddUrl = url => {
+  const handleAddUrl = (url: string) => {
     updateReport({ parameters: { urls: parameters.urls.concat(url) } });
   };
 
-  const handleRemoveUrl = (index, e) => {
+  const handleRemoveUrl = (index: number, e: any) => {
     e.stopPropagation();
     const urls = [...parameters.urls];
     urls.splice(index, 1);
@@ -62,7 +61,7 @@ export function FunnelParameters() {
   };
 
   return (
-    <Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
+    <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
       <BaseParameters />
       <FormRow label={formatMessage(labels.window)}>
         <FormInput
@@ -73,7 +72,10 @@ export function FunnelParameters() {
         </FormInput>
       </FormRow>
       <FormRow label={formatMessage(labels.urls)} action={<AddUrlButton />}>
-        <ParameterList items={urls} onRemove={handleRemoveUrl} />
+        <ParameterList
+          items={urls}
+          onRemove={(index: number, e: any) => handleRemoveUrl(index, e)}
+        />
       </FormRow>
       <FormButtons>
         <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>

src/app/(main)/reports/funnel/UrlAddForm.tsx

@@ -3,7 +3,12 @@ import { useMessages } from 'components/hooks';
 import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
 import styles from './UrlAddForm.module.css';
 
-export function UrlAddForm({ defaultValue = '', onAdd }) {
+export interface UrlAddFormProps {
+  defaultValue?: string;
+  onAdd?: (url: string) => void;
+}
+
+export function UrlAddForm({ defaultValue = '', onAdd }: UrlAddFormProps) {
   const [url, setUrl] = useState(defaultValue);
   const { formatMessage, labels } = useMessages();