diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/demoApp')
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, |