Refactor/components to ts

package.json

@@ -51,7 +51,6 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.15",
     "@hookform/resolvers": "2.8.1",
-    "loop-react-auth": "^1.0.0",
     "@types/jest": "^27.0.2",
     "@types/md5": "^2.3.1",
     "@types/node": "^16.10.2",
@@ -62,6 +61,7 @@
     "emotion": "^11.0.0",
     "emotion-theming": "^11.0.0",
     "flat": "^5.0.2",
+    "loop-react-auth": "^1.0.0",
     "md5": "^2.3.0",
     "prop-types": "^15.7.2",
     "query-string": "^7.0.1",
@@ -77,7 +77,9 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.1",
+    "@types/flat": "^5.0.2",
     "@types/react-intl": "^3.0.0",
+    "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.0",
     "decamelize": "^5.0.1",
     "eslint-config-airbnb": "18.2.1",

src/assets/icons.js → src/assets/icons.tsx

@@ -1,5 +1,6 @@
+// eslint-disable-next-line import/named
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 
-const icons = [faBars];
+const icons: any = [faBars];
 
 export default icons;

src/features/app/components/App/App.js → src/features/app/components/App/App.tsx

@@ -12,20 +12,21 @@ import AppLocale from '../../locales';
 import ErrorBoundary from '../ErrorBoundary';
 
 import { globalStyles, CustomLoading } from './App.styles';
+import { AppLocaleType } from '../ComponentsTypes';
 
 const UnauthenticatedApp = lazy(() => import('../UnauthenticatedApp'));
-const AuthenticatedApp = lazy(() =>
-  import(/* webpackPrefetch: true */ '../AuthenticatedApp')
+const AuthenticatedApp = lazy(
+  () => import(/* webpackPrefetch: true */ '../AuthenticatedApp')
 );
 
 library.add(icons);
 
 const App = () => {
   const { isLoading, isAuthenticated, user } = useAuth();
-  const { guestLocale } = useGuestLocale();
+  const { guestLocale }: any = useGuestLocale();
 
   const locale = user?.locale || guestLocale;
-  const appLocale = AppLocale[locale];
+  const appLocale: AppLocaleType = AppLocale[locale];
 
   return (
     <IntlProvider locale={locale} messages={flatten(appLocale.messages)}>

src/features/app/components/ComponentsTypes.ts

@@ -0,0 +1,23 @@
+export interface AppLocaleType {
+  locale: string;
+  messages: object;
+}
+
+export interface ErrorType {
+  message: string;
+}
+
+export interface ErrorPropsType {
+  hasError: boolean;
+  error: ErrorType;
+}
+
+export interface Languages {
+  en: AppLocaleType;
+  es: AppLocaleType;
+}
+
+export interface objType {
+  addEventListener(type: 'type1', listener: (ev: 1) => any): void;
+  removeEventListener(type: 'type1', listener: (ev: 1) => any): void;
+}

src/features/app/components/ErrorBoundary/ErrorBoundary.js → src/features/app/components/ErrorBoundary/ErrorBoundary.tsx

@@ -10,16 +10,26 @@ import {
   Wrapper,
 } from './ErrorBoundary.styles';
 
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
+import { ErrorType, ErrorPropsType } from '../ComponentsTypes';
+
+class ErrorBoundary extends Component<
+  {},
+  { hasError: boolean; error: ErrorType }
+> {
+  // eslint-disable-next-line react/static-property-placement
+  static propTypes: {
+    children: PropTypes.Validator<PropTypes.ReactElementLike>;
+  };
+
+  constructor(errorProps: ErrorPropsType) {
+    super(errorProps);
     this.state = {
       hasError: false,
-      error: {},
+      error: { message: '' },
     };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(error: ErrorType) {
     return { hasError: true, error };
   }
 

src/features/app/components/Form/Form.tsx

@@ -7,7 +7,7 @@ import { Error, FormContent } from './Form.styles';
 
 interface FormProps {
   children: React.ReactNode;
-  onSubmit: Promise<void>;
+  onSubmit: (params: any) => Promise<void>;
   formMethods: any;
 }
 

src/features/app/components/LanguageSelector/LanguageSelector.tsx

@@ -6,7 +6,7 @@ import { Select } from './LanguageSelector.styles';
 
 const LanguageSelector = () => {
   const { formatMessage, locale } = useIntl();
-  const { setGuestLocale } = useGuestLocale();
+  const { setGuestLocale }: any = useGuestLocale();
 
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     setGuestLocale(event.target.value);

src/features/app/components/Settings/ChangePasswordForm.tsx

@@ -10,11 +10,6 @@ import { handleErrors } from 'helpers/errors';
 
 import { SuccessText, StyledForm, FormButton } from './Settings.styles';
 
-interface OnSubmitPropTypes {
-  password: string;
-  currentPassword: string;
-}
-
 const ChangePasswordForm = () => {
   const intl = useIntl();
   const { updateUser } = useAuth();
@@ -32,14 +27,15 @@ const ChangePasswordForm = () => {
 
   const formMethods = useForm({ resolver: yupResolver(validationSchema) });
 
-  const onSubmit = async ({ password, currentPassword }: OnSubmitPropTypes) => {
+  const onSubmit = async ({ password, currentPassword }: any) => {
     setIsLoading(true);
     try {
       await updateUser({ password }, currentPassword);
       setIsResponseSuccess(true);
       formMethods.reset({ currentPassword: undefined, password: undefined });
-    } catch (error) {
+    } catch (e) {
       setIsResponseSuccess(false);
+      const error: any = e;
       handleErrors(error, formMethods.setError);
     } finally {
       setIsLoading(false);

src/features/app/components/Settings/Form.tsx

@@ -16,7 +16,7 @@ const SettingsForm = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [isResponseSuccess, setIsResponseSuccess] = useState(false);
 
-  const defaultValues = {
+  const defaultValues: any = {
     firstName: user?.firstName,
     lastName: user?.lastName,
     locale: user?.locale,
@@ -38,9 +38,10 @@ const SettingsForm = () => {
   const onSubmit = async (attributes: any) => {
     setIsLoading(true);
     try {
-      await updateUser(attributes);
+      await updateUser(attributes, '');
       setIsResponseSuccess(true);
-    } catch (error) {
+    } catch (e) {
+      const error: any = e;
       handleErrors(error, formMethods.setError);
     } finally {
       setIsLoading(false);

src/features/app/context/guestLocale.js → src/features/app/context/guestLocale.tsx

@@ -1,19 +1,30 @@
-import { createContext, useState, useEffect } from 'react';
+import {
+  createContext,
+  useState,
+  useEffect,
+  SetStateAction,
+  Dispatch,
+} from 'react';
 import { useAuth } from 'loop-react-auth';
 import {
   applyLocaleInterceptor,
   clearLocaleInterceptor,
 } from '../services/localeMiddleware';
 
-export const GuestLocaleContext = createContext();
+export interface ContextData {
+  guestLocale: string;
+  setGuestLocale: Dispatch<SetStateAction<string>>;
+}
+
+export const GuestLocaleContext = createContext<ContextData | null>(null);
 
 const STORAGE_KEY = 'guest_locale';
 
 const getDefaultGuestLocale = () =>
   localStorage.getItem(STORAGE_KEY) || navigator.language.substr(0, 2);
 
 // eslint-disable-next-line react/prop-types
-export const GuestLocaleProvider = ({ children }) => {
+export const GuestLocaleProvider = ({ children }: any) => {
   const { isAuthenticated } = useAuth();
   const [guestLocale, setGuestLocale] = useState(getDefaultGuestLocale);
 

src/features/app/hooks/events.js → src/features/app/hooks/events.tsx

@@ -1,20 +1,28 @@
 import { useEffect, useRef } from 'react';
 
+import { objType } from '../components/ComponentsTypes';
+
 const defaultEvents = ['mousedown', 'touchstart'];
 
-const on = (obj, ...args) => obj.addEventListener(...args);
+const on = (obj: objType, ...args: any) =>
+  obj.addEventListener.apply(null, args);
 
-const off = (obj, ...args) => obj.removeEventListener(...args);
+const off = (obj: objType, ...args: any) =>
+  obj.removeEventListener.apply(null, args);
 
-export const useClickAway = (ref, onClickAway, events = defaultEvents) => {
+export const useClickAway = (
+  ref: React.RefObject<HTMLDivElement>,
+  onClickAway: (arg: object) => void,
+  events = defaultEvents
+) => {
   const savedCallback = useRef(onClickAway);
 
   useEffect(() => {
     savedCallback.current = onClickAway;
   }, [onClickAway]);
 
   useEffect(() => {
-    const handler = (event) => {
+    const handler = (event: { target: Node }) => {
       const { current: el } = ref;
       el && !el.contains(event.target) && savedCallback.current(event);
     };

src/features/app/hooks/guestLocale.tsx

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+
+import { GuestLocaleContext, ContextData } from '../context/guestLocale';
+
+export const useGuestLocale: () => ContextData | null = () =>
+  useContext(GuestLocaleContext);

src/features/app/locales/index.js → src/features/app/locales/index.tsx

@@ -64,7 +64,7 @@ import esESLanguage from 'features/app/locales/entries/es-ES';
       output => 'Hello Patrick!, welcome to your dashboard'
 */
 
-const AppLocale = {
+const AppLocale: any = {
   en: enUSLanguage,
   es: esESLanguage,
 };

src/features/app/services/localeMiddleware.js → src/features/app/services/localeMiddleware.ts

@@ -1,6 +1,9 @@
 import httpClient from './httpClient';
 
-export const applyLocaleInterceptor = (isAuthenticated, locale) => {
+export const applyLocaleInterceptor = (
+  isAuthenticated: boolean,
+  locale: string
+) => {
   return httpClient.interceptors.request.use((request) => {
     if (!isAuthenticated) {
       Object.assign(request.params, { locale });
@@ -10,6 +13,6 @@ export const applyLocaleInterceptor = (isAuthenticated, locale) => {
   });
 };
 
-export const clearLocaleInterceptor = (interceptor) => {
+export const clearLocaleInterceptor = (interceptor: number) => {
   httpClient.interceptors.request.eject(interceptor);
 };