Convert remaining identifier javascript code to typescript

Add types for relevant annotations with packages.

Author: soun059

identifier/package.json

@@ -10,8 +10,9 @@
     "axios": "^0.22.0",
     "classnames": "^2.3.2",
     "glob": "^8.1.0",
+    "history": "^5.3.0",
     "i18next": "^21.10.0",
-    "i18next-browser-languagedetector": "^6.1.8",
+    "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^1.4.5",
     "i18next-resources-to-backend": "^1.0.0",
     "query-string": "^7.1.3",
@@ -47,6 +48,7 @@
     "@types/react": "^17.0.70",
     "@types/react-dom": "^17.0.23",
     "@types/react-redux": "^7.1.25",
+    "@types/react-router-dom": "^5.3.3",
     "@types/redux-logger": "^3.0.12",
     "@types/validator": "^13",
     "@typescript-eslint/eslint-plugin": "^6.11.0",

identifier/src/App.jsx identifier/src/App.tsxidentifier/src/App.jsx renamed to identifier/src/App.tsx

@@ -3,27 +3,28 @@ import React, { Suspense, lazy } from 'react';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import {
   CssBaseline,
- } from '@material-ui/core';
+} from '@material-ui/core';
 
 import './App.css';
 import './fancy-background.css';
 import Spinner from './components/Spinner';
 import * as version from './version';
 import theme from './theme';
 
-const LazyMain = lazy(() => import(/* webpackChunkName: "identifier-main" */ './Main'));
+const LazyMain = lazy(() => import(/* webpackChunkName: "identifier-main" */ './Main') as Promise<{ default: React.ComponentType<object> }>);
 
 console.info(`Kopano Identifier build version: ${version.build}`); // eslint-disable-line no-console
 
+
 const App = () => {
   return (
     <MuiThemeProvider theme={theme}>
-      <CssBaseline/>
-      <Suspense fallback={<Spinner/>}>
+      <CssBaseline />
+      <Suspense fallback={<Spinner />}>
         <LazyMain />
       </Suspense>
     </MuiThemeProvider>
-  );
+  )
 }
 
 export default App;

identifier/src/Main.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { BrowserRouter } from 'react-router-dom';
+
+import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+
+import Routes from './Routes';
+import { RootState } from './store';
+import { ObjectType } from './types';
+
+const styles = () => createStyles({
+  root: {
+    position: 'relative',
+    display: 'flex',
+    flex: 1
+  }
+});
+
+export interface MainProps extends WithStyles<typeof styles> {
+  hello: ObjectType;
+  pathPrefix: string;
+  updateAvailable: boolean;
+}
+
+
+const Main: React.FC<MainProps> = ({ classes, hello, pathPrefix }) => {
+
+  return (
+    <div className={classes.root}>
+      <BrowserRouter basename={pathPrefix}>
+        <Routes hello={hello} />
+      </BrowserRouter>
+    </div>
+  );
+}
+
+const mapStateToProps = (state: RootState) => {
+  const { hello, updateAvailable, pathPrefix } = state.common;
+
+  return {
+    hello: hello as ObjectType,
+    updateAvailable,
+    pathPrefix
+  };
+};
+
+export default connect(mapStateToProps)(withStyles(styles)(Main));

identifier/src/Main.test.jsx identifier/src/Main.test.tsxidentifier/src/Main.test.jsx renamed to identifier/src/Main.test.tsx

@@ -1,18 +1,25 @@
 import React, { lazy } from 'react';
-import PropTypes from 'prop-types';
 
 import { Route, Switch } from 'react-router-dom';
 
 import PrivateRoute from './components/PrivateRoute';
+import { ObjectType } from './types';
+
+type RootType = {
+  hello: ObjectType;
+}
+
+
+type ComponentType = Promise<{ default: React.ComponentType<object> }>
 
 const AsyncLogin = lazy(() =>
-  import(/* webpackChunkName: "containers-login" */ './containers/Login'));
+  import(/* webpackChunkName: "containers-login" */ './containers/Login') as ComponentType);
 const AsyncWelcome = lazy(() =>
-  import(/* webpackChunkName: "containers-welcome" */ './containers/Welcome'));
+  import(/* webpackChunkName: "containers-welcome" */ './containers/Welcome') as ComponentType);
 const AsyncGoodbye = lazy(() =>
-  import(/* webpackChunkName: "containers-goodbye" */ './containers/Goodbye'));
+  import(/* webpackChunkName: "containers-goodbye" */ './containers/Goodbye') as ComponentType);
 
-const Routes = ({ hello }) => (
+const Routes = ({ hello }: RootType) => (
   <Switch>
     <PrivateRoute
       path="/welcome"
@@ -32,8 +39,4 @@ const Routes = ({ hello }) => (
   </Switch>
 );
 
-Routes.propTypes = {
-  hello: PropTypes.object
-};
-
 export default Routes;

identifier/src/Main.tsx

@@ -1,6 +1,6 @@
-import axios from 'axios';
+import axios, { AxiosError, AxiosResponse } from 'axios';
 
-import { newHelloRequest } from '../models/hello';
+import { HelloQuery, newHelloRequest } from '../models/hello';
 import { withClientRequestState } from '../utils';
 import {
   ExtendedError,
@@ -10,8 +10,11 @@ import {
 
 import { handleAxiosError } from './utils';
 import * as types from './types';
+import {  Dispatch } from 'redux';
+import { AppDispatch, PromiseDispatch, RootState } from '../store';
+import { ResponseType } from '../types';
 
-export function receiveError(error) {
+export function receiveError(error?: ExtendedError | AxiosError<never> | null) {
   return {
     type: types.RECEIVE_ERROR,
     error
@@ -24,7 +27,7 @@ export function resetHello() {
   };
 }
 
-export function receiveHello(hello) {
+export function receiveHello(hello: {success?: boolean, username?: string, displayName?: string}) {
   const { success, username, displayName } = hello;
 
   return {
@@ -37,12 +40,12 @@ export function receiveHello(hello) {
 }
 
 export function executeHello() {
-  return function(dispatch, getState) {
+  return function(dispatch:Dispatch , getState: () => RootState) {
     dispatch(resetHello());
 
     const { flow, query } = getState().common;
 
-    const r = withClientRequestState(newHelloRequest(flow, query));
+    const r = withClientRequestState(newHelloRequest(flow as string, query as HelloQuery));
     return axios.post('./identifier/_/hello', r, {
       headers: {
         'Kopano-Konnect-XSRF': '1'
@@ -60,11 +63,11 @@ export function executeHello() {
           };
         default:
           // error.
-          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response);
+          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response as AxiosResponse<never>);
       }
     }).then(response => {
       if (response.state !== r.state) {
-        throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATE, response);
+        throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATE, response as ResponseType);
       }
 
       dispatch(receiveHello(response));
@@ -78,7 +81,7 @@ export function executeHello() {
 }
 
 export function retryHello() {
-  return function(dispatch) {
+  return function(dispatch: PromiseDispatch) {
     dispatch(receiveError(null));
 
     return dispatch(executeHello());
@@ -91,15 +94,15 @@ export function requestLogoff() {
   };
 }
 
-export function receiveLogoff(state) {
+export function receiveLogoff(state: boolean) {
   return {
     type: types.RECEIVE_LOGOFF,
     state
   };
 }
 
 export function executeLogoff() {
-  return function(dispatch) {
+  return function(dispatch: AppDispatch) {
     dispatch(resetHello());
     dispatch(requestLogoff());
 
@@ -115,11 +118,11 @@ export function executeLogoff() {
           return response.data;
         default:
           // error.
-          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response);
+          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response as AxiosResponse<never>);
       }
     }).then(response => {
       if (response.state !== r.state) {
-        throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATE, response);
+        throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATE, response as ResponseType);
       }
 
       dispatch(receiveLogoff(response.success === true));