Odlux Update

Add eslint and custom icons update

Issue-ID: CCSDK-3871
Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586
Signed-off-by: highstreetherbert <herbert.eiselt@highstreet-technologies.com>

13 files changed, 64 insertions, 61 deletions

diff --git a/sdnr/wt/odlux/apps/demoApp/package.json b/sdnr/wt/odlux/apps/demoApp/package.json
index 951332a28..6a31bc3ec 100644
--- a/sdnr/wt/odlux/apps/demoApp/package.json
+++ b/sdnr/wt/odlux/apps/demoApp/package.json
@@ -21,6 +21,9 @@
   "author": "Matthias Fischer",
   "license": "Apache-2.0",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "1.2.35",
+    "@fortawesome/free-solid-svg-icons": "5.6.3",
+    "@fortawesome/react-fontawesome": "0.1.14",
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.2.0",
diff --git a/sdnr/wt/odlux/apps/demoApp/pom.xml b/sdnr/wt/odlux/apps/demoApp/pom.xml
index 07f990b79..172a43561 100644
--- a/sdnr/wt/odlux/apps/demoApp/pom.xml
+++ b/sdnr/wt/odlux/apps/demoApp/pom.xml
@@ -19,6 +19,7 @@
   ~ ============LICENSE_END=======================================================
   ~
   -->
+
 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>
 
@@ -139,7 +140,7 @@
                         <!-- optional: default phase is "generate-resources" -->
                         <phase>initialize</phase>
                         <configuration>
-                            <nodeVersion>v12.13.0</nodeVersion>
+                            <nodeVersion>v12.22.0</nodeVersion>
                             <yarnVersion>v1.22.10</yarnVersion>
                         </configuration>
                     </execution>
diff --git a/sdnr/wt/odlux/apps/demoApp/src/actions/authorActions.ts b/sdnr/wt/odlux/apps/demoApp/src/actions/authorActions.ts
index f75075192..f22d1e0a3 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/actions/authorActions.ts
+++ b/sdnr/wt/odlux/apps/demoApp/src/actions/authorActions.ts
@@ -26,16 +26,13 @@ export class ApplicationBaseAction extends Action { }
 
 
 export class LoadAllAuthorsAction extends ApplicationBaseAction {
-  constructor() {
-    super();
-  }
+  
 }
 
 // in React Action is most times a Message
 export class AllAuthorsLoadedAction extends ApplicationBaseAction {
   constructor(public authors: IAuthor[] | null, public error?: string) {
     super();
-
   }
 }
 
@@ -47,5 +44,5 @@ export const loadAllAuthorsAsync = (dispatch: Dispatch) => {
     dispatch(new AllAuthorsLoadedAction(null, error));
     dispatch(new AddErrorInfoAction(error));
   });
-} 
+}; 
 
diff --git a/sdnr/wt/odlux/apps/demoApp/src/components/counter.tsx b/sdnr/wt/odlux/apps/demoApp/src/components/counter.tsx
index 6b960cdae..1aad97451 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/components/counter.tsx
+++ b/sdnr/wt/odlux/apps/demoApp/src/components/counter.tsx
@@ -15,20 +15,15 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React, { FC, useState } from 'react';
 
-export class Counter extends React.Component<{}, { counter: number }> {
-  constructor(props: {}) {
-    super(props);
+const Counter: FC = () => {
+  const [counter, setCounter] = useState(0);
+  return (
+    <button onClick={() => setCounter(counter + 1 )} color="inherit">{counter}</button>
+  );
+};
 
-    this.state = {
-      counter: 0
-    };
-  }
-  
-  render() {
-    return (
-      <button onClick={ () => this.setState({ counter: this.state.counter + 1 }) } color="inherit">{ this.state.counter }</button>
-    )
-  }
-}
\ No newline at end of file
+Counter.displayName = 'Counter';
+
+export { Counter };
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/demoApp/src/handlers/demoAppRootHandler.ts b/sdnr/wt/odlux/apps/demoApp/src/handlers/demoAppRootHandler.ts
index 9ff8450c8..1f920f2a8 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/handlers/demoAppRootHandler.ts
+++ b/sdnr/wt/odlux/apps/demoApp/src/handlers/demoAppRootHandler.ts
@@ -18,6 +18,7 @@
 
 import { combineActionHandler } from '../../../../framework/src/flux/middleware';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 
 import { listAuthorsHandler, IListAuthors } from './listAuthorsHandler';
@@ -30,7 +31,7 @@ export interface IDemoAppStoreState {
 
 declare module '../../../../framework/src/store/applicationStore' {
   interface IApplicationStoreState {
-    demo: IDemoAppStoreState
+    demo: IDemoAppStoreState;
   }
 }
 
diff --git a/sdnr/wt/odlux/apps/demoApp/src/handlers/editAuthorHandler.ts b/sdnr/wt/odlux/apps/demoApp/src/handlers/editAuthorHandler.ts
index 34b533cb1..1d37a36cc 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/handlers/editAuthorHandler.ts
+++ b/sdnr/wt/odlux/apps/demoApp/src/handlers/editAuthorHandler.ts
@@ -25,9 +25,9 @@ export interface IEditAuthor {
 
 const editAuthorInit: IEditAuthor = {
   author: null,
-  isDirty: false
+  isDirty: false,
 };
 
-export const editAuthorHandler: IActionHandler<IEditAuthor> = (state = editAuthorInit, action) => {
+export const editAuthorHandler: IActionHandler<IEditAuthor> = (state = editAuthorInit, _action) => {
   return state;
 };
diff --git a/sdnr/wt/odlux/apps/demoApp/src/handlers/listAuthorsHandler.ts b/sdnr/wt/odlux/apps/demoApp/src/handlers/listAuthorsHandler.ts
index ca2b6d3c6..c85eaff04 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/handlers/listAuthorsHandler.ts
+++ b/sdnr/wt/odlux/apps/demoApp/src/handlers/listAuthorsHandler.ts
@@ -27,7 +27,7 @@ export interface IListAuthors {
 
 const listAuthorsInit: IListAuthors = {
   authors: [],
-  busy: false
+  busy: false,
 };
 
 export const listAuthorsHandler: IActionHandler<IListAuthors> = (state = listAuthorsInit, action) => {
@@ -35,7 +35,7 @@ export const listAuthorsHandler: IActionHandler<IListAuthors> = (state = listAut
 
     state = {
       ...state,
-      busy: true
+      busy: true,
     };
   
   } else if (action instanceof AllAuthorsLoadedAction) {
@@ -43,12 +43,12 @@ export const listAuthorsHandler: IActionHandler<IListAuthors> = (state = listAut
       state = {
         ...state,
         authors: action.authors,
-        busy: false
+        busy: false,
       };
     } else {
       state = {
         ...state,
-        busy: false
+        busy: false,
       };
     }
   }
diff --git a/sdnr/wt/odlux/apps/demoApp/src/models/author.ts b/sdnr/wt/odlux/apps/demoApp/src/models/author.ts
index 0aaa308a2..bdd414cba 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/models/author.ts
+++ b/sdnr/wt/odlux/apps/demoApp/src/models/author.ts
@@ -21,7 +21,7 @@
  */
 export interface IAuthor {
   /**
-   * Defines the unique id of the autor. 
+   * Defines the unique id of the author. 
    */
   id: number;
 
diff --git a/sdnr/wt/odlux/apps/demoApp/src/plugin.tsx b/sdnr/wt/odlux/apps/demoApp/src/plugin.tsx
index 4d67c28ac..7b29b4045 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/plugin.tsx
+++ b/sdnr/wt/odlux/apps/demoApp/src/plugin.tsx
@@ -15,13 +15,13 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from "react";
+import React from 'react';
 import { withRouter, RouteComponentProps, Route, Switch, Redirect } from 'react-router-dom';
 
-import { faAddressBook, faRegistered } from '@fortawesome/free-solid-svg-icons';
+import { faAddressBook } from '@fortawesome/free-solid-svg-icons/faAddressBook';
 
 import applicationManager from '../../../framework/src/services/applicationManager';
-import connect, { Connect } from '../../../framework/src/flux/connect';
+import { connect, Connect } from '../../../framework/src/flux/connect';
 
 import { demoAppRootHandler } from './handlers/demoAppRootHandler';
 
@@ -43,12 +43,12 @@ const App = (props: AppProps) => (
 const FinalApp = withRouter(connect()(App));
 
 export function register() {
-  const applicationApi = applicationManager.registerApplication({
-    name: "demo",
+  applicationManager.registerApplication({
+    name: 'demo',
     icon: faAddressBook,
     rootComponent: FinalApp,
     rootActionHandler: demoAppRootHandler,
     exportedComponents: { counter: Counter },
-    menuEntry: "Demo"
+    menuEntry: 'Demo',
   });
 }
diff --git a/sdnr/wt/odlux/apps/demoApp/src/services/authorService.ts b/sdnr/wt/odlux/apps/demoApp/src/services/authorService.ts
index 13e4b316c..deaa2ff76 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/services/authorService.ts
+++ b/sdnr/wt/odlux/apps/demoApp/src/services/authorService.ts
@@ -26,39 +26,39 @@ const base_url = 'https://api.mfico.de/v1/authors';
  */
 class AuthorService {
 
- /**
+  /**
    * Gets all known authors from the backend.
    * @returns A promise of the type array of @see {@link IAuthor} containing all known authors.
    */
   public getAllAuthors(): Promise<IAuthor[]> {
     return new Promise((resolve: (value: IAuthor[]) => void, reject: (err: any) => void) => {
-      $.ajax({ method: "GET", url: base_url })
-        .then((data) => { resolve(data); }, (err) => { reject(err) });
+      $.ajax({ method: 'GET', url: base_url })
+        .then((data) => { resolve(data); }, (err) => { reject(err); });
     });
   }
 
- /**
+  /**
    * Gets an author by its id from the backend.
    * @returns A promise of the type @see {@link IAuthor} containing the author to get.
    */
   public getAuthorById(id: string | number): Promise<IAuthor> {
     return new Promise((resolve: (value: IAuthor) => void, reject: (err: any) => void) => {
-      $.ajax({ method: "GET", url: base_url + "/" + id })
-        .then((data) => { resolve(data); }, (err) => { reject(err) });
+      $.ajax({ method: 'GET', url: base_url + '/' + id })
+        .then((data) => { resolve(data); }, (err) => { reject(err); });
     });
   }
 
 
-/**
+  /**
  * Saves the given author to the backend api.
  * @returns A promise of the type @see {@link IAuthor} containing the autor returned by the backend api.
  */
   public saveAuthor(author: IAuthor): Promise<IAuthor> {
     return new Promise((resolve: (value: IAuthor) => void, reject: (err: any) => void) => {
-       // simulate server save
+      // simulate server save
       window.setTimeout(() => {
         if (Math.random() > 0.8) {
-          reject("Could not save author.");
+          reject('Could not save author.');
         } else {
           resolve(author);
         }
diff --git a/sdnr/wt/odlux/apps/demoApp/src/views/authorsList.tsx b/sdnr/wt/odlux/apps/demoApp/src/views/authorsList.tsx
index b56058d36..5d9f13a55 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/views/authorsList.tsx
+++ b/sdnr/wt/odlux/apps/demoApp/src/views/authorsList.tsx
@@ -15,7 +15,7 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 import Table from '@mui/material/Table';
@@ -25,22 +25,28 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper'; // means border
 
-import connect from '../../../../framework/src/flux/connect';
+import { connect } from '../../../../framework/src/flux/connect';
 
 import { loadAllAuthorsAsync } from '../actions/authorActions';
 import { IAuthor } from '../models/author';
 
 interface IAuthorsListProps {
-  authors: IAuthor[],
-  busy: boolean,
-  onLoadAllAuthors: () => void
+  authors: IAuthor[];
+  busy: boolean;
+  onLoadAllAuthors: () => void;
 }
 
 class AuthorsListComponent extends React.Component<RouteComponentProps & IAuthorsListProps> {
 
   render(): JSX.Element {
     const { authors, busy } = this.props;
-    return (
+    return busy
+      ? (
+        <Paper>
+          Loading
+        </Paper>
+      )
+      : (
       <Paper>
         <Table padding="normal" >
           <TableHead>
@@ -52,7 +58,7 @@ class AuthorsListComponent extends React.Component<RouteComponentProps & IAuthor
           </TableHead>
           <TableBody>
             {authors.map(author => (
-              <TableRow key={author.id} onClick={(e) => this.editAuthor(author)}>
+              <TableRow key={author.id} onClick={(_e) => this.editAuthor(author)}>
                 <TableCell>{author.id}</TableCell>
                 <TableCell>{author.firstName}</TableCell>
                 <TableCell>{author.lastName}</TableCell>
@@ -61,15 +67,15 @@ class AuthorsListComponent extends React.Component<RouteComponentProps & IAuthor
           </TableBody>
         </Table>
       </Paper>
-    );
-  };
+      );
+  }
 
   public componentDidMount() {
     this.props.onLoadAllAuthors();
   }
 
   private editAuthor = (author: IAuthor) => {
-    author && this.props.history.push(this.props.match.path + '/' + author.id);
+    if (author) this.props.history.push(this.props.match.path + '/' + author.id);
   };
 }
 
@@ -77,11 +83,11 @@ export const AuthorsList = withRouter(
   connect(
     ({ demo: state }) => ({
       authors: state.listAuthors.authors,
-      busy: state.listAuthors.busy
+      busy: state.listAuthors.busy,
     }),
     (dispatcher) => ({
       onLoadAllAuthors: () => {
-        dispatcher.dispatch(loadAllAuthorsAsync)
-      }
+        dispatcher.dispatch(loadAllAuthorsAsync);
+      },
     }))(AuthorsListComponent));
 export default AuthorsList;
diff --git a/sdnr/wt/odlux/apps/demoApp/src/views/editAuthor.tsx b/sdnr/wt/odlux/apps/demoApp/src/views/editAuthor.tsx
index 92f671234..0da619ba2 100644
--- a/sdnr/wt/odlux/apps/demoApp/src/views/editAuthor.tsx
+++ b/sdnr/wt/odlux/apps/demoApp/src/views/editAuthor.tsx
@@ -15,10 +15,10 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-type EditAuthorProps = RouteComponentProps<{ authorId: string}>;
+type EditAuthorProps = RouteComponentProps<{ authorId: string }>;
 
 class EditAuthorComponent extends React.Component<EditAuthorProps> {
   render(): JSX.Element {
@@ -26,7 +26,7 @@ class EditAuthorComponent extends React.Component<EditAuthorProps> {
       <div>
         <h2>Edit Author { this.props.match.params.authorId }</h2>
       </div>
-    )
+    );
   }
 }
 
diff --git a/sdnr/wt/odlux/apps/demoApp/tsconfig.json b/sdnr/wt/odlux/apps/demoApp/tsconfig.json
index a66b5d828..ca65092e0 100644
--- a/sdnr/wt/odlux/apps/demoApp/tsconfig.json
+++ b/sdnr/wt/odlux/apps/demoApp/tsconfig.json
@@ -4,7 +4,7 @@
     "outDir": "./dist",
     "sourceMap": true,
     "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": false,
+    "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "noFallthroughCasesInSwitch": true,