Typescript refactor.

src/components/input/DateFilter.tsx

@@ -3,9 +3,20 @@ import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
 import useLocale from 'components/hooks/useLocale';
-import { formatDate } from 'lib/date';
-import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
+import Icons from 'components/icons';
+import { formatDate } from 'lib/date';
+
+export interface DateFilterProps {
+  value: string;
+  startDate: Date;
+  endDate: Date;
+  className?: string;
+  onChange?: (value: string) => void;
+  selectedUnit?: string;
+  showAllTime?: boolean;
+  alignment?: 'start' | 'center' | 'end';
+}
 
 export function DateFilter({
   value,
@@ -16,7 +27,7 @@ export function DateFilter({
   selectedUnit,
   showAllTime = false,
   alignment = 'end',
-}) {
+}: DateFilterProps) {
   const { formatMessage, labels } = useMessages();
   const [showPicker, setShowPicker] = useState(false);
 
@@ -65,7 +76,7 @@ export function DateFilter({
     },
   ].filter(n => n);
 
-  const renderValue = value => {
+  const renderValue = (value: string) => {
     return value.startsWith('range') ? (
       <CustomRange
         startDate={startDate}
@@ -78,7 +89,7 @@ export function DateFilter({
     );
   };
 
-  const handleChange = value => {
+  const handleChange = (value: string) => {
     if (value === 'custom') {
       setShowPicker(true);
       return;
@@ -86,7 +97,7 @@ export function DateFilter({
     onChange(value);
   };
 
-  const handlePickerChange = value => {
+  const handlePickerChange = (value: string) => {
     setShowPicker(false);
     onChange(value);
   };
@@ -102,7 +113,7 @@ export function DateFilter({
         value={value}
         alignment={alignment}
         placeholder={formatMessage(labels.selectDate)}
-        onChange={handleChange}
+        onChange={key => handleChange(key as any)}
       >
         {({ label, value, divider }) => (
           <Item key={value} divider={divider}>

src/components/input/LanguageButton.tsx

@@ -9,7 +9,7 @@ export function LanguageButton() {
   const { locale, saveLocale, dir } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
-  function handleSelect(value, close, e) {
+  function handleSelect(value: string, close: () => void, e: MouseEvent) {
     e.stopPropagation();
     saveLocale(value);
     close();
@@ -23,7 +23,7 @@ export function LanguageButton() {
         </Icon>
       </Button>
       <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
-        {close => {
+        {(close: () => void) => {
           return (
             <div className={styles.menu}>
               {items.map(({ value, label }) => {
@@ -31,7 +31,7 @@ export function LanguageButton() {
                   <div
                     key={value}
                     className={classNames(styles.item, { [styles.selected]: value === locale })}
-                    onClick={handleSelect.bind(null, value, close)}
+                    onClick={(e: any) => handleSelect(value, close, e)}
                   >
                     <Text>{label}</Text>
                     {value === locale && (

src/components/input/LogoutButton.tsx

@@ -2,7 +2,11 @@ import { Button, Icon, Icons, TooltipPopup } from 'react-basics';
 import Link from 'next/link';
 import useMessages from 'components/hooks/useMessages';
 
-export function LogoutButton({ tooltipPosition = 'top' }) {
+export function LogoutButton({
+  tooltipPosition = 'top',
+}: {
+  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+}) {
   const { formatMessage, labels } = useMessages();
   return (
     <Link href="/src/app/logout/logout">

src/components/input/MonthSelect.tsx

@@ -20,7 +20,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
   const year = date.getFullYear();
   const ref = useRef();
 
-  const handleChange = (close, date) => {
+  const handleChange = (close: () => void, date: Date) => {
     onChange(`range:${startOfMonth(date).getTime()}:${endOfMonth(date).getTime()}`);
     close();
   };
@@ -53,12 +53,8 @@ export function MonthSelect({ date = new Date(), onChange }) {
             </Icon>
           </Button>
           <Popup className={styles.popup} alignment="start">
-            {close => (
-              <CalendarYearSelect
-                date={date}
-                locale={dateLocale}
-                onSelect={handleChange.bind(null, close)}
-              />
+            {(close: any) => (
+              <CalendarYearSelect date={date} onSelect={handleChange.bind(null, close)} />
             )}
           </Popup>
         </PopupTrigger>

src/components/input/RefreshButton.tsx

@@ -4,7 +4,13 @@ import useDateRange from 'components/hooks/useDateRange';
 import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
 
-export function RefreshButton({ websiteId, isLoading }) {
+export function RefreshButton({
+  websiteId,
+  isLoading,
+}: {
+  websiteId: string;
+  isLoading?: boolean;
+}) {
   const { formatMessage, labels } = useMessages();
   const [dateRange] = useDateRange(websiteId);
 

src/components/input/WebsiteDateFilter.tsx

@@ -5,7 +5,7 @@ import { Button, Icon, Icons } from 'react-basics';
 import DateFilter from './DateFilter';
 import styles from './WebsiteDateFilter.module.css';
 
-export function WebsiteDateFilter({ websiteId }) {
+export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { value, startDate, endDate, selectedUnit } = dateRange;
   const isFutureDate =

src/components/input/WebsiteSelect.tsx

@@ -3,7 +3,13 @@ import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 import styles from './WebsiteSelect.module.css';
 
-export function WebsiteSelect({ websiteId, onSelect }) {
+export function WebsiteSelect({
+  websiteId,
+  onSelect,
+}: {
+  websiteId: string;
+  onSelect?: (key: any) => void;
+}) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const { data } = useQuery({