Fix jslint errors.

packages/webapp/src/app.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-dom';
 
@@ -25,14 +25,14 @@ const queryClient = new QueryClient({
   }
 });
 
-const App = () => {
+const App = ():ReactElement => {
   const appi18n = new AppI18n();
   const locale = appi18n.getBrowserLocale();
 
   return locale.message ? (
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
-        <IntlProvider locale={locale.code} defaultLocale={Locales.EN.code} messages={locale.message}>
+        <IntlProvider locale={locale.code} defaultLocale={Locales.EN.code} messages={locale.message as Record<string, string> }>
           <CssBaseline />
           <ThemeProvider theme={theme}>
             <Router>

packages/webapp/src/classes/app-i18n/index.ts

@@ -6,12 +6,12 @@ import 'dayjs/locale/es';
 export class Locale {
     code: LocaleCode;
     label: string;
-    message: any;
+    message: Record<string, string> ;
 
-    constructor(code: LocaleCode, label: string, message: any) {
+    constructor(code: LocaleCode, label: string, message: unknown) {
         this.code = code;
         this.label = label;
-        this.message = message;
+        this.message = message as Record<string, string>;
     }
 }
 

packages/webapp/src/classes/client/client-health-sentinel/index.tsx

@@ -10,7 +10,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import Button from '@material-ui/core/Button';
 import AlertTitle from '@material-ui/lab/AlertTitle';
 
-const ClientHealthSentinel = () => {
+const ClientHealthSentinel = (): React.ReactElement => {
     const status: ClientStatus = useSelector(activeInstanceStatus);
 
     const handleOnClose = () => {

packages/webapp/src/classes/client/mock-client/index.ts

@@ -36,14 +36,16 @@ class MockClient implements Client {
     }
 
     deleteAccount(): Promise<void> {
-         return Promise.resolve();
+        return Promise.resolve();
     }
 
     updateAccountInfo(firstname: string, lastname: string): Promise<void> {
-         return Promise.resolve();
+        console.log("firstname:" + firstname, +lastname)
+        return Promise.resolve();
     }
 
     updateAccountPassword(pasword: string): Promise<void> {
+        console.log("password:" + pasword)
         return Promise.resolve();
     }
 
@@ -53,6 +55,7 @@ class MockClient implements Client {
     }
 
     importMap(model: ImportMapInfo): Promise<number> {
+        console.log("model:" + model);
         return Promise.resolve(10);
     }
 
@@ -72,11 +75,12 @@ class MockClient implements Client {
         return Promise.resolve();
     }
     revertHistory(id: number, cid: number): Promise<void> {
+        console.log("model:" + id + cid);
         return Promise.resolve();
     }
 
     createMap(map: BasicMapInfo): Promise<number> {
-        throw new Error("Method not implemented.");
+        throw new Error("Method not implemented." + map);
     }
 
     fetchLabels(): Promise<Label[]> {
@@ -127,6 +131,7 @@ class MockClient implements Client {
         }
     }
     fetchHistory(id: number): Promise<ChangeHistory[]> {
+        console.log(`Fetching history for ${id}`)
         const result = [{
             id: 1,
             lastModificationBy: 'Paulo',
@@ -211,6 +216,7 @@ class MockClient implements Client {
     }
 
     registerNewUser(user: NewUser): Promise<void> {
+        console.log("user:" + user)
         return Promise.resolve();
     }
 
@@ -220,6 +226,7 @@ class MockClient implements Client {
     }
 
     resetPassword(email: string): Promise<void> {
+        console.log("email:" + email)
         return Promise.resolve();
     }
 }

packages/webapp/src/classes/client/rest-client/index.ts

@@ -163,7 +163,7 @@ export default class RestClient implements Client {
     }
 
     fetchHistory(id: number): Promise<ChangeHistory[]> {
-        throw new Error('Method not implemented.');
+        throw new Error(`Method not implemented. ${id}`);
     }
 
     renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
@@ -213,6 +213,7 @@ export default class RestClient implements Client {
                 }
             ).then(response => {
                 const data = response.data;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const maps: MapInfo[] = (data.mindmapsInfo as any[]).map(m => {
                     return {
                         id: m.id,
@@ -247,7 +248,7 @@ export default class RestClient implements Client {
             axios.post(this.baseUrl + '/service/users/',
                 JSON.stringify(user),
                 { headers: { 'Content-Type': 'application/json' } }
-            ).then(response => {
+            ).then(() => {
                 // All was ok, let's sent to success page ...;
                 success();
             }).catch(error => {
@@ -264,7 +265,7 @@ export default class RestClient implements Client {
         const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
             axios.delete(this.baseUrl + `/c/restful/maps/${id}`,
                 { headers: { 'Content-Type': 'application/json' } }
-            ).then(response => {
+            ).then(() => {
                 success();
             }).catch(error => {
                 const errorInfo = this.parseResponseOnError(error.response);
@@ -280,7 +281,7 @@ export default class RestClient implements Client {
             axios.put(`${this.baseUrl}/service/users/resetPassword?email=${email}`,
                 null,
                 { headers: { 'Content-Type': 'application/json' } }
-            ).then(response => {
+            ).then(() => {
                 // All was ok, let's sent to success page ...;
                 success();
             }).catch(error => {
@@ -335,6 +336,7 @@ export default class RestClient implements Client {
                 }
             ).then(response => {
                 const data = response.data;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const maps: Label[] = (data.labels as any[]).map(l => {
                     return {
                         id: l.id,
@@ -354,7 +356,7 @@ export default class RestClient implements Client {
 
     deleteLabel(id: number): Promise<void> {
         const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
-            axios.delete(this.baseUrl + `/c/restful/label/${id}`).then(response => {
+            axios.delete(this.baseUrl + `/c/restful/label/${id}`).then(() => {
                 success();
             }).catch(error => {
                 const errorInfo = this.parseResponseOnError(error.response);
@@ -364,6 +366,7 @@ export default class RestClient implements Client {
         return new Promise(handler);
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private parseResponseOnError = (response: any): ErrorInfo => {
         let result: ErrorInfo | undefined;
         if (response) {

packages/webapp/src/components/forgot-password-page/index.tsx

@@ -32,7 +32,7 @@ const ForgotPassword = () => {
     }
   );
 
-  const handleOnSubmit = (event: React.FormEvent<any>) => {
+  const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     mutation.mutate(email);
   }
@@ -59,7 +59,7 @@ const ForgotPassword = () => {
   );
 }
 
-const ForgotPasswordPage = () => {
+const ForgotPasswordPage = ():React.ReactElement => {
 
   useEffect(() => {
     document.title = 'Reset Password | WiseMapping';

packages/webapp/src/components/forgot-password-success-page/index.tsx

@@ -3,12 +3,12 @@ import { FormattedMessage } from 'react-intl'
 import FormContainer from '../layout/form-container';
 import Header from '../layout/header'
 import Footer from '../layout/footer'
-import { Link as RouterLink} from 'react-router-dom'
+import { Link as RouterLink } from 'react-router-dom'
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 
 
-const ForgotPasswordSuccessPage = () => {
+const ForgotPasswordSuccessPage = (): React.ReactElement => {
   useEffect(() => {
     document.title = 'Reset Password | WiseMapping';
   });

packages/webapp/src/components/form/global-error/index.tsx

@@ -7,14 +7,14 @@ type GlobalErrorProps = {
     error?: ErrorInfo;
 }
 
-const GlobalError = (props: GlobalErrorProps) => {
+const GlobalError = (props: GlobalErrorProps): React.ReactElement | null => {
 
     const error = props.error;
     const hasError = Boolean(error?.msg);
     const errorMsg = error?.msg;
 
-    return (hasError ? 
+    return (hasError ?
-    <StyledAlert severity="error" variant="filled" hidden={!hasError}> {errorMsg}</StyledAlert> : null);
+        <StyledAlert severity="error" variant="filled" hidden={!hasError}> {errorMsg}</StyledAlert> : null);
 
 };
 

packages/webapp/src/components/form/input/index.tsx

@@ -27,7 +27,7 @@ const Input = ({
     fullWidth = true,
     disabled = false
 
-}: InputProps) => {
+}: InputProps): React.ReactElement => {
 
     const fieldError = error?.fields?.[name];
     return (

packages/webapp/src/components/form/submit-button/index.tsx

@@ -6,15 +6,15 @@ type SubmitButton = {
     value: string;
     disabled?: boolean;
 }
-const SubmitButton = (props: SubmitButton) => {
+const SubmitButton = (props: SubmitButton): React.ReactElement => {
-    const [disabled, setDisabled] = useState(props.disabled ? true : false);
+    const [disabled] = useState(props.disabled ? true : false);
     const intl = useIntl();
 
     let valueTxt = props.value;
     if (disabled) {
         valueTxt = intl.formatMessage({ id: "common.wait", defaultMessage: "Please wait ..." });
     }
-    const [value, setValue] = useState(valueTxt);
+    const [value] = useState(valueTxt);
     return (
         <Button color="primary" size="medium" variant="contained" type="submit"
             disableElevation={true} disabled={disabled}

packages/webapp/src/components/layout/footer/index.tsx

@@ -6,7 +6,7 @@ import { StyledFooter } from './styled'
 // eslint-disable-next-line
 const poweredByIcon = require('../../../images/pwrdby-white.svg')
 
-const Footer = () => {
+const Footer = (): React.ReactElement => {
   return (
     <StyledFooter>
       <div style={{ padding: 0, margin: 0 }}>

packages/webapp/src/components/layout/header/index.tsx

@@ -16,7 +16,7 @@ class Header extends React.Component<HeaderProps, HeaderProps> {
     super(props);
     this.state = { type: props.type };
   }
-  render() {
+  render(): React.ReactElement {
     let signUpButton;
     let signInButton;
     let text;
@@ -53,14 +53,14 @@ interface ButtonProps {
   className?: string;
 }
 
-const SignInButton = (props: ButtonProps) => {
+const SignInButton = (props: ButtonProps): React.ReactElement => {
   return (
     <span className={`${props.className}`}>
       <Button color="primary" size="medium" variant="outlined" component={Link} to="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></Button>
     </span>);
 }
 
-const SignUpButton = (props: ButtonProps) => {
+const SignUpButton = (props: ButtonProps): React.ReactElement => {
   return (
     <span className={`${props.className}`}>
       <Button color="primary" size="medium" variant="outlined" component={Link} to="/c/registration"><FormattedMessage id="login.signup" defaultMessage="Sign Up" /></Button>

packages/webapp/src/components/login-page/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Link as RouterLink} from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import Header from '../layout/header';
 import Footer from '../layout/footer';
 import SubmitButton from '../form/submit-button';
@@ -11,9 +11,11 @@ import Typography from '@material-ui/core/Typography';
 import FormControl from '@material-ui/core/FormControl';
 import Link from '@material-ui/core/Link';
 
+type ConfigStatusProps = {
+  enabled?: boolean
+}
 
-const ConfigStatusMessage = (props: any) => {
+const ConfigStatusMessage = ({ enabled = false }: ConfigStatusProps): React.ReactElement => {
-  const enabled = props.enabled
   let result;
   if (enabled === true) {
     result = (<div className="db-warn-msg">
@@ -45,7 +47,7 @@ const LoginError = () => {
 }
 
 
-const LoginPage = () => {
+const LoginPage = (): React.ReactElement => {
   const intl = useIntl();
 
   useEffect(() => {

packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx

@@ -25,7 +25,7 @@ type AccountInfoModel = {
 }
 
 const defaultModel: AccountInfoModel = { firstname: '', lastname: '', email: '' };
-const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps) => {
+const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps):React.ReactElement => {
     const client: Client = useSelector(activeInstance);
     const queryClient = useQueryClient();
     const [remove, setRemove] = React.useState<boolean>(false);

packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx

@@ -19,7 +19,7 @@ type ChangePasswordModel = {
 }
 
 const defaultModel: ChangePasswordModel = { password: '', retryPassword: '' };
-const ChangePasswordDialog = ({ onClose }: ChangePasswordDialogProps) => {
+const ChangePasswordDialog = ({ onClose }: ChangePasswordDialogProps):React.ReactElement => {
     const client: Client = useSelector(activeInstance);
     const [model, setModel] = React.useState<ChangePasswordModel>(defaultModel);
     const [error, setError] = React.useState<ErrorInfo>();

packages/webapp/src/components/maps-page/account-menu/index.tsx

@@ -15,7 +15,7 @@ import Link from "@material-ui/core/Link";
 import ExitToAppOutlined from "@material-ui/icons/ExitToAppOutlined";
 
 type ActionType = 'change-password' | 'account-info' | undefined;
-const AccountMenu = () => {
+const AccountMenu = (): React.ReactElement => {
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
     const [action, setAction] = React.useState<ActionType>(undefined);

packages/webapp/src/components/maps-page/action-chooser/index.tsx

@@ -24,7 +24,7 @@ interface ActionProps {
   mapId?: number
 }
 
-const ActionChooser = (props: ActionProps) => {
+const ActionChooser = (props: ActionProps): React.ReactElement => {
   const { anchor, onClose, mapId } = props;
 
   const handleOnClose = (action: ActionType): ((event: React.MouseEvent<HTMLLIElement>) => void) => {

packages/webapp/src/components/maps-page/action-chooser/styled.ts

@@ -5,5 +5,5 @@ export const StyledMenuItem = withStyles({
     root: {
       width: '300px',
     }
-  })(MenuItem)
+  })(MenuItem);
   

packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { ErrorInfo } from "../../../../classes/client";
 import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from "./style";
 import GlobalError from "../../../form/global-error";
@@ -9,7 +9,7 @@ import Button from "@material-ui/core/Button";
 export type DialogProps = {
     onClose: () => void;
     onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
-    children: any;
+    children: unknown;
     error?: ErrorInfo;
 
     title: string;
@@ -19,9 +19,8 @@ export type DialogProps = {
     actionUrl?: string;
 }
 
-const BaseDialog = (props: DialogProps) => {
+const BaseDialog = (props: DialogProps): React.ReactElement => {
-    const intl = useIntl();
+    const { onClose, onSubmit } = props;
-    const { onClose, onSubmit, actionUrl = "" } = props;
 
     const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();

packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
-import FormControl  from '@material-ui/core/FormControl';
+import FormControl from '@material-ui/core/FormControl';
 
 import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client';
 import { activeInstance } from '../../../../redux/clientSlice';
@@ -19,7 +19,7 @@ export type CreateProps = {
 }
 
 const defaultModel: CreateModel = { title: '', description: '' };
-const CreateDialog = ({onClose}: CreateProps) => {
+const CreateDialog = ({ onClose }: CreateProps): React.ReactElement => {
     const client: Client = useSelector(activeInstance);
     const [model, setModel] = React.useState<CreateModel>(defaultModel);
     const [error, setError] = React.useState<ErrorInfo>();

packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx

@@ -10,7 +10,7 @@ import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
 
 
-const DeleteDialog = ({ mapId, onClose } : SimpleDialogProps) => {
+const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
   const intl = useIntl();
   const client: Client = useSelector(activeInstance);
   const queryClient = useQueryClient();
@@ -36,13 +36,13 @@ const DeleteDialog = ({ mapId, onClose } : SimpleDialogProps) => {
     <div>
       <BaseDialog
         onClose={handleOnClose} onSubmit={handleOnSubmit}
-        title={intl.formatMessage({id: "action.delete-title", defaultMessage: "Delete"})}
+        title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}
-        submitButton={intl.formatMessage({id: "action.delete-title", defaultMessage: "Delete"})}>
+        submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}>
 
         <Alert severity="warning">
           <AlertTitle>{alertTitle}</AlertTitle>
           <FormattedMessage id="action.delete-description"
-                            defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?."/>
+            defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
         </Alert>
 
       </BaseDialog>

packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx

@@ -14,11 +14,11 @@ export type DeleteMultiselectDialogProps = {
   onClose: () => void
 }
 
-const DeleteMultiselectDialog = ({ onClose, mapsId }: DeleteMultiselectDialogProps) => {
+const DeleteMultiselectDialog = ({ onClose, mapsId }: DeleteMultiselectDialogProps): React.ReactElement => {
   const intl = useIntl();
   const client: Client = useSelector(activeInstance);
   const queryClient = useQueryClient();
- 
+
   const mutation = useMutation((ids: number[]) => client.deleteMaps(ids),
     {
       onSuccess: () => handleOnMutationSuccess(onClose, queryClient)

packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 import { useMutation } from "react-query";
-import  FormControl  from "@material-ui/core/FormControl";
+import FormControl from "@material-ui/core/FormControl";
 import { useSelector } from "react-redux";
 
 import Client, { BasicMapInfo, ErrorInfo } from "../../../../classes/client";
@@ -17,7 +17,7 @@ export type DuplicateModel = {
 }
 
 const defaultModel: DuplicateModel = { title: '', description: '', id: -1 };
-const DuplicateDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const DuplicateDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
     const service: Client = useSelector(activeInstance);
     const [model, setModel] = React.useState<DuplicateModel>(defaultModel);
     const [error, setError] = React.useState<ErrorInfo>();

packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx

@@ -21,10 +21,12 @@ type ExportDialogProps = {
     onClose: () => void,
 }
 
-const ExportDialog = ({ mapId, onClose, enableImgExport, svgXml }: ExportDialogProps) => {
+const ExportDialog = ({ mapId, onClose, enableImgExport, svgXml }: ExportDialogProps): React.ReactElement => {
     const intl = useIntl();
     const [submit, setSubmit] = React.useState<boolean>(false);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [formExportRef, setExportFormRef] = React.useState<any>();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [formTransformtRef, setTransformFormRef] = React.useState<any>();
     const [exportGroup, setExportGroup] = React.useState<ExportGroup>(enableImgExport ? 'image' : 'document');
     const [exportFormat, setExportFormat] = React.useState<ExportFormat>(enableImgExport ? 'svg' : 'xls');
@@ -66,10 +68,10 @@ const ExportDialog = ({ mapId, onClose, enableImgExport, svgXml }: ExportDialogP
         if (submit) {
             // Depending on the type of export. It will require differt POST.
             if (exportFormat == 'pdf' || exportFormat == "svg" || exportFormat == "jpg" || exportFormat == "png") {
-                formTransformtRef.submit();
+                formTransformtRef?.submit();
             } else {
 
-                formExportRef.submit();
+                formExportRef?.submit();
             }
             onClose();
         }

packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts

@@ -1,8 +1,7 @@
-import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import createStyles from "@material-ui/core/styles/createStyles";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 
-export const useStyles = makeStyles((theme: Theme) =>
+export const useStyles = makeStyles(() =>
     createStyles({
         select: {
             height: '40px',

packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx

@@ -19,11 +19,11 @@ import Link from "@material-ui/core/Link";
 import Paper from "@material-ui/core/Paper";
 
 
-const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
   const intl = useIntl();
 
   const client: Client = useSelector(activeInstance);
-  const { isLoading, error, data } = useQuery<unknown, ErrorInfo, ChangeHistory[]>('history', () => {
+  const { data } = useQuery<unknown, ErrorInfo, ChangeHistory[]>('history', () => {
     return client.fetchHistory(mapId);
   });
   const changeHistory: ChangeHistory[] = data ? data : [];
@@ -35,7 +35,7 @@ const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps) => {
   const handleOnClick = (event, vid): void => {
     event.preventDefault();
     client.revertHistory(mapId, vid)
-      .then((mapId) => {
+      .then(() => {
         handleOnClose();
       })
   };

packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx

@@ -22,7 +22,7 @@ export type CreateProps = {
 }
 
 const defaultModel: ImportModel = { title: '' };
-const ImportDialog = ({onClose}: CreateProps) => {
+const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
     const client: Client = useSelector(activeInstance);
     const [model, setModel] = React.useState<ImportModel>(defaultModel);
     const [error, setError] = React.useState<ErrorInfo>();
@@ -66,11 +66,8 @@ const ImportDialog = ({onClose}: CreateProps) => {
 
         if (files) {
             const file = files[0];
-            let title = file.name;
-            title = title.substring(0, title.lastIndexOf("."));
-
             // Closure to capture the file information.
-            reader.onload =  (event) => {
+            reader.onload = (event) => {
                 const fileContent = event?.target?.result;
                 model.content = fileContent;
 
@@ -83,7 +80,7 @@ const ImportDialog = ({onClose}: CreateProps) => {
                     }
                 }
                 model.contentType = file.name.lastIndexOf(".wxml") != -1 ? "application/xml" : "application/freemind";
-                setModel({...model});
+                setModel({ ...model });
             };
 
             // Read in the image file as a data URL.

packages/webapp/src/components/maps-page/action-dispatcher/index.tsx

@@ -11,6 +11,7 @@ import PublishDialog from './publish-dialog';
 import InfoDialog from './info-dialog';
 import DeleteMultiselectDialog from './delete-multiselect-dialog';
 import ExportDialog from './export-dialog';
+import ShareDialog from './share-dialog';
 
 export type BasicMapInfo = {
   name: string;
@@ -23,12 +24,10 @@ type ActionDialogProps = {
   onClose: () => void
 }
 
-const ActionDispatcher = (props: ActionDialogProps) => {
+const ActionDispatcher = ({ mapsId, action, onClose }: ActionDialogProps): React.ReactElement => {
-  const mapsId = props.mapsId;
-  const action = props.action;
 
   const handleOnClose = (): void => {
-    props.onClose();
+    onClose();
   }
 
   switch (action) {
@@ -54,6 +53,7 @@ const ActionDispatcher = (props: ActionDialogProps) => {
       {action === 'info' && <InfoDialog onClose={handleOnClose} mapId={mapsId[0]} />}
       {action === 'create' && <CreateDialog onClose={handleOnClose} />}
       {action === 'export' && <ExportDialog onClose={handleOnClose} mapId={mapsId[0]} enableImgExport={false} />}
+      {action === 'share' && <ShareDialog onClose={handleOnClose} mapId={mapsId[0]} />}
     </span >
   );
 }

packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import { ErrorInfo } from '../../../../classes/client';
 import BaseDialog from '../base-dialog';
-import {  SimpleDialogProps } from '..';
+import { SimpleDialogProps } from '..';
 import { useStyles } from './style';
 import dayjs from 'dayjs';
 import { fetchMapById } from '../../../../redux/clientSlice';
@@ -13,7 +13,7 @@ import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
 
-const InfoDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
     const { map } = fetchMapById(mapId);
     const [error, setError] = React.useState<ErrorInfo>();
 
@@ -31,7 +31,7 @@ const InfoDialog = ({ mapId, onClose }: SimpleDialogProps) => {
             description={intl.formatMessage({ id: 'info.description-msg', defaultMessage: 'By publishing the map you make it visible to everyone on the Internet.' })}
             submitButton={intl.formatMessage({ id: 'info.button', defaultMessage: 'Accept' })}>
 
-            <Paper style={{ maxHeight: '200px' }}>
+            <Paper style={{ maxHeight: 200, overflowY: 'scroll' }} variant="outlined" elevation={0}>
                 <Card variant="outlined">
                     <List dense={true}>
                         <ListItem>

packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts

@@ -1,8 +1,7 @@
-import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import createStyles from "@material-ui/core/styles/createStyles";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 
-export const useStyles = makeStyles((theme: Theme) =>
+export const useStyles = makeStyles(() =>
     createStyles({
         textarea: {
             width: '100%',

packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx

@@ -20,7 +20,7 @@ import Typography from '@material-ui/core/Typography';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 
 
-const PublishDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
     const { map } = fetchMapById(mapId);
 
     const client: Client = useSelector(activeInstance);

packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts

@@ -1,8 +1,7 @@
-import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import createStyles from "@material-ui/core/styles/createStyles";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 
-export const useStyles = makeStyles((theme: Theme) =>
+export const useStyles = makeStyles(() =>
     createStyles({
         textarea: {
             width: '100%',

packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx

@@ -16,7 +16,7 @@ export type RenameModel = {
 }
 
 const defaultModel: RenameModel = { title: '', description: '', id: -1 };
-const RenameDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const RenameDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
     const service: Client = useSelector(activeInstance);
     const [model, setModel] = React.useState<RenameModel>(defaultModel);
     const [error, setError] = React.useState<ErrorInfo>();

packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { useMutation, useQueryClient } from "react-query";
+import { useSelector } from "react-redux";
+import Client from "../../../../classes/client";
+import { activeInstance } from '../../../../redux/clientSlice';
+import { SimpleDialogProps, handleOnMutationSuccess } from "..";
+import BaseDialog from "../base-dialog";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import IconButton from "@material-ui/core/IconButton";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import DeleteIcon from '@material-ui/icons/Delete';
+import Paper from "@material-ui/core/Paper";
+
+
+const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
+  const intl = useIntl();
+  const client: Client = useSelector(activeInstance);
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation((id: number) => client.deleteMap(id),
+    {
+      onSuccess: () => handleOnMutationSuccess(onClose, queryClient)
+    }
+  );
+
+  const handleOnClose = (): void => {
+    onClose();
+  };
+
+  const handleOnSubmit = (): void => {
+    mutation.mutate(mapId);
+  }
+
+  // Fetch map model to be rendered ...
+  return (
+    <div>
+      <BaseDialog
+        onClose={handleOnClose} onSubmit={handleOnSubmit}
+        title={intl.formatMessage({ id: "share.delete-title", defaultMessage: "Share with collaborators" })}
+        description={intl.formatMessage({ id: "share.delete-description", defaultMessage: "Collaboration " })}
+        submitButton={intl.formatMessage({ id: "share.delete-title", defaultMessage: "Share" })} >
+
+
+        <div style={{ margin: "10px 0px", padding:"30px 0px"   ,background:"gray" }}>
+          <input type="text" placeholder="Enter collaboratior emails separated by comas" />
+        </div>
+
+        <Paper elevation={1} style={{ maxHeight: 200, overflowY: 'scroll' }} variant="outlined">
+          <List>
+            {[.4, 5, 7, 7, 8, 9, 100, 1, 2, 3].map((value) => {
+              const labelId = `checkbox-list-label-${value}`;
+
+              return (
+                <ListItem key={value} role={undefined} dense button>
+                  <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
+                  <ListItemSecondaryAction>
+                    <IconButton edge="end">
+                      <DeleteIcon />
+                    </IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              );
+            })}
+          </List>
+        </Paper>
+
+      </BaseDialog>
+    </div>
+  );
+}
+
+
+export default ShareDialog;

packages/webapp/src/components/maps-page/help-menu/index.tsx

@@ -12,7 +12,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Link from "@material-ui/core/Link";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 
-const HelpMenu = () => {
+const HelpMenu = (): React.ReactElement => {
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
 

packages/webapp/src/components/maps-page/index.tsx

@@ -1,4 +1,4 @@
-import React, { ErrorInfo, useEffect } from 'react';
+import React, { ErrorInfo, ReactElement, useEffect } from 'react';
 import clsx from 'clsx';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@@ -56,10 +56,10 @@ export interface LabelFilter {
 interface ToolbarButtonInfo {
     filter: GenericFilter | LabelFilter,
     label: string
-    icon: any;
+    icon: React.ReactElement;
 }
 
-const MapsPage = () => {
+const MapsPage = (): ReactElement => {
     const classes = useStyles();
     const [filter, setFilter] = React.useState<Filter>({ type: 'all' });
     const client: Client = useSelector(activeInstance);
@@ -221,7 +221,7 @@ const MapsPage = () => {
 }
 
 interface ListItemProps {
-    icon: any,
+    icon: React.ReactElement,
     label: string,
     filter: Filter,
     active?: Filter
@@ -241,12 +241,12 @@ const StyleListItem = (props: ListItemProps) => {
         && (activeFilter.type != 'label' || ((activeFilter as LabelFilter).label == (filter as LabelFilter).label));
 
 
-    const handleOnClick = (event: any, filter: Filter) => {
+    const handleOnClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, filter: Filter) => {
         event.stopPropagation();
         onClick(filter);
     }
 
-    const handleOnDelete = (event: any, filter: Filter) => {
+    const handleOnDelete = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, filter: Filter) => {
         event.stopPropagation();
         if (!onDeleteLabel) {
             throw "Illegal state exeption";

packages/webapp/src/components/maps-page/language-menu/index.tsx

@@ -18,7 +18,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import Divider from '@material-ui/core/Divider';
 
 
-const LanguageMenu = () => {
+const LanguageMenu = (): React.ReactElement => {
     const queryClient = useQueryClient();
     const client: Client = useSelector(activeInstance);
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

packages/webapp/src/components/maps-page/maps-list/index.tsx

@@ -51,6 +51,7 @@ function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
 
 type Order = 'asc' | 'desc';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getComparator<Key extends keyof any>(
   order: Order,
   orderBy: Key,
@@ -195,7 +196,7 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
   }
 }
 
-export const MapsList = (props: MapsListProps) => {
+export const MapsList = (props: MapsListProps):React.ReactElement => {
   const classes = useStyles();
   const [order, setOrder] = React.useState<Order>('asc');
   const [filter, setFilter] = React.useState<Filter>({ type: 'all' });
@@ -280,8 +281,8 @@ export const MapsList = (props: MapsListProps) => {
     setPage(0);
   };
 
-  const handleActionClick = (mapId: number): ((event: any) => void) => {
+  const handleActionClick = (mapId: number): ((event) => void) => {
-    return (event: any): void => {
+    return (event): void => {
       setActiveRowAction(
         {
           mapId: mapId,
@@ -435,7 +436,7 @@ export const MapsList = (props: MapsListProps) => {
                       return (
                         <TableRow
                           hover
-                          onClick={(event: any) => handleRowClick(event, row.id)}
+                          onClick={(event) => handleRowClick(event, row.id)}
                           role="checkbox"
                           aria-checked={isItemSelected}
                           tabIndex={-1}

packages/webapp/src/components/registration-page/index.tsx

@@ -102,7 +102,7 @@ const RegistrationForm = () => {
   );
 }
 
-const RegistationPage = () => {
+const RegistationPage = (): React.ReactElement => {
 
   useEffect(() => {
     document.title = 'Registration | WiseMapping';

packages/webapp/src/components/registration-success-page/index.tsx

@@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 
 
-const RegistrationSuccessPage = () => {
+const RegistrationSuccessPage = (): React.ReactElement => {
   useEffect(() => {
     document.title = 'Reset Password | WiseMapping';
   });

packages/webapp/src/redux/clientSlice.ts

@@ -1,4 +1,5 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { createSlice } from '@reduxjs/toolkit';
 import { useQuery } from 'react-query';
 import Client, { AccountInfo, ErrorInfo, MapInfo } from '../classes/client';
 import MockClient from '../classes/client/mock-client';
@@ -15,6 +16,7 @@ class RutimeConfig {
   load() {
 
     // Config can be inserted in the html page to define the global properties ...
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     this.config = (window as any).serverconfig;
     return this;
   }
@@ -53,8 +55,8 @@ export const clientSlice = createSlice({
   name: "client",
   initialState: initialState,
   reducers: {
-    sessionExpired(state, action: PayloadAction<void>) {
+    sessionExpired(state) {
-      state.status = { state: 'session-expired', msg: 'Sessions has expired. You need to login again.' }
+      state.status = { state: 'session-expired', msg: 'Sessions has expired. You need to login again'  }
     }
   },
 });
@@ -87,10 +89,12 @@ export const fetchAccount = (): AccountInfo | undefined => {
   return data;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const activeInstance = (state: any): Client => {
   return state.client.instance;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const activeInstanceStatus = (state: any): ClientStatus => {
   return state.client.status;
 }

packages/webapp/webpack.prod.js

@@ -1,6 +1,8 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
 
 const CompressionPlugin = require('compression-webpack-plugin');
 
@@ -11,6 +13,13 @@ module.exports = merge(common, {
     minimize: true
   },
   plugins: [
-    new CompressionPlugin()
+    new CompressionPlugin(),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'public/index.html'),
+      templateParameters: {
+        PUBLIC_URL: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com'
+      },
+      base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com'
+    })
   ]
 });

yarn.lock

@@ -3034,6 +3034,10 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
   integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
 
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -6132,7 +6136,10 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.5:
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
+<<<<<<< Updated upstream
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
+=======
+>>>>>>> Stashed changes
 
 move-concurrently@^1.0.1:
   version "1.0.1"