#708 apply strictier linting rules (#717)

* #708 apply strictier linting rules and fix simple eslint bugs

* #708 fix eslint errors relate to promise

* #708 fix eslint import/no-extraneous-dependencies

* #708 fix eslint errors of react-hook

* #708 enable eslint check for typescript

---------

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>

src/components/Timezone/TimezoneAutocomplete.tsx

@@ -1,29 +1,29 @@
-import { Autocomplete, TextField } from "@linagora/twake-mui";
-import { PublicOutlined as TimezoneIcon } from "@mui/icons-material";
-import { useMemo } from "react";
+import { Autocomplete, TextField } from '@linagora/twake-mui'
+import { PublicOutlined as TimezoneIcon } from '@mui/icons-material'
+import { useMemo } from 'react'
 
 interface TimezoneOption {
-  value: string;
-  label: string;
-  offset: string;
+  value: string
+  label: string
+  offset: string
 }
 
 interface TimezoneAutocompleteProps {
-  value: string;
-  onChange: (timezone: string) => void;
-  zones: string[];
-  getTimezoneOffset: (tzName: string) => string;
-  showIcon?: boolean;
-  inputRef?: React.Ref<HTMLInputElement>;
-  width?: number | string;
-  size?: "small" | "medium";
-  placeholder?: string;
-  inputFontSize?: string;
-  inputPadding?: string;
-  onClose?: () => void;
-  disableClearable?: boolean;
-  hideBorder?: boolean;
-  openOnFocus?: boolean;
+  value: string
+  onChange: (timezone: string) => void
+  zones: string[]
+  getTimezoneOffset: (tzName: string) => string
+  showIcon?: boolean
+  inputRef?: React.Ref<HTMLInputElement>
+  width?: number | string
+  size?: 'small' | 'medium'
+  placeholder?: string
+  inputFontSize?: string
+  inputPadding?: string
+  onClose?: () => void
+  disableClearable?: boolean
+  hideBorder?: boolean
+  openOnFocus?: boolean
 }
 
 export function TimezoneAutocomplete({
@@ -34,24 +34,24 @@ export function TimezoneAutocomplete({
   showIcon = false,
   inputRef,
   width,
-  size = "small",
-  placeholder = "Select timezone",
+  size = 'small',
+  placeholder = 'Select timezone',
   inputFontSize,
   inputPadding,
   onClose,
   disableClearable = false,
   hideBorder = false,
-  openOnFocus = false,
+  openOnFocus = false
 }: TimezoneAutocompleteProps) {
   const options = useMemo<TimezoneOption[]>(() => {
-    return zones.map((tz) => ({
+    return zones.map(tz => ({
       value: tz,
-      label: tz.replace(/_/g, " "),
-      offset: getTimezoneOffset(tz),
-    }));
-  }, [zones, getTimezoneOffset]);
+      label: tz.replace(/_/g, ' '),
+      offset: getTimezoneOffset(tz)
+    }))
+  }, [zones, getTimezoneOffset])
 
-  const selectedOption = options.find((opt) => opt.value === value) || null;
+  const selectedOption = options.find(opt => opt.value === value) || null
 
   return (
     <Autocomplete
@@ -59,35 +59,35 @@ export function TimezoneAutocomplete({
       value={selectedOption}
       onChange={(event, newValue) => {
         if (newValue) {
-          onChange(newValue.value);
-          onClose?.();
+          onChange(newValue.value)
+          onClose?.()
         }
       }}
       options={options}
-      getOptionLabel={(option) => `${option.label} (${option.offset})`}
+      getOptionLabel={option => `${option.label} (${option.offset})`}
       size={size}
       sx={width ? { width } : undefined}
       disableClearable={disableClearable}
-      renderInput={(params) => (
+      renderInput={params => (
         <TextField
           {...params}
           placeholder={placeholder}
-          onFocus={(e) => e.target.select()}
+          onFocus={e => e.target.select()}
           variant="outlined"
           autoComplete="off"
           inputRef={inputRef}
           sx={
             hideBorder
               ? {
-                  "& .MuiOutlinedInput-notchedOutline": {
-                    border: "none",
+                  '& .MuiOutlinedInput-notchedOutline': {
+                    border: 'none'
                   },
-                  "&:hover .MuiOutlinedInput-notchedOutline": {
-                    border: "none",
-                  },
-                  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                    border: "none",
+                  '&:hover .MuiOutlinedInput-notchedOutline': {
+                    border: 'none'
                   },
+                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    border: 'none'
+                  }
                 }
               : undefined
           }
@@ -99,7 +99,7 @@ export function TimezoneAutocomplete({
                   <TimezoneIcon
                     style={{
                       marginRight: 8,
-                      color: "rgba(0, 0, 0, 0.54)",
+                      color: 'rgba(0, 0, 0, 0.54)'
                     }}
                   />
                   {params.InputProps.startAdornment}
@@ -111,18 +111,18 @@ export function TimezoneAutocomplete({
                 ? {
                     style: {
                       ...(inputFontSize ? { fontSize: inputFontSize } : {}),
-                      ...(inputPadding ? { padding: inputPadding } : {}),
-                    },
+                      ...(inputPadding ? { padding: inputPadding } : {})
+                    }
                   }
-                : {}),
-            },
+                : {})
+            }
           }}
           inputProps={{
             ...params.inputProps,
-            autoComplete: "new-password",
+            autoComplete: 'new-password'
           }}
         />
       )}
     />
-  );
+  )
 }